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

WordPressは、HTML+PHPでできた「テーマファイル」を入れ替えることにより、ブログはもちろんニュースサイト、企業サイト、ギャラリーなど色々なWebサイトを提供することができます。

この連載の第3回で「WordPressで作られたWebサイトやWebサービス」を紹介しましたが、あのようなWebサービスやニュースサイトを構築するためにやることは、基本的に「WordPressテーマの作成」と「WordPressプラグインのインストール」です。

今回は、WordPressテーマの構造と作り方を解説します。

WordPressのロゴ

SEOについて
SEOはSEO業者でないとできない？
内部SEOと外部SEO
WordPressはSEOに向いている
SEOケーススタディ: フリー写真素材サイトの場合
All in one SEO Packの設定
共起語SEO
ケーススタディ: うさぎの飼育用品のECサイト「うさぎのしっぽ」
便利なツール

ソーシャルメディアマーケティング

「ソーシャルメディア」とは何か
SMOとは具体的にどんなものか？
SMOの実践
ソーシャルメディアからの人の流れ
はてブのホッテントリに自分のWebサービスやブログ記事を載せる方法
はてブでの自作自演は無視される
はてブされる記事やWebサービスを作るために
シェアされやすいコンテンツとは

サーバ選びと高速化

WordPressのためのサーバ選び
WordPressを高速に動かすために

おすすめのプラグイン

資料

※最後の方は多少内容が変更になる可能性があります。

WordPressの「テーマファイル」とは

では、テーマファイルはどのようになっているのでしょうか。
XAMPPまたはMAMPの htdocs フォルダに入れた wordpress フォルダを、エクスプローラ（Windowsの場合）またはFinder（Macの場合）で開き、そのまま
wp-content/themes/twentyten/
フォルダを開いてください。

twentytenファイル一覧

これがWordPress 3.0〜3.1の標準テーマ TwentyTen のテーマファイルです。
ファイル数…多いですね。

これを全部作らなければいけないかというと、そんなことは全然ありません。
WordPressのテーマは、最低限 index.php と style.css という2つのファイルがあればできます。

一般的なWordPressテーマ（ブログ用のテーマ）の作り方は以下のページに詳しく書いておりますので、まずこちらをお読みください。

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

読まれたら、次の項目に進んでください。

WordPressのテーマファイルを作る: Free.Stockerの場合

では、今回私が製作したフリー写真素材 :: Free.Stocker という写真素材サイト（ギャラリーサイト）を例にとって、テーマ制作の流れをおさらいします。

今回は

Photoshopでイメージを作る
↓
画像を書き出し、普通にHTML+CSSコーディング
↓
index.php・single.phpなどWordPress用テーマファイル（空のファイル）を作り、HTMLから必要な部分をコピペ
↓
必要なPHP関数などを書く

という流れで作りました。

Photoshopでイメージを作る

私の場合は、頭の中で「クラシカルなノートみたいな雰囲気で、ロゴの部分に光がさしてて、サイドバーが左で、コンテンツ部分にはjQueryのスライダーがあって…」みたいに考えてから Photoshop でイメージを作ります。

Photoshopでイメージを作る

これはかなり初期のイメージで、後で検索ボックスなどを足しましたが、基本的なイメージは現在のサイトとほぼ変わらないですね。
（実は、最初 Photo.Stocker というサイト名にしようとしてデザインした後、 @yuki930 さんの PHOTO STOCKER というサイトの存在に気づいてあわてて名前を変えたことは内緒です… PHOTO STOCKERもWordPressでできていますね。）

画像を書き出し、普通にHTML+CSSコーディング

私はブログを作るときなどは画像は極力 CSSスプライト ※ にする（1つにまとめる）のですが、今回は後で色々機能追加しそうな予感がしたので普通にパーツごとに書き出しました。

※ CSSスプライトについては下記の記事に詳しく書いています。
ついに出た！Chrome版「Page Speed」の使い方

次に、普通に HTML+CSS で一旦コーディングします。
ちょうど、Mac版の Dreamweaver CS5 を買ったので期待して使ってみたところ重い上に不安定でよく落ちたので、いくつかのエディタを試した挙句、結局 WordPressテーマを作るには NetBeans IDE ※ が便利だったので、これ以来 NetBeans IDE でコーディングしています。

※ NetBeans IDE については下記の記事に詳しく書いています。
HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件

index.php・single.phpなどWordPress用テーマファイルを作り、コピペ

