hijiriworld Web

これからWordPressをはじめようと思っている人が参考にしているWebサイトや関連書籍は、どれもこれもいきなりテーマ作成から解説しているものばかりです。
まず最初に学ぶべきWordPressの本質をきちんと解説しているところは、ほぼ皆無です。

テーマ作成というのは、テンプレートタグやコードをを覚えればいいだけの話なのでたいして重要ではありません。あとでなんとでもなります。
それよりも、WordPressとは一体どのような動きをするものなのか？という全体的な仕組みをしっかりイメージできることが最も重要だと考えます。
デザイン、コーディング、プログラミング、いえ、Webの世界に関わらず、すべてのものごとへの深い理解には、その本質をイメージできているかどうかで大きな差が出てくるものです。

普段私が WordPress の講義を行う時には、まずこの本質的なイメージについてしつこいくらい解説することにしています。

これを理解しないでテーマ作成からはじめてしまうと、けっこう早い段階でつまづくし、より複雑で高度なWebサイトの構築など、まずできません。
少なくとも、”なんとなーくテーマ作成はできるようになったけど、結局なんでこうなるの？”というモヤモヤした疑問をずーっと持ち続けることになります。

WordPressの相関図

WordPressは4つの要素が以下のような相関関係によって構成されています。

これらはMVCモデルに基づいて設計されており、それぞれが独立して動作します。
ゆえに、WordPress本体のコードを知らなくても、テーマ作成、イコール、Webサイト製作となるのです。
プラグインについても同様で、WordPress本体のコードを触ることなく機能拡張を行うことができるよう、プラグインAPIという仕組みが用意されています。
別の言い方をすると、WordPress本体のコードは不可侵で絶対にカスタムしてはいけません。たとえカスタムしたとしても、自動アップデートのたびに上書きされてしまいます。

動的サイトにおけるパーマリンクURLの意味

静的サイトしか製作したことのない人にとっては、URLとは実体のファイル参照であると認識している場合が多いでしょう。
例えば、/news/ というURLの意味するところは、news ディレクトリ内のインデックスファイル（index.html）を参照している、という認識です。

しかし、動的サイトの場合は根本的に違います。

URL とはユーザからのリクエストにすぎず、その先に特定の実体ファイルが存在しているわけではありません。

ここから URL のことはパーマリンクURLと呼ぶことにします。”パーマリンク”とは”恒久的な”という意味です。パーマリンクURLが指し示すページはひとつしか存在せず、常に1対1の関係になっているからです。

動的サイトの場合、パーマリンクURLとページはそれぞれ独立していて、特定のパーマリンクURLに対してどのページを紐づけるのかを自由に設定することが出来ます。さらに、パーマリンクURLの構造自体も自由に設定することもできます。

動的サイトのページは実体ファイルではなく、テンプレートとデータが動的に組み合わさったものです。テンプレートは枠組みだけの箱で、データはその中身と考えればいいでしょう。

テンプレートには、動的に取得されるデータをどのように組み合わせて表示するかのルールが記述されており、ユーザからリクエストを受け取るたびに適切なデータが埋め込まれてページとして生成されるイメージです。（”生成”といっても実体ファイルが生成されるわけではありません。

ちなみに、静的サイトと動的サイトの違いは、シェフのいないレストランとシェフのいるレストランに喩えられることがあります。
シェフのいないレストランには常に作り置きのメニューしかありませんが、チェフのいるレストランでは、お客さんからオーダーが入った材料をピックアップして調理して提供します。ここで言う材料とは、すなわちデータのことです。さらに、シェフがいるので、お客さんは決まったメニューだけでなく、お好みの注文をすることができます。検索結果ページなどがいい例です。まさか任意に検索されるグーグルの検索結果のページがすべて静的ファイルとして用意されているとは思わないでしょう。

普通気づく疑問

これから説明するWordPressの本質を理解しないでテーマ作成からはじめた場合、だいたいこんなことからはじまると思います。

「まずは、テーマフォルダ内に index.php というファイル名のテンプレートをひとつ用意して、WordPressループ構文の中に the_title() と the_content() というテンプレートタグを記述しましょう。はい、ブログサイトのできあがり！」

確かにこれで、固定ページ、アーカイブページ、カテゴリーページ、個別ページ、いかなるページでも適切に表示されます。

普通はここで疑問を持たなければなりません。

WordPressの本質的な動き

これが WordPress の本質的な動きであり、この仕組みを寝ても覚めてもイメージできるようになってからテーマ作成に入るべきなのです。
次から詳しく説明します。

テンプレート階層に従ってテンプレートが自動的に選択される

テーマにおいて最低限必要なテンプレートファイルは index.php のひとつだけです。
index.php さえあれば、どんなパーマリンクURLでも、つまり、どんなページでも表示させることができます。（少なくとも 404 Not Found にはならないという意味

それは、テンプレート階層というルールに従って、適用するテンプレートが自動的に決定されるからです。

以下は簡略化したテンプレート階層図です。

