初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
WordPress

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

【WordPress】テンプレートパーツ 共通部分をテンプレート化しよう!

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

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

えふぃ

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

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

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

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

get_template_part('ファイル名');

使いたくてわくわくしてきましたね!?

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

サンプルコードの使い方

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

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

テンプレートパーツ用の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匹のテンプレートが凜々しく美しく舞い降りる…。

結果がコチラです。

はい、成功しました!

テンプレートパーツはどこでも何度でも呼び出せます

えふぃ

同ファイルに3回連続で読み込ませると「見事なテンプレートパーツ」の文字が3連続で出てきます!

includeやrequireと何が違うの?

冒頭で、PHPにはincludeとrequireといった類似機能があると言いました。

じゃあ別に最初からそれでよくね?

って感じですよね。

ワードプレス専用のget_template_partでは少しコスパ悪い感ありますよね。
シンプルに覚えること増えますし。

ご安心を!しっかりワードプレス特有の機能を持っています!

get_template_partの存在意義
  1. 親テーマに同名ファイルがある際、子テーマのファイルを優先する
  2. フックを使うことができる

???」って思われた方、それでいいです。

正直現段階では、気にするべきことではありません

これ以上にもっと大事な学ぶべきことがたくさんあります。

何かよくわからんけどとりあえずget_template_partを使うべき

でOKです。

ちなみにincludeとrequireの違いは別記事で紹介しています。

PHPも並行して学習されている方は、絶対に知っておきたいことです。

今日もあなたが夢に向かって一歩前進できていますように。
お疲れ様でした。