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

目標

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

Before

After

目次

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

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

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

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

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

モジュールID名や名前については、モジュール新規作成毎に任意で入力することができます。今回のハンズオンでは一例として「top_list」「トップページ用のリストモジュール」と定めていますが、命名に関しては特にルールがないため、一般的にはサイト制作者にとって区別しやすい名前で管理することになります。

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

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

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

今回のハンズオンでは、すでに表示されている「製品情報」コンテンツの下部に新しいモジュールを表示します。従って「_top.html」では、26行目<main>タグ内のエントリーサマリー以下にエントリーリストを新規追加します。

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

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

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

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

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

/include/entry/topList.html

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

このスニペットをコピーして、 topList.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の表記は、下のように <!-- 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/topSummary.html")
 
　　<!-- エントリーリスト -->
　　@include("/include/entry/topList.html")
 
　　<!-- 確認用テンプレート -->
　　@include("/include/check-seo.html")
</main>

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

見出しを表示する

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

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

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

/include/entry/topSummary.html

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

3〜6行目を見ると、見出しに関わるコードが記載されています。ここでは、変数 {module_heading} によって、カスタム設定画面で入力された見出しの値が読み込まれているようです。変数はテーマ内で共通して使うことができるため、この見出しに関わるコードは topList.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_IF [{module_heading}/nem] -->
　　<h2 class="module-heading">{module_heading}</h2><!-- END_IF --><!-- 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 の設定画面に入力された値を読み込みます。したがって、ここでは先ほど入力した見出し「物件情報」が読み込まれ、トップページで下図のように表示されます。