例えば、パーマリンクURLが /(ルート)だった場合、それはフロントページであると決まります。テンプレート階層に従ってアクティブなテーマの中からテンプレートを探しに行きます。まずは home.php を探して、あったらそれを適用します。なかったら index.php が適用されます。

ここで重要なのは、index.php というのは汎用的なテンプレートであり、すべてのページにおいて専用のテンプレートが存在しなかった時に、最終的に選択されるテンプレートであるという点です。

静的サイトしか製作したことのない人が勘違いしやすいポイントなので、これをしっかり理解しなければなりません。
index.php とは、静的サイトのインデックスファイル（index.html）的なものではありません。

テーマ作成のプロセスのひとつは、サイト構成に従ってテンプレートを細分化していく作業です。
レイアウトや表示方法が他と違うページがあった場合、テンプレート階層を参照して、決められたルールに従ってテンプレートを細分化していきます。

例えば、固定ページ専用のテンプレートを用意したければ page.php を用意します。記事の個別ページ専用のテンプレートを用意したければ single.php を用意します。さらに、固定ページの中でも hoge というスラッグの固定ページだけが使うテンプレートを用意したければ page-hoge.php を用意することになります。

テンプレートの命名規則はテンプレート階層によって最初から決められているので迷うことはありません。

WordPress Codex 日本語版　テンプレート階層

ちなみに、きちんと設計されたWebサイトの場合、いかなるページにおいても index.php のテンプレートが選択されることはありえません。
仮に任意のページのテンプレートとして index.php が選択される事態が発生したとしたなら、それはつまり、Webサイト上に存在するすべてのページを製作者がきちんと把握しておらず、適切なテンプレートを用意し忘れた結果となるからです。
通常 index.php には、不足の事態に備えて、すべての基本となるWordPressループ構文を記載しておくものです。index.php を特定のページのテンプレートとして代用してはいけません。

そのページに必要なデータが自動的に用意される

パーマリンクURLが決まればどのページかが決定され、そのページに必要なデータがあらかじめ自動的に用意されます。

個別ページであれば、その個別ページの入稿画面で入稿したすべてのデータが用意されますし、投稿記事のアーカイブページであれば投稿記事の全データが用意されます。

この”あらかじめ用意されるデータ”は、プログラム的に言うと WP_Query オブジェクトというスーパーグローバル変数に配列として格納されます。

この自動的に用意されるデータ（WP_Queryオブジェクト）を汎用的にループ表示させるのが、WordPressループ構文です。

[Advanced] WP_Queryオブジェクトの詳細

WP_Queryオブジェクトの実体は $wp_query 変数です。
テンプレート内に $wp_query 変数を出力してみれば、どのような構造になっているかを確認できます。

<?php print_r($wp_query); ?>

同一テンプレートでも、ページによってデータが変化していくのがわかるでしょう。
また、WP_Queryオブジェクトにおいて、”投稿記事データ”はほんの一部で、全体的にはさまざまなメタデータを取得しているのもわかると思います。

メインクエリのループ構文

投稿記事のアーカイブページの場合、以下のようにすべての投稿記事が自動的に用意されます。
そして、それぞれの投稿記事データの中には、入稿したデータがすべて含まれています。

そして以下のコードがメインクエリのループ構文で、すべての基本です。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 ...
<?php endwhile; endif; ?>

メインクエリのループ構文は、WordPressのAPIが自動的に用意するデータをループしてくれます。
用意されたデータがひとつだろうと複数だろうと問題ありません。いかなるページでも汎用的に使えます。

さきほどの投稿記事のアーカイブページでは、3つのデータが用意されていますので、メインクエリのループ構文内に記述された出力ルールが、データ数分だけ繰り返されるわけですね。

ちなみに、自動的に用意されるデータ以外のデータを取得して表示させたい場合は、メインクエリではなくサブクエリを生成することになります。

[Advanced] メインクエリのループ構文の詳細

表示に関わるであろう基本的な”投稿データ”は、WP_Queryオブジェクト $wp_query 変数の中の $wp_query->posts に配列として格納されています。投稿日時やタイトル、本文などの入力データ、パーマリンクURL、公開ステータスなどが含まれます。
メインクエリのループ構文でループ表示されるのは、WP_Queryオブジェクトの中でこの部分のデータということになります。

まとめ

以上が、まず最初に学ぶべきWordPressの本質です。

この本質をしっかり理解していれば、パーマリンクURLが指し示すページがどれか？そのページに本来必要なデータとはなにか？テンプレートの細分化プロセス、メインクエリとサブクエリの明確な使い分けなど、効率的に、かつロジカルにテーマ作成を行うことができるようになるはずです。
結果として、見通しのいいテーマ、メンセナンス性・拡張性の高いWebサイトの構築につながるのです。

WordPressをはじめるにあたっては、テーマ作成よりなにより、この仕組みの理解が最重要だと思うのですが、どのサイトにもどの書籍にもこういう部分の詳しい解説はないですねー

なので書きました。