第8回 WordPressのモジュールテンプレートの種類と使い方を覚える
前回、WordPressに用意されているテンプレートファイルの役割とよく使うファイルの使い方を解説しました。ビジネスサイトのようにフォーマットを数多く使用する場合には、効率よくテンプレートファイルを使うことによって難しいプログラムを使用しないでも簡単に複数のレイアウトを使用してサイト構築ができます。今回はさらにページとしてのテンプレートではなく、パーツとしてテンプレートを分けて運用効率をあげるためのモジュールテンプレートについて解説していきます。
解説：（有）ムーニーワークス ハヤシユタカ
解説：（有）ムーニーワークス ハヤシユタカ
●テンプレートファイルとモジュールテンプレート
WordPressではサイト構築をする際に役割ごとに決められた名前のphpにすることで自動的に使われるファイルが決まります。それに応じてページデザインをしていくことで条件分岐文などを使用せずに各カテゴリーや固定ページなどに個別のデザインを振り分ける事ができる、という部分は前回学習しました。
参考：第7回 WordPressのテンプレートファイルの種類と使い方を覚える
まずはこれでサイト全体のファイルの構成をどのファイルで使用するかを決めることができます。この作業はWordPressを初めて使用する人には是非意識してもらいたい点になります。そして同じテンプレートという名前ですが、もうひとつWordPressで作業する際には『モジュールテンプレート』についても覚えておきましょう。
WordPressのテンプレート階層とテンプレートファイル、モジュールテンプレートファイルを把握することで運用を意識して効率よくサイト構築をすることができます。
参考：第7回 WordPressのテンプレートファイルの種類と使い方を覚える
まずはこれでサイト全体のファイルの構成をどのファイルで使用するかを決めることができます。この作業はWordPressを初めて使用する人には是非意識してもらいたい点になります。そして同じテンプレートという名前ですが、もうひとつWordPressで作業する際には『モジュールテンプレート』についても覚えておきましょう。
WordPressのテンプレート階層とテンプレートファイル、モジュールテンプレートファイルを把握することで運用を意識して効率よくサイト構築をすることができます。
●モジュールテンプレートの役割
WordPressのテンプレートファイルはサイトの構成によってどのファイルを使うかを考え、ページテンプレートを選びますが、これらのページテンプレート内で共通に使う部分があります。
例えばヘッダーやフッター部分などは全サイト共通部分として使用することがあります。そこで1ページの中でも複数のページで共有するパーツなどを分けて管理するために『モジュールテンプレート（パーツテンプレートファイル）』が用意されています。これらをうまく使うことによって一箇所の修正でページ全体を変更することもできますので、サイト運用を効率よく行うことが可能です。
ただし、サイト設計時にどのように分けるかを考えないで構築すると収集がつかなくなりますので、作成時にしっかりとルールを決めることをおすすめします。
例えばヘッダーやフッター部分などは全サイト共通部分として使用することがあります。そこで1ページの中でも複数のページで共有するパーツなどを分けて管理するために『モジュールテンプレート（パーツテンプレートファイル）』が用意されています。これらをうまく使うことによって一箇所の修正でページ全体を変更することもできますので、サイト運用を効率よく行うことが可能です。
ただし、サイト設計時にどのように分けるかを考えないで構築すると収集がつかなくなりますので、作成時にしっかりとルールを決めることをおすすめします。
●モジュールテンプレートの種類
モジュールテンプレートはページテンプレート同様に使用するファイル名が決まっている物と自分で自由に名前をつけることができる物があります。これらはわかりやすいように名前が付いているので使い方に迷うことはあまりありません。
まずはファイル名の決められたファイルをみていきます。
まずはファイル名の決められたファイルをみていきます。
ファイル名の決まっているモジュールテンプレートファイル （▲クリックして拡大）
●ヘッダーエリアに使用するheader.php
HTMLファイルの宣言文からヘッダーエリアに使用するファイルとして、『header.php』があります。
どこの領域までをヘッダーにするかは制作者の判断になりますが、例えばgoogleのようにロゴをイベント毎に変えたかったり、ヘッダーの装飾を変えたかったりする際には、HTML宣言文からid="header"要素までを「header.php」内にすることによって、このファイルを修正することによってどのカテゴリー、固定ページを一括で変更することができます。
「header.php」を呼び出すWordPressのテンプレートタグは『＜?php get_header(); ?＞』となります。
どこの領域までをヘッダーにするかは制作者の判断になりますが、例えばgoogleのようにロゴをイベント毎に変えたかったり、ヘッダーの装飾を変えたかったりする際には、HTML宣言文からid="header"要素までを「header.php」内にすることによって、このファイルを修正することによってどのカテゴリー、固定ページを一括で変更することができます。
「header.php」を呼び出すWordPressのテンプレートタグは『＜?php get_header(); ?＞』となります。
●フッターエリアに使用するfooter.php
ページ下部のフッターエリアからHTMLの閉じタグまでの最後のエリアを使用するファイルとして、『footer.php』があります。
コピーライトのみのような場合やフッターにも情報を多く入れる場合など、ページのフッター情報を一元管理する際には、id="footer"要素とHTMLの終了タグを「footer.php」内にすることによって、このファイルを修正することによってどのカテゴリー、固定ページを一括で変更することができます。
「footer.php」を呼び出すWordPressのテンプレートタグは『<?php get_footer(); ?>』となります。
コピーライトのみのような場合やフッターにも情報を多く入れる場合など、ページのフッター情報を一元管理する際には、id="footer"要素とHTMLの終了タグを「footer.php」内にすることによって、このファイルを修正することによってどのカテゴリー、固定ページを一括で変更することができます。
「footer.php」を呼び出すWordPressのテンプレートタグは『<?php get_footer(); ?>』となります。
●サイドエリアに使用するsidebar.php
ブログや通常サイトなどで2カラムのサイトなどで、サイドの領域を使用するファイルとして『sidebar.php』があります。
メインコンテンツのサイドにある領域を一元管理にする際には、id="sidebar"要素などを「sidebar.php」内に設定します。こうすることによってどのカテゴリー、固定ページを一括で変更することができます。
「sidebar.php」を呼び出すWordPressのテンプレートタグは『<?php get_sidebar(); ?>』となります。
このように共通の要素の部分を別のphpファイルにすることによって、どのカテゴリーや固定ページでも一括管理できますので、ページテンプレートと共に是非覚えたい機能になります。またheader、footer、sidebarなどがありますが、必ずしもheaderだからヘッダーエリアしか使えないということはなく、分かりやすさのために命名されているものと思ってください。簡単なサイトのレイアウトを例にしますと図のようにファイルを分けてページを管理させることができます。
メインコンテンツのサイドにある領域を一元管理にする際には、id="sidebar"要素などを「sidebar.php」内に設定します。こうすることによってどのカテゴリー、固定ページを一括で変更することができます。
「sidebar.php」を呼び出すWordPressのテンプレートタグは『<?php get_sidebar(); ?>』となります。
このように共通の要素の部分を別のphpファイルにすることによって、どのカテゴリーや固定ページでも一括管理できますので、ページテンプレートと共に是非覚えたい機能になります。またheader、footer、sidebarなどがありますが、必ずしもheaderだからヘッダーエリアしか使えないということはなく、分かりやすさのために命名されているものと思ってください。簡単なサイトのレイアウトを例にしますと図のようにファイルを分けてページを管理させることができます。
2カラムのサイトをモジュールテンプレートで分けた一例 （▲クリックして拡大）
これらは必ずしも分けなければいけないということはないのですが、テンプレートファイルだけでページを分けてしまうと共通部分の修正作業を個別に行わなければいけなるのでサイト全体を考える際に各要素のモジュール化を意識するとよいでしょう。
他にもファイル名の決まっているモジュールテンプレートがあります。
他にもファイル名の決まっているモジュールテンプレートがあります。
●検索フォームエリアに使用するsearchform.php
ページ内にサイト内検索のフォームなどを入れる際に用意されているモジュールテンプレートとして「searchform.php」があります。
よく見るのは、サイトのヘッダーエリアなどにあるものです。検索結果で見つからない場合などに、「ページがみつかりませんでした」のメッセージの下に呼び出すことで、ユーザーがわざわざ上にいかなくてもすぐに別のキーワードなどで探せるので便利です。
「searchform.php」を呼び出すWordPressのテンプレートタグは『<?php get_search_form(); ?>』となります。
よく見るのは、サイトのヘッダーエリアなどにあるものです。検索結果で見つからない場合などに、「ページがみつかりませんでした」のメッセージの下に呼び出すことで、ユーザーがわざわざ上にいかなくてもすぐに別のキーワードなどで探せるので便利です。
「searchform.php」を呼び出すWordPressのテンプレートタグは『<?php get_search_form(); ?>』となります。
モジュール化することで簡単に別の場所に設置することができます （▲クリックして拡大）
●コメントエリアに使用するcomments.php
通常サイトではあまりないかもしれませんが、ブログなどで記事に対してのコメントエリアのコードをまとめるものとして「comments.php」があります。「comments.php」を呼び出すWordPressのテンプレートタグは『<?php get_comments_template(); ?>』となります。
この5つが名前が決まっているモジュールテンプレートファイルとなります。
この5つが名前が決まっているモジュールテンプレートファイルとなります。
●ファイル名を自由に決められるカスタムテンプレート
さらに細かく自分専用のモジュールを作りたいということがサイト制作では多くあります。これらは自由に名前を付けられるカスタムテンプレートというものを利用するといいでしょう。
自由なファイル名でいくつでもモジュール化（パーツ化）することができます （▲クリックして拡大）
上の表のようにファイル名の作り方で呼び出し方が変わります。
例えば「aaa.php」というファイル名にした場合は、テンプレートファイルでもモジュールテンプレートファイルでもないファイル名になります。このようにWordPressに用意されていないファイルも無料で配布されているテーマによく見るかと思いますが、これらはすべて制作者が任意で作成したファイルになります。
ビジネスサイトなどでも、会社の住所情報や地図をいくつかの場所に載せたい場合などに一括で「access.php」などとしたり、書籍情報をまとめる物として「book.php」などと細かく分けていけば、それらをパズルのように呼び出して使用することができます。また、修正の際にこれらのファイルを修正するだけですべての反映ができるので運用が楽になります。
「aaa.php」というファイル名にした場合の呼び出し方は『<?php get_template_part(‘aaa’); ?>』となります。またファイル名を「aaa-bbb.php」というファイル名にした場合の呼び出し方は『<?php get_template_part(‘aaa’,’bbb’); ?>』となります。
例えば「aaa.php」というファイル名にした場合は、テンプレートファイルでもモジュールテンプレートファイルでもないファイル名になります。このようにWordPressに用意されていないファイルも無料で配布されているテーマによく見るかと思いますが、これらはすべて制作者が任意で作成したファイルになります。
ビジネスサイトなどでも、会社の住所情報や地図をいくつかの場所に載せたい場合などに一括で「access.php」などとしたり、書籍情報をまとめる物として「book.php」などと細かく分けていけば、それらをパズルのように呼び出して使用することができます。また、修正の際にこれらのファイルを修正するだけですべての反映ができるので運用が楽になります。
「aaa.php」というファイル名にした場合の呼び出し方は『<?php get_template_part(‘aaa’); ?>』となります。またファイル名を「aaa-bbb.php」というファイル名にした場合の呼び出し方は『<?php get_template_part(‘aaa’,’bbb’); ?>』となります。
カスタムファイルの呼び出しのテンプレートタグ
（▲クリックして拡大）
細かくモジュール化してサイト全体を効率よく
運用することが可能 （▲クリックして拡大）
実際の例ではこのように使うと便利です。また、さきほど分けた図にカスタムテンプレートを入れるとこのようにすることも可能です。
index.phpには直接書かずにすべてモジュール
テンプレート内にした例 （▲クリックして拡大）
index.phpに各テンプレートファイルを呼び出した
コード （▲クリックして拡大）
index.phpに記述するコードはこのようになります。それぞれのエリアを別のファイルにすることによって修正範囲をわかりやすくしたり、一括修正を容易にすることなどができます。
今回は以上になります。
WordPressのテンプレート階層とテンプレートファイルの設定で自分のサイトに必要なページのテンプレートを決めた後は、『自分のデザインの共通になる部分』や『複数のページで表示させたい部分』などを決めます。そして、モジュールテンプレートでいつでも呼び出せるようパーツ化しておくと楽にサイト運用が行えますので、是非サイト設計時に考えていきましょう。
次回は実際に作成したビジネスサイトの全ページをどのようなテンプレートファイルで作成したかについて解説していきます。
●本連載で使用しているサンプルサイトをゼロから作成できる書籍
本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
Profile
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
