WordPressでオリジナルデザインのブログを作る手順を、分かりやすくまとめてみました。

WordPressでオリジナルデザインのブログを作る手順を、分かりやすくまとめてみました。

前回の記事では知らない方にもtwitterでリツイートされたりと、なんらかの反響があって嬉しかったです。ありがとうございました。自分が書いた記事を読んでもらえるのって、良いもんですね。

このブログも含め、運営している写真素材サイトも全てWordPressで構築しています。なので、この際今まで自力でネットで調べ尽くして、ひーひー言いながら作り上げたサイト制作に関する知識をここでまとめてみたいと思います。第一弾として「オリジナルデザインでブログを作る手順」です。HTMLやCSSはなんとなくわかるけど、実際にどうやってWordPressのデザインテーマとして落としこんだら良いの?でも自分のブログはこだわりたい!という方におすすめしたい記事です。ではどうぞ。

WordPressでブログを作った理由。

まず、なんでWordPressでブログを作ったのか。その理由は単純に「ブログ内に勝手に広告が載らないから」と「自由なデザインで作れるから」の2つでした。amebaなどのブログサービスを使うと、勝手に広告が入ったり制約があったりするので嫌だったんです(多数の人に書いた記事を見てもらえやすい利点はあるけど)。あと自分のブログなら自分であれこれデザインしたいなぁという希望をかなえてくれるのがWordPressだった、という感じです。他にもMovable Typeとかを使っても作れるみたいですけど、名前を聞いたことがあったWordPressを直観的に選んでしまいました。WordPressはプラグインやテーマも豊富にあるし、ネット上に色んなカスタマイズの方法が出回っているので結果的にWordPressで良かったなーと思っています(もちろんMovable Typeにも利点は色々あると思います、誤解のないよう)。

まずはどんなデザインにしたいかざっくりでも良いので考えよう!

まずはどんなデザインにしたいかざっくりでも良いので考えよう!

O型のせいなのか、性格のせいなのか「ざっくり」という言葉大好きです。カスタマイズの醍醐味はもちろん自分で好きなデザインが作れるというところですね。人によっては思うように作れない!という部分もあるとは思いますけど、ひとまず今ある知識を最大限に発揮してオリジナルのデザインを考えてみましょう。

基本的な配置はこういったものが多いです。

基本的な配置

どんな配置にすれば良いのやら、という方はこの配置を元にデザインを決めていくと良いと思います。一般的に浸透しているこの配置は見やすさ(自然とどこが何の役割をしているのか見る人に理解されやすい)があるので、初めてあなたのブログを見る人にとっても楽にページを見ることができると思います(他の配置でももちろん構いませんよ!)

それぞれの役割としては、

・ヘッダー(header)…ブログタイトルやメニュー表示

・コンテンツ(content)…記事一覧や記事詳細の表示

・サイドバー(sidebar)…カテゴリー一覧やウィジェットの表示

・フッター(footer)…コピーライト表記(人によってはプロフィール表示部分)

といった感じです。何をどこにどう表示させるかは作る人によって違うと思うので、自由に決めてみてください。デザインが決まったら、まずは以下の2つのファイルを作りましょう。

htmlファイルとcssファイルの作成

WordPressはPHPで作られていますが、PHPが分からない人もふまえてひとまず上記の2つを作りトップページのデザインを決めていきます。画像の保存先は同じ階層に「images」というフォルダを作り、全てそこに入れます。ここでコーディングしてデザインを完成させれば、あとの作業は割と楽になってきます。まずはここまで頑張ってみましょう!ちなみにindex.htmlは最低限こんな感じのコードになると思います。

●index.html

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="description" content="ブログの説明文" />
	<link rel="stylesheet" type="text/css" href="style.css" media="all" />
	<title>ブログのタイトルが入ります</title>
</head>
<body>
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="sidebar">
    </div>    
    <div id="footer">    
    </div>
</body>
</html>

