【WordPress】テンプレート以外の共通パーツの作り方【作成から読み込みまで】

ワードプレスでは、ヘッダーやフッターは既に共通パーツとして使うことが前提になっており、それぞれファイル名や、読み込み方法が決まっています。

ただ実際ウェブサイトを制作していると、ヘッダー・フッター以外にも、共通のパーツっていろいろ出てきますよね。

えふぃ

バナーやナビゲーション、サブページのメインタイトル部分とかまさに共通パーツですよね！

そのようなヘッダーフッター以外の共通部分も、テンプレートパーツ化して一括管理することができます。

一括管理しておくとメンテナンスがとっても楽になるので、かなりありがたい機能です。

外部ファイルの読み込み方法はPHPでもincludeやrequireという類似の機能があるのですが、ワードプレスでは専用のget_template_partを使います。

get_template_part('ファイル名');

使いたくてわくわくしてきましたね！？

それでは実際にやっていきましょう！

テンプレートパーツ用のPHPファイルを作る
テンプレートパーツを読み込ませる
includeやrequireと何が違うの？

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。

それでは本文へ、レッツゴー！

テンプレートパーツ用のPHPファイルを作る

ファイル名にルールはありませんので、各自パーツにあった適切な名前のPHPファイルを作成しましょう！

ただsingle.phpなど、既にワードプレスで役割が決まっているファイル名だけは避けてください。

その作成したファイルにテンプレートパーツとなるコードをコピペして完成です。

そうですね、何か適当に試せるサンプルを用意しますね！

ファイル名を「testparts.php」にして、以下のコードをコピペしましょう

<p style="font-size: 24px; text-align: center;">見事なテンプレートパーツ<p>

これをテーマが入っているディレクトリに適当に放り込んでください。

テーマのディレクトリに直接放り込んでもいいですし、「common」や「parts」「includes」などの共通パーツ用ディレクトリを作成し、そこに入れておくと管理が楽になります。

僕は今回「parts」というディレクトリに放り込むことにしました！

えふぃ

これで舞台は整いました！

それでは、いざ何かしらのページに共通パーツを読み込ませてみましょう！

テンプレートパーツを読み込ませる

テンプレートパーツを読み込ませるのはget_template_partを使います。

① テーマディレクトリにそのまま入れた場合

<?php get_template_part('パーツのファイル名'); ?>

② パーツ用ディレクトリを作成してから入れた場合

<?php get_template_part('作成したディレクトリ名/パーツのファイル名'); ?>

つまり今回僕の作ったサンプルのパターンでいくと

<?php get_template_part('parts/testparts'); ?>

となります。

えふぃ

おや？お気づきになりました？

ここで注意点が1つ！

ファイル名の部分に.phpを書いてはいけない

ファル名を記述する部分では、.phpを書いてはいけません。

<?php get_template_part('parts/testparts'); ?>

.phpと書きたい気持ちをぐっとこらえてください。

<?php get_template_part(‘parts/testparts.php‘); ?>

はNGです。普通に読み込み失敗してしまいます。

えふぃ

それでは実際に読み込ませてみましょう！

いざ、読み込ませてみよう！

読み込ませるファイルは何でもOK

僕は今回page.php（固定ページ用のファイル）に読み込ませてみます。

<?php get_header(); ?>

<main>
    <?php if(have_posts()): while(have_posts()): the_post(); ?>

        <h1><?php the_title(); ?></h1>
        <p><?php the_time('Y.m.d'); ?></p>
        <?php get_template_part('parts/testparts'); ?>
        <div>
            <?php the_content(); ?>
        </div>

    <?php endwhile;  endif; ?>
</main>

<?php get_footer(); ?>

無駄のない洗練されたこの記述に、1匹のテンプレートが凜々しく美しく舞い降りる…。

結果がコチラです。