Home

第3回：静的HTMLをテーマとして設定する

この章でやること

サンプルHTMLをTwigテーマとして配置し、a-blog cmsで表示できる状態にする
管理ボックスをテンプレートに組み込む
デバッグモードを有効にして、実装中のエラーをすぐに確認できるようにする
まだCMS化はしない――「HTMLがa-blog cmsを経由して処理される」状態を確認する

この章の終わりには、見た目はサンプルの静的サイトそのままで、a-blog cmsが裏側で動いている状態が完成します。

部分的に CMS 化ができる a-blog cms ですが、まずは どこも更新できない状態のまま 、サンプル一式を CMS のテーマとして設定 するところから始めます。最初の目的は、既存の HTML を崩さずに a-blog cms のテーマとして正しく認識させることです。

1. テーマ(themes)ディレクトリに全てのファイルをコピーする

a-blog cms では、themes/ ディレクトリの中にあるフォルダをテーマとして認識します。まずは、用意したサンプルサイト一式（ルート相対パス版）を以下のようにコピーしてください。

/themes/sample/
  ├── index.html
  ├── news/
  ├── service/
  ├── contact/
  ├── css/
  └── images/

2. テーマの設定を変更します

a-blog cms にログインします。
（管理ページ）のボタンをクリックして管理画面に入ります。
左メニューの「テーマ設定」から既存の「Develop 基本テーマ」をクリックします。
「テーマディレクトリ名」の SELECTメニューに「sample」を選択してください。
保存してください。

次にテンプレートファイルの設定を変更します。

トップページ	_top.twig
一覧ページ	index.twig
詳細ページ	_entry.twig
エラーページ(404 Not Found)	404.twig

変更後は保存してください。

a-blog cms ではテンプレートの基本的なファイル名にルールがあり、 テーマ管理の画面（上記キャプチャ）でもそのルールが設定されている ことが確認できます。必要に応じて変更することも可能です。

3. ファイルを `.twig` 形式にリネームする

一般的には、トップページは _top.twig、一覧ページは index.twig、詳細ページは _entry.twig として作成するのが基本です。今回のチュートリアルでも、このルールに沿ってサンプルの HTML を活用していきます。

/themes/sample/
├── _top.twig    ← index.html をリネーム
├── news/
├── service/
├── contact/
├── css/
└── images/

index.html を _top.twig にリネームすることで、a-blog cmsがトップページテンプレートとして認識します。

4. 表示を確認しましょう

これで https://ablogcms-tutorial.ddev.site/ にアクセスすると、まだ CMS を利用して更新できる状態にはなっていませんが、画像やページ遷移などもリンク切れになることなく、既存の HTML サイトがそのまま表示されるようになります。

さらに、CSS や JavaScript の読み込みについては a-blog cms によって以下のように書き換え処理が行われます。

<!-- 書き換え前 -->
<link rel="stylesheet" href="/css/custom.css">

<!-- 書き換え後（a-blog cmsによる自動処理） -->
<link rel="stylesheet" href="/themes/sample/css/custom.css?date=20250817215109">

/themes/sample/ が追記されて正しいテーマの場所を参照
?date=… が付加され、キャッシュバスティングによりブラウザキャッシュを回避

画像も同様にパスが補完され、リンク切れを防ぎます。

<img src="/themes/sample/images/main_visual.jpg" alt="美味しそうな料理のメインビジュアル" class="w-full h-full object-cover" >

また、HTML の <head> タグの直前には、a-blog cms が生成していることを示す meta タグが自動的に追記されています。

<meta name="generator" content="a-blog cms" />

このタグが出力されていれば、サンプル HTML が単なる静的ファイルとして表示されているのではなく、a-blog cms を経由して処理されている ことが確認できます。

5. 管理用UIの設置を最初にする

テーマを切り替える前は、トップページに表示されていた （管理ページ） ボタンから管理画面へアクセスできていました。新しいテーマに切り替えたことでこの導線が消えています。運用時に困らないよう、先に管理用ボックスを設置 しておきます。

