5. トップページにエントリーを表示できるようにする
「特定のカテゴリーの一覧」と書かれている5件のエントリーリストを CMS から投稿の新しい順で表示されるようにしていきます。エントリーを一覧表示させる モジュール としては、以下の5つが用意されています。
スニペットは、サンプルコードになりますので、実際に使う {変数} については変数表を参考にしてください。
| モジュール名 | 説明 | 変数表 | スニペット |
|---|---|---|---|
| Entry_Body | 本文を一覧表示 | 変数表 | スニペット |
| Entry_List | 一番シンプルなテキストの一覧表示 | 変数表 | スニペット |
| Entry_Photo | 写真の一覧表示 | 変数表 | スニペット |
| Entry_Headline | 設定項目が少し多いテキストの一覧表示 | 変数表 | スニペット |
| Entry_Summary | 高機能な一覧表示 | 変数表 | スニペット |
今回は Entry_Headline を利用しますが、どれを利用するか悩むようであれば、Entry_Summary をご利用ください。
それでは、実際のファイルを修正していきます。ファイルとしては /themes/sample/index.html の section id="top-headline" を修正していきます。
どちらをベースに修正してもらっても構いませんが、今回は最初ですので丁寧に説明をしていきます。
<section class="module-section" id="top-headline">
特定のカテゴリーの一覧
</section>
MODULE タグを追加
section の外側に
<!-- BEGIN_MODULE Entry_Headline -->
<section class="module-section" id="top-headline">
特定のカテゴリーの一覧
</section>
<!-- END_MODULE Entry_Headline -->
を追加します。
entry:loop を追加
section id="top-headline" の中に
<li class="acms-list-group-item headline-item js-biggerlink">
<time class="headline-dat" datetime="2016-04-27">2016年04月27日( 水 )</time>
<a href="entry.html" class="acms-list-group-title-link headline-title">エントリー名1</a>
</li>
が、繰り返し表示されている部分になりますので、この li の外側に
<!-- BEGIN entry:loop -->
<!-- END entry:loop -->
を追加します。
この時点で、ブラウザで確認すると、同じ「2016年04月27日」の表示件数が増えているはずです。
エントリー毎の情報を編集
- 「2016年04月27日」をスニペットを参考に「{date#Y}年{date#m}月{date#d}日」を書き換えます。ちなみに曜日は {date#week} で表示が可能です。
- 「エントリー名1」を {title} に書き換えます。
- 「<a href="entry.html">」を「<a href="{url}">」のように書き換えます。
最低限の書き換えでデータが表示されるのは確認できたかと思います。
<!-- BEGIN category:veil --><span class="acms-label">{categoryName}</span><!-- END category:veil -->
カテゴリー名も表示したいようであれば、上記のものを追加すると表示されるようになります。
:loop については繰り返し用で、変数にあるものを書けば動作しますが、今回のカテゴリーのコードにある :veil については、利用者が自由に設定できるものです。意味としては、BEGIN xxx:veil から END xxx:veil まで変数が何も編集されなかった時には囲まれている全体を表示させなくする事が可能です。カテゴリー名がない時には＜span＞だけ表示されるようなことはありません。
また、必要のない静的な li 部分を削除しておいてください。この時点では、カテゴリー関係なく新しい順でエントリーが表示されています。
特定のカテゴリーのみ表示できるようにモジュールIDを設定する
この段階では、複数のカテゴリーが混ざった状態で一覧表示されているのではないかと思います。これを特定のカテゴリーのみ表示できるように設定をします。
管理ページ > モジュールID から「モジュールIDを作成」から作成します。
モジュールを Entry_Headline を選択し、id を top-headline とし、名前は「トップページのお知らせ用」のように人が認識できるように名前をつけてください。
そして、カテゴリーID について (ID参照) ボタンから「お知らせ」を選択して、モジュールIDを作成します。
<!-- BEGIN_MODULE Entry_Headline id="top-headline" -->
<section class="module-section" id="top-headline">
略
</section>
<!-- END_MODULE Entry_Headline -->
section に設定している id と同じですが、ここは共通にしないといけないという事ではありません。これでサイトを確認すると「お知らせ」のカテゴリーのエントリーのみがトップページに一覧表示され、最低限のモジュールの動作するところまでのカスタマイズができました。
細かいところですが、entry:loop の上のあたりにある 一覧 のリンクのところも「お知らせ」へのリンクにした方がいいので /news/ に変更しておきましょう。
<a href="/news/" class="module-index-link"><span class="acms-icon acms-icon-arrow-right"></span>一覧</a>