| web creators特別号 |
| スマートフォン・ソーシャルメディア・WordPress Web制作テクニック総特集 |
WordPress 01-03
人気ブログツールWordPress サイト構築入門（後編）
2004年ブログツールとしての公開されたWordPressだが、最近ではCMSとして利用されるケースも増えている。ここではWordPressでのサイト構築の予備知識を紹介する。
解説／高橋のり（Webデザインレシピ）
WordPressサイト制作の鍵を握る「テーマ」
WordPress をインストールし、用意されている豊富なテーマを利用すれば、HTML + CSS の知識がなくても Webサイトの運営を始められる。しかし実際の制作には、オリジナルのデザインに変更したり、機能を追加したりするため「テーマ」を作成する必要がある。WordPressでのサイト構築は、この「テーマ」を作成することだと言っても過言ではない【01】。
【01】単なるブログではなく独自のデザインを施したWebサイトの作成は、「テーマ」を作成するということと言っても過言ではない。
wp-config.phpの作成
WordPress のテーマは、wordpressフォルダ（先ほどmyblogと変更したフォルダ）内の wp-content/themes フォルダにある。WordPress のインストール時に用意されているテーマをはじめ、自分でダウンロード／インストールしたテーマもすべてこのフォルダの中に格納されている【02】。それでは themes フォルダ内から、デフォルトテーマである「Twentyeleven」フォルダを探し、開いてみることにしよう【03】。「TwentyEleven」では、数多くの PHPファイルとさまざまなフォルダが格納されている。テーマを作るには、これだけのファイルが必要なのかと思うかもしれないが、実は最低1枚の index.php というPHPファイルと、スタイルシートである style.css の2つのファイルがあれば、WordPress のテーマとして成り立つ。では、Webサイトのデザインの構造と、PHPファイルを照らし合わせながら見ていくことにしよう。
【02】インストール済みのテーマは、すべて wp-content/themes フォルダ内に格納されている。
【03】Twentyelevenフォルダ内には、たくさんのPHPファイルやフォルダが格納されている。
テンプレートファイルの仕組み
WordPress では、テーマを構成するPHP ファイルをテンプレートファイルと呼ぶ。実際にWebサイトを表示するにあたって、それらテンプレートファイルがどのような役割をもっているかは、デザインに照らし合わせて見るとよくわかる。まず、WordPress サイトでは、ブログのトップページを表示するときにindex.php というテンプレートファイルが使われている。しかしトップページのすべてを index.php のみで表示しているわけではない。実は【04】のように、index.phpからさらにほかのテンプレートファイルが読み込まれ、それぞれの部分を表示している。ヘッダー部分は header.php というテンプレートファイル、サイドバー部分は sidebar.php、フッター部分はfooter.phpといった具合だ。このような構造は、基本的にどのテーマでも同じだ。
テンプレートファイルの内容
次に index.php をテキストエディタで開いてみよう【05】。冒頭にget_header()という関数が記述され、最後は get_sidebar()、get_footer() という関数で締めくくられている。これらは「テンプレートタグ」という WordPress の独自関数で、それぞれ次のような働きをしている。・ get_header() … ヘッダーテンプレート（header.php）を読み込む
・ get_sidebar() … サイドバーテンプレート（sidebar.php）を読み込む
・ get_footer() … フッターテンプレート（footer.php）を読み込む
続いて header.php をテキストエディタで開いてみよう【06】。Twenty ElevenはHTML5 で記述されているが、DOCTYPE宣言にはじまり、<html>タグ、<meta>タグ、<link>タグなど、おなじみのマークアップを見ることができる。これは Webサイトのヘッダー部分のマークアップだ。このように WordPress では、ヘッダーやサイドバー、フッターを分割して、テンプレートファイルで部品化している。
次にブログの個別記事を表示する場合を見ていこう。個別記事ページでは、single.php というテンプレートファイルが使用される。single.php のコードは、【07】のようになっている。冒頭のテンプレートタグ get_headar() でheader.phpを読み込んでいる点は index.php のときと同じだが、途中 comments_template()というテンプレートタグが記述されている。これはコメント一覧やコメントフォームを表示する、commnets.php を読み込むためのタグだ。
また、Twenty Elevenでは、個別記事ページはシングルカラムのレイアウトになっていて、サイドバーのないデザインになっている【08】。そのため index.phpにあったget_sidebar() の記述はない。
【04】WordPressサイトでは、ヘッダーやサイドバー、フッターが部品化され、複数のPHP ファイルでページを構成している。
【05】冒頭ではヘッダーが読み込まれ、最後はサイドバーとフッターを読み込んでいる。
【06】header.php には、Webサイトのヘッダー部分を表示するためのマークアップがされている。
【07】冒頭ではヘッダーが読み込まれ、途中でコメント欄、最後にフッターを読み込んでいる。
【08】個別記事ページ（single.php）では、サイドバーのないデザインのため、sidebar.php は必要ない。かわりにコメントフォーム部分のテンプレートファイルが必要となる。
テンプレートファイル群の構造
ここまでを一度整理してみよう。ページを表示するための、メインとなるテンプレートファイル（index.php や single.php）に、部品となるテンプレートファイル（header.phpやsidebar.phpなど）が読み込まれて、ひとつのページを構成している【09】。また、部品であるテンプレートァイルから、さらにテンプレートファイルを読み込む場合もある。header.phpでは、検索フォームを表示するテンプレートファイル「searchform.php」を読み込んでいる。このように、部品が増えるほど、テンプレートファイルも増えていくというわけだ。Twenty Eleven には、このような部品化されたテンプレートファイルが多数存在する。しかし検索フォームが必要のない Webサイトであれば、searchform.php は必要ない。またサイドバーのないシングルカラムのデザインのWeb サイトであれば、sidebar.php も必要ない。このようにWebサイトのデザインによって、必要なテンプレートファイルには違いがでてくることになる。
【09】さまざまなテンプレートファイルを組み込んでひとつのページを構成している。
ページを表示するためのメインテンプレート
ページを表示する際にメインとなるテンプレートファイル（index.php やsingle.php）を、もう少し詳しく見ていこう。前述したように、通常WordPressサイトのトップページはindex.php で表示される。そしてそれぞれの記事のタイトルや、「続きを読む」リンクをクリックすると、個別の記事ページが表示される。前述したとおり、個別の記事ページではsingle.php が使われている。WordPressでは、それぞれのページを表示するために使用されるテンプレートファイルは、ページごとにあらかじめ次のように決められている。・ index.php … トップページなどを表示するテンプレートファイル
・ single.php … 個別記事ページを表示するテンプレートファイル
もちろん WordPress サイトには、トップページや個別記事ページ以外にもたくさんのページが存在する。ブログのカテゴリーをクリックした際には、カテゴリーに属する記事を一覧表示するカテゴリーアーカイブページがあり、検索フォームから検索した際には検索結果を一覧表示するページもある。リクエストされた URL が存在しない場合には404 NotFound ページも必要だ。
それではそれぞれのページに対して、個別記事ページのsingle.php のように、それぞれテンプレートファイルが必要なのだろうか？
答えは半分正解で、半分不正解といったところ。少し混乱しそうだが、前述したようにWordPress のテーマは最低限index.php と style.css があれば成り立つ。個別記事を表示するための single.php でさえ、実は必須ファイルではないのだ。これは一体どういうことだろうか？
いろんなところで働くindex.php
WordPress サイトには必須のindex.phpファイル。この index.php は、トップページに限らず、いろいろなページを表示するために使用される。たとえばブログのカテゴリーをクリックした際には、そのカテゴリーに属する記事が一覧で表示されるが、このカテゴリーアーカイブページを表示する際にもindex.php が使用される。また、検索フォームから検索するとその結果を一覧表示するが、その検索結果ページでも index.php が使用されるのだ【10】。
【10】検索結果を一覧表示するページの表示にも、index.php が使用される。
個別記事ページを表示するsingle.php
今度は個別記事ページを表示するsingle.php を詳しく見ていこう。single.php はその名前の通り、個別の記事を表示するために使用される。ただし、必須ではなく、なくても構わないファイルだ。テーマ内に single.php がなくても、WordPress はエラーを返すわけではなく、index.php を使って個別記事を表示しようとする【11】。逆にいえば、それぞれのページで使用されるテンプレートファイルには、優先順位が存在している【12】。
ではどうして index.php ひとつで済まさずに、single.php というファイルが存在するのだろう？
それは、ブログの個別記事ページでは、ページのデザイン／レイアウトが大きく違うからだ。個別記事ページでは、通常コメント一覧やコメントフォームを表示する。もちろん index.php 内部でif文を使って条件分岐すれば、single.php は必要ないかもしれない。しかし実際は single.php という別ファイルを作成した方がわかりやすく、メンテナンス性も向上する。このような理由から、個別記事を表示するページには single.php を使うのが一般的になっている。
【11】single.php がない場合は index.php を使ってページを表示しようとする。
【12】それぞれのテンプレートファイルには、使用される優先順位がある。
テンプレート階層とは
先ほどの index.php と single.php の関係のように、WordPress で表示されるすべてのページには、「どのテンプレートファイルを使用するか？」という優先順位が存在する。この優先順位のことを、テンプレート階層と呼ぶ。たとえばカテゴリーアーカイブページでは、category.php という名前のテンプレートファイルが index.php よりも優先され、検索結果ページでは search.php という名前のテンプレートファイルが index.php よりも優先される。先ほど「検索結果ページでもindex.phpが使われる」と表現したが、正確には「もし search.php がなければ、index.php が使われる」という表現が正しい。それぞれのページで使われるテンプレートファイルは、このテンプレート階層によってルールづけされている【13】。
【13】ブログサイトで一般的に使われるページのテンプレート階層。
※1スラッグとは、カテゴリーやタグなどの名前を半角英数字で表したもの。URL（パーマリンク）中やPHPのコード内など、いろいろなところで使われる。たとえば「動画」というカテゴリーなら、「movie」というスラ ッグをつけるといったイメージだ。
※2 IDは個別識別のためにつけられるユニーク（一意）な番号。カテゴリーやタグ、記事そのものにも ID が自動的に割り振られる。
出典： WordPress Codex 日本語 - テンプレート階層
http://wpdocs.sourceforge.jp/テンプレート階層
テンプレートファイル作成の考え方
テンプレート階層図を見るとわかるように、WordPress サイトでは、さまざまなページが存在する。そしてそれぞれのページを表示するためのテンプレートファイルも数多く存在する。しかし複数のテンプレートファイルを利用する目的は、index.php と single.php のところで見たように、「ページのデザイン／レイアウトを変更するため」だ。だから必ずしもたくさんのテンプレートファイルを作成する必要はない。カテゴリーアーカイブや検索結果ページなど、index.phpの表示とレイアウトが同じで構わないのであれば、category.php や search.php といったファイルは不要となる。
一般的なブログサイトを作成するのであれば、【14】にあげるテンプレートファイルがあれば充分だろう。
Twenty Eleven には、30枚程の PHP ファイルがあったが、これらのものだけ作成すれば、機能的には申し分のないブログサイトが作成できる。WordPressのオリジナルテーマを作成するステップとしては、はじめのうちはこれくらいの規模ではじめてみるのがいいだろう。
【14】一般的なブログサイトに必要なテンプレートファイル。
WordPressループ
WordPress にはさまざまなテンプレートファイルがあるが、テンプレート階層図を見るとわかるように、すべてのページが最終的には index.php で表示できる。しかしページによって、表示するものはバラバラのはずだ。ブログのトップページでは、記事を投稿日時の新しい順に一覧表示しなくてはならない。また、カテゴリーアーカイブでは特定のカテゴリーに属する記事のみを表示している。個別記事ページでは、一覧表示ではなくひとつの記事の全文を表示する。このように表示する対象がバラバラなのに、最終的にはたった 1枚の index.php で表示できるのはなぜなのだろう？
その秘密は WordPress ループと呼ばれる、メインテンプレート（index.phpやsingle.php）のコードにある。
【15】の赤字で示した一連のコードを「WordPressループ」と呼ぶ。繰り返し処理の while 文の中の記述はテーマによって違うが（投稿日時を表示したり、記事制作者名を表示するコードが含まれたりする場合もある）、if (have_posts()) : から、endif までの大枠はどのテーマでも同じだ。たった数行のコードだが、このWordPress ループが、「現在表示されているページ」に適した記事を自動的に取得して表示してくれる。個別記事ページであれば個別記事を取得し、トップページであれば投稿日時の新しい順に複数の記事を取得し表示してくれる、といった仕組みだ【16】。
この WordPress ループのおかげで、while 分の中の記述（タイトルをマークアップしたり、レイアウト用のdivタグをマークアップ）するだけで、さまざまなデザインを作成することができる。
【15】index.phpのWordPressループ。
【16】WordPressループは、表示しているページに見合った記事を、自動的に取得して表示してくれる。
WordPress でのコーディングー――テンプレートタグ
ここまでは WordPress サイトの構造的な部分を紹介してきた。実際のWordPress サイトのコーディングでは、PHP のコーディング作法に基づき、テーンプレートタグと呼ばれるWordPress の独自関数を記述していく。前述したヘッダーテンプレートを読み込むための get_header() や、サイドバーテンプレートを読み込むための get_sidebar() なども、たくさん用意されているテンプレートタグのひとつだ。ほかによく使われるテンプレートタグには次のようなものがある。
・the_permalink() … 記事へのパーマリンクを出力
・the_title() … 記事のタイトルを出力
・the_content() … 記事の本文を出力
実際の作業としては、このようなテンプレートタグを記述して、Webページを作成していく。これらテンプレートタグは、WordPress Codex 日本語版に公式マニュアルとしてまとめられているので、参考にしてみるといいだろう【17】。
【17】iWordPress Codex 内には、テンプレートタグについて学べる「テンプレートタグ入門」というページも公開されている。（http://wpdocs.sourceforge.jp/テンプレートタグ入門）
[目次に戻る]
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。
※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。