設置場所の目安

_top.twig の <section id="about" ...> の上に以下を追加してください。

@include("/admin/action.html")

この状態で https://ablogcms-tutorial.ddev.site/ にアクセスすると、管理用 CSS が未読込のためレイアウトが崩れて表示 され、操作しづらいはずです。正常に表示できるよう、<head> タグ内に 管理 UI 用のリソース を追加します。

<link rel="stylesheet" href="/css/acms-admin.min.css">
{% set js = module('V2_Js') %}
<script src="{{ JS_LIB_JQUERY_DIR }}jquery-{{ JS_LIB_JQUERY_DIR_VERSION }}.min.js" charset="UTF-8"></script>
<script src="{{ ROOT_DIR }}acms.js{{ js.arguments }}" charset="UTF-8" id="acms-js"></script>

1行目 : a-blog cms の管理用 CSS
3行目 : a-blog cms で必要な jQuery のバージョンを読み込み
4行目 : a-blog cms の管理用 JavaScript

これで、ページ上部に管理ボックスが正しく横並びで表示され、ページから直接「新規投稿」「管理画面へ移動」「ログアウト」といった操作などが行えるようになります。

7. デバッグモードを有効にする（推奨）

次の章からテンプレートの実装を進めると、Twigの構文エラーや変数の参照ミスが発生することがあります。デバッグモードを有効にしておくと、エラーメッセージやインクルード先のパスが表示され、原因の特定がしやすくなります。

管理ユーザーごとにデバッグモードを有効にできます。管理画面の「ユーザー管理」から該当ユーザーを編集し、「デバッグモード」を選択して保存してください。開発環境・本番環境を問わず、そのユーザーでログインしているときだけ有効になるため、本番環境でも安全に試せます。

デバッグモードとベンチマークモード

デバッグモードを有効にするとキャッシュが効かなくなり、エラーメッセージも表示されます。開発中は有効にしておくことを推奨しますが、本番公開時には無効にしてください。

まとめ

この章でやったこと：

サンプルHTMLを themes/sample/ にコピーし、テーマとして認識させた
index.html → _top.twig にリネームし、Twig テンプレートとして設定した
a-blog cmsによるパス自動補完とメタタグ出力で「CMSを経由している」ことを確認した
管理UI（@include("/admin/action.html")）と管理UI用リソースを _top.twig に追加した

まだCMS化はしていませんが、HTMLがa-blog cmsを経由して処理される状態が整いました。次の章からいよいよ実装を始めます。最初のターゲットは、更新頻度が高く効果を実感しやすい「お知らせ一覧」のCMS化です。

この章の完成コードはこちら

https://github.com/appleple/ablogcms-tutorial-twig/tree/main/chapter03

第4回：トップページのお知らせ一覧をCMS化する

この章でやること

管理画面でカテゴリー・カスタムフィールド・サンプル記事を準備する
_top.twig のお知らせ一覧セクションをCMS化する
V2_Entry_Summary モジュールの関数形式の書き方を理解する
モジュールIDを作成して表示条件（カテゴリー・件数）を設定する

この章が終わると、管理画面で投稿した記事がトップページのお知らせ一覧に自動的に反映されます。

1. CMSのデータを準備する

テンプレートを実装する前に、管理画面でCMSのデータを準備します。必要な作業は「カテゴリーの作成」「カスタムフィールドの設定」「サンプル記事の投稿」の3つです。

1-1. カテゴリーを作成する

このチュートリアルでは、ルートブログの配下に「お知らせ」カテゴリーを作成します。

インストール時に Develop テーマを選択している場合はこの作業は不要です。

管理画面の左メニューからルートブログの「カテゴリー管理」を開く
「カテゴリーを追加」をクリック
以下のとおり設定して保存する

項目	設定値
カテゴリー名	お知らせ
カテゴリーコード	`news`
ステータス	公開

カテゴリーコードについて

