トップページに表示されている「製品情報」のコンテンツを「スタッフ紹介」に置き換えましょう。

Before

After

1. 事前準備
2. モジュールIDについて
3. トップページ「製品情報」のコンテンツを「スタッフ紹介」に変更する
4. モジュールの表示設定を変更する

ハンズオンの事前準備として、スタッフ紹介カテゴリー内に「スタッフ1」から「スタッフ10」までのエントリーを作成します。

まずエントリーの編集の [複製] ボタンより、「スタッフ1」のエントリーを10枚分複製しましょう。

次に複製したエントリーのステータスを全て「公開」とし、それぞれ区別ができるようにタイトルとファイル名を編集します。

以上で事前準備は完了です。

レベル2「ナビゲーションを編集する」では、ブラウザ上で更新ができる「モジュール」というパーツについて学びました。今回のハンズオンではその「モジュール」にさらにクローズアップし、これらを管理する仕組みやブラウザ上でできる出力情報の制御の方法について理解を深めていきます。

まずはトップページ「製品情報」をマウスオーバーし、[モジュール] ボタンをクリックします。

タブを [条件設定] に切り替えると、使用しているモジュールやモジュールIDについての表記が確認できます。

モジュールID

それぞれのモジュールを区別する任意の英数字をモジュールIDといいます。それぞれのモジュールはこのモジュールIDを名付けることによって作動し、またこれによってブラウザ上から「何件表示するか」「何を表示するか」などのモジュールに関する設定ができるようになります。

例えばテーマ「beginner2020」では、トップページと一覧ページの2箇所で「エントリーサマリーモジュール」が使われています。これらのモジュールにそれぞれ異なるモジュールID（トップページでは top_summary 、一覧ページでは summary_index ）を付けることで、同じモジュールでも出力情報などの設定を区別することができます。

モジュールID : top_summary

モジュールID : summary_index

またモジュールID名は1つのモジュールにつきテンプレートと管理画面上で合わせて設定しているため、モジュールID名を変更する際には、必ずテンプレートと管理画面の双方で作業が必要になります。

ここからは実際にモジュールの設定を操作して、トップページに出力するコンテンツを「製品情報カテゴリー」→「スタッフ紹介カテゴリー」に変更していきます。

初期設定では「カテゴリーID」の項目で「製品情報」が指定されています。そのため現状のエントリーサマリーモジュールには「製品情報」エントリーの情報が出力されるようになっています。それでは、この設定を以下の手順で「スタッフ紹介」へ変更しましょう。

1. 製品情報ラベル左側の [ID参照] ボタンをクリックする
2. 表示されるリスト内で [スタッフ紹介] を選択する
3. ラベル内にある [×] ボタンをクリックして製品情報ラベルを消去する

これでカテゴリーの指定は完了です。他にも引数の設定からは、エントリーIDやタグなど様々な条件でモジュールに出力するエントリーを絞り込むことができます。また各項目にチェックを打ってURLコンテキストを優先することで、出力したい条件を細かく指定することもできます。

URLコンテキスト

a-blog cmsでは、表示しているページの位置や状態を示すURL上のパスを「URLコンテキスト」といいます。モジュール設定の「引数」にあるチェックボックスを有効にすると、URLコンテキストの情報を元に表示するコンテンツを絞り込むようになります。記述方法は多岐にわたるので、詳しくはURLコンテキスト | ドキュメント | a-blog cms developerをご覧ください。

また、テーマ「beginner2018」では [カスタム設定] タブからモジュールの見出しが変更できるので、「製品情報」を「スタッフ紹介」に書き換えたのちに設定を保存しましょう。

以上でトップページの「製品情報」を「スタッフ紹介」に変更できました。

現状のトップページでは、スタッフ紹介のエントリーがランダムで6件表示されています。これらをエントリーの作成日順に10件表示する設定に変更しましょう。

表示に関する設定は、[表示設定] タブ内で行います。

[表示設定] タブ内では、その他にもサマリーやタグなどの出力情報の制御ができます。またイメージ・ページャー・フィールド・表示内容について、あらゆるケースに最適な条件を指定することも可能です。

以上の作業で、トップページにエントリーが作成日順に10件表示されました。

エントリーリストモジュールを使って、トップページに「物件情報」のコンテンツを追加しましょう。

Before

After

1. モジュールIDを新規作成する
2. テンプレートを用意して_top.htmlにインクルードする
3. 見出しを表示する

まずはブラウザ上でモジュールIDを新規作成しましょう。以下の手順でIDの新規作成画面に移動してください。

1. 管理ボックスの [管理ページ] をクリックする
2. 左側のメニュー内 [モジュールID] をクリックする
3. 一覧画面右上の [モジュールIDを作成] をクリックする

[条件設定] 内のID情報の項目を、以下のように設定します。

モジュールID名や名前については、モジュールごとに自由に設定することができます。今回のハンズオンでは一例として「top_list」「トップページ用のリストモジュール」と定めていますが、命名に関しては特にルールがないため、サイト制作者にとって管理しやすい名前を設定しましょう。

