system
篠﨑 亮洋

2022.3.9システム開発 

システムエンジニア

篠﨑 亮洋

2021年8月1日「マリンロード」は「インソースマーケティングデザイン」へ社名を変更いたしました

【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>
WEBサイト診断 現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
システム開発サービスはこちら
ページTOPへ