カテゴリーコードはURLの一部になります。news と設定すると https://ablogcms-tutorial.ddev.site/news/ でアクセスできるようになり、サンプルサイトのディレクトリ構造と一致します。

1-2. カスタムフィールドを設定する

一覧ページでサムネイル画像を表示するため、エントリーにメディアフィールドを追加します。カスタムフィールドはHTMLで定義したフィールド構造をテンプレートファイルに書くことで管理画面の入力欄になる仕組みです。

まず以下のディレクトリ構成でファイルを作成します。

/themes/sample/
└── admin/
    └── entry/
        └── field.html   ← 新規作成

field.html に以下を記述します。メディアフィールドのHTMLはカスタムフィールドメーカーで生成します。

クイックサーチ機能を利用することでカスタムフィールドメーカーのページに移動することができます。MacOSであれば ⌘ + k　、Windows であれば Ctrl + k でクイックサーチを表示して「カスタムフィールドメーカー」と入力し、Enter キーを押下するか、メニュー内の「カスタムフィールドメーカー」をクリックしてください。

カスタムフィールドメーカーで「メディア」タイプを選択し、以下の設定で生成してください。

項目	設定値
タイトル	メイン画像
フィールド	`entry_main_image`
タイプ	メディア

生成されたHTMLを field.html に貼り付けて保存します。管理画面のエントリー編集画面を開くと、画像アップロード欄が追加されていることを確認できます。

1-3. サンプル記事を投稿する

テンプレートの動作確認用にサンプル記事を3件以上投稿します。

管理画面の「エントリー管理」から「エントリー作成」をクリック
カテゴリーで「お知らせ」を選択
ステータスを公開に設定
タイトル・本文・メイン画像・タグを適当に設定して公開

記事が3件揃ったらテンプレートの実装に進みます。

2. 対象のHTMLを確認する

対象となるHTMLは、_top.twig 内の <section id="news"> です。

<section id="news" class="py-14 sm:py-20 bg-white">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="...">News</h2>
    <ul class="border-t border-gray-200">
      <li>
        <a href="/news/20250807.html" class="...">
          <time datetime="2025-08-07" class="...">2025.08.07</time>
          <span class="...">新商品</span>
          <span class="...">新しい季節限定メニューが登場しました</span>
        </a>
      </li>
      ...
    </ul>
    <div class="mt-8 text-center">
      <a href="/news/">お知らせ一覧へ →</a>
    </div>
  </div>
</section>

この <li> の繰り返し部分をCMSのデータに置き換えます。

3. V2_Entry_Summary モジュールのスニペットを書く

a-blog cms Twig版でエントリーの一覧を出力するには module() 関数でモジュールのデータを取得します。

Twig版はモジュールタグではなく関数で呼び出す

標準テンプレートでは  のようなタグ形式でしたが、Twig版では module() 関数を {% set %} で受け取る形式を使います。また、呼び出せるのは名前が V2_ から始まるモジュールのみです。

まず、<ul class="border-t border-gray-200"> の手前でモジュールデータを取得し、<li> の繰り返し部分をループに置き換えます。

{% set entrySummary = module('V2_Entry_Summary') %}

<ul class="border-t border-gray-200">
  {% for entry in entrySummary.items %}
    <!-- 一覧表示の繰り返し部分 -->
  {% endfor %}
</ul>

次に  の位置に、元のHTMLにあった <li> 〜 </li> をそのままコピーして貼ります。

{% set entrySummary = module('V2_Entry_Summary') %}

<ul class="border-t border-gray-200">
  {% for entry in entrySummary.items %}
    <li>
      <a href="/news/20250807.html" class="flex items-center gap-x-4 p-4 border-b border-gray-200 hover:bg-gray-50 transition-colors">
        <time datetime="2025-08-07" class="flex-shrink-0 text-sm text-gray-500">2025.08.07</time>
        <span class="flex-shrink-0 rounded-full bg-sky-100 px-2.5 py-0.5 text-xs font-semibold text-sky-800">新商品</span>
        <span class="font-medium text-gray-800 truncate">新しい季節限定メニューが登場しました</span>
      </a>
    </li>
  {% endfor %}