headerやfooterのデザイン・内容も決めておいてください。contentとsidebarについては内容はまだ空でも良いと思います。ここまで来たら、次のステップです!

それぞれのパーツをバラバラにする。

それぞれのパーツをバラバラにする。

最初の方でWordPressはPHPで動いていると説明したように、htmlファイルをPHPファイルに変えてあげないといけません。ただそのままコードを全て移すのではなく、headerやcontentなどそれぞれのパーツで分解した後に、ちょっとひと手間加えてあげます。

↓イメージとしてはこんな感じです。

PHPファイルのイメージ

ブログをしたことある人は分かると思いますが、基本となるテンプレートがあって自動的にブログの各記事の内容が表示されますよね?あれは上記の画像のようにサーバーにリクエスト(ページを見ますよーという指示)があるたびに動的にページを作って表示させているからです。それぞれの内容をはめこんで表示させるのがPHPの役割です。

実際にこれから以下のファイルを作っていきます。

・header.php(ヘッダーの内容が入ります)

・loop.php(contentの中に、記事一覧を表示させるためのファイル)

・functions.php(色々な機能を追加するためのコードが入ります)

・sidebar.php(サイドバーの内容が入ります)

・footer.php(フッターの内容が入ります)

・index.php(最初に表示されるページ、サイトのメインです)

・single.php(記事の詳細ページを表示する)

※contentに限っては、<div id=”content”></div>の中にloop.phpというファイルを読み込むので注意!スタイルシートのstyle.cssについてはそのまま引き続き使用します。

では、ちゃちゃっとindex.htmlの内容をバラバラにしていきます。

header.phpを作る

header.phpと名前を付けた空のphpファイルに、index.htmlのコードの一番最初からヘッダーを表示させる部分の最後までをコピーします。

header.php

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="description" content="ブログの説明文" />
	<link rel="stylesheet" type="text/css" href="style.css" media="all" />
	<title>ブログのタイトルが入ります</title>
</head>
<body>
    <div id="header">
    </div>

  コピーが終わったら、WordPressで使うテンプレートタグを入れていきます。テンプレートタグを使うことで、短い記述で色々な指示を出したり情報の取得をすることができます。 まずは一番忘れてはいけない部分から。コード内の</head>の直前に<?php wp_head(); ?>を追記します。これがないとプラグインを追加しても動かない場合があるため必須です。

<?php wp_head(); ?>
</head>

  ブログの説明文<meta name=”description”…の部分を以下に変更

<meta name="description" content="<?php bloginfo('description'); ?>" />

  WordPressの一般設定画面で入力する説明文が自動で入るように変更しました。

スタイルシートの記述<link rel=”stylesheet”…部分を以下に変更

<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="all" />

  スタイルシートのリンク先にテンプレートタグを使用しました。bloginfoというテンプレートタグを使うと色々な情報を取得することができます。詳しくは以下のリンクに記載されています。 テンプレートタグ/bloginfo

タイトル表示のに各ページタイトル・ブログタイトルを取得するタグを入れます

<title><?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?></title>

  このタグでページのタイトルとWordPressの設定画面に入力されたとブログタイトルを取得します。上のコードでは、ページタイトルの右側に「 | 」という区切り文字を入れて、その右側にブログタイトルを表示するようにしています。wp_titleの’right’を空欄「”」にすると左側に区切り文字が表示されます。区切り文字は何でも構いませんし、ブログタイトルを先にしたければ記述を逆にすれば良いだけなので簡単です。

もしヘッダー内で画像やJavaScriptを使った場合は、必ずリンクの記述があると思いますが以下のように変更してみてください。 たとえばこんな記述があったとして

<img src="http://handywebdesign.net/aaa/bbb/images/logo.jpg" alt="" />

 全てを絶対パスで記述するのは大変なので、このようにします。

