縦長ランディングページの効果測定しませんか詳細へ

WordPressでPHPテンプレートのBladeを使う

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内に {{ワードプレス関数}} といった差し込みがされています。

これでショートコードから呼び出される関数がかなりスッキリしました。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

株式会社ねこすけの代表をしています。
2005年に創業しWebマーケティングを実践するためのコンサルティング、サイト構築、サイト運用、システム開発を行っています。
会員・顧客属性を利用したコンテンツ管理を得意としており、協会サイト、多ブランドのECサイト、会員向けコンテンツサイトなどを構築運営しています。Webマーケティングを進めてるのにパートナーがほしいと感じている方、ご相談ください。
月に1度のミーティングから細かなサイト保守まで必要な部分での対応が可能です。 問い合わせ

目次