第3回 テンプレート階層

第3回目の今回は、「テンプレート階層」についてです。『WordPressは、画面を表示するときに、自動的にテンプレートファイルを選択し表示します。どのテンプレートが適用されるかには、WordPressのルールがあって、このルールのことを「テンプレート階層」と呼びます。』というのが一般的な説明ですが、これでは抽象的すぎてよく解りません。
ここでは、例として、実際に「カスタム投稿タイプ」を登録し、それを画面表示するときに、どのテンプレートファイルが選択されるかを実体験することにより、「テンプレート階層」の概念を直感的に理解する方法について説明します。カスタム投稿タイプは、「第1回 本サイトで目標とするカスタマイズ」で述べた「ブログ」とは別に作成する2つ目、3つ目のページのことを言います。
(カスタム投稿タイプの厳密な説明は、第5回で説明いたします。)
まず、カスタム投稿タイプを登録しするために、プラグイン「Custom Post Type UI」をインストールします。

こちらが「Custom Post Type UI」設定画面です。
・スラッグ:小文字アルファベット
・名称:漢字
で登録します。
スラッグは、データの名前にあたるもので、テンプレート階層にも関係する重要な項目です。

次に、設置画面に下の方ですが、「アーカイブあり」のところを必ず「True」にします。デフォルは「false」になっていますが、忘れずに、「true」に設定します。この設定を忘れると、メニューにアーカイブ画面(一覧形式の画面のこと)を設定することができなくなりますので、要注意です。メニューの設定については、後ほど説明します。

それでは、カスタム投稿タイプを表示してみます。ダッシュボード画面から「制作」(登録したカスタム投稿タイプの名称)を選択し、「表示」ボタンをクリックします。すると画面が表示されます。このとき適用されているテンプレートファイルは、「第2回 WordPressの仕組み」のときと同じ「single.php」です。

次にカスタム投稿タイプをメニューへ登録します。
メニューの登録は、管理画面(ダッシュボード)の「外観」-「メニュー」を選択するとメニュー設定画面に切り替わりますので、ここで、「制作」をクリックします。

