PHPでプログラムを作っていると、HTMLをソースの中に入れるのはかなり抵抗がある。
テンプレートの中ならまだいいけど、プラグインの関数内にHTMLを記述するのはかなり気になってしまう。
そこでPHPテンプレートを導入してVIewファイルを分けてしまおうと考えた。
PHPのフレームワークLaravelで利用されているBladeがそのまま使えそうなので調べてみた。
プラグインを入れるパターンとComposerで導入するパターンがあるようだが、今回は自前のプラグイン内で利用するため、Composerで導入する。
Bladeのインストール
あまり情報が見つからなかった。
こちらが参考になった。
https://www.hypertextcandy.com/wordpress-theme-development-for-laravel-develper
早速インストール。自前プラグインが入っているフォルダに移動して
インストール：> composer require jenssegers/blade
テンプレートを入れるフォルダを作成
> mkdir views
キャッシュフォルダを作成
> cache
gitでソース管理している場合はキャッシュフォルダを同期の除外化
> touch cache/.gitignoreプラグインのphpにて設定
テーマファイルで行う場合はfunction.phpかな。
プラグインの本体の前半に
require_once(__DIR__ . '/vendor/autoload.php');
use Jenssegers\Blade\Blade;
if (!function_exists('render_blade')) {
function render_blade($template_name)
{
$blade = new Blade(__DIR__ . '/views', __DIR__ . '/cache');
return $blade->make($template_name);
}
}
を追加。
これでプラグインからは
$HTML=render_blade(‘テンプレート名’);
みたいな感じで$HMTLにレンダリングされます。
テンプレートファイルと呼び出し
Laravelを利用していると当たり前のルールですが、
テンプレートファイルが views/hoge.blade.php だとすると
呼び出し側は render_blade(‘hoge’);となります。「blade.php」は不要なので注意が必要です。
個別ページの子供ページの一覧を表示するショートコード
サンプルで個別ページの子供ページの一覧を表示するショートコードを作成します。
ショートコード名は list_child_pages です。
呼び出しは「 list_child_pages template=child_pages_box 」 といった感じでテンプレート名を指定するようにしました。
function list_child_pages_shortcode($atts) {
//変数初期化
$output=”;
$template=”;
//引数
if (isset($atts['template'])){
$template=$atts['template'];
}else{
$template="child_pages";
}
//現在のページの情報
global $post;
// 子ページを取得
$child_pages = new WP_Query( array(
'post_type' => 'page',
'orderby' => 'menu_order',
'order' => 'ASC',
'post_parent' => $post->ID,
'posts_per_page' => -1,
) );
// 子ページが存在しない場合は何も表示しない
if ( !$child_pages->have_posts() ) return '';
// 子ページが存在する場合はリストを生成
while ( $child_pages->have_posts() ) : $child_pages->the_post();
$output .=render_blade($template);
endwhile;
wp_reset_postdata();
return $output;}
add_shortcode(‘list_child_pages’, ‘list_child_pages_shortcode’);
これで child_pages_box.blade.php というテンプレートを利用して一覧を表示する仕組みができました。
テンプレートは
<div id="post-{{the_id()}}" class="">
<div class=" media-img" style="background-image:url({{get_the_post_thumbnail_url(get_the_ID(),'large')}})"><a
href="{{the_permalink()}}">
</a></div>
<div class="media-body">
<h5 class=" media-title"><a href="{{the_permalink()}}">{{the_title()}}</a></h5>
<p class=" media-text">
{{the_excerpt()}}
</p>
<div class=" text-right"><a class="btn btn-sm btn-primary v"
href="{{the_permalink()}}">続きを読む</a>
</div>
</div>
</div>
といった感じでHTML内に {{ワードプレス関数}} といった差し込みがされています。
これでショートコードから呼び出される関数がかなりスッキリしました。