今回製作した素材サイトは、主に以下の3種類のページで出来ています。

トップページ

キーワード（タグ）ページ・撮影地（カテゴリ）ページ

写真詳細（記事）ページ

一般的なWordPressブログのトップページはタグページやカテゴリページと同じく記事一覧とサイドバーがあるだけですので、一般的なブログであれば

トップページ・タグページ・カテゴリページ・検索結果ページ・404（ファイルが見つからない）ページ用　⇒　index.php
記事ページ用　⇒　single.php
CSS　⇒　style.css

の3つでもとりあえずテーマとして機能すると思います。
ただ、ページのヘッダやフッタなど、同じことを各ファイルに書くと、もし変更があったときに全て修正しなければなりませんよね。
なので、

ヘッダ部分　⇒　header.php
フッタ部分　⇒　footer.php
サイドバー部分　⇒　sidebar.php

に分けて、index.php や single.php には同じことを書くのではなく、PHPを使って「ここに header.php を読み込む」などの命令文だけを書いたほうが方が後々メンテナンスがしやすいはずです。

例えば、WordPress 3.0〜3.1標準テーマの TwentyTen の index.php は、コメントを削除するとたったこれだけしか残りません。

get_header() はヘッダを読み込むための関数、get_sidebar() はサイドバーを読み込むための関数、get_footer() はフッタを読み込むための関数、get_template_part( ‘loop’, ‘index’ ) はループ（後で解説します）を読み込むための関数ですね。

では、はじめてWordPressテーマを作る方がはまりそうな functions.php と loop.php について解説しておきます。

functions.php とは

header.php や footer.php は index.php や single.php などに読み込まれるファイルであることがここまででお分かりかと思います。
Webクリエイターボックスさんの記事のこの図が分かりやすいですね。

style.css は完成したHTMLにスタイルシートを適用するためのファイルです。
では、さりげなく触れられている functions.php とは何のためのファイルなのでしょうか。

まず、「functions.php とは何なのか」を知るためには、PHPの function について知る必要があります。
関数（function）というのは、この記事の1ページ目でも触れましたが
IT用語辞典によると

引数と呼ばれるデータを受け取り、定められた通りの処理を実行して結果を返す一連の命令群。
多くのプログラミング言語では、関数がプログラムを構成する要素となっている。

多くの言語や処理系では、開発者の負担を軽減するため、よく使う機能が関数としてあらかじめ用意されている。

ということです。
1ページに出てきた mt_rand() 関数は、1,2 などの引数を与える（ () の中に数値を書く）と、引数の範囲内でランダムに数値を返す関数でしたね。

関数と引数

そしてなんと、この関数というのは 自分で作ることができる のです！
（これを「ユーザ定義関数」または「自作関数」等といいます。）

……とはいえ、普通のブログを作るだけなら自分で関数を作る必要はほとんどないです。
一般的なブログに必要な関数は、大抵WordPressに最初から付属しているか、もし無くてもWordPress用の「プラグイン」というものが豊富にあります。
Firefoxにアドオンを入れたり、Chromeにエクステンションを入れたりする感覚で、簡単に機能追加できます。

それでも私が functions.php に自作の関数をゴリゴリ書くのは主に次の目的です。

独自のWebサービスを作るにあたり、WordPressでは提供されない機能を追加したい時
内部SEOのために、title・h1・h2 などの出力（HTMLへの書き出し）をカスタマイズしたい時

です。

functionの例: WordPressにソーシャルボタンを追加する

例えば、この写真サイトでは、トップページと各写真の下にはてブ・Twitter・Facebook などのソーシャルボタンがあります。

ソーシャルボタン

これらのソーシャルボタンは、記事ページ（single.php）だけでなく、トップページ（index.php）、「このサイトについて」などの情報が書いてあるページ（page.php）などでも使用されています。

同じ情報を3回書くよりも、header.php や footer.php などと同じように1箇所に書いておき、それぞれのページで読み込んだほうが後々のメンテナンスが楽そうですね。

以前ブックマークしておいた、ちょうど良い関数があるので今回はこれを使います。

WordPress にはてブと Twitter と Facebook のボタンを10秒で貼り付けられるコードを書いてみたよ | ウェブル

こちらのページにも書いてありますが

