第8回 WordPressのモジュールテンプレートの種類と使い方を覚える
解説:(有)ムーニーワークス ハヤシユタカ
●テンプレートファイルとモジュールテンプレート
参考:第7回 WordPressのテンプレートファイルの種類と使い方を覚える
まずはこれでサイト全体のファイルの構成をどのファイルで使用するかを決めることができます。この作業はWordPressを初めて使用する人には是非意識してもらいたい点になります。そして同じテンプレートという名前ですが、もうひとつWordPressで作業する際には『モジュールテンプレート』についても覚えておきましょう。
WordPressのテンプレート階層とテンプレートファイル、モジュールテンプレートファイルを把握することで運用を意識して効率よくサイト構築をすることができます。
●モジュールテンプレートの役割
例えばヘッダーやフッター部分などは全サイト共通部分として使用することがあります。そこで1ページの中でも複数のページで共有するパーツなどを分けて管理するために『モジュールテンプレート(パーツテンプレートファイル)』が用意されています。これらをうまく使うことによって一箇所の修正でページ全体を変更することもできますので、サイト運用を効率よく行うことが可能です。
ただし、サイト設計時にどのように分けるかを考えないで構築すると収集がつかなくなりますので、作成時にしっかりとルールを決めることをおすすめします。
●モジュールテンプレートの種類
まずはファイル名の決められたファイルをみていきます。
●ヘッダーエリアに使用するheader.php
どこの領域までをヘッダーにするかは制作者の判断になりますが、例えばgoogleのようにロゴをイベント毎に変えたかったり、ヘッダーの装飾を変えたかったりする際には、HTML宣言文からid="header"要素までを「header.php」内にすることによって、このファイルを修正することによってどのカテゴリー、固定ページを一括で変更することができます。
「header.php」を呼び出すWordPressのテンプレートタグは『<?php get_header(); ?>』となります。
●フッターエリアに使用するfooter.php
コピーライトのみのような場合やフッターにも情報を多く入れる場合など、ページのフッター情報を一元管理する際には、id="footer"要素とHTMLの終了タグを「footer.php」内にすることによって、このファイルを修正することによってどのカテゴリー、固定ページを一括で変更することができます。
「footer.php」を呼び出すWordPressのテンプレートタグは『<?php get_footer(); ?>』となります。
●サイドエリアに使用するsidebar.php
メインコンテンツのサイドにある領域を一元管理にする際には、id="sidebar"要素などを「sidebar.php」内に設定します。こうすることによってどのカテゴリー、固定ページを一括で変更することができます。
「sidebar.php」を呼び出すWordPressのテンプレートタグは『<?php get_sidebar(); ?>』となります。
このように共通の要素の部分を別のphpファイルにすることによって、どのカテゴリーや固定ページでも一括管理できますので、ページテンプレートと共に是非覚えたい機能になります。またheader、footer、sidebarなどがありますが、必ずしもheaderだからヘッダーエリアしか使えないということはなく、分かりやすさのために命名されているものと思ってください。簡単なサイトのレイアウトを例にしますと図のようにファイルを分けてページを管理させることができます。
他にもファイル名の決まっているモジュールテンプレートがあります。
●検索フォームエリアに使用するsearchform.php
よく見るのは、サイトのヘッダーエリアなどにあるものです。検索結果で見つからない場合などに、「ページがみつかりませんでした」のメッセージの下に呼び出すことで、ユーザーがわざわざ上にいかなくてもすぐに別のキーワードなどで探せるので便利です。
「searchform.php」を呼び出すWordPressのテンプレートタグは『<?php get_search_form(); ?>』となります。
●コメントエリアに使用するcomments.php
この5つが名前が決まっているモジュールテンプレートファイルとなります。
●ファイル名を自由に決められるカスタムテンプレート
例えば「aaa.php」というファイル名にした場合は、テンプレートファイルでもモジュールテンプレートファイルでもないファイル名になります。このようにWordPressに用意されていないファイルも無料で配布されているテーマによく見るかと思いますが、これらはすべて制作者が任意で作成したファイルになります。
ビジネスサイトなどでも、会社の住所情報や地図をいくつかの場所に載せたい場合などに一括で「access.php」などとしたり、書籍情報をまとめる物として「book.php」などと細かく分けていけば、それらをパズルのように呼び出して使用することができます。また、修正の際にこれらのファイルを修正するだけですべての反映ができるので運用が楽になります。
「aaa.php」というファイル名にした場合の呼び出し方は『<?php get_template_part(‘aaa’); ?>』となります。またファイル名を「aaa-bbb.php」というファイル名にした場合の呼び出し方は『<?php get_template_part(‘aaa’,’bbb’); ?>』となります。
今回は以上になります。
WordPressのテンプレート階層とテンプレートファイルの設定で自分のサイトに必要なページのテンプレートを決めた後は、『自分のデザインの共通になる部分』や『複数のページで表示させたい部分』などを決めます。そして、モジュールテンプレートでいつでも呼び出せるようパーツ化しておくと楽にサイト運用が行えますので、是非サイト設計時に考えていきましょう。
次回は実際に作成したビジネスサイトの全ページをどのようなテンプレートファイルで作成したかについて解説していきます。
●本連載で使用しているサンプルサイトをゼロから作成できる書籍
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
【林 豊】 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)