</ul>

この状態で https://ablogcms-tutorial.ddev.site/ にアクセスすると、「新しい季節限定メニューが登場しました」が何件も繰り返し表示されます。まだ固定のHTMLを繰り返しているだけですが、ループが動作していることを確認できます。

4. 変数に置き換える

固定値をCMSの変数に置き換えていきます。置き換える箇所はリンク先・日付・カテゴリー名・タイトルの4点です。

置き換え対応表

置き換え前（固定値）	置き換え後（Twig変数）
`/news/20250807.html`	`{{ entry.url }}`
`2025-08-07`（datetime属性）	`{{ entry.date \| date('Y-m-d') }}`
`2025.08.07`（表示テキスト）	`{{ entry.date \| date('Y.m.d') }}`
`新商品`	`{{ entry.category.items[0].name }}`
`新しい季節限定メニューが登場しました`	`{{ entry.title }}`

{% set entrySummary = module('V2_Entry_Summary') %}

<ul class="border-t border-gray-200">
  {% for entry in entrySummary.items %}
    <li>
      <a href="{{ entry.url }}" class="flex items-center gap-x-4 p-4 border-b border-gray-200 hover:bg-gray-50 transition-colors">
        <time datetime="{{ entry.date | date('Y-m-d') }}" class="flex-shrink-0 text-sm text-gray-500">
          {{ entry.date | date('Y.m.d') }}
        </time>
　　　　{% if entry.category.items is not empty %}
        <span class="flex-shrink-0 rounded-full bg-sky-100 px-2.5 py-0.5 text-xs font-semibold text-sky-800">
          {{ entry.category.items[0].name }}
        </span>
        {% endif %}
        <span class="font-medium text-gray-800 truncate">{{ entry.title }}</span>
      </a>
    </li>
  {% endfor %}
</ul>

https://ablogcms-tutorial.ddev.site/ にアクセスすると、投稿したお知らせ記事がトップページに表示されます。確認できたら、元々HTMLに書かれていた静的な <li> 部分はすべて削除してください。

V2モジュールの変数の見方

V2モジュールでは、Twigテンプレートでモジュールを読み込んだ状態で、クイックサーチ機能から利用可能な変数を確認できる仕組みになっています。

クイックサーチの起動方法

管理者としてログイン中に、以下のショートカットキーを押すことでクイックサーチが開きます。

Windows / Linux：Ctrl + K
Mac：⌘（Command）+ K

デバッグモードでの変数確認

クイックサーチを開いた状態で、デバッグモードが有効になっているときに #（シャープ）を入力すると、現在のページで読み込まれているV2モジュールの変数一覧（変数表）が表示されます。

実際の値が入った変数表。JSON形式で表示されます。 — 実際の値が入った変数表が確認できる

変数名をクリックすると、その変数のパスがクリップボードにコピーされます。
これにより、Twigテンプレートへ変数を貼り付ける際に、手入力せず正確な変数名を利用できます。

5. モジュールIDを設定する

現在の状態では、お知らせ以外のカテゴリーの記事も混在して表示されることがあります。「お知らせ」カテゴリーだけを表示するには、モジュールIDを設定して表示条件を管理画面から指定します。

module() 関数の第2引数にモジュールIDを文字列で渡します。

{% set entrySummary = module('V2_Entry_Summary', 'news_top') %}

また、管理用インクルードをセクション直後に追加して、管理者がページをホバーしたときに「設定」ボタンが表示されるようにします。

{% set entrySummary = module('V2_Entry_Summary', 'news_top') %}

