レベル6トップページ内に新しいモジュールを追加する

目標

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

Before

After

目次

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

モジュールIDを新規作成する

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

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

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

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

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

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

テンプレートを用意して_top.htmlにインクルードする

今回のハンズオンでは、すでに表示されている「新着情報」コンテンツの下部に新しいモジュールを表示します。従って「_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/topHeadline.html")
 
　　<!-- エントリーリスト -->
　　@include("/include/entry/list_top.html")
 
　　<!-- エントリーサマリー -->
　　@include("/include/entry/topSummary.html")

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

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

見出しを表示する

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

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

このテーマの中で見出しがどのような変数を使って表示されているか確認するには、トップページで配置されている他のモジュールのテンプレートを参考にします。今回のハンズオンでは、新着情報を表示している 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 でも同じように設定することができます。

コードを確認したところで、topList.html にこのコードをコピー＆ペーストして、見出しを設置しましょう。尚、ペーストする場所は、topSummary.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 の設定画面に入力された値を読み込みます。したがって、ここでは先ほど入力した見出し「物件情報」が読み込まれ、トップページで下図のように表示されます。