すると、「最近」「すべて表示」「検索」とタブが3つ並んでいますが、ここからが重要なポイントです。
「すべて表示」タブを選択すると、一番上に「制作一覧」が表示されますので、これをチェックします。
(さきほどのカスタム投稿タイプの設定画面で、「アーカイブあり」を「false」のままにしておくと、一番上に「制作一覧」が表示されません。いくつかのWordPressの書籍には、この点がはっきりと書かれていますが、見落とすことが多いので要注意です。

最後に「メニューに追加」をクリックすると、メニューへ設定されました。これでメニューに「制作」と表示されます。

さっそく、メニューボタンををクリックします。まず表示されるのは、アーカイブ画面です。
WordPressには、画面の種類があって、基本的なものは、このアーカイブ画面(一覧画面)、シングル画面(個別画面)です。

ここで、タイトル部分をクリックすると個別表示(シングル)画面へ遷移します。

以上のことを図にまとめると、次のようになります。
・WordPressには、画面の種類(アーカーブとシングル)があって、両方とも同じデータ「creation」を表示している。
・アーカーブ画面からシングル画面へ画面遷移できる。

しかし、このままではクリアしなければならない課題があるこにきづきます。
それを絵にしたのが下図です。
シングル画面で適用されている「single.php」は、「第2回 WordPressの仕組み」のとき適用された「single.php」と同じです。
つまり、ブログ(データの名称は「post」)と制作「creation」の異なる2種類のデータを同じ画面で(同じテンプレートファイル「single.php」で)表示していることです。具体的にどういう不都合がおきるかというと、ブログの画面のサイドバー(画面の右側の領域)と同じサイドバーが「制作」の画面に表示されています。「制作」の画面には、それに即したサイドバーが表示されるべきです。

この課題をクリアするためには、カスタム投稿タイプ用のテンプレートファイルを別々に作成し、それぞれ、別々に適用されるにすることです。(下図)

次に、実際に、テンプレートファイルを別々に作成する手順について説明します。まず、「single.php」を複写してもう一つ作り、複写した「single.php」の名前を「single-creation.php」に変更します。
(※テンプレートファイルをコピーしたり名前を変更するときは、テーマのテンプレートをいじらすに、子テーマを設定して、子テーマのテンプレートファイルをコピー、すなわち、テーマのカスタマイズを行うことをお勧めします。子テーマについては、次回(第4回)のときにで説明します。)

再び画面表示してみると、今度は「single-creation.php」が適用されます。

これで、さきほど図示した関係ができあがりました。
・投稿タイプ「post」は「sigle.php」が適用される。
・投稿タイプ「creation」は「sigle-creation.php」が適用される。

この流れをもう一度、上の方からおさらいしてみると、テンプレート階層の意味が解ってきます。
カスタタム投稿タイプ「creation」を例にとると、次のようなことが言えます。
(1)「sigle-creation.php」が無いときは、「sigle.php」が適用される。
(2)「sigle-creation.php」があるときは、「sigle.php」よりも「sigle-creation.php」の方が優先的に適用される。
※逆の言い方をすれば、「sigle-creation.php」が無いとき、WordPressは自動的に「sigle.php」探しに行く。
以上が、「テンプレート階層」の優先順位(下図)の説明です。
そして、このとき重要なのが、ネーミングのルールです。「sigle-creation.php」の例のように「sigle-XXXXX.php」とすることです。XXXXXは、postネーム、すなわち、今回の例では「creation」です。このようにネーミングすることによって、カスタム投稿タイプ「creation」を画面表示するとき、テンプレートタグ「sigle-creation.php」が適用されるわけです。

この後、「sigle-creation.php」をカスタマイズし、creation用のサイドバーにする等カスタマイズを行うわけですが、それについては次回(第4回)で説明いたします。

第2回 WordPressの仕組み

WordPressの仕組みは
(1)管理画面(ダッシュボード)からデータと登録し、
(2)テンプレート(PHPで書かれたプログラム)がデータを読み込んで、HTMLに変換して画面に表示する。
というのが、基本の流れです。

管理画面(ダッシュボード)、次のような画面です。

虫ピンのマークのついた「投稿」...などと表示されているのが、データの名前です。
次にテンプレートファイルですが、
これは、コンピュータのプログラムに相当するもので、Single.php sidebar.php searchform.phpなどの名前が付けられています。

それでは、実際のWordPressのサイトで、データとテンプレートファイルが関連づけられている様子を見てみることにします。
事前の準備として、プラグイン「Show Current Template」をインストールして有効化します。

このプラグインは、使用しているテンプレートファイルの名称を画面の上部に表示してくれます。

もう一つの事例として「投稿」の場合、どのテンプレートが使われるかを見てみることにします。
投稿のダッシュボード画面の「表示」をクリックして画面表示させると、テンプレート名は「single.php」と表示されています。

以上を図に示すと次のような関係になります。
1番目の例のトップページは、データを表示する画面ではありませんので、関連するデータはありません。テンプレートファイルは、front-page.phpという名前のテンプレートファイルが自動的に選択されます。
2眼目の例は、「投稿(ブログ)」データを表示した場合の例ですが、このときは、single.phpが自動的に選択されます。どの場合にどのテンプレートファイルが選択されるかは、WordPressの決まりごとがあって、「テンプレート階層」で図示されていますが、これについては、次の回で改めて触れることにします。

―――おわり―――

参考文献

P.91 TwentySeventeenでは、「フロントページ」と「投稿ページ」を設定することができます。

第1回 本サイトで目標とするカスタマイズ

WordPressは、ブログとホームページの機能を兼ね備えたウェブサイトを作ることができるCMS(ソフト)です。
WordPressの標準テーマ「twenty seventeen」の場合、ブログと固定ページ(ホームページを作るための機能)が装備されています。
ブログとホームページとでは、下記のような役割の違いがあります。

      情報のリアルタイム性 情報の拡散度 在時間や熟読度
ホームページ    △        ×        ◎  
ブログ       〇        〇        〇

具体的な例で、説明します。
たとえば、商品のサイトの場合、商品のホームページだけでなく、商品に関連する話題などをブログで発信すると、情報が拡散し、ホームページを見に来てくれるユーザも増えるはずです。
また、スポーツチームのサイトの場合、試合の履歴をホームページで掲載するだけでなく、併せて、メンバーの感想などをブログで発信すれば、充実した内容のサイトになります。

以上のようなニーズを想定し、「WordPressカスタマイズ速習」では、下図に示す範囲を対象として、話を進めていきます。

はじめに

これまで、WordPressに関する書籍やネットに掲載されている情報をたよりに、カスタマイズの方法を独学で習得し、見よう見まねで、「古今東西散歩」を作り上げてきました。WordPressを始めた頃は、自分の知りたいことが書籍やネットのとこに書いてあるのか、どうやって探せばよいのかがわからず、ただ時間だけが過ぎていく日々でした。
2017年9月のサイト開設以来、半年が経過しましたが、振り返ると、「最初からこの情報に接していれば、もっと早く理解できたのに!」という場面がたくさんありました。そこで、この「WEB制作」では、『こうすればWordPressのカスタマイズ技法を最短で理解できる』ということを書きたいと思います。

下記のような目次で掲載予定です。

目次(予定)
はじめに
第1回 本サイトで目標とするカスタマイズ
第2回 WordPressの仕組み
第3回 テンプレートについて
第4回 データモデルによるアプローチ
第5回 投稿タイプとタクソノミー
第6回 カスタムフィールド
第7回 投稿タイプ同士で関連を持たせる