このページの本文へ

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

2014年06月19日 12時00分更新

文●足立 恵・森田 霞/アップルップル

  • この記事をはてなブックマークに追加
本文印刷

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

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

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

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"」を設定

前へ 1 2 3 4 5 6 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く