function webleSocialButton()
{ ?>

これを functions.php にコピペし、以下の関数をsingle.php でソーシャルボタンを表示したい箇所（今回は写真素材のすぐ下の部分）や index.php、page.php などに貼り付けます。

そして、data-via=”soraiy” という箇所を自分の Twitter アカウントに書き換えます。

これで、「ソーシャルボタン」という機能がサイトに追加されました。
single.php などのテンプレートごとに長いコードを書くより、<?php webleSocialButton(); ?> だけで済んだほうがソースコードもすっきりしていい感じですね。
ソーシャルボタンを出すだけならプラグインという手もありますが、自分で関数を追加すればカスタマイズしやすいのでおすすめです。

loop.php とは

例えば、一般的なブログであればトップページやタグページ・カテゴリページ・アーカイブページ（月ごとの記事一覧）はこんな感じになっていると思います。

index.php

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

ループしている

このループ部分の内容は index.php などに書いても動きますが、WordPress 3.0〜3.1 では一般的に loop.php というファイルに書いて、index.php などの記事の一覧を表示させたい部分に

と書けばOKです。

今回作成した素材サイトの場合は、タグページやカテゴリページのループ部分はこんな感じになっています。

ループ部分

サムネイルの傾きや周りのドロップシャドウはCSS3です。

WordPress 3.0〜3.1 標準テーマ TwentyTen の loop.php はとても複雑でここで解説するのは難しいほどですが、素材サイトの loop.php はとてもシンプルです。

loop.php

2行目に if 文がありますが、この記事で紹介した if 文とは書き方が違いますね。
実はPHPには if 文の書き方が何種類かあって、1ページ目で紹介した書き方は

こんな書き方でしたが、WordPressの loop.php では一般的に

こういう書き方をします。
もちろん大括弧 { } を使った書き方でも動きますし、私は大括弧を使った書き方のほうが見やすいと思っていますが、ここではWordPressのソースコードに見慣れていただくためにあえてこういう書き方をしました。
（WordPress 3.0〜3.1標準テーマの TwentyTen はこういう書き方になっています。）

そして、have_posts() 関数は「次の投稿データがあるか調べる」ための関数です。
例えば、10件の記事がすでに公開されているブログのトップページ（index.php）で、

if ( have_posts() )

が初めて実行されると、「次の投稿があれば」実行されます。
1件でも投稿データがあれば実行されることになりますね。

while ( have_posts() )

ですが、PHPの while 文は ( ) の中身が true である場合にその後の部分が実行され続けます。
例えば、

// $i に 1 を代入
$i = 1;

// $i が 10 以下の時
while ( $i ';

	// $i に 1 を足す
	$i = $i + 1;

}

を実行すると、$i を表示し、1を足して再び $i を表示し…と続き、10になるとストップしますので、表示結果は

ですね。
このような取り返し処理は、ブログのトップページなどで記事を新しい順にずらっと並べるのに使えます。

ちなみに、

// $i に 1 を足す
$i = $i + 1;

のような表現はよく使うので、一般的にはもっと省略して

// $i に 1 を足す
$i++;

と書きます。
$i から1を引くのであれば

// $i から 1 を引く
$i--;

ですね。

最後の

the_post()

はWordPressの関数で、投稿データをグローバル変数 $post に代入するための関数です。
グローバル変数とは、関数の中でも外でも使える変数のことです。（後で詳しく解説します。）

つまり、

は投稿データが無くなるまで image_thumb() 関数を実行し続けるということで、例えばここを

のようにすれば

ループしている

のような感じになるわけですね。
記事へのリンクを表示する関数() は、実際には the_permalink() といい、
記事のタイトルを表示する関数() は、実際には the_title() といい、
記事の概要を表示する関数() は、実際には the_excerpt() といい、
それぞれ、グローバル変数 $post から記事の情報を取得して表示しています。

WordPressで普通のブログを作るだけであれば、ここまでの情報で十分作れると思います。
WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックスを参考に、ぜひオリジナルテーマを作ってみてください。

ちなみに、上記の image_thumb() 関数の中身など、素材サイトで使用しているソースはこの連載の第10回にまとめて掲載しますので、興味がある方はそちらをご覧ください。
（第10回は近日掲載予定です。）

次回からは、WordPressでWebサービスを作るための具体的な情報を書いています。
さらにWordPressをWebサービス用のCMSとして活用したい方や、作ったサイトを沢山の方に見ていただくための方法については、ぜひ次回以降をご覧ください。

第5回「WordPressをWebサービス用のCMSとして使うために」はこちらです。