YUIDEA

YUIDEA

MENU

技術

Date: 2016.06.09

Author: E.G

WordPressでSmartyのテンプレート機能を利用する

Webサイトを制作するときに、WordPressを利用することもあれば、PHPのSmartyのテンプレートエンジンで構築する場合もあります。
WordPressも、Smartyも、それぞれ違うもので用途も違いますので、通常両方使う制作者は少ないかとも思いますが、
両方とも知っている制作者であれば、一緒に使いたい人も多いのではないかと思います。
私はその一人です。
Smartyで作るテンプレートをWordPressへ移行するプラグイン(Smarty for WordPress)は存在していますが、
WordPressのテーマファイルにSmartyの文法を使い、Smartyで構築する例を探していましたがあまり情報がなかったため、この記事を書いてみました。

この記事はWordPressやSmartyの概要や使い方については議論しません。
WordPress上でSmartyを利用するための書き方や設定について簡単に説明します。

なぜWordPressにわざわざSmartyを利用したいか

Smartyを使ったことがあれば、その便利さを捨てることはなかなかできません。
何より、ロジック部分(PHPコード)と、テンプレート部分(HTMLタグ)を完全に切り分けることができるので、
ソースコードが非常に綺麗で読みやすいです。
メンテナンスもしやすいので、私はSmartyが好きです。

WordPressはCMSを構築するために重宝していますが、WordPressのテーマファイルはPHPで書かれており、テンプレート部分とロジックが混ざっているので、時には読みづらいと感じました。

WordPressのテーマファイル(テンプレート)記述例

<?php
if( $the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post();
?>
   <a href="<?php the_permalink(); ?>">
   <?php
     if(has_post_thumbnail()): 
     $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' ) ; 
   ?>
        <div id="thumbnail"  style="background-image:url(<?php echo $thumb[0]; ?>)">
   <?php else: ?>
         <div id="thumbnail">No Image
   <?php endif; ?>
         </div>
    </a>
<?php endfwhile; endif; ?>

PHPと、HTMLの部分が混同しているので、読みづらく感じます。
特に判定分(if/whileなど)が入ると複雑になり、解読するのに時間がかかります。

こちらの部分を仮にSmartyで書いてみるとこうなります。

Smartyのテンプレート記述例

<a href="{$link}">
  <div id="thumbnail" style="background-image:url({$thumbail_url})"></div>
</a>

ロジック部分は別のPHPファイルに記述するので、テンプレートのみを修正するもしくは変える場合は非常に簡単です。

私はSmartyの便利さを覚えてしまっているので、WordPressに最初触れたときはなかなか慣れませんでした。

どういうタイミングでSmartyを利用すると良いのか

ソースコードを見やすくするためだけならわざわざSmartyを利用する必要もないです(個人の好みで良いです)。
特にWordPressで静的はHTMLページを構築する場合は、WordPressの構造や文法に沿ってテーマファイルを用意した方が分かりやすいかもしれないです。

しかし、ページや投稿内に、PHPで作る動的なコンテンツを作る場合はSmartyを利用する意味が現れます。
例えば、どのサイトにもあるお問い合わせフォームです。

お問い合わせフォームは基本的に3ページから構成されています。

  • お問い合わせフォーム投稿画面
  • お問い合わせフォーム投稿確認画面
  • お問い合わせフォーム投稿完了画面

投稿した内容が確認画面に表示されたり、「戻る」ボタンで確認画面の値が維持されたままで投稿画面に戻ったり、
また、入力エラーの場合はエラーメッセージなどを表示したり、このような動的なコンテンツを作成する場合はどうしてもプログラムの制御も多くなります。
場合によっては投稿内容をデータベースに保存するケースも少なくありません。
ロジック部分とテンプレート部分を同じファイルに記述すると、解読性が低くなります。
また、WordPressのページ機能でページを制作した場合、ページ遷移が必要とするコンテンツは遷移分のテープレートを用意する必要があります。
お問い合わせフォームの場合は、入力画面、確認画面、完了画面を3つ用意する必要があり、入力画面と確認画面はほぼ同じ形ですので、2重管理が面倒です。
Smartyを利用すれば、ソースが綺麗になるほか、1枚のテンプレートファイルで済みます。

CGPWebのCONTACTページはSmartyを利用して作っています。

SmartyをWordPress上で利用するには

単独でPHPとSmartyを利用した場合と変わらないです。
テーマファイルにSmartyのライブラリーをincludeすれば、Smartyのテンプレート機能が使えます。

例)テーマファイルにSmartyをincludeする

<?php
require_once ('Smarty/libs/Smarty.class.php') ;
$smarty = new Smarty();
?>

次は、Smartyのテンプレートを読み込ませる設定をするだけです。
テンプレートファイルはどこに置くかを決めればOKです。単独でSmartyを利用する場合と変わらないです。
テンプレートファイルのディレクトリーは変数で定義できますので、どこに置いても問題ありません。

例)分かりやすくするために、テーマファイルと同じ階層にしたいとする。

$smarty->template_dir = '/ご自身のWordPressの本体のパス/wp-content/themes/cgpweb/templates';
$smarty->compile_dir = '/ご自身のWordPressの本体のパス/wp-content/themes/cgpweb/templates_c';

ここで忘れてはいけないのは、Smartyのパス定義は絶対パスでないといけません
相対パスで書いてしまうと動きませんのでご注意ください。
ただ、どうしても相対パスを使いたい場面も出てくるかと思います。
例えば、よくある開発環境と本番環境の環境違いです。

このとき、テンプレートの配置場所はWordPressのテーマファイルではなく、WordPressのルート直下で置けばよいです!
即ち、wp-content/と同じ階層です。
あまりどこにも書かれていないようですが、結構便利です。
WordPressの通常のテーマファイルと分けることもできるので、覚えておくと便利です。
このとき、template_dirやcompile_dirを定義しなくて使えます

smarty_directory

WordPressで投稿したページを表示する以外の処理が多く必要なページ(データベース処理など)は、
ロジックと表示部分を切り分けた方が絶対メンテナンスしやすいので、Smartyに慣れた方にはとてもいい選択肢のひとつだと思います。
{math}、{nl2br}、{date_format}などの便利すぎる修飾子から、HTMLのタグを簡単に生成できる{html_checkboxes}、{html_radios}、{html_select_date}まで、簡単にHTMLのテンプレートを書ける関数まで色々用意されているので、私はかなり愛用しています。
ちなみに、Smarty以外にもPHPのテンプレートエンジン沢山存在していますね!
色々知らなくて勉強不足です・・・!ヽ(lll´・ェ・)ノぁゎゎ
PHPテンプレートエンジンまとめ 一覧と構文例

E.G

留学のため、日本へ。
来日後はIT企業でサーバーやデータベースエンジニアを経験。
デザイナーへ転身後でもUnixコマンドを忘れることなく、コーディングはvimなどでコマンドプロンプトで行うときもしばしばある。