WordPressのモジュールテンプレートの種類と使い方覚える｜WordPressでビジネスサイトをつくろう【第8回】

前回、WordPressに用意されているテンプレートファイルの役割とよく使うファイルの使い方を解説しました。ビジネスサイトのようにフォーマットを数多く使用する場合には、効率よくテンプレートファイルを使うことによって難しいプログラムを使用しないでも簡単に複数のレイアウトを使用してサイト構築ができます。

そして今回はさらにページとしてのテンプレートではなく、パーツとしてテンプレートを分けて運用効率をあげるための
モジュールテンプレートについて解説していきます。

テンプレートファイルとモジュールテンプレート

WordPressでサイト構築をする際に役割毎に決められた名前のphpにすることで自動的に使われるファイルが決まるので、それに応じてページデザインをしていくことで条件分岐文などを使用せずに各カテゴリーや固定ページなどに個別のデザインを振り分ける事ができるという部分は前回学習しました。

【参考】
WordPressのテンプレートファイルの種類と使い方を覚える

まずはこれでサイト全体のファイルの構成をどのファイルで使用するかを決めることができます。

この作業はWordPressを初めて使用する人には是非意識してもらいたい点になります。

そして同じテンプレートという名前ですが、もう一つWordPressで作業する際には『モジュールテンプレート』についても覚えましょう。

WordPressのテンプレート階層とテンプレートファイル、モジュールテンプレートファイルを把握することで運用を意識して効率よくサイト構築をすることができます。

モジュールテンプレートの役割

WordPressのテンプレートファイルはサイトの構成によってどのファイルを使うかを考え、ページテンプレートを選びますが、これらのページテンプレート内で共通に使う部分があります。

たとえばヘッダーやフッター部分などは全サイト共通部分として使用することがあります。

そこで1ページの中でも複数のページで共有するパーツなどを分けて管理するために『モジュールテンプレート（パーツテンプレートファイル）』が用意されています。

これらをうまく使うことによって一箇所の修正でページ全体を変更することもできますので、サイト運用を効率よく行うことが可能です。

しかし、サイト設計時にどのように分けるかを考えないで構築すると収集がつかなくなりますので、作成時にしっかりとルールを決めることをおすすめします。

モジュールテンプレートの種類

モジュールテンプレートはページテンプレート同様に使用するファイル名が決まっている物と自分で自由に名前をつけることができる物があります。

これらはわかりやすいように名前が付いているので使い方に迷うことはあまりありません。

まずはファイル名の決められたファイルをみていきます。

ファイル名の決まっているモジュールテンプレートファイル

ヘッダーエリアに使用するheader.php

HTMLファイルの宣言文からヘッダーエリアに使用するファイルとして、『header.php』があります。

どこの領域までをヘッダーにするかは制作者の判断になりますが、例えばgoogleのようにロゴをイベント毎に変えたかったり、ヘッダーの装飾を変えたかったりする際には、HTML宣言文からid=”header”要素までを「header.php」内にすることによって、このファイルを修正することによってどのカテゴリー、固定ページを一括で変更することができます。

コピー用テキスト

<?php get_header(); ?>

フッターエリアに使用するfooter.php

ページ下部のフッターエリアからHTMLの閉じタグまでの最後のエリアを使用するファイルとして、『footer.php』があります。

コピーライトのみのような場合やフッターにも情報を多く入れる場合など、ページのフッター情報を一元管理する際には、id=”footer”要素とHTMLの終了タグを「footer.php」内にすることによって、このファイルを修正することによってどのカテゴリー、固定ページを一括で変更することができます。

コピー用テキスト

<?php get_footer(); ?>

サイドエリアに使用するsidebar.php

ブログや通常サイトなどで2カラムのサイトなどで、サイドの領域を使用するファイルとして『sidebar.php』があります。

メインのコンテンツのサイドにある領域を一元管理にする際には、id=”sidebar”要素などを「sidebar.php」内にすることによって、このファイルを修正することによってどのカテゴリー、固定ページを一括で変更することができます。

コピー用テキスト

<?php get_sidebar(); ?>

このように共通の要素の部分を別のphpファイルにすることによって、どのカテゴリーや固定ページでも一括管理できますのでページテンプレートと共に是非覚えたい機能になります。

またheader、footer、sidebarなどとありますが、必ずしもheaderだからヘッダーエリアしか使えないということはなく、分かりやすさのために命名されているものと思ってください。

簡単なサイトのレイアウトを例にしますと図のようにファイルを分けてページを管理させることができます。

これらは必ずしも分けなければいけないということはないのですが、テンプレートファイルだけでページを分けてしまうと共通部分の修正作業を個別に行わなければいけなるのでサイト全体を考える際に各要素のモジュール化を意識するとよいでしょう。

他にもファイル名の決まっているモジュールテンプレートがあります。

検索フォームエリアに使用するsearchform.php

ページ内にサイト内検索のフォームなどを入れる際に用意されているモジュールテンプレートとして「searchform.php」があります。

よくあるのはサイトのヘッダーエリアなどにありますが、検索結果で見つからない場合などに、「ページがみつかりませんでした」のメッセージの下に呼び出すことで、ユーザーがわざわざ上にいかなくてもすぐに別のキーワードなどで探せるので便利です。

コピー用テキスト

<?php get_search_form(); ?>

コメントエリアに使用するcomments.php

通常サイトではあまりないかもしれませんが、ブログなどで記事に対してのコメントエリアのコードをまとめるものとして「comments.php」があります。

コピー用テキスト

<?php get_comments_template(); ?>

この5つが名前が決まっているモジュールテンプレートファイルとなります。

ファイル名を自由に決められるカスタムテンプレート

さらに細かく自分専用のモジュールを作りたいということがサイト制作では多くありますが、これらは自由に名前を付けられるカスタムテンプレートというものがあります。

上の表のようにファイル名の作り方で呼び出し方が変わります。

例えば「aaa.php」というファイル名にした場合は、テンプレートファイルでもモジュールテンプレートファイルでもないファイル名になります。

このようにWordPressに用意されていないファイルも無料で配布されているテーマによく見るかと思いますが、これらはすべて制作者が任意で作成したファイルになります。

ビジネスサイトなどでも、例えば会社の住所情報や地図をいくつかの場所に載せたい場合などに一括で「access.php」などとしたり、書籍情報をまとめる物として「book.php」などと細かく分けていけば、それらをパズルのように呼び出して使用することができますし、修正の際にこれらのファイルを修正するだけですべての反映ができるので運用が楽になります。

コピー用テキスト

<?php get_template_part(‘aaa’); ?>

コピー用テキスト

<?php get_template_part(‘aaa’,’bbb’); ?>

実際の例ではこのように使うと便利です。

さきほど分けた図にカスタムテンプレートを入れるとこのようにすることも可能です。

index.phpに記述するコードはこのようになります。

それぞれのエリアを別のファイルにすることによって修正範囲をわかりやすくしたり、一括修正を容易にすることなどができます。

今回は以上になります。

WordPressのテンプレート階層とテンプレートファイルで自分のサイトに必要なページのテンプレートを決めた後は、『自分のデザインの共通になる部分』や『複数のページで表示させたい部分』などを決め、モジュールテンプレートでいつでも呼び出せるパーツ化するとサイト運用が簡単に行えますので是非サイト設計時に考えていきましょう。