<img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt="" />

  <?php bloginfo(‘template_url’); ?>を使うと、テーマファイル(今作っているテーマファイルを保存している場所)までのURLを自動で取得してくれます。これならもしブログのドメインが変わってもそのまま使えますよね。注意として、テーマの下層ファイルの指定をする時は、必ず<?php bloginfo(‘template_url’); ?>の後に「 / (スラッシュ)」を入れることを忘れずに!

テンプレートタグを入れた後のheader.phpはこんな感じになりました。変更箇所はハイライトで表示しています。

●header.php

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="description" content="<?php bloginfo('description'); ?>" />
	<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="all" />
	<title><?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body>
    <div id="header">
    </div>

loop.phpを作る

次にトップ画面で、数件の記事を表示させるためのloop.phpを作っていきます。loopというのは名前の通り「繰り返し」ですね。同じ内容を繰り返すコードを記述することで、希望の件数の記事を表示させる仕組みです。ではさっそくやっていきましょう!

やり方としてはpostという名前のidでボックスを作って、その中にタイトルやら記事の内容やらを入れるような記述をします。さらにifを使って記事がある限り同じ内容を繰り返すようにします。loop.phpという名前の空のファイルを作って、以下の内容をコピーして張り付けてください!

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
	<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	<?php the_date(); ?>
	<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>

で記事のリンク先を取得し、で記事のタイトルを取得しています。 で投稿の日付、で記事の本文を表示させています。前にも説明したテンプレートタグ を使うことで、他にも色々なデータを取得することが出来るので好きに設定してみてください!で囲むだけなので簡単ですよ。1ページに何件表示させるかは、管理画面から設定することができます。

functions.phpを作る

functions.phpはWordPress内で機能を追記したり変更する時に使うものです。色々な設定ができますが、ウィジェットと呼ばれる機能が使えるようにするために以下の記述をします。functions.phpという名前の空のファイル内に以下の内容を入れてください。

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h2 class="widget_title">',
        'after_title' => '</h2>',
    ));
?>

sidebar.phpを作る

では、サイドバーにウィジェットを表示させる設定をしていきます。ウィジェットを使えば、WordPressの管理画面から簡単に検索フォームやカテゴリーなどの表示を出すことができます。sidebar.phpという名前の空のファイル内に以下の内容を入れてください。

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
	
ウィジェットが設定されていません
<?php endif; ?>
</div>

ウィジェットが設定されていない場合の文章をifの間にはさんであげます。管理画面の外観>ウィジェットから好きなものをドラッグして 移してあげるとサイドバーに表示されるようになると思います。テンプレートタグを使えば、ウィジェットを使わずにカテゴリーなどを表示 させることも出来るのでやり方は色々あると思います。

footer.phpを作る

footer.phpの作り方はheader.phpと似ています。index.html内のコードの<div id=”footer”>のところから一番最後までをコピーして、footer.phpという名前の空のファイルにコピーして移してください。そのあと、</body>の直前に<?php wp_footer(); ?>というコードを追記します。これだけです!

    <div id="footer">    
    </div>
<?php wp_footer(); ?>
</body>
</html>

index.phpを作る

基本的なパーツが全てそろったら、それらをメインページに読みこんでいきます。index.phpという名前の空のファイルを作り、その中に以下のコードを入れてください。getタグを使うことで、それぞれのPHPファイルを読みこんで表示する仕組みです。

<?php get_header(); ?>
		<div id="content">
		<?php get_template_part( 'loop' ); ?>
		</div>
		<?php get_sidebar(); ?>
<?php get_footer(); ?>

最初に作ったindex.htmlに比べるとそれぞれをパーツに分けて読みこんでいるので、コードがかなり短くなってスッキリしましたね。 それぞれのパーツ(header.phpなど)の内容を変更すれば、index.phpの内容も自動的に変わるので今後何か変更する時も楽だと思います。

single.phpを作る

記事の全文表示のためのページです。index.phpと中身はほとんど同じですが、index.phpのように記事の表示をループせず1つの記事を表示させる必要があるため<div id=”content”></div>の中身だけが以下のように変更になります。ご自身でテンプレートタグを追記することで、好きなように表示を変えることができますので色々試してみてください。以下のコードでは、タイトル・日付・ブログの文章を表示し、さらにその下にコメント欄が入るように設定しています。

<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="content">
	<?php the_title(); ?>
	<?php the_date(); ?>
	<?php the_content(); ?>
	<?php comments_template(); ?>
</div>
	<?php get_sidebar(); ?>
<?php endwhile; endif; ?>
<?php get_footer(); ?>

style.cssファイルにコードを追記

※ここ追記文です(5月20日)

作ったテーマが認識されるようにstyle.cssファイルに以下のコードを一番上に追記してください。これがないと頑張って作っても意味がない・・・。theme urlとauthor urlは同じでもいいと思います(配布用じゃなければ)。versionは1.0とかでいいです。

/*
Theme Name: テーマの名前
Theme URI: テーマのURL
Description: テーマの説明
Version: テーマのバージョン
Author: テーマの制作者
Author URI: テーマの制作者のURL
*/

全てのファイルが完成したら、確認のために以下の全てがそろっているか確認してみましょう。今まで作ったファイルは以下の通りになります。

全てのファイル一覧

人によってはjavascriptのファイルを格納するフォルダもあると思いますが(jsとかいう名前のフォルダに保存すればOK)、その辺は個人の自由で。ファイルが全てそろったら、WordPressをインストールしたサーバ内にデータを移してあげます。移動先はwordpress/wp-content/themesの中です。

移動が終わったら、実際にWordPressにログインして外観>テーマをクリックすると自作のテーマが表示されていると思うので適用させてみましょう。無事、表示できれば完成です。・・・が!

それだけだとツメが甘いケースも多々あります。

ただ単にテンプレートタグを並べたりするだけだと、余白もないギュウギュウの見づらい配置になっていると思います。タイトルや文章の行間など、より見やすくするには、さらにCSSで設定を増やすなどしてカスタマイズしてあげてください。例えば日付の上下に余白を入れたり、文字の大きさや色を変えたい!という場合は・・・

<div class="date"><?php the_date(); ?></div>

のようにdivで囲んであげて、CSSファイルにdateというidで余白や文字設定の追記をすると分かりやすいと思います。CSSがなんとなくわかる、という方にもこれならどうにかなると思います(自分がどうにかなったので)。

他にも、functions.phpに追記することでさらに色々な機能を加えることができます。こちらのブログに色んな例が書かれているのでぜひご覧になってください!

WordPressのfunctions.phpに書いておくといいかもしれないコードいろいろ

他にもテーマ作成に関する記事が色々とありますよ。

おそらく最もわかりやすいWordPressテーマ制作チュートリアル

WordPress オリジナルテーマの作り方 3.0+

WordPressのオリジナルテーマ作成フロー・基本マニュアル

色々なサイトを調べていると、作り方は千差万別であることが分かると思います。ただ初めて作る人は特に「こんなコード記述で良いのかな、もっと分かりやすいやり方ないのかな」と考えがちで前に進めないと思いますが、まずは形はどうあれ完成することだけを考えていけば良いと思います。やってみて、また後で違うやり方などがあれば変更していけば良いので気負いせずにやってもらいたいです。実際に作ってみることで、見えてくることが沢山あると思います。失敗を恐れずに、積極的に作って自分のデザインを楽しんでください!

なお、今回の記事になにか間違いなどありましたらご指摘いただけると大変助かります。自分の備忘録もかねて、作成手順を記事にしてみました(やっぱり思った以上に大変でした)。もしこの記事を読んで、自分でブログのデザインしてみようかな、なんとなく手順が見えてきた!など得るものが1つでもあれば幸いです。ではまた!

関連記事を読む

WordPressでオリジナルデザインのブログを作る手順を、分かりやすくまとめてみました。

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]