<section id="news" class="py-14 sm:py-20 bg-white">
  {{ include('/admin/module/setting.twig', { moduleInfo: entrySummary.moduleInfo }) }}
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="...">News</h2>
    <ul class="border-t border-gray-200">
      {% for entry in entrySummary.items %}
        <li>...</li>
      {% endfor %}
    </ul>
    <div class="mt-8 text-center">
      <a href="/news/">お知らせ一覧へ →</a>
    </div>
  </div>
</section>

moduleInfo とは

moduleInfo は V2 モジュールが返す特別な変数です。module() 関数で取得したデータ（ここでは entrySummary）の moduleInfo プロパティとして参照できます。

この変数はログイン中の管理者に対してのみセットされます。内部ではブログID（bid）・モジュールID（mid）・管理画面の設定URL（url）・モジュールクラス名（name）・モジュールID（identifier）などが格納されており、admin/module/setting.twig に渡すことで、閲覧画面からモジュールIDの設定画面へ遷移する「編集」リンクを表示できます。一般ユーザーが閲覧する場合は moduleInfo は空となり、編集リンクは表示されません。

6. 管理画面でモジュールIDを作成する

テンプレートにモジュールIDを書いただけでは機能しません。管理画面側でモジュールIDを登録して表示条件を設定する必要があります。

https://ablogcms-tutorial.ddev.site/ の管理ボックスから「（管理ページ）」をクリック
右メニューから「モジュールID」を選択
「モジュール作成」をクリック
以下のとおり設定する

条件設定

項目	設定値
モジュール	サマリー（V2_Entry_Summary）
モジュールID	`news_top`
名前	お知らせトップ用
カテゴリーID（引数）	お知らせ（「ID参照」ボタンから選択）

7. モジュールIDの表示設定を確認する

モジュールIDを作成すると「条件設定」タブの横に「表示設定」タブが追加されます。ここで件数と並び順を設定します。

表示設定

項目	設定値
表示順	日付（降順）
表示件数	5

この設定で、トップページのお知らせには新しい記事から5件が表示されるようになります。

https://ablogcms-tutorial.ddev.site/ にアクセスして、お知らせ一覧に「お知らせ」カテゴリーの記事だけが5件表示されていれば、この章の目標達成です。

まとめ

この章でやったこと：

module('V2_Entry_Summary', 'news_top') でモジュールデータを取得した
{% for entry in entrySummary.items %} でループを実装した
{{ entry.title }}・{{ entry.url }}・{{ entry.date | date('Y.m.d') }}・{{ entry.category.items[0].name }} で各変数を出力した
モジュールID news_top を管理画面に登録し、カテゴリー・件数・ソート順を設定した

次の章では、一覧から記事をクリックしたときに表示される詳細ページを実装します。本文・タイトル・日付・タグが正しく出力されるようにしていきましょう。

この章の完成コードはこちら

https://github.com/appleple/ablogcms-tutorial-twig/tree/main/chapter04

XServer で ionCube PHP Loader の読み込みエラーが発生しサイトが表示されない

対象

a-blog cms Ver. 2.11.x以前
Site error: the ionCube PHP Loader needs to be installed. のエラーが表示される

確認すべき項目

<?= phpinfo() ?> を表示したファイルにアクセスし、PHP が ionCube を読み込めているかご確認ください。Xserver 上で ionCubeの読み込み設定をしていても、PHP が読み込めていない場合がございます。

ケース1：ionCube が PHPバージョンに対応していない

ionCubeには対応する PHPバージョンがございます。ダウンロードファイルに対応バージョンが含まれていますのでご確認ください。

ケース2：XアクセラレーターVer.2

Xアクセラレーターを Ver.2 にするとphp.ini を読まなくなり、ionCubeのパスを設定しているphp.iniが読み込まれなくなるのでご注意ください。

Ver 3.0.0 以前から Ver 3.1.0 以降にアップデートした際にデータベースアップデートができない

対象

Ver 3.0.0 以前から Ver 3.1.0以降にアップデート
システムを Git管理しており、ローカル環境でシステムアップデートをした上で本番反映後に、本番環境のデータベースをアップデートできない

原因

