カテゴリーエントリーリスト ( Category_EntryList ) が表示されない

カテゴリーエントリーリスト(Category_EntryList)は、モジュールIDを割り当てていないデフォルトの状態だと、今見ているページが属するカテゴリーを基点にコンテンツを表示しようとします。

そのため、今見ているページが属するカテゴリーが、子カテゴリーやエントリーなどのコンテンツを持っていない場合、何も表示されなくなります。常に任意のカテゴリーを基点に表示したい場合は、モジュールIDを割り当てて、CIDを任意のカテゴリーのものに設定してください。

ページ(page)やキーワード(keyword)を指定しても表示が変わらない

説明

URLコンテキスト上で指定されたページやキーワードの指定を、各モジュールが反映するかどうかは、各モジュールの引数の設定によって変わります。

またデフォルトの設定値もモジュールによって異なります。たとえば、Entry_Bodyモジュールは、ページやキーワードを反映しますが、Entry_Summaryモジュールはそれらをデフォルトでは反映しません。

回答

ページやキーワードを反映させるには、モジュールIDを設定します。 モジュールIDの設定画面に「キーワード(keyword)」「タグ(tag)」「ページ(page)」などURLの値を参照するチェックボックスがあります。

http://ドメイン/page/2/

上記のようにa-blog cmsではURLの値を参照してモジュール側でpageの2ページのデータを表示してくれます。

モジュールで出力している情報を変更する

目標


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


解説使用テーマbeginner

Before

After

目次

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

事前準備


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


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



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


ステータス公開
エントリータイトルスタッフ+番号(例:スタッフ2)
ファイル名staff+番号(例:staff2)

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



モジュールIDについて


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


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



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



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

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


top_summary

モジュールID : top_summary


summary_index

モジュール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

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



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


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

目標


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


解説使用テーマbeginner

Before

After

目次

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

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


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


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


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


ステータス有効
モジュールエントリーリスト( Entry_List )
idtop_list
名前トップページ用のリストモジュール

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


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



カテゴリーID物件情報(cid:5)

入力後は [作成] ボタンをクリックして、モジュール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/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 の設定画面に入力された値を読み込みます。したがって、ここでは先ほど入力した見出し「物件情報」が読み込まれ、トップページで下図のように表示されます。


エントリーリスト見出し

イベント情報を効率的に運用するための開催日付活用テクニック

イベント情報は、多くの企業や団体のウェブサイトにおいて重要な役割を担っています。 開催日時や場所、参加方法などの情報をわかりやすく掲載することで、訪問者の利便性が向上し、集客効果の最大化にもつながります。

しかし、イベント情報は時期によって更新頻度が高く、過去の情報管理も必要なため、運用のしやすさが求められます。特に重要なポイントは、イベント開催日付 の設定と、その日付に応じて「これから開催するイベント」と「過去のイベント」を自動的に区別し、適切にコンテンツを管理できる仕組みを構築することです。

その他にも開催場所や参加費、申し込みフォームやリンクなどの項目がありますが、これらは必要に応じて カスタムフィールド を用意するだけで対応可能です。 今回は特に、イベント開催日付 にフォーカスして解説していきます。

「これから開催するイベント」の設定

Entry_Summary のモジュールIDの条件設定で、開始日時の日付に %{NOW_DATE} を指定します。 終了日時は長期間の未来を想定し、9999-12-31 と設定しておきます。

表示設定の表示順は「日付(昇順)」に設定すると、左上に最も近い開催予定のイベントが表示されるようになります。 そのため、当日のイベントも左上に表示されることになります。


「過去のイベント」の設定

逆に、Entry_Summary のモジュールIDの条件設定で、開始日時の日付に 1000-01-01 を指定し、終了日時の日付に %{NOW_DATE} を設定します。

表示設定の表示順は「日付(降順)」に設定すると、最近終了したイベントが左上に表示されるようになります。


このように一覧ページの条件設定を行うことで、イベント開催日を過ぎたエントリーは翌日以降自動的に「これから開催するイベント」から「過去のイベント」へと表示場所が切り替わります。

イベント開催日付をエントリー日付として活用することで、運用の自動化が簡単に実現できます。