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

この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。

なぜこの記事を書いたかというと、先日の WordCamp を終えて「早速 WordPress ブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。

おそらく、XHTML+CSS コーディングができる方であれば、この記事を読めばオリジナルのWordPressテーマを制作できるようになるはずです。

このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。
実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。

テーマのサンプルファイルのダウンロードはこちら
※スタイルは必要最低限しか指定していないシンプルなテーマです。

雷門わぷー: WordCampおつかれさまでした。

WordPressのインストール

まだレンタルサーバを借りていない方は、ご自分の PC に WordPress をインストールしてください。

既にレンタルサーバを借りている方は、レンタルサーバに WordPress をインストールして作業されても構いませんが、後々テーマを修正する時のことを考えると、ご自分のPCにも WordPress をインストールしておいたほうが良いかもしれません。

ご自分の PC に WordPress をインストールする場合の作業方法は以下の記事に詳しく書いております。

[連載]WordPressでWebサービスを作る方法（2:開発環境の構築）

レンタルサーバを借りる場合は、とりあえず ロリポップ あたりで良いのではないでしょうか。
WordPressの簡単インストール機能 もついています。

※WordPressを ロリポップ で動かす場合、「ロリポプラン」または「チカッパプラン」でないと動かないはずですのでご注意下さい。

テーマをデザインする

Photoshop や Fireworks でブログのデザインをされる方は、ここでブログ全体のイメージを制作しておきます。

以下の2ページをデザインしておくと良いと思います。

トップページ

トップページの例

ヘッダーにロゴを入れ、その下は記事一覧とサイドバーの2カラムで良いでしょう。
サイドバーには記事のカテゴリーや検索フォームなどを入れておきます。
フッターにはコピーライト等を入れておきます。

記事ページ

記事ページの例

ヘッダーの下に記事本文とサイドバーの2カラム構成で、ヘッダー、サイドバー、フッターはトップページと共通で良いでしょう。

テーマをコーディングする

テーマを、XHTML 1.0 Transitional でコーディングします。
ここでは、テーマ名（半角英数字）でフォルダを作り、トップページを index.html で、スタイルシートは style.css というファイル名にしておきます。スタイルシートは1ファイルにまとめておいて下さい。

index.html のサンプル

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<!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="★ここにブログの概要を入れる（Google等の検索結果に表示される）★" />
<title>ブログタイトル</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
 
	<div id="header">
		<h1><a href="#"><img src="images/logo.png" alt="Sunshine Blog" width="496" height="89" /></a></h1>
	</div>
 
	<div id="content">
		<div class="post">
			<h2><a href="#">記事タイトル</a></h2>
			<p>記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋</p>
		</div>
		<div class="post">
			<h2><a href="#">記事タイトル</a></h2>
			<p>記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋</p>
		</div>
		<div class="post">
			<h2><a href="#">記事タイトル</a></h2>
			<p>記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋記事の抜粋</p>
		</div>
	</div>
 
	<div id="sidebar">
		<h2>カテゴリ</h2>
		<ul>
			<li>カテゴリ1</li>
			<li>カテゴリ2</li>
			<li>カテゴリ3</li>
		</ul>
		<h2>リンク</h2>
		<ul>
			<li>リンク1</li>
			<li>リンク2</li>
			<li>リンク3</li>
		</ul>
	</div>
 
	<div id="footer">
		<p>&copy;2011 Yourname</p>
	</div>
 
</body>
</html>

画像は images というフォルダを作り、その中に保存しておいて下さい。

例えば、テーマ名を「sunshine」とする場合、以下のような構成になります。
（sunshine フォルダの中に index.html と style.css ファイル、images フォルダがあり、 images フォルダの中に logo.png 画像がある）

テーマファイルのフォルダ構成

index.html + style.css + ロゴ画像 のサンプルファイルは ここをクリックするとダウンロードできます。

ちなみに、まだコーディングしていない方は、この記事の最初で紹介しているサンプルテーマ をダウンロードし、それをもとにテーマを制作したほうが簡単かもしれません。

WordPressテーマの形式に作り変える

ここでようやく、コーディングしたページを WordPress テーマ形式に作り変えます。
WordPress テーマは PHP を使用しますが、ぶっちゃけて言うと PHP を全く理解していなくても一般的なブログ用のテーマ制作は可能です。

