get_template_part() に外部変数を渡したい

mimizuku

Mimizuku Advent Calendar 20日目の記事です。

get_template_part()使ってますか?僕は1ファイルの中にHTMLがごちゃごちゃ入ってコードがなが~くなってしまうのが好きじゃないので、コンポーネントごとにテンプレートを分割してget_template_part()で呼び出すようにすることが多いです。Mimizuku だとこんな感じでコンポーネントを作って呼び出して使うようにしています。

そうしていると例えばこんな部分をコーディングするとき。

3つの商品を1つのコンポーネントとしてテンプレートパーツにしてしまうと、ほとんど同じような HTML を3回書くことになります。また、他の場所で4つとかのパターンがでてきたときにまたほとんど同じような HTML を書くことになり、開発スピードも保守性も落ちてしまいます。なので各商品のブロックを1つのコンポーネントとしたいわけです。

で、そうすると問題がでてきます。get_template_part()には外部から変数を渡すような仕組みがないので、商品名部分など、動的に値を渡したくても渡せないのです。だから無理に1商品1テンプレートにしようとするとほとんど同じような HTML を商品数分作らなければいけなくなります…あぁ外部変数さえ渡せれば…

\Mimizuku\App\Tags\get_template_part()

ということでMimizuku にはget_template_part()ライクな独自関数を用意しました。ちょっと関数名が長いですが、次のように呼び出して使えます。

呼び出し側

\Mimizuku\App\Tags\get_template_part( 'template-parts/product', [
    '_image_url' => '...',
    '_title'           => '商品A',
    '_lede'           => '商品Aのリード文',
    '_summary'  => 'ここには商品Aの概要文が入ります…',
    '_href'           => '...',
] );

呼び出されるテンプレート(ここでは template-parts/product.php)

<div class="product">
    <div class="product__figure">
        <img src="<?php echo esc_url( $_image_url ); ?>">
    </div>
    <h3 class="product__title"><?php echo esc_html( $_title ); ?></h3>
    <div class="product__lede">
        <?php echo esc_html( $_lede' ); ?>
     </div>
    <div class="product__summary">
        <?php echo esc_html( $_summary ); ?>
    </div>
    <a class="product__btn" href="<?php echo esc_url( $_href ); ?>">さらに詳しく</a>
</div>

\Mimizuku\App\Tags\get_template_part( 呼び出すテンプレートのスラッグ, 外部変数の配列 )で呼び出します。外部変数の配列はキーと値の組み合わせで、呼び出し側でそのキー名を変数名として使用できます。上記のサンプルではキー・変数名に _ (アンダーバー)を付けていますが、これが外部変数を渡す仕組みにquery_varを使っているのでWP_Queryの中で使われるquery_varの名前(s とか q とか…)と重複してしまわないようにする必要があるためです。

標準準拠でいくならこんな独自関数を使わずにショートコードを使え、ということもあるのですが、ショートコードを定義するのもそれなりに面倒なのでテンプレート内でテンプレートを呼び出す程度であればこの独自関数を使ってもそれほど問題にはならないんじゃなね?という感じで…。

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく