WordPressのプラグイン開発でHTMLテンプレートを使う

WordPressのプラグイン開発を行う際、表示するHTMLがプラグインのソースにあると非常に管理しづらいです。
そこで通常はPHPテンプレートエンジンを利用します。

候補としてはSmarty、Twig、Bladeの３つがあります。
Smartyに関しては20年前から利用しており、使い勝手はわかっているのですが、どうやら最近は更新も行われるWordPressのプラグインでは利用されていないようです。
Bladeも以前試しましたが、自前に利用するにはいいのですが、公開プラグインとして配布することを考慮すると導入が面倒になりそうです。
残りはtwigです。調べてみるとTimberというプラグインを導入すると他のプラグインからTwigが利用できるようです。早速導入しています。

Timberの導入

Timberはプラグインの追加で検索してインストール後有効にするだけです。
特にプラグイン側での設定は不要のようです。

Twigを自前のプラグインから利用する

自前プラグインの最初に下記classを追加します。

class My_Twig {

   public function __construct() {
        // Timberの存在を確認するアクションを定義
        add_action( 'plugins_loaded', array( $this, 'check_timber_plugin' ) );
    }

    // Timberプラグインがインストールされているか確認
    public function check_timber_plugin() {
        if ( class_exists( 'Timber' ) ) {
            // テンプレートフォルダを指定
            Timber::$dirname = array( 'my-custom-templates', 'templates' ); // カスタムディレクトリとテーマフォルダ内のtemplatesを指定
        } else {
            // Timberがインストールされていない場合の管理画面通知
            add_action( 'admin_notices', array( $this, 'show_timber_missing_notice' ) );
        }
    }

    // Timberがない場合のエラーメッセージ表示
    public function show_timber_missing_notice() {
        echo '<div class="error"><p>Timberプラグインがインストールされていません。</p></div>';
    }

    // キャッシュを無効化する
    public function disable_cache() {
        add_filter( 'timber/twig/environment/options', function( $options ) {
            $options['cache'] = false; // キャッシュを無効化
            return $options;
        });
    }

    // テンプレートのレンダリングを行う
    public function render_template( $template_name, $context = array() ) {
        // Timber経由でTwigテンプレートをレンダリング
        Timber::render( $template_name, $context );
    }
}

テンプレートの保存フォルダやキャッシュ関連設定です。
開発時はキャッシュは無効にしておかないと修正が反映されません。

実際に利用する

プラグインもclassで作るので最初に上記クラスをインスタンス化しておきます。

 $this->my_twig = new My_Twig();

テンプレートの呼び出しと表示は下記のように指定します。

echo $this->my_twig->render_template('admin-user-search.html', ['para'=>$para,'config'=>$config]);

変数は配列で渡します。

テンプレートはプラグインフォルダの配下にtemplateというフォルダを作成し、そこのファイルをつくります。

変数は　{{変数名}}　というルールです。
配列はピリオドで区切ります。
例：{{para.keyword}}

あとは得ある制御として条件式や繰り返しですね。

条件式
{% if config.options.select_label1 %}
条件に合致した際の表示HTML
{% endif %}

繰り返し（配列の値の数だけ繰り返す）
{% for item in config.select.select_value1 %}
<option value=”{{ item }}” {% if item == para.select1 %}selected{% endif %}>{{ item }}
</option>
{% endfor %}

<div>

	<input type="text" name="keyword" placeholder="キーワード" value="{{para.keyword}}" />
	{% if config.options.select_label1 %}
	<label>{{config.options.select_label1}}</label>:
	<select name="select1">
		<option value="" {% if select1 is empty %}selected{% endif %}>未選択</option>
		{% for item in config.select.select_value1 %}
		<option value="{{ item }}" {% if item == para.select1  %}selected{% endif %}>{{ item }}
		</option>
		{% endfor %}
	</select>
	{% endif %}
</div>

SmartyやBladeと比べて

Twigは表示に特化しており、環境変数やPOST値、GET値もいちいち渡して上げる必要があります。
表示フィルターは日付や数字など基本的なものはありますので大丈夫です。
独自関数などはほとんどないです。
ただし、自作は可能です。
$twig ->addFilter($filter);でフィルターの追加が可能です。
頻繁に使うものは作ってしまったほうがいいでしょう。

SmartyやBladeと比べてかなりシンプルなテンプレートエンジンです。
それでもプラグインのソースはものすごく見やすくなります。
HTML部分だけ分けてインクルードして行っているケースも多そうですが、私はテンプレートエンジンの方がやりやそうそうです。