WordPressテーマは、やろうと思えば index.php と style.css という2つのファイルだけでも動作しますが、ここでは一般的なテーマ同様に

  • ヘッダー（header.php）
  • サイドバー（sidebar.php）
  • 記事一覧のループ部分（loop.php）
  • フッター（footer.php）
  • トップページ等（index.php）
  • 記事ページ（single.php）
  • テーマのための関数（functions.php）
  • スタイルシート（style.css）

の8つのファイルに分けます。
ファイル数がちょっと多いですが、ようするに「ヘッダー部分は header.php」、「サイドバー部分は sidebar.php」などパーツ別に切り分け、一部のタグを決められた PHP 関数に置換するだけですので超簡単です。

先ほどの index.html を例に切り分けていきます。

テーマファイルのサンプルファイルはここをクリックするとダウンロードできます。
（記事の冒頭でダウンロードできるサンプルテーマと同じものです。）

ヘッダー（header.php）

テーマフォルダ（サンプルでは sunshine というフォルダ）内に header.php というファイルを作成します。

header.phpを追加

header.php は、index.html の最初の行（一般的には doctype 宣言または XML 宣言）からヘッダー部分の最後までを選択して Ctrl + X（Macでは command + X）キーを押してカットし、貼り付けます。

1
2
3
4
5
6
7
8
9
10
11
12
13

<!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="★ここにブログの概要を入れる（Google等の検索結果に表示される）★" />
<title>ブログタイトル</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
 
	<div id="header">
		<h1><a href="#"><img src="images/logo.png" alt="Sunshine Blog" width="496" height="89" /></a></h1>
	</div>

次に、<title> タグやスタイルシート、<img> タグの src 内のパスを WordPress 用に書き換えます。
といっても、決まり通りに書き換えるだけなので全く難しくありません。

まず、<title> タグ部分を以下のように書き換えます。

6

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

