WordPressのコンテンツエリアでTwigテンプレートエンジンを使用可能にするContent Template Engineってプラグインをリリースしました。

Content Template Engineっていうプラグインを作りました。このプラグインを使用するとコンテンツにテンプレートエンジンが使用できるようになります。

テンプレートエンジンには、Twigというテンプレートエンジンを使用しており、これはSymfonyというフレームワーク等で利用されている有名なテンプレートエンジンです。

Twigドキュメント

 

 

Advanced Custom Fieldなどのカスタムフィールド系のプラグインを使うと、投稿画面に以下のようなメタデータのユーザーインターフェースを追加することができます。

クライアントワークではとても便利なプラグインなんですが、じゃあここで入力されたデータをどう出力するかというと、おもむろにテキストエディターを開いてPHPでごにょごにょって感じじゃないでしょうか?

でもこれって一筋縄でいかないんですよね。いろいろ条件分岐が必要だったりするし。そしてコンテンツに依存するロジックをテーマに書いちゃうってのは運用としてはあまり美しくありません。

 

Content Template Engineを使うとこうなる!

このプラグインを使用すると以下のようなテンプレートタグをコンテンツ内で利用可能です。

出力はこんな感じ

この例では、Simple Mapというプラグインのショートコードをテンプレートの中に放り込んで、ACFの入力フィールドに入力された住所をGoogle Mapに変換するという技も使っています。

若干ダサいのはこのプラグインのせいではありません。

 

Content Template Engineの使い方

このプラグインを有効化すると投稿及び固定ページの編集画面の下の方に以下のようなメタボックスが追加されます。

Twigテンプレートを投稿内で使用したい場合は、一番上の”Twigテンプレートエンジンを有効化”ってチェックボックスにチェックを入れてください。

ここにチェックをいれなければ、このプラグインは何もしませんので、WordPressのパフォーマンスに影響をあたえることはほとんどありません。

 

また、WordPressのビジュアルエディターはしばしばテンプレートをぶっ壊してしまうので、それを防ぐために”ヴィジュアルエディターを無効化”というところにもチェックを入れておくと、この記事でだけヴィジュアルエディターが無効化されます。

 

ヴィジュアルエディターを無効化すると生のHTMLが出てしまうし、テンプレートエンジンとはいえロジックをクライアントに触らせたくない場合もありますよね。

そんな場合は、”コンテンツエディターをadministratorのみに表示”にチェックを入れておくといいです。

(administarator以外のユーザーではテンプレートを非表示)

 

TinyMCE Templatesとセットで使ってみる

上の例のようなテンプレートを毎回入力するのは面倒ですよね?

Content Template EngineはTwigを少し拡張していて、include_post()という関数が使えるようになっています。

この関数をテンプレートの中に記述すると指定したIDをもつ記事のコンテンツを挿入することができます。

{{ include_post( '1234' ) }}

テンプレートへの記述例は上のような感じ。

 

というわけで TinyMCE Templatesというプラグインを有効化して、さきほど書いたテンプレートをそっちに引っ越しましょう。

 

そして投稿の中に以下のように記述。

 

するとあらステキ!

先ほどと同じようにコンテンツが表示されました。

 

この方法を使うと、入力が楽になるだけじゃなくてイベントの見た目をあとからまとめて変更することも可能なので、運用がすごく楽になります!

 

Advanced Custom Fieldの設定と数行のおれおれフィルターを組み合わせるとイベントを選択するだけで、この機能が発火するなんてことも可能です。

 

※ ACFでイベントカテゴリーが選択されてた時にコンテンツエディターを非表示

 

※ the_contentフィルターで強制的にコンテンツを挿入

add_filter( 'the_content', function( $content ){
  if ( in_category( 'event', get_the_ID() ) ) {
    return '{{ include_poist( '1826' )  }}';
  } else {
    return $content;
  }
} );

 

その他のイケてる機能

出力は全て自動的にエスケープされます。

またWordPressのエスケープ関数を以下のように使うこともできます。

{{ post.post_title | esc_html }}とか{{ post.post_title | esc_attr }}とか。

https://github.com/miya0001/content-template-engine/wiki/Filters

 

テンプレートにはデフォルトで$postが渡されています。

上の例のように{{ post.post_title }}みたいな使い方をしてください。

https://github.com/miya0001/content-template-engine/wiki/Writing%20Template

 

パフォーマンスが気になる方はキャッシュ機能をフィルターフックで有効化することもできます。

add_filter( 'content_template_engine_twig_options', function( $options ){
    $options['cache'] = '/path/to/cache';
    return $options;
} );

他にもいろいろフックがあります。

https://github.com/miya0001/content-template-engine/wiki/Filter%20Hooks

 

独自の関数やフィルターを定義して有効化することもできます。

https://github.com/miya0001/content-template-engine/wiki/Develop%20your%20custom%20extension

 

セキュリティーについて

このプラグインは、サーバーへのアクセス権がない人も想定しているので、Twigの標準の関数で定数にアクセスするためのconst()関数は無効化しており、データベースのパスワード等を参照できないようにしています。

また、デフォルトでテンプレート内で利用可能な変数及び関数は必要最小限にとどめており、たとえばget_option()なども使用できません。

もし、テンプレートを記述するだけで、こんな変数やファイルが参照できちゃったんだけどまずくない?みたいなことがあればぜひ教えて下さい。