このページの本文へ

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

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

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

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

2.グローバルナビゲーションの表示

 グローバルナビゲーションは、「webpro」ディレクトリーの「include」フォルダーにある「globalNavigation.html」にモジュールIDを指定すれば、すぐに表示されます。

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

 モジュールIDとは、同じ種類のモジュールを他と区別するための固有の識別子のことです。モジュールIDを指定することで、1つ1つのモジュールを別々に管理できるようになります。

 テキストエディターで「globalNavigation.html」を開き、ナビゲーションモジュールにモジュールIDを指定します。モジュールIDは、該当するスニペットの始まりを示す「<!-- BEGIN************ -->」の最後に「id="モジュールID名"」の書式で追記します。モジュールID名には英数字のみ使用できます。

 ナビゲーションモジュールのスニペットは「<!-- BEGIN_MODULE Navigation -->」から始まっていますので、モジュール名に続いて「id=" globalNavi"」を追記します。

■元のソースコード(globalNavigation.htmlの1部)


<!-- BEGIN_MODULE Navigation -->
<header class="header">
    <nav id="globalNavi" class="acms-navbar globalNavi"><span id="globalNaviToggle" class="acms-hide-pc">menu</span>
    <!-- BEGIN navigation:loop -->
        <!-- BEGIN ul#front --><ul class="clearfix"><!-- END ul#front -->
            <!-- BEGIN li#front --><li {attr}><!-- END li#front -->
                <!-- BEGIN link#front --><a href="{url}" target="{target}"><!-- END link#front -->
                {label}[raw]
                <!-- BEGIN link#rear --></a><!-- END link#rear -->
                <!-- BEGIN li#rear --></li><!-- END li#rear -->
        <!-- BEGIN ul#rear --></ul><!-- END ul#rear -->
    <!-- END navigation:loop --></nav>
</header>
<!-- END_MODULE Navigation -->

■モジュールIDを加えたソースコード(globalNavigation.htmlの1部、赤い部分を追記)


<!-- BEGIN_MODULE Navigation id="globalNavi" -->
<header class="header">
    <nav id="globalNavi" class="acms-navbar globalNavi"><span id="globalNaviToggle" class="acms-hide-pc">menu</span>
    <!-- BEGIN navigation:loop -->
        <!-- BEGIN ul#front --><ul class="clearfix"><!-- END ul#front -->
            <!-- BEGIN li#front --><li {attr}><!-- END li#front -->
                <!-- BEGIN link#front --><a href="{url}" target="{target}"><!-- END link#front -->
                {label}[raw]
                <!-- BEGIN link#rear --></a><!-- END link#rear -->
                <!-- BEGIN li#rear --></li><!-- END li#rear -->
        <!-- BEGIN ul#rear --></ul><!-- END ul#rear -->
    <!-- END navigation:loop --></nav>
</header>
<!-- END_MODULE Navigation -->

 正しく記述できたら、トップページにグローバルナビゲーションが表示されます。

13.png

表示されたグローバルナビゲーション

この連載の記事

一覧へ

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