WordPressのテンプレートファイルの仕組みを理解したい後編

皆さんこんにちは、webデザイナーのハナフサです。

前回の記事では、テンプレートファイルが何に使われているのかと、WordPressのテンプレートについてまとめました。今記事では、テンプレートファイルが適用されるまでの仕組みや、テンプレートファイル内のHTML構造が共通のまま、投稿のコンテンツが入る仕組みなどの説明をしていきます。

この記事の内容

1 テンプレートファイル
2 テンプレートタグ
3 テンプレートの構造
4 おわりに

テンプレートファイル

テンプレートファイルはHTMLを生成するPHPファイルです。ファイルに記述したPHPスクリプトでHTMLを生成し、ブラウザにページが出力されます。

テンプレートファイルは種類が異なるページを出力するために、WordPressがそれぞれ定めた役割があります。

例えば、個別投稿のブログページを出力するsingle-post.phpやsingle.php、固定ページを出力するpage.phpなどがあります。また、存在しないページにアクセスした時に404(Not Found)を表示する役割の404.phpなどもあります。

またテンプレートファイルは優先順位があります。

例として、個別投稿のブログページを出力する場合、single-post.phpがあればそれが適用され、なければsingle.phpが適用され、それもなければsingular.phpが適用され、更にそれもなければ最終的にindex.phpが適用されます。

このように、役割と優先度によってどのテンプレートファイルを適用するか決定されます。

index.phpは全ての種類のページに適用できるテンプレートファイルです。他にテンプレートファイルがなければindex.phpが適用されます。index.phpは必ず用意しなければなりません。

これらの役割と優先順位をまとめたものをテンプレート階層といいます。詳細なテンプレート階層の概観図がWordPressの公式サイトに用意されているのでご覧ください。

テンプレートタグ

WordPressのテンプレートファイルは、PHPのスクリプトを使います。

テンプレートタグは、WordPressが独自に定義したPHP関数です。このテンプレートタグを実行すると、投稿データのタイトルや文章などの値を出力することができます。

次の投稿データにテンプレートを適用すると下のように出力されます。

タイトル	本文	アイキャッチ画像url	公開時刻	タグ
温泉に行きたい	温泉に浸かってリラックスしたいな	`https://hotspring.jpg`	2100年01月01日	温泉,サウナ

the_title()は投稿のタイトルを出力するタグで、the_content()は本文を出力するタグ、the_time()は公開時刻を出力するタグです。

<!-- テンプレートタグを用いたテンプレートファイル -->
<div class="post">
    <h2><?php the_title(); ?></h2>
    <p><?php the_content(); ?></p>
    <p><?php the_time('Y年n月j日'); ?></p>
</div>

<!-- 出力した結果 -->
<div class="post">
    <h2>温泉に行きたい</h2>
    <p>温泉に浸かってリラックスしたいな</p>
    <p>2100年01月01日</p>
</div>

テンプレートの構造

通常、Webサイトには各ページで共通する部分があると思います。例えばヘッダーやフッターなどの部分です。共通する部分は専用のファイルを作成し、部品として扱うことができます。この部品のことをテンプレートパーツといいます。

テンプレートパーツは、他のテンプレートファイルからインクルードタグで出力することができます。その際、テンプレートパーツ内に記述したテンプレートタグも実行されます。

インクルードタグのget_header()は、header.phpを出力します。get_footer()は、footer.phpを出力します。
またget_template_part( 'news' )でnews.phpを出力するような、引数でテンプレートパーツを指定するインクルードタグもあります。こちらにインクルードタグ一覧が記載されているので参考にしてみてください。

<!-- header.php -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <?php wp_head(); ?>
</head>
<body>
    <header>メニュー</header>
    <article>

<!-- footer.php -->
    </article>
    <footer>Copyright © KOMARI Co.,Ltd.</footer>
    <?php wp_footer(); ?>
</body>
</html>

<!-- home.php -->
<?php get_header(); ?>
        <div>
            <h1>トップページ</h1>
            <h2>お知らせ</h2>
        </div>
<?php get_footer(); ?>

<!-- home.phpを出力した結果 -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>KOMARI</title>
    <!-- 中略 -->
    <script src="https://komari.co.jp/komari.js"></script>
</head>
<body>
    <header>メニュー</header>
    <article>
        <div>
            <h1>トップページ</h1>
            <h2>お知らせ</h2>
        </div>
    </article>
    <footer>Copyright © KOMARI Co.,Ltd. All Rights Reserved.</footer>
    <script src="https://komari.co.jp/hotspring.js"></script>
    <!-- 中略 -->
    <script src="https://komari.co.jp/sauna.js"></script>
</body>
</html>

wp_head()とwp_footer()は、WordPressサイトに必要なリンクなどの情報を出力するテンプレートタグです。wp_head()は<head>~</head>の中、wp_footer()は</body>の直前に記述します。

このような感じで、header.phpとfooter.phpをhome.phpから出力できます。

もし、ヘッダーの修正が必要になったとしても、テンプレートファイルからget_header()で出力しておけば、header.phpのみ修正すればいいので便利ですね。