Ver 3.1.0 からコンフィグセットが、コンフィグセット / テーマセット / 編集画面セットに分割された影響により、CMSとデータベースにバージョンの差がある場合に正しくコンフィグセットが読み込めず、データベースのアップデートができない場合がございます。

対処方法

メンテナンス画面からのデータベースアップデートをお願いいたします。

簡単アップデート > メンテナンスメニューからデータベースのアップデート

第5回：詳細ページを作る

この章でやること

news/_entry.twig を作成し、詳細ページを表示できるようにする
V2_Entry_Body モジュールで記事本文を出力する
記事ヘッダー（タイトル・日付・カテゴリー・タグ）をTwig変数で実装する
グローバル変数を使ってパンくずリストと<title>タグを動的にする

この章の終わりには、一覧から記事をクリックすると記事ごとの本文が表示される状態になります。

1. テンプレートを準備する

現在、トップページのお知らせ一覧からリンクをクリックしても「404 Not Found」になります。詳細ページ用のテンプレートファイル _entry.twig が存在しないためです。

既存の静的ページをひな形にしてテンプレートを作ります。

news/20250807.html をコピーして news/_entry.twig を作成してください。また、news ディレクトリ内の _entry.twig , index.html, page2.html を残して他のファイルを削除してください。

/themes/sample/
├── _top.twig
├── news/
│   └── _entry.twig   ← 追加
├── service/
├── contact/
├── css/
└── images/

この状態でトップページのお知らせ一覧からリンクをクリックすると、「404 Not Found」にはならず、20250807.html の内容がすべてのリンク先で表示されます。どの記事をクリックしても同じページが出る状態です。ここからCMS化を進めていきます。

2. V2_Entry_Body モジュールのスニペットを書く

news/_entry.twig のコードを確認すると、<article> 〜 </article> の内側が、V2_Entry_Body モジュールを配置する場所です。

module() 関数でデータを取得し、<article> の内側に以下のスニペットを書いてください。

{% set entryBody = module('V2_Entry_Body', null, { eid: EID }) %}

{% for entry in entryBody.items %}
  <article>
    <header>
      <h1>{{ entry.title }}</h1>
      <!-- entry header contents -->
    </header>

    <div>
      {% if entry.body %}
        <div>
          {{ entry.body|raw }}
        </div>
      {% endif %}
    </div>

    <div class="acms-box-medium">
      {{ include('admin/entry/action.twig', { entry }) }}
    </div>
  </article>
{% endfor %}

詳細ページでは、URLで渡ってくる eid（エントリーID）に応じて表示する記事を切り替えます。第2引数に null（モジュールIDなし）、第3引数で eid: EID を渡しています。EID はグローバル変数で、現在表示しているページのURLから取得したエントリーIDが入っています。このように第3引数で eid を渡すことで、一覧からどの記事をクリックしても、クリックした記事の本文が表示されます。

トップページから最新のお知らせ記事をクリックすると、既存の静的HTMLの上にCMSが出力した記事本文が表示されることを確認できます。この時点ではほぼCSSが効いていないプレーンな状態ですが、一覧から詳細ページへの遷移が成立しています。https://ablogcms-tutorial.ddev.site/ でいくつかのお知らせ記事をクリックし、それぞれ異なる記事本文が表示されることを確認してください。

module() 関数の引数について

引数	内容
第1引数	V2モジュール名（例：V2_Entry_Summary）
第2引数	モジュールID（管理画面で設定されたIDを指定）
第3引数	URLコンテキスト（従来の ctx に該当。例：{ bid: BID, eid: EID } など）

※ 「モジュールID」と「URLコンテキスト」は、従来モジュール同様に省略可能です。

{% set entrySummary = module('V2_Entry_Summary') %}

3. 記事ヘッダー情報を整える

記事本文の前に表示するタイトル・日付・カテゴリー・タグを整えます。スニペット内の  の部分を以下のコードに置き換えてください。

変換前（静的HTML）

