テンプレートエンジン
テンプレートエンジンは、コーディングした HTML に必要な箇所を書き足すだけで、a-blog cms のテンプレートにできる仕組みです。
PHP を書かずにテンプレートを組めます。
表示件数などの条件は、テンプレートを開かずに管理画面で変えられる
共通部分の読み込みや継承で、テンプレートの記述を減らせる
静的サイトを部分的に CMS 化できる
解決できる課題
デザインの作り直し
CMS を導入すると、デザインをテンプレートの仕様に合わせて作り直すことになる。
表示条件の変更
「新着を3件から5件に」といった調整のたびに、テンプレートを編集し直さなければならない。
全面的な載せ替え
静的サイトの一部だけを更新できるようにしたいのに、サイト全体を CMS に移さなければならない。
機能詳細
書いたマークアップを崩さずに、動的なページにする
テンプレートファイルは、拡張子も中身も HTML です。データを呼び出す単位の「モジュール」と、{title} のような差し込み箇所の「変数」を書き足していきます。
モジュールの開始・終了は HTML のコメントとして書くため、<ul> や <li> といったマークアップの構造はそのまま残ります。下の例は、静的な HTML のお知らせ一覧と、それをテンプレートにしたものです。
<ul class="news-list">
<li><a href="news01.html">新サイトを公開しました</a></li>
<li><a href="news02.html">夏季休業のお知らせ</a></li>
<li><a href="news03.html">採用情報を更新しました</a></li>
</ul><!-- BEGIN_MODULE Entry_List -->
<ul class="news-list">
<!-- BEGIN entry:loop -->
<li><a href="{url}">{title}</a></li>
<!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->表示件数や並び順は、管理画面で変える
モジュールに ID を付けておくと、件数・並び順・対象カテゴリーといった表示条件を、管理画面側で設定できます。
<!-- BEGIN_MODULE Entry_List id="topNews" -->日付や抜粋の長さも、HTML の中で整える
日付の書式や抜粋の長さは、変数のうしろに「校正オプション」を書き足すだけで変えられます。下の例は、「2026年9月16日」の形で出力する指定と、200文字で切って末尾に「…」を付ける指定です。
{date}[date('Y年n月d日')]
{summary}[trim(200, '...')]Twig でも書ける
標準テンプレートのほかに、PHP のテンプレートエンジンとして広く使われている Twig でも書けます。既存のテンプレートと併用できるため、新しく作る部分から取り入れることもできます。
{% set news = module('V2_Entry_Summary', 'topNews') %}
<ul>
{% for entry in news.items %}
<li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
{% endfor %}
</ul>→ 詳細:Twig テンプレート
静的サイトの一部だけを CMS にする
公開中の静的 HTML のうち、お知らせ一覧の <ul> をモジュールで囲うところから始められます。作り込んだビジュアルは静的なまま置いておき、更新頻度の高い箇所だけを動的にできます。CMS で管理する範囲は、案件に合わせて後から決められます。
記述を減らす仕組み
テンプレートの共通化:ヘッダーやフッターを外部ファイルにして読み込む
テンプレートの継承:親テンプレートを引き継ぎ、変えたい箇所だけを書く
条件分岐:ページや条件に応じて表示を出し分ける
詳しい資料
静的HTMLサイトの「お知らせ」を部分的に CMS化してみよう(チュートリアル)