WordPressによるWEBサイト開発2 – テンプレート階層とテンプレートタグ

WordPressを使った企業サイト開発のためには、テーマを構成するテンプレートファイルの構成、ページを構築するHTMLタグの書き方、テーマの中で使用される関数の分類、そしてテーマの見た目を装飾するスタイルシートの書き方についての理解が必要になります。

テンプレートファイルの構成

子テーマフォルダのstyle.cssから親テーマフォルダを指定

WordPressテーマを導入すると、テーマスタイルシートstyle.css(必須スタイルシート)に、コメント形式でテーマの説明を書く必要があり、なかでも「Theme Name」にテーマ名の記述が必須です。
wordpress
冒頭の「@charset 文字コード」は、外部スタイルシートの文字コードを指定します。

テーマフォルダ内に「screenshot.png」という名前でテーマのスクリーンショットを配置すると、管理画面の「テーマ」の中で表示されます。

テーマをインストールしたら、まず最初に親フォルダと同じ階層に、子テーマ用のフォルダを「親フォルダ名-child」という名前で作成し、親テーマからコピーしてきたテーマスタイルシートstyle.css のTemplateパラメータに親テーマディレクトリを指定します。

親テーマのスタイルシートを引き継ぐ場合には「@import url(‘../親テーマフォルダ名/style.css’)」を記述します。

テンプレートファイルのカスタマイズ

テーマのテンプレートファイルは、PHPファイルとスタイルシートから構成され、「wp-content/themes」内のテーマフォルダに格納されます。

テーマ用のPHPファイルの中に、1人だけ拡張テーマ関数を集めたfunctions.phpという色違いが居り、これがwp-includes内の関数ファイルと同様に、自動的にWordPressの初期化中にロードされ、WordPressの拡張インターフェイスのような機能を果たします。

テンプレートファイルをカスタマイズする場合は、子テーマフォルダ内に同名でコピーしたファイルをカスタマイズすることにより、先に読み込まれる親テーマのテンプレートファイルを、後に読み込まれる子テーマのテンプレートファイルが上書きします。

ただしfunctions.phpだけは、親のfunctions.phpより先に読み込まれるので、子テーマフォルダにコピーしただけでは上書きされず、同じ関数名だとエラーになるので、子テーマ側の関数名を変えて優先度を上げます。

この例では親の関数の優先度が999なので、子の関数は1000に上げることにより、親関数の後に子関数(_yama付き)を呼びます(優先度の大きいものが後に呼ばれる)。

親テーマのfunctions.phpの関数(抜粋の長さは100)

子テーマのfunctions.phpの関数(抜粋の長さを80に変更する)

WordPressのテンプレート階層

WordPressによるWEBサイトの開発は主にテーマとプラグインの開発であり、このとき「ベーステンプレート」「モジュール」「パーツテンプレート」などの定義が曖昧な言葉が登場します。

ベーステンプレートは、WordPressがテーマごとに表示を替えるための下地になります。

  1. front-page.php ⇒ home.php ⇒ index.php : トップページ
  2. single-投稿タイプ.php ⇒ single.php : 個別ページ
  3. カスタムテンプレート名.php ⇒ page-スラッグ.php ⇒ page.php : 固定ページ
  4. category-スラッグ ⇒ category.php : カテゴリー
  5. search.php : 検索結果
  6. archive-投稿タイプ.php ⇒ archive.php : アーカイブ
  7. 404.php : 見つかりません

存在しないファイルに対するリクエストがあった場合、サーバーはレスポンスとしてHTTPステータス404を返しますが、このときブラウザ規定の「ページが見つかりません」というそっけないメッセージよりも、テーマが装備する一体感のある404.phpを表示するほうが親切です。

すべてのテーマテンプレートの階層の最下位にindex.phpがあり、とりあえずはテーマフォルダ直下に最低限index.phpとstyle.cssの2つが存在していればテーマとして成立します。

index.phpはすべてのテンプレートの最大公約数的記述をするところであり、ドメインのルートディレクトリに配置するindex.phpというファイルが「URLの後ろにファイル名を指定しない場合にデフォルトで開くトップページ」を意味するとは異なるため、サイトのトップページ用のテンプレートとしてhome.phpまたはfront-page.phpが用意されています。

企業サイトの場合、トップページ、会社案内ページ、商品紹介ページなど、内容に応じて固定ページ作成時にカスタムテンプレートで1カラムにしたり2カラムにしたり、フォーマットのレイアウトを変えるのが一般的です。

ページを構築するHTMLタグ

テンプレートに記述するHTMLタグには、大きく分けてページ定義タグ、構造化タグ、divタグの3種類があります。

ページ定義タグで大枠のページ構成を定義し、bodyタグ内の構造化タグ(HTML5準拠)やdivタグによって、WEBサイトを「ヘッダー領域」「サイドバー領域」「コンテンツ領域」「フッター領域」の4ブロックに区切ります。

WordPress

パーツテンプレート(モジュールテンプレート)であるheader.phpにはHTMLヘッダーとbody内のヘッダーセクションが、footer.phpにはWEBサイトのフッター部分が保存されます。

テンプレートタグ(WordPress関数)の分類

