Blog

ブログ

a-blog cmsの実務制作(7)個別ページの作成

a-blog cmsの実務制作の流れをまとめています。

初めての方は(1)からお読みください

今回は詳細ページの作成についてです。

HTMLのファイル名について

a-blog cmsにはいくつかのデフォルトテーマがありますが、どのファイル名のHTMLを詳細ページとして扱うかは、テーマによって異なっています。「entry.html」が指定されているものもあれば、「index.html」で全てのテンプレートをまかなっているものもあります。

この辺りはテーマファイルの構成によって臨機応変に…となるのですが、今回は「entry.html」を詳細ページとして扱うことにします。

「カテゴリーのコードネーム」が付いたフォルダに同名のテンプレートがある場合はそちらを優先する仕様は、一覧ページのときと同じです。
なので、基本の詳細ページ用テンプレートをいちばん上の階層に作っておき、レイアウトが違っているカテゴリーのみ、フォルダ内に置いたテンプレートで上書きするのがおすすめです。

編集ページとユニット追加ページ

記事を書いたり編集できるようにするには、「編集画面」のテンプレートが必要になります。

またa-blog cmsの場合、見落としがちですが「一旦作成した記事にユニットを追加するときの画面」のテンプレートも必要です。

これも、テーマによっては「edit.html」「add.html」と別ファイルになっていることがありますが、だいたいは詳細ページと兼用することができます。
今回はこれらのテンプレートも「entry.html」とすることで以降の解説を進めます。

繰り返し・ブロック関連のタグを追加する

モジュールの開始・終了/エントリーループの開始・終了

エントリー詳細を表示しているページのうち、「タイトル」から「前後のページナビゲーション」までの範囲を、「BEGIN_MODULE」0「END_MODULE」タグで囲みます。
ここでは全ての記事情報を参照できる「Entry_Body」モジュールを使用してください。モジュールIDは特に必要ありません。
また、詳細ページは記事を一回しか繰り返しませんが「entry:loop」タグも入れ子にする形で追加してください。

<!-- BEGIN_MODULE Entry_Body -->
<!-- BEGIN entry:loop -->
(エントリータイトル)
(エントリー本文)
(ページナビゲーション)
<!-- END entry:loop -->
<!-- END_MODULE Entry_Body -->

ダミーテキストを隠す

一覧ページのときと同じように、不要な文字列を「sample:veil」タグで隠します。本文を囲むくらいでいいのではと思います。

<!-- BEGIN sample:veil -->
(隠したいダミーテキスト)
<!-- END sample:veil -->

ページナビゲーション

新着情報などで前後リンクが必要な場合は、ページナビゲーションを「entry:loop」タグの外側に追加します。
これも一覧ページのときと同様、a-blog cmsの公式スニペットをそのまま利用して良いと思います。「BEGIN serialNavi:veil」0「END serialNavi:veil」内が前後リンクを表示している箇所です。

以下は、私が自分のコーディングに併せて作った「serialNavi:veil」タグのサンプルです。ここもカスタマイズしたい方は参考にどうぞ。

<!-- BEGIN serialNavi:veil -->
<div class="page-navi">
<ul>
<li class="pnavi-p"><!-- BEGIN prevLink --><a href="{url}">&amp;laquo;{name}[trim(30, '...')|escape]</a><!-- END prevLink --></li>
<li class="pnavi-i"><a href="{upperUrl}">%{CATEGORY_NAME}一覧</a></li>
<li class="pnavi-n"><!-- BEGIN nextLink --><a href="{url}">{name}[trim(30, '...')|escape]&amp;raquo;</a><!-- END nextLink --></li>
</ul>
<!-- /.page-navi --></div>
<!-- END serialNavi:veil -->

記事が見つからない場合

「notFound」タグで囲まれている場所は、記事が見つからない場合に表示されます…が、「404ページ用のテンプレート」が別途指定されていると、これは有効にならないようです。
「404ページ用のテンプレート」に「entry.html」を指定した場合は、「entry:loop」タグの外側に以下のようなコードを追加してください。

<!-- BEGIN notFound -->
<h1>ページが見つかりません</h1>
<p class="message">お探しのページはURLが変更されたか、削除された可能性があります。&lt;br /&gt;
お手数ですが、<a href="/">ホーム</a>から目的のページをお探しください。</p>
<!-- END notFound -->

記事情報タグを追加する

entry:loopタグ内の記事情報を、a-blog cmsの変数に置き換えていきましょう。

記事情報のタグに関しては、の説明を参照してください。
ただし、詳細ページではグローバル変数「%{ENTRY_TITLE}」を使うことができるので、ページタイトル部分はこっちでもいいと思います。

本文にユニットを呼び出す

a-blog cmsは、本文を「ユニット」と呼ばれるブロックを積み重ねる形で表示します。
これらを表示するには、以下のタグを貼付けます。

<!-- BEGIN column:veil -->
<!--#include file="/include/column.html"-->
<!-- END column:veil -->