<p class="text-base font-semibold text-sky-600 text-center">
  <time datetime="2025-08-07">2025年8月7日</time>
</p>
<h1 class="mt-2 text-3xl font-bold ...">新しい季節限定メニューが登場しました</h1>
<div class="mt-6 flex flex-wrap items-center justify-center gap-x-4 gap-y-2">
  <a href="#" class="bg-sky-100 text-sky-800 ...">新商品</a>
  <a href="#" class="text-sm text-gray-500 ...">#季節限定</a>
  <a href="#" class="text-sm text-gray-500 ...">#夏メニュー</a>
</div>

変換後（Twig変数）

<p class="text-base font-semibold text-sky-600 text-center">
  <time datetime="{{ entry.datetime|date('Y-m-d') }}">
    {{ entry.datetime|date('Y年m月d日') }}
  </time>
</p>
<h1 class="mt-2 text-3xl font-bold ...">{{ entry.title }}</h1>
<div class="mt-6 flex flex-wrap items-center justify-center gap-x-4 gap-y-2">
  {% if entry.category.items is not empty %}
    <a href="{{ entry.category.items[0].url }}" class="bg-sky-100 text-sky-800 ...">
      {{ entry.category.items[0].name }}
    </a>
  {% endif %}
  {% for tag in entry.tags %}
    <a href="{{ tag.url }}" class="text-sm text-gray-500 hover:text-gray-700">
      #{{ tag.name }}
    </a>
  {% endfor %}
</div>

置き換えポイント解説

日付フォーマット

{{ entry.datetime|date('Y年m月d日') }}

日付は entry.datetime プロパティを使い、Twig標準の date フィルターでフォーマットします。

カテゴリーリンク

{% if entry.category.items is not empty %}
  <a href="{{ entry.category.items[0].url }}">{{ entry.category.items[0].name }}</a>
{% endif %}

カテゴリーは entry.category.items の配列で取得し、0個目（entry.category.items[0]）のカテゴリーを表示します。

タグのループ

{% for tag in entry.tags %}
  <a href="{{ tag.url }}">#{{ tag.name }}</a>
{% endfor %}

4. 本文の表示について

手順2のスニペットにはすでに本文出力が含まれています。本文は entry.body で取得し、{{ entry.body|raw }} で出力します。prose prose-lg は Tailwind Typography プラグインのクラスで、本文テキストに読みやすいスタイルを一括適用します。

{% if entry.body %}
  <div class="mt-12 prose prose-lg max-w-none prose-sky">
    {{ entry.body|raw }}
  </div>
{% endif %}

ここまで実装できたら、<article> 〜 </article> 内に残っている静的なコンテンツをすべて削除してください。管理画面で入力した本文の内容だけが表示される状態になります。

5. 詳細ページにも管理ボックスを設置する

詳細ページにも管理ボックスを設置し、記事を見ながら直接投稿・編集操作ができるようにします。

news/_entry.twig の {% set entryBody = module('V2_Entry_Body') %} の直前に追加してください。

@include("/admin/action.html")

次に、前章と同様に <head> タグ内に管理UI用リソースを追加します。

    <link rel="stylesheet" href="/css/acms-admin.min.css">
    {% set js = module('V2_Js') %}
    <script src="{{ JS_LIB_JQUERY_DIR }}jquery-{{ JS_LIB_JQUERY_DIR_VERSION }}.min.js" charset="UTF-8"></script>
    <script src="{{ ROOT_DIR }}acms.js{{ js.arguments }}" charset="UTF-8" id="acms-js"></script>

これで管理ボックスが正しいデザインで表示され、記事本文の下にエントリー編集ボックスも現れます。

6. パンくずリストと `<title>` タグを動的にする

記事本文以外にも、タイトルを使っている箇所があります。このままでは、どの記事を開いても同じタイトルが表示されます。グローバル変数を使って動的に出力するよう修正します。

グローバル変数とは

