皆さんこんにちは、webデザイナーのハナフサです。
前回の記事では、テンプレートファイルが何に使われているのかと、WordPressのテンプレートについてまとめました。今記事では、テンプレートファイルが適用されるまでの仕組みや、テンプレートファイル内のHTML構造が共通のまま、投稿のコンテンツが入る仕組みなどの説明をしていきます。
テンプレートファイル
テンプレートファイルは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
のみ修正すればいいので便利ですね。
おわりに
前編と後編に分けてテンプレートファイル周りの仕組みなどを紹介しました。後は、ループについて理解したらWordPressのテーマが制作できると思います。今後その辺りについて記事にできたらと考えています。