「column:veil」タグは、エントリー詳細ページでは本文を、編集ページでは各ユニットの入力フォームを呼び出します。
「/include/column.html」は、「system」テーマ内の同じパスから呼び出されているので、新規作成したり、テーマにコピーしたりする必要は特にありません。

編集関連のパーツを呼び出す

このままでは、まだ記事の表示しかできません。さらに、エントリーの編集に必要なパーツを追加していきます。

記事のメタ情報

記事のメタ情報(タイトル・公開日時など)を編集するパーツを呼び出すには、以下のタグを貼付けます。本文のすぐ上が良いと思います。

<!--#include file="/admin/entry/title.html"--></pre>
<h4>保存ボタン・ユニット追加ボタン</h4>
<p>編集画面で記事を更新したり、ユニットを追加したりするパーツを呼び出すには、以下のタグを貼付けます。これは本文のすぐ下が良いと思います。</p>
<pre class="brush: xml"><!-- BEGIN adminEntryEdit -->
<!--#include file="/admin/entry/edit.html"-->
<!--#include file="/admin/entry/add.html"-->
<!-- END adminEntryEdit -->

「/admin/entry/edit.html」「/admin/entry/add.html」は、「system」テーマ内の同じパスから呼び出されているので、新規作成したり、テーマにコピーしたりする必要は特にありません。

インクルードを囲んでいる「adminEntryEdit」は「エントリー編集画面のみ内側のタグを実行する」という意味のようです。後述するタッチモジュールと似ているようですが、詳しいことはちょっとわかりません。

編集画面へ移動するボタン

保存ボタン・ユニット追加ボタンのすぐ下に、詳細ページから編集ページへ移動するためのパーツを呼び出します。
以下のコードを貼付けてください。

<!-- BEGIN_MODULE Touch_Login -->
<!--#include file="/admin/entry/action.html"-->
<!-- END_MODULE Touch_Login -->

インクルードを囲んでいる「Touch_Login」は「ログインしているときだけ内側のタグを実行する」という意味です。
これが入っていないと、ログアウト後の公開画面でも編集ボタンが出てきてしまいます。

a-blog cmsでは、このようなページの状態による条件分岐タグのことを「タッチモジュール」と呼びます。
条件分岐をうまく使えば、テンプレート数を節約することもできますが、ソースコードがごちゃつきがちになるので、ご利用は計画的に。

タッチモジュール | a-blog cms – Web制作者のためのCMS

表示・動作を確認する

ここで一旦サーバーにアップロードして、きちんと詳細ページが表示されるか、編集が可能かどうかチェックしてみてください。

以下はよくあるトラブルシューティングです。

ユニット編集画面がうまく動作しない

編集画面が崩れる・文字サイズが小さすぎる・サイトの色調に合わない

編集画面の表示は、作成したウェブサイトのスタイルシートの影響を受けます。
たとえば、元のサイトのCSSで以下のような指定をしていると

table td {
	font-size: 80%;
}

tdが入れ子になっている、a-blog cmsの編集画面の文字サイズがかなり小さくなってしまいます。
元のサイトのスタイルシートを調整するのがいちばんですが、かなりレガシーなマークアップで編集が難しいと言う場合は、入力フォーム用のCSSを調整する必要があります。

また、a-blog cmsの入力フォームは白系のサイトを想定したカラーリングになっているので、黒ベースのサイトで浮いてしまう、という場合も調整が必要です。

「system」テーマにある「/css/acms.css」をコピーして、作成したテーマの同じパスに置くと、CSSを上書きすることができます。CSSファイル内の説明書きを参考に、任意で編集してみてください。

編集画面で記事情報が変数のまま表示される

今回のように、詳細ページと編集ページを同じテンプレートにしていると、必ずこの現象が起こります。
日付などのEntry_Bodyの変数は、編集画面では変数のまま表示されてしまいます。

この場合は、タッチモジュール「Touch_NotAdmin」で囲むと編集画面で表示しないようにすることができます。

<!-- BEGIN_MODULE Touch_NotAdmin -->
&lt;p class="date">更新:{date#Y}年{date#m}月{date#d}日&lt;/p>
<!-- END_MODULE Touch_NotAdmin -->

詳細ページ・編集ページの作成は、a-blog cmsのテーマ作成でいちばん難しいところです。
公開サイトに編集フォームを埋め込むという仕様のため、公開サイトのCSSを雑に書いていると、もろに編集フォームの崩れにつながってしまいます。

逆に、普段から計画的なコーディングをして、それぞれのタグの意味がわかっていれば、文字を大きくしてみる、不要なHTMLを消す、アイコンを出してみるなど、案件に併せたデザイン変更が自在にできると思います。

a-blog cmsの「Web制作者のためのCMS」というキャッチコピーは、このような特徴によるものなのです。

この記事で、構築に最低限必要なチュートリアルはだいたい終わりです。
今後は「ルール」「カスタムフィールド」機能などについて書いていけたらと思います。