通常の変数（{{ entry.title }} など）はモジュールのデータ取得後にしか使えません。グローバル変数は、現在表示しているページのコンテキストから自動生成され、テンプレート内のどこでも使える変数です。Twig版では {{ 変数名 }} の記法でそのまま出力できます。

パンくずリスト

<li>
  <span class="flex items-center">
    <svg class="h-5 w-5 flex-shrink-0 text-gray-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" /></svg>
    <span class="ml-2 text-sm font-medium text-gray-500" aria-current="page">{{ ENTRY_TITLE }}</span>
  </span>
</li>

標準テンプレートとの差分：グローバル変数

変数	標準テンプレート形式	Twig形式
記事タイトル	`%{ENTRY_TITLE}`	`{{ ENTRY_TITLE }}`
サイトルートパス	`%{ROOT_DIR}`	`{{ ROOT_DIR }}`
カテゴリーコード	`%{CCD}`	`{{ CCD }}`

Twig版では通常の変数と同じ {{ }} 記法で書けるため、グローバル変数だけ別の記法を覚える必要がありません。

`<title>` タグ

<title>{{ ENTRY_TITLE }} | SAMPLEPLE</title>

https://ablogcms-tutorial.ddev.site/ でいくつかのお知らせ記事をクリックし、ブラウザのタブに記事ごとの正しいタイトルが表示されることを確認してください。

まとめ

この章でやったこと：

news/_entry.twig を作成し、module('V2_Entry_Body', null, { eid: EID }) で本文を出力した
{% for entry in entryBody.items %} ループ内で記事ヘッダー（タイトル・日付・カテゴリー・タグ）をTwig変数で実装した
{% for tag in entry.tags %} でタグの一覧を出力した
{{ ENTRY_TITLE }} などグローバル変数をパンくずリストと <title> タグに適用した
モジュールID news_body を作成し、URLからのエントリーID引数を設定した

次の章では最後のメインテンプレートである一覧ページを整えます。サムネイル画像の出力・校正オプション・ページャーのTwig実装を学びましょう。

この章の完成コードはこちら

https://github.com/appleple/ablogcms-tutorial-twig/tree/main/chapter0 5

この章でやること

1. テーマ(themes)ディレクトリに全てのファイルをコピーする

2. テーマの設定を変更します

3. ファイルを .twig 形式にリネームする

4. 表示を確認しましょう

5. 管理用UIの設置を最初にする

設置場所の目安

7. デバッグモードを有効にする（推奨）

まとめ

この章でやること

1. CMSのデータを準備する

1-1. カテゴリーを作成する

カテゴリーコードについて

1-2. カスタムフィールドを設定する

1-3. サンプル記事を投稿する

2. 対象のHTMLを確認する

3. V2_Entry_Summary モジュールのスニペットを書く

Twig版はモジュールタグではなく関数で呼び出す

4. 変数に置き換える

置き換え対応表

V2モジュールの変数の見方

クイックサーチの起動方法

デバッグモードでの変数確認

5. モジュールIDを設定する

moduleInfo とは

6. 管理画面でモジュールIDを作成する

条件設定

7. モジュールIDの表示設定を確認する

まとめ

対象

確認すべき項目

ケース1：ionCube が PHPバージョンに対応していない

ケース2：XアクセラレーターVer.2

対象

原因

対処方法

この章でやること

1. テンプレートを準備する

2. V2_Entry_Body モジュールのスニペットを書く

module() 関数の引数について

3. 記事ヘッダー情報を整える

置き換えポイント解説

4. 本文の表示について

5. 詳細ページにも管理ボックスを設置する

6. パンくずリストと <title> タグを動的にする

グローバル変数とは

パンくずリスト

<title> タグ

まとめ

イントロダクション

入門

コア概念

フロントエンド開発

機能ガイド

リファレンス

アップデート

拡張・カスタマイズ

ツール

3. ファイルを `.twig` 形式にリネームする

6. パンくずリストと `<title>` タグを動的にする

`<title>` タグ