WordPressプラグイン開発時にTwigでHTMLテンプレート化

WordPress PHP

WordPressプラグインの作り方を調べていると、管理画面やフロントの用のHTMLがクラス内に書かれていることが多いと思います。

HTMLの分量が少なければベタ書きでもかまわないのですが、分離したほうが可読性やメンテナンス性が向上するかなと思い、テンプレートエンジンを探してみました。

そんな中選んだテンプレートエンジンは

Twig

です。（Smartyでもたぶん出来るんでしょうけど。）

 

0.ディレクトリ構造

example-plugin-using-twig（プラグインのディレクトリ）

------- example-plugin-using-twig.php（プラグイン本体）

------- Twig（ダウンロードしたTwig一式）

------- templates（HTMLファイル格納用）

 

1.コンストラクタでTwigの設定


// テンプレート設定
if(!class_exists('Twig_Autoloader')) {
    require_once 'Twig/Autoloader.php';
}
Twig_Autoloader::register();
$loader = new Twig_Loader_Filesystem(__DIR__ . "/templates");
$this->_twig = new Twig_Environment($loader);

他のプラグインでrequire_onceしてたら怒られるので存在チェックするのがポイント

 

2.テンプレートの出力


$template = $this->_twig->loadTemplate('example-plugin-using-twig.html');
echo $template->render(array(
    'option_key' => self::PLUGIN_OPTION_KEY,
    'option_value' => $optionValue,
    'wp_nonce_field' => wp_nonce_field(self::ACTION_NAME),
));

テンプレートのhtmlを指定して、渡したい変数を配列でいれるという一般的なパターン。

 

3.HTML側


<form action="" method="post">{{wp_nonce_field|raw}}
<input name="{{option_key}}[text]" type="text" value="{{option_value}}" />
<input name="Submit" type="submit" value="保存" />
</form>

PHP側から送った変数は{{}}で取り出す。

 

以上がWordPressプラグイン内におけるTwigの使い方です。なお、Twig自体の使い方は公式のドキュメントを参考にしてください。

Documentation - Twig - The flexible, fast, and secure PHP template engine