さらに今回は「物件情報」のコンテンツを追加するため、カテゴリーID（cid）の「ID参照」ボタンをクリッックし、引数としてカテゴリーID欄で「物件情報」を選択します。

入力後は [作成] ボタンをクリックして、モジュールIDの設定を保存しましょう。

今回のハンズオンでは、すでに表示されている「新着情報」コンテンツの下部に新しいモジュールを表示します。従って「_top.html」では、24行目<main>タグ内のエントリーヘッドライン（トップ用）以下にエントリーリストを新規追加します。

<main class="acms-col-lg-9 main">
　　<!-- エントリーヘッドライン（トップ用） -->
　　@include("/include/entry/headline-top.html")

　　<!-- ここにエントリーリストを新規追加する -->

　　<!-- エントリーサマリー -->
　　@include("/include/entry/summary-top.html")

　　<!-- 確認用テンプレート -->
　　@include("/include/check-seo.html")
</main>

それでは、インクルードするテンプレートを用意しましょう。まず以下の場所に list-top.html を新規作成します。

/使用テーマ/include/entry/list-top.html

この list_top.html 内に、エントリーリストモジュールのデータを入力します。a-blog cmsでは、モジュールごとのコード情報が「スニペット」という形で配布されています。スニペットはクイックサーチで「;」と入力し、「エントリーリスト」を選択することで表示できます。

このスニペットをコピーして、 list-top.html ファイルにペーストしましょう。

<!-- BEGIN_MODULE Entry_List -->
<div class="acms-margin-bottom-medium">
@include("/admin/module/setting.html")
	<ul class="acms-list-group">
		<!-- BEGIN entry:loop -->
		<li><a href="{url}" class="acms-list-group-item">{title}</a></li>
		<!-- END entry:loop -->
	</ul>
</div>
<!-- END_MODULE Entry_List -->

次に、設置したモジュールに対して、先ほど作成したモジュールIDを紐付けます。テンプレート内でのモジュールIDの表記は、下のように 1行目の <!-- BEGIN(システム名) --> のブロック内へ「id="(モジュールID)"」と追記して行います。

<!-- BEGIN_MODULE Entry_List id="top_list" -->

これでモジュールのテンプレートが用意できました。続けて _top.html の該当箇所にこのテンプレートをインクルードしましょう。

<main class="acms-col-lg-9 main">
　　<!-- エントリーヘッドライン（トップ用） -->
　　@include("/include/entry/headline-top.html")
 
　　<!-- エントリーリスト -->
　　@include("/include/entry/list-top.html")
 
　　<!-- エントリーサマリー -->
　　@include("/include/entry/summary-top.html")

　　<!-- 確認用テンプレート -->
　　@include("/include/check-seo.html")
</main>

以上でモジュールの設置が完了しました。

仕上げとして、新しいコンテンツに「物件情報」の見出しを設定しましょう。テーマ「beginner」では、モジュールIDの [カスタム設定] にて見出しを入力することができます。

しかしこの設定を保存しても、サイト上に見出しは表示されません。これは、現在読み込まれているエントリーリストがa-blog cmsで共通して使われるスニペットをそのままコピーしたものになるため、テーマ「beginner」でカスタムされた設定に対応していないことが原因です。

このテーマの中で見出しがどのような変数を使って表示されているか確認するには、トップページで配置されている他のモジュールのテンプレートを参考にします。今回のハンズオンでは、新着情報を表示している headline-top.html を開いてみましょう。

/include/entry/headline-top.html

@include("/admin/module/setting.html")
<div class="module-header clearfix"><!-- BEGIN moduleField --><!-- BEGIN module_heading:veil -->
	<h2 class="module-heading">{module_heading}</h2><!-- END module_heading:veil --><!-- END moduleField -->
	<a href="{indexUrl}" class="module-index-link"><span class="acms-icon acms-icon-arrow-right"></span>一覧</a>
</div>

3〜7行目を見ると、見出しに関わるコードが記載されています。ここでは、変数 {module_heading} によって、カスタム設定画面で入力された見出しの値が読み込まれているようです。変数はテーマ内で共通して使うことができるため、この見出しに関わるコードは list-top.html でも同じように設定することができます。

コードを確認したところで、list-top.html にこのコードをコピー＆ペーストして、見出しを設置しましょう。尚、ペーストする場所は、summary-top.html に習って設定に関わるインクルード文 @include("/admin/module/setting.html") の下部とします。

<!-- BEGIN_MODULE Entry_List id="top_list" -->
@include("/admin/module/setting.html")
<div class="module-header clearfix"><!-- BEGIN moduleField --><!-- BEGIN module_heading:veil -->
	<h2 class="module-heading">{module_heading}</h2><!-- END module_heading:veil --><!-- END moduleField -->
	<a href="{indexUrl}" class="module-index-link"><span class="acms-icon acms-icon-arrow-right"></span>一覧</a>
</div>

変数 {module_heading} は <!-- BEGIN_MODULE Entry_List id="top_list" --> 以下に設置されることで、モジュールID top_list の設定画面に入力された値を読み込みます。したがって、ここでは先ほど入力した見出し「物件情報」が読み込まれ、トップページで下図のように表示されます。