WordPressのテンプレートであるPHPファイルから実行できる関数はテンプレートタグをも呼ばれ、ベーステンプレートからパーツテンプレートをインクルードするパーツ呼び出しタグ、WordPressの一般設定などの基本情報を表示するbloginfoタグ、WordPressループの条件として使うループタグ、ループの中で投稿やページの情報を表示するデータ取得タグ、bodyタグやarticleタグのid属性やclass属性の値をページの種類によって変えるid属性タグやclass属性タグ、wpタグに分類されます。

get_タグ(パーツ呼び出しタグ)

ベーステンプレートであるfront-page.phpまたはhome.phpまたはindex.phpから「テンプレートタグ名(‘パラメータ’)」形式のテンプレートタグでheaderやfooterなどのパーツテンプレートを呼び出してWEBサイトを構成していきます。

関数の引数は複数パーツを持たせるためのサフィックス(接尾辞)みたいなものです。

ヘッダー、フッター、サイドバーが呼び出すパーツの代表格ですが、これ以外にも以下のようなパーツ呼び出し用のテンプレートタグがあります。

カスタムテンプレート呼び出し関数get_template_part()の、第一引数であるファイル名(スラッグ)は必須で、第二引数であるサフィックス(接尾辞)は任意です。

yama-01.phpというファイル1個しかなければ、get_template_part(‘yama-01’)でいいのですが、この場合yama.phpというファイルを探してくれません。

get_template_part(‘yama’, ’01’)にしておけば、最初にyama-01.phpを探して、なければyama.phpを探してくれるので、今後yama-02.php以降が必要になる場合に汎用性が出てきます。

bloginfoタグ(一般タグ)

bloginfoタグでは管理画面で設定したサイトの基本情報を表示できます。

have_タグとis_タグ(条件分岐タグ)

PHPコード「while{~}」はテンプレートタグ「while:~endwhile」と同じ意味であり、PHPコード「if(){~}」はテンプレートタグ「if():~endif」と同じ意味であり、WordPressテンプレートタグではifやelseやwhileなどの条件文の後ろをコロンで締め、条件部分を視覚的に分かりやすくすることができます。

HTMLの中にPHPを埋め込むWordPressテーマのテンプレートファイルではコロン締め、functions.phpのようなPHPだけの記述の際は通常の{}で書きます。

PHP的書き方

WordPressテンプレートタグ的書き方

「if(have_posts()):」でエントリーが存在すれば「while(have_posts()):」でエントリーが存在する限りループし、「 the_post();」で投稿情報をグローバル変数$postから取得し、「the_title();」タイトルと「the_content();」コンテンツを表示します。

無限ループにならないのは、the_post()を実行するたびに、$postに格納された投稿を取り出すと同時に削除するからであり、投稿が空になるとhave_post()がfalseになり、ループが終了します。

have_posts()以外に条件分岐用のテンプレートタグとしてis_タグがあります。

the_タグ(ループの中で使うタグ)

条件分岐のwhileで繰り返しているときの記事情報を、DBのデータから読み込み表示するタグです。

上記のthe_title()とthe_content()以外にエントリー取得用のループ内で使うテンプレートタグは以下のようなものがあります。

あたりまえですが、DBから取得するのはコンテンツだけなので、CSSのための開始終了タグは別途定義する必要があります。

またthe_time()はループの中で使用する必要があるとCodexに明記されているにもかかわらず、日付アーカイブページのタイトル表示に使用します。

本来ならwp_title()で表示できるべきですが、表示される日付フォーマットが日本語対応が不十分であるため、代用としてthe_time()を使用します。

id属性タグとclass属性タグ

上述のようにWordPressはページの種類ごとに表示を替えるためのテンプレートが分かれており、ヘッダやフッタなどはパーツテンプレートとして分割管理します。

パーツテンプレートであるheader.phpのbodyタグのクラス属性をページの種類のよって変化させるのがbody_class()関数であり、このフロントページの例ではログイン中の場合はhomeやlogged-inやadmin-barなど使いそうもないやつまでゾロゾロくっついています。

ちなみに個別記事はsingle、アーカイブはarchive、カテゴリーにはcategoryになります。

WordPressループの中で投稿の種類によってクラス属性を変化させるのがpost_class()関数です。

wp_タグ

wp_title()は現在表示しているページのタイトルで、個別記事なら投稿タイトル、カテゴリアーカイブページならカテゴリ名となります。

連想配列である引数$argsに値をセットし、表示のされかたを調整します。

カスタムメニュー表示も同じように引数で調整します。

WordPressテーマ開発のルールとして、headタグ内にwp_head関数を、footerタグ内にwp_foot関数を記述しておきます。

テーマの利用者がインストールするプラグインにはwp_head関数やwp_footer関数によって呼び出されるものもあり、ヘッダー読み込み時やフッター読み込み時に、実行させたいプラグインを開発できるようになります。

wp_enqueue_script(‘スクリプトのハンドルネーム’)関数で、JavaScriptをプラグインごとの重複読み込みを回避し、適切なタイミングで読み込みます。

スタイルシートによるページ装飾

スタイルシートはheadタグ(header.php)内に、テンプレートルートからCSSを指定します。

WEBサイトが複雑になってくるとstyle.cssが大きくなるので、ベースのスタイルはbase.cssと分ける場合がありますが、ベースに明確な定義があるわけではありません。