2022.03.09 システム
【WordPress】テンプレート作成時の共通化で覚えておくべきポイント
こんにちは。
今回はWordPressでテンプレートを作成する際のパーツ共通化について、覚えておくと良いポイントをご紹介いたします。
ヘッダ・フッタの共通化
よくある共通化のパターンとしては「header.php」「footer.php」を用意して、以下のような構成でページを作成する方法です。
page-sample.php
<?php
// ページ共通のヘッダを読込
get_header();
?>
<section>
※各ページ固有の要素を配置
</section>
<?php
// ページ共通のフッタを読込
get_footer();
?>
「get_header」「get_footer」の関数呼び出しの記述で、対象のページにヘッダおよびフッタの内容がロードされます。
ヘッダ、フッタは基本的にどのページでも同じ内容を表示する為、このような形で作成することが多いかと思います。
ページ共通の部品は別ファイルに切り出す
共通要素がヘッダ、フッタのみであれば上記の構成で事足りますが
実際にサイトを構築するときは、ページの途中でも共通化したい要素が発生するケースがあるかと思います。
例). 最新情報の表示エリア、お問い合わせ用のバナー 等
上記例の「最新情報の表示エリア」をパーツ化する場合、以下のような構成で作成します。
information.php
<ul class="information">
<li>最新情報：1件目</li>
<li>最新情報：2件目</li>
</ul>
page-sample.php
<?php
get_header();
?>
<section>
※各ページ固有の要素を配置
<?php
// 最新情報パーツの読込
get_templete_part('information');
?>
</section>
<?php
get_footer();
?>
get_templete_part(‘information’)を記載したページには「information.php」で記載した内容がロードされます。
複数のページで同じものを表示したい際はパーツ化しておくことで、何らかの修正が入った場合でも個々のページ単位に修正するのではなくまとめて修正ができますね。
＜補足＞
get_templete_partには第3引数にパラメータを渡すことができる(※WordPress 5.5以降)ので
動的に出力したい要素がある際は以下のような使い方となります。
page-sample.php
<?php
// 最新情報パーツの読込(パラメータ付き)
get_templete_part('information', null, array('foo' => $foo, 'bar' => $bar));
?>
information.php
<?php
// 呼び出し元ページから渡されたパラメータを受け取る
// ※渡されたパラメータは「$args」に格納されている
$foo = $args['foo'];
$bar = $args['bar'];
?>
<ul class="information">
<li>最新情報：<?php echo $foo; ?></li>
<li>最新情報：<?php echo $bar; ?></li>
</ul>
