2022-03-22

モジュールとしてパーツを切り出しテンプレート化して再利用する

今回は、サイト共通で使用するパーツを切り出して再利用するため、モジュール化の方法をご紹介します。

ヘッダーやフッター、サイドバーなどは、サイト全体を通して各ページ共通である事が多くモジュール化して1箇所で管理すれば保守性が高まります。WordPressでも標準テンプレート機能として用意されています。
上記のような標準モジュール以外にもカスタムモジュールを作成し利用することが可能です。複数ページで呼び出しが必要な部分は切り出して使い回しましょう。

WordPressに標準で用意されているモジュール

WordPressには標準で下記のモジュール化機能が用意されています。

• ヘッダー(header.php)
• フッター(footer.php)
• サイドバー(sidebar.php)

上記のモジュールについては表示するための専用関数が用意されています。index.php、single.php、category.phpなどのメインファイルで、それぞれ対応する下記の関数を記述することでモジュールを読み込み表示がされます。

• ヘッダー…get_header()
• フッター…get_footer()
• サイドバー…get_sidebar()

読み込みの記述を行えば、読み込みファイルの変更のみで全てのページの表示を変更できるので保守性、効率性が各段に向上します。

また、モジュールはPHPファイルなのでプログラミング構文が使用できます。
特定のページではモジュールを表示しない、モジュール内の表示項目を条件で分けるなど、様々な処理が可能となりコンテンツの柔軟性もアップします。

モジュールを作成しテンプレート化

まず、PHPでテンプレートファイルを作成します。テンプレート化するコードを切り出して.php形式で保存します。
下記はお問合せ先の電話番号の表示とお問合せフォームのリンクをまとめたブロックです。

モジュールファイルの作成

contact.phpという名前でモジュールファイルを作成しました。

モジュールファイルは、テーマフォルダ直下に保存します。単一ファイルで保存してもいいですが、今後モジュールファイルが増えるようでしたら、モジュールファイル用のディレクトリを作成したほうが管理し易いと思います。
ディレクトリ名は任意で構いませんが、module、template、elementsなど、一目して分かる名前が望ましいです。
ちなみにですが、わたしは_elementsと、アンダーバーを頭に付けて運用しています。

theme/_elements/contact.php

contact.php

<div class="contact">
<h3>お問合せはこちら</h3>
<p class="tel"><a href="tel:03-0000-0000">03-0000-0000</a></p>
<p class="mail"><a href="form.php">フォームで問合せ</a></p>
</div>

モジュールファイルの読み込み

先ほどテンプレート化したモジュールファイルを、表示したい場所で呼び出します。表示にはget_template_partという関数を使用し、引数に先ほど作成したファイルを指定します。タグを埋め込んだ場所にcontact.phpが表示されます。

<?php get_template_part('_elements/contact');?>

上記の例では、_elementsというフォルダの中のcontact.phpを、get_template_part関数で呼び出しています。

※引数にファイル名を指定しますが、拡張子.phpは付けないことに注意してください。

まとめ

複数ページ毎に記述をするかたちで使用しているブロックがあれば、テンプレートを作成しモジュール化しましょう。保守性が格段に向上することが実感できると思います。

なお、記事内ではPHPスクリプトを実行できないので、今回のようなget_template_part関数を使用したモジュールの読み込みができません。混同しないようご注意ください。記事内でPHPコードを実行するには、別途プラグインを使用するか、デフォルトで用意されている仕組を用いるのであればショートコードを使用しましょう。

記事内でファイルを読み込む方法については、機会があれば別途ご紹介したいと思います。