この記述の場合、トップページは「ブログ名」記事ページは「記事タイトル | ブログ名」のようになります。
wp_title(‘ | ‘, の ‘ | ‘ の部分を ‘ : ‘ にすると「記事タイトル : ブログ名」にしたりといったカスタマイズもできます。

次に、headタグ内のスタイルシートへのリンク部分を以下のように書き換えます。

7

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

</head>部分の直前の行に以下のタグを入れます。

8

<?php wp_head(); ?>

ブログのロゴ部分は、おそらくテキストではなく画像になっているだろうという想定で解説します。
ロゴに限らず、画像のsrc内のパスの前には

1

<?php bloginfo('template_url'); ?>/

を付ける必要があります。
bloginfo(‘template_url’); の部分は、実際にWordPressテーマとして表示した際には「テーマファイルのURL」に置き換えられます。

例えば、ブログのURLが
http://example.com/
で、テーマフォルダ名が sunshine だった場合、
http://example.com/wp-content/themes/sunshine
に置き換えられます。

これを入れておかないと、テーマフォルダの images フォルダに入れた画像がイメージリンク切れとなってしまいうまく表示されないわけですね。

よって、ロゴ画像（images/logo.png）の箇所は以下のようになります。
images の前に / をつけるのを忘れないで下さい。

15

<img src="<?php bloginfo('template_url'); ?>/images/logo.png" width="402" height="70" alt="Sunshine blog" />

あと、一般的にブログのロゴ画像はトップページヘのリンクになっていると思います。
なので、画像の周りは <a> タグでトップページヘのリンクにします。

href=”” の “” 内に

1

<?php bloginfo('url'); ?>

と書けばトップページヘのリンクになります。

仕上げに、<meta name=”description”> も指定しておきましょう。
ここは、Googleなどの検索結果に表示されるページの概要部分（以下のオレンジで囲んだ箇所）です。

<meta name=”description”> の例

6

<meta name="description" content="○○の新鮮な情報をお届けするSunshine Blog。" />

従って、header.php のサンプルは以下のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!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="○○の新鮮な情報をお届けするSunshine Blog。" />
<title><?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body>
 
	<div id="header">
		<h1><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" width="402" height="70" alt="Sunshine blog" /></a></h1>
	</div>

フッター（footer.php）

テーマフォルダ内に footer.php というファイルを新規作成します。
footer.phpには、index.html のフッターの開始部分からXHTMLの最後の行（一般的には </html>）までをコピペします。

1
2
3
4
5
6

	<div id="footer">
		<p>&copy;2011 Yourname</p>
	</div>
 
</body>
</html>

そして、</body> タグの前の行に

1

<?php wp_footer(); ?>

を入れます。

従って、footer.php のサンプルは以下のようになります。

1
2
3
4
5
6

	<div id="footer">
		<p>&copy;2011 Yourname</p>
	</div>
	<?php wp_footer(); ?>
</body>
</html>

記事一覧（loop.php）

一般的なブログであれば、トップページはこんな感じになっていると思います。

WordPressブログのトップページの例

これをよく見ると、タイトル・日付・本文（概要）・リンクなどが同じレイアウトで繰り返しになっている（ループしている）ことが分かると思います。
（記事は新しい順に並んでいます）

WordPressブログのトップページの例

このループ部分の内容は index.php などに書いても動きますが、WordPress では一般的に loop.php というファイルに書きます。

loop.php のサンプルは以下の通りです。

1
2
3
4
5
6
7
8
9
10
11
12
13

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

一見ややこしく見えるかもしれませんが、これがどういう動作をするかというと、「表示できる記事があるかぎり、4行目から9行目までを繰り返して表示する」という意味になります。

上のソースの場合、実際に WordPress ブログとして表示された場合以下のようになります。

1
2
3
4
5
6
7
8
9

<div class="post">
	<h2><a href="記事のURL">記事タイトル</a></h2>
	<p>本文の一部</p>
</div>
 
<div class="post">
	<h2><a href="記事のURL">記事タイトル</a></h2>
	<p>本文の一部</p>
</div>

ですので、class 名などの部分を変更するか、スタイルシート側の class 名を変更するなどしてご自分のブログに合わせてご利用下さい。

sunshine テーマをダウンロードしてそちらをベースに制作されている場合はそのままで結構です。

※loop.php の動作原理についてさらに詳しく知りたい方は、以下の「loop.phpとは」という段落をご覧ください。

[連載]WordPressでWebサービスを作る方法（4:テーマの作り方）

サイドバー（sidebar.php）と テーマのための関数（functions.php）

サイドバーは、カテゴリの一覧、リンク、検索フォームなどを表示するという前提ですすめさせて頂きます。

実は、サイドバーにそういった要素を表示する場合、いちいち手動でソースを書かなくても、管理画面から簡単に「ウィジェット」とよばれるものを追加することでサイドバーにそのような要素を表示することができます。

ウィジェットを追加するには、まず、WordPress の管理画面にログインしてください。

管理画面のアドレスは
http://ブログをインストールした場所/wp-admin/
です。

PCでXAMPPやMAMPのhtdocsフォルダ内のwordpressフォルダにインストールした場合、
http://localhost/wordpress/wp-admin/
になるはずです。
（WordPressインストール時に送られてきたメールを見れば、インストール場所がわかります。）

管理画面にログインしたら、左サイドバー内の「外観」をクリックして下さい。

利用可能なテーマの中のTwentyTenかTwentyElevenの「有効化」をクリックして下さい。

ウィジェットのドラッグ

同じくサイドバーの中で「ウィジェット」をクリックし、左側の「利用できるウィジェット」の中から適当なものを右側の「メインサイドバー」または「サイドバー1」にドラッグします。

ブログを表示すると、サイドバーに先ほどドラッグしたものが入っているはずです。

このようにウィジェットを利用できるようにするには、テーマフォルダ内に functions.php というファイルを作成し、以下のコードを書きます。

1
2
3
4
5
6
7
8

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

これを入れておかないと、管理画面の「ウィジェット」の部分で「このテーマではウィジェットは使用できません」と表示されてしまいます。

次に、sidebar.php は以下のようにします。

1
2
3
4
5
6

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
	<h2 class="widget_title">About</h2>
	<p>ウィジェットが設定されていない場合、ここが表示されます。</p>
<?php endif; ?>
</div>

もしウィジェットが1つも指定されていない場合は、3〜4行目が表示され、ウィジェットが1つ以上設定されていればウィジェットが表示されます。

トップページ等（index.php）

では、今までに制作したファイルを1つにまとめるためのファイルを制作します。
それが index.php です。

index.php のサンプルは以下の通りです。

1
2
3
4
5
6
7
8

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

get_header() などのPHP関数は「ここに header.php を読み込む」という意味です。
get_template_part( ‘loop’ ) は、「ここに loop.php を読み込む」という意味です。

ブログのトップページ、カテゴリ別記事一覧ページなどの記事一覧系ページでは、この index.php が読み込まれます。

記事ページ（single.php）

トップページ等で記事タイトルをクリックし、記事ページを表示したときはこの single.php が表示されます。
single.php のサンプルは以下の通りです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

8行目の the_title() 関数は「ここに記事タイトルを表示する」という意味で、9行目の the_content() は「ここに記事本文を表示する」という意味です。
10行目の comments_template() 関数は、コメント欄を表示するための関数です。

スタイルシート（style.css）

WordPressにおけるstyle.cssは、テーマのスタイルを指定するだけでなく「テーマの概要（テーマ名、作者名など）」を指定するという役割もあります。

具体的には、style.css の先頭に以下のようなコメントを加えます。

1
2
3
4
5
6
7
8

/*
Theme Name: Sunshine
Theme URI: http://example.com/
Description: サンプルテーマ
Version: 1.0
Author: Yourname
Author URI: http://example.com/
*/

Theme Name: の後にはテーマ名を書きます。
Theme URI: の後にはテーマの配布場所のURLを書きます。配布する予定がなければ、とりあえずブログのURLでも入れておきましょう。
Description: にはテーマの解説を書きます。
Version: はテーマのバージョンです。
Author: はテーマの制作者名です。
Author URI: はテーマの作者のサイトのURLです。もし無ければブログのURLを書いておきましょう。

コメントの下は、通常通りのスタイルシートの書き方で構いません。
background: url()等で画像を指定するときも、
background: url(“images/bg.jpg”);
のような書き方で構いません。

では、テーマができたら、それをフォルダごと wordpress フォルダ内の

wp-content/themes/

に入れ、管理画面にログインしてサイドバーの「外観」をクリックします。
style.cssのコメントがきちんと書かれていて、テーマをフォルダを間違えていなければ、先ほど制作したテーマが表示されるはずです。

ウィジェットの設定

最後に、管理画面の「外観＞ウィジェット」からお好みのウィジェットを入れればオリジナルテーマの完成です。
おつかれさまでした。

記事の投稿

さあ、オリジナルのブログテーマができたら早速記事を投稿してみましょう。
管理画面のサイドバーにある「投稿＞新規追加」をクリックし、タイトルと本文を入力します。

画像/Moreタグの挿入

記事の途中に画像を挿入するには、本文の枠の上にある「アップロード/挿入」の右にある四角形をクリックします。

普通に記事を書くと、記事の最後までトップページなどの記事一覧に表示されますが、これを途中までしか表示させないようにするには、本文の途中の任意の場所で Moreタグを挿入 をクリックするか、 Alt + Shift + T キーを押します。

さらにカスタマイズするには

PHP や WordPress について、1から丁寧に解説する連載記事「WordPressでWebサービスを作る方法（全9回）」を掲載しています。
よろしければご覧ください。

  1. PHPとは
  2. 開発環境の構築
  3. WordPressとは
  4. WordPressテーマの作り方
  5. WordPressをWebサービス用のCMSとして使うために
  6. WordPressとSEO
  7. ソーシャルメディアマーケティング
  8. サーバ選びと高速化
  9. おすすめのプラグイン

記事ページで投稿日時やカテゴリを表示したりといったカスタマイズをするには、single.php に「テンプレートタグ」と呼ばれる PHP 関数を追加していけば OK です。

テンプレートタグの一覧は、以下のページが分かりやすいかと思います。

日本語版 WordPress チートシート | Webクリエイターボックス

さらに WordPress の関数について詳しく知りたいという場合は、公式サイトをご覧ください。

関数リファレンス – WordPress Codex 日本語版

If you like this article click the Facebook “Like” button to share it with your friends!