今日から始めるa-blog cms入門 ― 第4回

モジュールIDとインクルードで効率よくテンプレートを作成 (1/6)

　a-blog cmsを使った企業サイトの作り方を紹介する本連載。第3回では、トップページにバナーモジュールで動的コンテンツが表示できるようにしましたが、表示するカテゴリーが絞り込まれていないため、「お知らせ」や「製品一覧」に会社概要や沿革が表示されます。そこで、第4回では、「モジュールID」を使ってカテゴリーを絞り込み、適切に表示されるようにします。「モジュールID」を使ったグローバルナビゲーションの表示や、テンプレートを効率的に使い回しできる「インクルード機能」についても解説します。

1. 動的コンテンツのカテゴリー分類
2. グローバルナビゲーションの表示
3. インクルード機能
4. まとめ

お知らせや製品情報に「会社概要」など不適切な表示があるトップページ

1.動的コンテンツのカテゴリー分類

　モジュールにモジュールIDを設定すると、動的コンテンツをカテゴリー別に絞り込んで表示できます。ほかにも、エントリーの表示順や表示件数などを、各モジュールで自由に設定できます。

　ヘッドラインモジュールに「topNews」、フォトモジュールに「topPhoto」というモジュールIDを設定します。

モジュールID「topNews」の設定

　テキストエディターで「webpro」ディレクトリーにある「top.html」を開きます。「webpro」ディレクトリーは下記にあります。

　Mac　→　Macintosh HD/ユーザー/（ユーザー名）/Applications/AMPPS/www/themes/webpro
　Windows　→　C:￥Program Files￥Ampps￥www￥themes¥webpro
　注：Windowsの場合、「C:￥Program Files」が「C:¥Program Files（x86）」の場合があります

　ヘッドラインモジュール「Entry_Headline」にモジュールIDを指定します。「<!-- BEGIN_MODULE Entry_Headline” -->」に「id="topNews"」を設定します。

■元のソースコード（top.htmlの1部）

<!-- BEGIN_MODULE Entry_Headline -->
<div>
<!--#include file="/admin/module/setting.html"-->
<ul class="headline"><!-- BEGIN entry:loop -->
    <li class="js-biggerlink">{date#Y}年{date#m}月{date#d}日( {date#week} ) <!-- BEGIN url#front --><a href="{url}"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear --><!-- BEGIN new -->New!<!-- END new --></li><!-- END entry:loop -->
</ul>
</div>
<!-- END_MODULE Entry_Headline -->

■モジュールID「topNews」を追記（top.htmlの1部、赤い部分を追記）

<!-- BEGIN_MODULE Entry_Headline id="topNews"　 -->
<div>
<!--#include file="/admin/module/setting.html"-->
<ul class="headline"><!-- BEGIN entry:loop -->
    <li class="js-biggerlink">{date#Y}年{date#m}月{date#d}日( {date#week} ) <!-- BEGIN url#front --><a href="{url}"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear --><!-- BEGIN new -->New!<!-- END new --></li><!-- END entry:loop -->
</ul>
</div>
<!-- END_MODULE Entry_Headline -->

「ヘッドライン」モジュールにモジュールID「id="topNews"」を設定

モジュールID「topPhoto」の設定

　続いて、フォトモジュール「Entry_Photo」にモジュールIDを指定します。「<!-- BEGIN_MODULE Entry_Photo -->」に「id="topPhoto"」を設定します。

■元のソースコード（top.htmlの1部）

<!-- BEGIN_MODULE Entry_Photo -->
<div class="entryPhoto clearfix">
<!--#include file="/admin/module/setting.html"-->
<!-- BEGIN notFound -->
<p>エントリーが見つかりませんでした。</p>
<!-- END notFound -->

<ul><!-- BEGIN unit:loop -->
    <!-- BEGIN entry:loop -->
    <li>
        <div class="js-biggerlink"><!-- BEGIN image:veil -->
        <img src="%{ROOT_DIR}{path}" alt="" /><!-- END image:veil -->
        </div>
        <p><a href="{url}">{title}</a></p>
    </li><!-- END entry:loop -->
    <!-- END unit:loop -->
</ul>
</div>
<!-- END_MODULE Entry_Photo -->

■モジュールID「topPhoto」を追記（top.htmlの1部、赤い部分を追記）

<!-- BEGIN_MODULE Entry_Photo id="topPhoto" -->
<div class="entryPhoto clearfix">
<!--#include file="/admin/module/setting.html"-->
<!-- BEGIN notFound -->
<p>エントリーが見つかりませんでした。</p>
<!-- END notFound -->

<ul><!-- BEGIN unit:loop -->
    <!-- BEGIN entry:loop -->
    <li>
        <div class="js-biggerlink"><!-- BEGIN image:veil -->
        <img src="%{ROOT_DIR}{path}" alt="" /><!-- END image:veil -->
        </div>
        <p><a href="{url}">{title}</a></p>
    </li><!-- END entry:loop -->
    <!-- END unit:loop -->
</ul>
</div>
<!-- END_MODULE Entry_Photo -->

「フォト」モジュールにモジュールID「id="topPhoto"」を設定