復習1静的HTMLサイトからCMSのテーマを作ってみよう


静的HTMLサイト

静的HTMLサイト


オリジナルテーマの完成図

オリジナルテーマの完成図


総復習1「静的HTMLサイトからCMSのテーマを作ってみよう」では、静的HTMLファイルをa-blog cmsで利用できるようなテンプレートファイルに編集し、最終的には1つのオリジナルテーマを作成していきます。

またチュートリアルの実践環境として、本編ではローカルサーバー http://localhost を使用して説明しておりますが、以下のフォームから実際に作業をするサーバーのURLを入れていただく事で、文中のテキストを希望のURLに書き換えることができます。ぜひご活用ください。

目次

  1. 事前準備
  2. オリジナルテーマ「sample」を準備する
  3. テーマを作る際に最低限必要なタグを追記する
  4. 「sample」テーマを設定する
  5. インクルード機能でファイルをまとめる
  6. タイトルタグを動的に変更する
  7. 「ナビゲーション」モジュールを実装する
  8. サブカラム共通:サイト内検索機能を実装する
  9. トップページ:「エントリーヘッドライン」モジュールを実装する
  10. 一覧ページ:カテゴリー毎にページタイトル部分を変更できるようにする
  11. 一覧ページ:「トピックパス」モジュールを実装する
  12. 一覧ページ:「エントリーサマリー」モジュールを実装する
  13. 詳細ページ:「エントリーボディ」モジュールを実装する
  14. テンプレートファイルの名前を変更する
  15. 最後に

事前準備

事前準備として、初期インストール時より登録されていたモジュールIDを全て削除します。モジュールID管理 より、全てのチェックボックスにチェックをつけ、プルダウンメニューより削除を選択しましょう。表示された削除ボタンをクリックすると、削除が完了します。



2. オリジナルテーマ「sample」を準備する

まず、以下の zip ファイルをダウンロードしてください。

このファイルが今回の練習用の静的なHTMLサイトのデータファイルになります。中には以下のフォルダ・ファイルが同封されています。

フォルダ・ファイル名 種類
css
fonts
images
js
相対パス版
index.html トップページ
list.html 一覧ページ
entry.html 詳細ページ

index.html、list.html、entry.htmlのファイル内リンクについては、作業のしやすさを考慮して絶対パスを使用しています。サイトのデザインについてブラウザでチェックしたい場合は、同封している相対パス版フォルダの中のテンプレートをご利用ください。

今回はこのデータファイルをテーマとして設定します。フォルダの名前を sample とを変更して、a-blog cms がインストールされているサーバーの themes フォルダにアップロードしてください。なお、この段階ではブラウザでアクセスしても sample の内容は表示されません。

テーマ名sample


3. テーマを作る際に最低限必要なタグを追記する

テーマの設定が完了したら、index.html、list.html、entry.html のそれぞれのファイルに以下の3種類のタグを追加します。

  • 管理系パーツのための CSS ファイルのリンク ( acms-admin.min.css )
  • システムの動作に必要な JavaScript のリンク ( acms.js )
  • ログイン後に表示される管理系ボタンのHTMLのインクルード ( action.html )

管理系パーツのための CSS ファイルのリンク ( acms-admin.min.css )

acms-admin.css は a-blog cms の管理ページで利用している CSS です。管理画面のスタイルが他のテンプレートデザインに影響しないよう、 entry.html , index.html , list.html のそれぞれについて link rel="stylesheet" href="/css/acms.css" の上に以下の記述を追加してください。

<link rel="stylesheet" href="/css/acms-admin.min.css">

システムの動作に必要な JavaScript のリンク ( acms.js )

acms.jsはページの表示に関する様々な機能を記述したJavaScriptファイルです。同様に entry.html , index.html , list.html のそれぞれについて、 script src="/js/jquery-2.2.3.min.js" charset="UTF-8" の下に以下の記述を追加してください。

<!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script>
<!-- END_MODULE Js -->

ログイン後に表示される管理系ボタンのHTMLのインクルード ( action.html )

エントリー作成ボタンやログアウトボタン等の管理ボックスを表示するインクルード文です。



こちらも同様、 entry.html , index.html , list.html 内のそれぞれについて、bodyタグの開始直後に以下の記述を追加します。

@include("/admin/action.html")

action.html をインクルードしているのに管理ボックスが出てこない場合は、ログインしていない可能性があります。http://localhost/login/ からログインして再度ご確認ください。

4. テーマ「sample」を設定する

それでは、テーマ「sample」を実際に表示してみましょう。管理ページ > コンフィグ > セット名"デフォルト"の[コンフィグ] > テーマ設定 に移動し、3つの部分を変更します。

  1. テーマディレクトリを「sample」に変更
  2. テンプレート設定「テンプレート選択ファイル(template.yaml)の値を優先する」のチェックが入っていないことを確認
  3. テンプレートファイルの表記を下記のように変更
種類  ファイル名
トップページ index.html
一覧ページ list.html
詳細ページ entry.html


この段階でサイトを表示させると sample テーマが適用されています。

また、ブラウザからソースコードを確認すると </head> の前に下記のような <meta> タグが追加され、閲覧しているページが a-blog cms で生成されたファイルであることが確認できます。

<meta name="generator" content="a-blog cms">

例)<meta name="generator" content="a-blog cms">の確かめ方(Chromeの場合)


また a-blog cms では、ブラウザでテンプレートを表示する際に画像のパスが自動修正されます。例としてヘッダー部分のマーク画像のソースをご確認ください。



この画像は、テンプレート上では以下のように記述されています。

<img src="/images/ablogcms_mark.png" alt="ablogcms" class="site-logo">

本来は、この記述のままでは画像は表示できません。しかし a-blog cms が下記のように画像のパスを自動修正しているため、ここでは正常に画像が表示されています。

<img src="/themes/sample/images/ablogcms_mark.png" alt="ablogcms" class="site-logo">

例)画像のパスの確かめ方(Chromeの場合)


このようなパスの自動修正は、画像だけでなく<head> タグ内の <link> タグのパスについても行われています。以下は自動修正されたCSSリンクの例です。このように a-blog cms では、静的HTMLファイルをテーマ化する際も基本的にはテンプレートファイルを修正することなく、既存のコードを活用していただけます。

<link rel="stylesheet" href="/themes/sample/css/normalize.css">
<link rel="stylesheet" href="/themes/sample/css/acms.css">
<link rel="stylesheet" href="/themes/sample/css/site.css">
<link rel="stylesheet" href="/themes/sample/js/slick/slick.css">

※1点、下のように背景画像をインラインスタイルで設定している部分では、パスの自動修正は行われません。今回は list.html の以下のソースが該当しているため、トピック10「一覧ページ:カテゴリー毎にページタイトル部分を変更できるようにする」にて書き換え作業を行っていきます。

<div class="page-title-wrapper" style="background-image: url(/images/header.jpg);">

5. インクルード機能でファイルをまとめる

作業始めに、インクルード機能を使ってファイルのパスを表記し直しましょう。インクルードについてはチュートリアル学習「a-blog cmsの内部構造について」をご参照ください。

今回のハンズオンでは、以下のそれぞれについてインクルード処理をすることで、以後のテンプレートの管理を円滑にすることができます。

ヘッダー@include("/include/header.html")
フッター@include("/include/footer.html")
サブカラムのサイト内検索フォーム@include("/include/search.html")
list.htmlとentry.htmlのページタイトル部分@include("/include/page-title.html")
list.htmlとentry.htmlのトピックパス@include("/include/topicpath.html")

ここでは <header> を例にインクルードの手順をご紹介します。

インクルードするファイルは、/themes/sample/include というフォルダ内で管理します。まずはこのフォルダの中に header.html を新規作成し、以下のインクルードする <header> のソースをコピー&ペーストして保存しましょう。

<header class="head-wrapper">
        <div class="acms-container">
            <div class="header header-stack" role="banner">
                <div class="header-logo">
                    <div>
                        <h1 class="site-name"><a href="index.html">
                            <img src="/images/ablogcms_mark.png" alt="ablogcms" class="site-logo"><span class="siteNameText">sample static site</span></a>
                        </h1>
                    </div>
                </div>

                <div class="header-nav">
                    <div class="acms-grid">
                        <nav class="navbar">
                            <ul>
                                <li><a href="index.html">ホーム</a></li>
                                <li><a href="list.html">一覧</a></li>
                                <li class="stay"><a href="entry.html">詳細</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </header>

また top.html , list.html , entry.html の header 部分は、header.html を読み込むインクルード文に差し替えます。

@include("/include/header.html")

この作業を、上記の5つのサイト内パーツについて行いましょう。

インクルードされているファイルを調べるには?

インクルードでファイルを分割した場合、ファイルがどこからインクルードされているのか分からなくなってしまわないように、a-blog cms では HTML ソース側にコメントを追加出力する機能が用意されています。実際に、ブラウザの「ページのソースを表示」もしくは「検証」ソースコードからは、以下のようなインクルードコメントが確認できます。

<!-- Start of include : source=themes/sample/include/header.html -->

 (略)

<!-- End of include : source=themes/sample/include/header.html -->


6.タイトルタグを動的に変更する

タイトルタグについて、それぞれのファイルでは以下のようにテキストで静的に書かれています。

index.htmlのタイトルタグ

<title>sample static site</title>

list.htmlのタイトルタグ

<title>一覧ページ:sample static site</title>

entry.htmlのタイトルタグ

<title>詳細ページ:sample static site</title>

しかし本来は内容に伴って、「エントリー名|カテゴリー名 | ブログ名」のように表示されるのが適切です。そのために、このタイトルタグを全て以下のように変更します。

<title>@include("/include/head/title.txt")</title>

この title.txt は、/themes/system の中に用意されています。このインクルードファイルについて HTML ファイルでなくテキストファイルとすることで、タイトルタグの中の HTML コメントがソースコードにそのまま表示されるのを防いでいます。



7. 「ナビゲーション」モジュールを実装する

次はナビゲーションをモジュール化してブラウザから変更できるようにしていきましょう。この作業をすることで、「トップ」「一覧」「詳細」以外にもページを増やした際に、ナビゲーションに随時その項目を追加することができます。モジュールについて、詳しくはチュートリアルレベル2「ナビゲーションを編集する」をご覧ください。

変更部分はナビゲーションのコードが記載されている include/header.html の以下のソースです。

<div class="header-nav">
    <div class="acms-grid">
      <nav class="navbar">
         <ul>
            <li class="stay"><a href="index.html">ホーム</a></li>
            <li><a href="list.html">一覧</a></li>
            <li><a href="entry.html">詳細</a></li>
          </ul>
      </nav>
   </div>
 </div>

今回は以下の手順で静的なコードをモジュール化していきます。

  1. MODULE タグとモジュールIDを追加する
  2. loopラベルを追加する
  3. <li> 内を編集する

MODULE タグとモジュールIDを追加する

ナビゲーションには専用のナビゲーションモジュール ( Navigation ) を使います。まずは既存のコードとナビゲーションモジュール の スニペット を見比べるために、スニペットを修正箇所の下部に貼り付けましょう。

<div class="header-nav">
    <div class="acms-grid">
      <nav class="navbar">
         <ul>
            <li class="stay"><a href="index.html">ホーム</a></li>
            <li><a href="list.html">一覧</a></li>
            <li><a href="entry.html">詳細</a></li>
          </ul>
      </nav>
   </div>
 </div>


<!-- BEGIN_MODULE Navigation -->
<div>
    @include("/admin/module/setting.html")
    <div class="acms-navbar acms-margin-bottom-medium clearfix">
    <!-- BEGIN navigation:loop -->
        <!-- BEGIN ul#front --><ul><!-- END ul#front -->
            <!-- BEGIN li#front --><li {attr} class="c_{level}" ><!-- END li#front -->
                <!-- BEGIN link#front --><a href="{url}" {attr} target="{target}"><!-- END link#front -->
                <!-- BEGIN label:veil -->{label}[raw]<!-- END label:veil -->
                <!-- BEGIN link#rear --></a><!-- END link#rear -->
            <!-- BEGIN li#rear --></li><!-- END li#rear -->
        <!-- BEGIN ul#rear --></ul><!-- END ul#rear -->
    <!-- END navigation:loop -->
    </div>
</div>
<!-- END_MODULE Navigation -->

スニペットをみてみると、コード全体が BEGIN_MODULE Navigation END_MODULE Navigation で囲まれているのがわかります。まずはこれにならって、修正箇所も同じようにこの MODULE タグで囲みましょう。

<!-- BEGIN_MODULE Navigation -->
<div class="header-nav">
    <div class="acms-grid">
      <nav class="navbar">
         <ul>
            <li class="stay"><a href="index.html">ホーム</a></li>
            <li><a href="list.html">一覧</a></li>
            <li><a href="entry.html">詳細</a></li>
          </ul>
      </nav>
   </div>
 </div>
<!-- END_MODULE Navigation -->

その後、管理ページ > モジュールID からモジュールIDを新規作成します。モジュールIDについて、詳しくはチュートリアル「モジュールで出力している情報を変更する」をご覧ください。

モジュールナビゲーション(Navigation)
idglobal_nav
名前グローバルナビゲーション


同時にモジュールIDの表示設定から、sampleテーマのサイト3つのページ「トップ」「一覧」「詳細」についてラベルとURLを設定しましょう。この3つのラベルがナビゲーションの項目になります。



ラベルURL属性
ホーム%{HOME_URL}#topclass="js-link_match_location-full"
一覧%{HOME_URL}news/class="js-link_match_location-full"
詳細%{HOME_URL}news/entry-20.htmlclass="js-link_match_location-full"

今回は「一覧」をクリックした時にお知らせの一覧ページ(http://localhost/news/)を、「詳細」をクリックした時に既存のエントリー「ホームページをリニューアルしました」(http://localhost/news/entry-20.html)を表示させるようにします。

この際、属性のところにクラスを設定する事で組み込みJS現在位置によって異なるクラスを付与する ( link match location )が動作するようになります。組み込みJSについて、詳しくはチュートリアル学習「a-blog cmsの内部構造について」をご覧ください。

また、テンプレート側でも編集箇所とスニペットの両方にモジュールID id="global_nav" を表記します。さらにモジュールブロックの開始直後に、設定に関わるファイル@include("/admin/module/setting.html")もインクルードしておきましょう。

<!-- BEGIN_MODULE Navigation id="global_nav" -->
<div class="header-nav">
   @include("/admin/module/setting.html")
    <div class="acms-grid">
      <nav class="navbar">
         <ul>
            <li class="stay"><a href="index.html">ホーム</a></li>
            <li><a href="list.html">一覧</a></li>
            <li><a href="entry.html">詳細</a></li>
          </ul>
      </nav>
   </div>
 </div>
<!-- END_MODULE Navigation -->

<!-- BEGIN_MODULE Navigation id="global_nav" -->
<div>
    @include("/admin/module/setting.html")
    <div class="acms-navbar acms-margin-bottom-medium clearfix">
    <!-- BEGIN navigation:loop -->
        <!-- BEGIN ul#front --><ul><!-- END ul#front -->
            <!-- BEGIN li#front --><li {attr} class="c_{level}" ><!-- END li#front -->
                <!-- BEGIN link#front --><a href="{url}" {attr} target="{target}"><!-- END link#front -->
                <!-- BEGIN label:veil -->{label}[raw]<!-- END label:veil -->
                <!-- BEGIN link#rear --></a><!-- END link#rear -->
            <!-- BEGIN li#rear --></li><!-- END li#rear -->
        <!-- BEGIN ul#rear --></ul><!-- END ul#rear -->
    <!-- END navigation:loop -->
    </div>
</div>
<!-- END_MODULE Navigation -->

その後サイトに戻ると、既存のナビゲーションの下にナビゲーションモジュールのサンプルが表示されます。



loop を追加する

次に <li> タグを、モジュールIDで設定する「表示件数」に基づいて必要な分だけ複製されるようにしていきます。複製したい部分で使うのは、「繰り返す命令」である BEGIN navigation:loop です。例えばナビゲーションでは、以下の<li> について1つのみ残し、 loop をかけると、<li><a href="index.html">ホーム</a></li>が繰り返されるようになります。

変更前
<li><a href="index.html">ホーム</a></li>
<li><a href="list.html">一覧</a></li>
<li class="stay"><a href="entry.html">詳細</a></li>
変更後
<!-- BEGIN navigation:loop -->
<li><a href="index.html">ホーム</a></li>
<!-- END navigation:loop -->


li 内を編集する

さらにこの繰り返した<li>内の情報を変数に置き換えて、「ホーム」と表示されている部分にモジュールID設定画面から入力した「一覧」「詳細」などの文字を表示させていきます。今回のナビゲーションにおいては、<li>にスタイルを指定するクラスが直接書かれていないため、<li>全体においてスニペットからコピー&ペーストしましょう。さらにスニペットには<ul>にもBEGIN ul#frontが振ってあるので、これらも含めて書き換えます。

<!-- BEGIN_MODULE Navigation id="global_nav" -->
<div class="header-nav">
   @include("/admin/module/setting.html")
   <div class="acms-grid">
      <nav class="navbar">

      <!-- BEGIN ul#front --><ul><!-- END ul#front -->
         <!-- BEGIN navigation:loop -->
         <!-- BEGIN li#front --><li {attr} class="c_{level}" ><!-- END li#front -->
         <!-- BEGIN link#front --><a href="{url}" {attr} target="{target}"><!-- END link#front -->
         <!-- BEGIN label:veil -->{label}[raw]<!-- END label:veil -->
         <!-- BEGIN link#rear --></a><!-- END link#rear -->
         <!-- BEGIN li#rear --></li><!-- END li#rear -->
         <!-- END navigation:loop -->
      <!-- BEGIN ul#rear --></ul><!-- END ul#rear -->

     </nav>
  </div>
</div>
<!-- END_MODULE Navigation -->

以上でナビゲーションのモジュール化は完了です。サイトで確認してみましょう。「一覧」「詳細」などの文字や、該当ページへのリンクが正しく設定されていれば正常に動的化されています。また参考にしていたスニペット部分は不要になるので、最後に削除しておきましょう。



以後のセクションにおいて何度かモジュール化の課題が出てきますが、作業の流れは今回行ったナビゲーションと変わりません。基本的にはこのように、スタイルのついているクラスを誤って削除しないように注意しつつ、既存のタグに a-blog cms 特有のラベルを書き加えていくことになります。

8. サブカラム共通:サイト内検索機能を実装する

各ページのサブカラムに用意されている検索フォームが機能するように実装していきます。



修正箇所は先ほどインクルードした themes/sample/include/search.html のdiv class="acms-form-action"内です。

<input type="search" id="searchForm" name="keyword" value="" size="15" class="search-form-input">
<span class="acms-form-side-btn"><button type="submit" name="submit" class="acms-btn btn-search"><span class="acms-icon-search"></span><span class="acms-hide-visually">検索</span></button></span>

これについて、以下のように書き換えていきます。

<input type="search" id="searchForm" name="keyword" value="%{KEYWORD}" size="15" class="search-form-input">
<input type="hidden" name="query" value="keyword">
<span class="acms-form-side-btn"><button type="submit" name="ACMS_POST_2GET" class="acms-btn btn-search"><span class="acms-icon-search"></span><span class="acms-hide-visually">検索</span></button></span>
<input type="hidden" name="tpl" value="/entry.html">
<input type="hidden" name="bid" value="%{BID}">

ポイントは以下の3点です。

  1. 既存のコードの input タグ内 value の空欄にvalue="%{KEYWORD}"を追加
  2. 既存のコードの button タグ内name="submit"name="ACMS_POST_2GET"に書き換え
  3. 必要箇所に3つのinput type="hidden"を追記

実装が終わったら、サイトに戻って試しに「エントリー」と検索してみましょう。検索結果が黄色で反映されていれば成功です。



9.トップページ:「エントリーヘッドライン」モジュールを実装する

「特定のカテゴリーの一覧」と書かれている5件のエントリーリストについて、インストール時から用意されている「お知らせ」カテゴリー内の3つのエントリー「ホームページをリニューアルしました」「ユニットによる要素の掲載例」「段組のテスト」を表示させていきます。


スニペットを貼り付ける前


完成図


エントリーを一覧表示させる モジュール としては、以下の5つが用意されています。

モジュール名 説明 変数表 スニペット
Entry_Body 本文を一覧表示 変数表 スニペット
Entry_List 一番シンプルなテキストの一覧表示 変数表 スニペット
Entry_Photo 写真の一覧表示 変数表 スニペット
Entry_Headline 設定項目が少し多いテキストの一覧表示 変数表 スニペット
Entry_Summary 高機能な一覧表示 変数表 スニペット

今回はこの中でも Entry_Headline を利用します。

それでは、実際にファイル /themes/sample/index.html の section class="module-section" id="top-headline" 以降を修正していきましょう。Entry_Headline の スニペット をコピーして、修正する場所の直後に貼り付けてください。今回はこのスニペットを参考に該当箇所の HTML を修正していきます。


<section class="module-section" id="top-headline">
   <div class="module-header clearfix">
      <h2 class="module-heading">特定のカテゴリーの一覧</h2>
      <a href="list.html" class="module-index-link"><span class="acms-icon acms-icon-arrow-right"></span>一覧</a>
   </div>

   <ul class="headline acms-list-group clearfix">
      <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 class="acms-list-group-item headline-item  js-biggerlink">
         <time class="headline-dat" datetime="2016-04-12">2016年04月12日( 火 )</time>
         <a href="entry.html" class="acms-list-group-title-link headline-title">エントリー名2</a>
      </li>
      <li class="acms-list-group-item headline-item  js-biggerlink">
         <time class="headline-dat" datetime="2015-04-13">2015年04月13日( 月 )</time>
         <a href="entry.html" class="acms-list-group-title-link headline-title">エントリー名3</a>
      </li>
      <li class="acms-list-group-item headline-item  js-biggerlink">
         <time class="headline-dat" datetime="2013-06-19">2013年06月19日( 水 )</time>
         <a href="entry.html" class="acms-list-group-title-link headline-title">エントリー名4</a>
      </li>
      <li class="acms-list-group-item headline-item  js-biggerlink">
         <time class="headline-dat" datetime="2013-06-19">2013年06月19日( 水 )</time>
         <a href="entry.htmll" class="acms-list-group-title-link headline-title">エントリー名5</a>
      </li>
   </ul>
</section>

<!-- BEGIN_MODULE Entry_Headline -->
<div class="acms-margin-bottom-medium">
@include("/admin/module/setting.html")
<div class="clearfix">
    <p class="acms-float-right">
        <a href="{indexUrl}" class="acms-btn-flat acms-btn-flat-default acms-btn-flat-small">一覧へ</a>
        <a href="{indexUrl}rss2.xml" class="acms-btn-flat acms-btn-flat-default acms-btn-flat-small"><span class="acms-icon-config_feed_rss2"></span><span class="acms-hide-visually">RSS</span></a>
    </p>
</div>
<ul class="acms-list-group"><!-- BEGIN entry:loop -->
    <li class="acms-list-group-item"><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日</time><!-- BEGIN category:veil --> <span class="acms-label acms-label-default">{categoryName}</span><!-- END category:veil --><!-- BEGIN url#front --><a href="{url}" class="acms-list-group-title-link"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear --><!-- BEGIN new --><span class="acms-label acms-label-warning">New!</span><!-- END new --></li><!-- END entry:loop -->
</ul>
</div>
<!-- END_MODULE Entry_Headline -->


id="top-headline のセクション直後のスニペット


MODULE タグとモジュールIDを追加する

まず編集部分を BEGIN_MODULE Entry_HeadlineEND_MODULE Entry_Headline で囲みます。

<!-- BEGIN_MODULE Entry_Headline -->
<section class="module-section" id="top-headline">
   <div class="module-header clearfix">
      <h2 class="module-heading">特定のカテゴリーの一覧</h2>
      <a href="list.html" class="module-index-link"><span class="acms-icon acms-icon-arrow-right"></span>一覧</a>
   </div>

   <ul class="headline acms-list-group clearfix">
      <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 class="acms-list-group-item headline-item  js-biggerlink">
         <time class="headline-dat" datetime="2016-04-12">2016年04月12日( 火 )</time>
         <a href="entry.html" class="acms-list-group-title-link headline-title">エントリー名2</a>
      </li>
      <li class="acms-list-group-item headline-item  js-biggerlink">
         <time class="headline-dat" datetime="2015-04-13">2015年04月13日( 月 )</time>
         <a href="entry.html" class="acms-list-group-title-link headline-title">エントリー名3</a>
      </li>
      <li class="acms-list-group-item headline-item  js-biggerlink">
         <time class="headline-dat" datetime="2013-06-19">2013年06月19日( 水 )</time>
         <a href="entry.html" class="acms-list-group-title-link headline-title">エントリー名4</a>
      </li>
      <li class="acms-list-group-item headline-item  js-biggerlink">
         <time class="headline-dat" datetime="2013-06-19">2013年06月19日( 水 )</time>
         <a href="entry.htmll" class="acms-list-group-title-link headline-title">エントリー名5</a>
      </li>
   </ul>
</section>
<!-- END_MODULE Entry_Headline -->

合わせてモジュールIDも設定していきます。管理ページ > モジュールID の右上にあるモジュールIDを作成をクリックして作成画面を表示しましょう。

モジュールヘッドライン(Entry_Headline)
idtop_headline
名前トップページのエントリーヘッドライン
カテゴリーIDお知らせ(cid:2)

作成したモジュールIDは MODULE タグに記述します。同時に管理画面に関わる@include("/admin/module/setting.html")も追加しておきましょう。

<!-- BEGIN_MODULE Entry_Headline id="top_headline" -->
<section class="module-section" id="top_headline">
@include("/admin/module/setting.html")

 略

</section>
<!-- END_MODULE Entry_Headline -->

loop を追加する

<ul class="headline acms-list-group clearfix">内では 以下の <li> について繰り返し表示されています。

<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 class="acms-list-group-item headline-item  js-biggerlink">
   <time class="headline-dat" datetime="2016-04-12">2016年04月12日( 火 )</time>
   <a href="entry.html" class="acms-list-group-title-link headline-title">エントリー名2</a>
</li>

略

<li class="acms-list-group-item headline-item  js-biggerlink">
   <time class="headline-dat" datetime="2013-06-19">2013年06月19日( 水 )</time>
   <a href="entry.htmll" class="acms-list-group-title-link headline-title">エントリー名5</a>
</li>

したがってこの <li> については「エントリー名1」のみ残して削除し、全体を BEGIN entry:loop で囲みましょう。

<!-- BEGIN entry:loop -->
<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>
<!-- END entry:loop -->

この時点でブラウザで確認すると、残した<li>の情報である「2016年04月27日( 水 ) エントリー名1」がリスト形式で繰り返し表示されます。


<li> 内を編集する

次に、1件のみ繰り返し表示されているリストにその他のエントリーも表示されるよう、<li> 内を編集します。ポイントは以下の3点です。

  1. 「2016年04月27日( 水 )」を{date#Y}年{date#m}月{date#d}日( {date#l}[weekEN2JP] )へ変更
変更前
<time class="headline-dat" datetime="2016-04-27">2016年04月27日( 水 )</time>

変更後
<time class="headline-dat" datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日( {date#l}[weekEN2JP] )</time>

ここで使用している校正オプションについて、詳しくはチュートリアル学習「a-blog cmsの内部構造について」をご覧ください。

  1. 「エントリー名1」を {title} へ変更
変更前
<a href="entry.html" class="acms-list-group-title-link headline-title">エントリー名1</a>

変更後
<!-- BEGIN url#front --><a href="entry.html" class="acms-list-group-title-link headline-title"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear -->
  1.  「a href="entry.html"」をa href="{url}"へ変更
変更前
<!-- BEGIN url#front --><a href="entry.html" class="acms-list-group-title-link headline-title"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear -->

変更後
<!-- BEGIN url#front --><a href="{url}" class="acms-list-group-title-link headline-title"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear -->

ここまでの変更で全体像はこのようになります。

<!-- BEGIN entry:loop -->
   <li class="acms-list-group-item headline-item  js-biggerlink">
      <time class="headline-dat" datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日( {date#l}[weekEN2JP] )</time>
      <!-- BEGIN url#front --><a href="{url}" class="acms-list-group-title-link headline-title"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear -->
   </li>
<!-- END entry:loop -->

また、今表示されているカテゴリーを確認するために、以下のコードを<time>の下に追加しておきましょう。

<!-- BEGIN category:veil --><span class="acms-label">{categoryName}</span><!-- END category:veil -->

さらに新着記事に New のラベルを表示をさせるため、<a>の直後に以下のコードを追加します。NEWの表示を確認したい場合は、管理ページ > エントリー で 「お知らせ」カテゴリーのエントリーの「日付」を現在の日付に合わせて保存してください。

<!-- BEGIN new --><span class="acms-label acms-label-warning">New</span><!-- END new -->

全ての変更を終えると、全体像はこのようになります。

<!-- BEGIN entry:loop -->
<li class="acms-list-group-item headline-item  js-biggerlink">
   <time class="headline-dat" datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日( {date#l}[weekEN2JP] )</time>
   <!-- BEGIN category:veil --><span class="acms-label">{categoryName}</span><!-- END category:veil -->
   <!-- BEGIN url#front --><a href="{url}" class="acms-list-group-title-link headline-title"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear -->
   <!-- BEGIN new --><span class="acms-label acms-label-warning">New</span><!-- END new -->
</li>
<!-- END entry:loop -->

仕上げをする

最後に モジュールヘッドラインについて適切な形に変更しましょう。

  • 「特定のカテゴリーの一覧」を「お知らせ」へ変更
  • 「一覧」のリンク先を お知らせ一覧 へ変更
<div class="module-header clearfix">
   <h2 class="module-heading">お知らせ</h2>
   <a href="/news/" class="module-index-link"><span class="acms-icon acms-icon-arrow-right"></span>一覧</a>
</div>

以上でエントリーヘッドラインのモジュール化は完了です。参考にしたスニペット部分は削除しておきましょう。



10. 一覧ページ:カテゴリー毎にページタイトルを変更できるようにする

現在は、一覧ページやエントリーの詳細ページをみると、全てのカテゴリーで「カテゴリー名」という表示になっています。ここからはカスタムフィールドメーカーを使って、この部分に「会社概要」「お知らせ」などそれぞれのカテゴリー別の情報を表示していきます。



編集箇所は冒頭でインクルードした /themes/sample/include/ 内にある page-title.html です。

    <div class="page-title-wrapper" style="background-image: url(/images/header.jpg);">

        <div class="page-title-filter"></div>
        <div class="page-title-inner">
            <div class="acms-container">
                <h1 class="page-title">カテゴリ名</h1>
                <p class="page-description">カテゴリーの説明文が書かれます。</p>
            </div>
        </div>
    </div>

まずは「カテゴリー名」と出ている部分にページが該当するカテゴリー名「お知らせ」を表示します。ここで使用するのはグローバル変数 %{CATEGORY_NAME} です。グローバル変数については、詳しくはチュートリアルレベル2「ナビゲーションを編集する」をご覧ください。

    <div class="page-title-wrapper" style="background-image: url(/images/header.jpg);">

        <div class="page-title-filter"></div>
        <div class="page-title-inner">
            <div class="acms-container">
                <h1 class="page-title">%{CATEGORY_NAME}</h1>
                <p class="page-description">カテゴリーの説明文が書かれます。</p>
            </div>
        </div>
    </div>


次に「カテゴリーの説明文が書かれます。」のテキスト部分と背景画像について、カテゴリー毎に違うものを表示していきます。この入力欄については、カスタムフィールドメーカーを使って作成していきます。カスタムフィールドメーカーについて、詳しくはチュートリアルレベル7「フィールドの入力項目をカスタマイズする ①テキストのみ」をご覧ください。

カスタムフィールドメーカーを利用する事前準備として、まず入力ソースを記述するファイルを作成します。/themes/sample/admin/category/ に field.html を新規作成してください。

ファイルの作成が完了したら、コンフィグからカスタムフィールドメーカーを開き、以下のように入力用ソースを生成します。

タイプ タイトル フィールド 画像サイズ
テキスト カテゴリーの説明 category_description
画像 背景画像 category_image 幅1200px


このようにして生成された入力用ソースがこちらです。

<table class="acms-admin-table-admin-edit">
  <tr>
    <th>カテゴリーの説明</th>
    <td>
      <input type="text" name="category_description" value="{category_description}" class="acms-admin-form-width-full" />
      <input type="hidden" name="field[]" value="category_description" />
    </td>
  </tr>
  <tr>
    <th>背景画像</th>
    <td class="js-img_resize_cf">
      <!-- BEGIN_IF [{category_image@path}/nem] -->
      <img src="%{ARCHIVES_DIR}{category_image@path}" class="acms-admin-img-responsive js-img_resize_preview" style="width:1200px" alt="{category_image@alt}" />
      <input type="hidden" name="category_image@old" value="{category_image@path}" />
      <div class="acms-admin-form-checkbox">
        <input type="checkbox" name="category_image@edit" value="delete" id="input-checkbox-category_image@edit" />
        <label for="input-checkbox-category_image@edit">
          <i class="acms-admin-ico-checkbox"></i>削除</label>
      </div>
      <!-- ELSE -->
      <img src="%{ARCHIVES_DIR}{category_image@path}" class="acms-admin-img-responsive js-img_resize_preview" style="width:1200px;display:none" />
      <!-- END_IF -->
      <input type="file" name="category_image" size="20" class="js-img_resize_input" />
      <br/>
      <input type="hidden" name="field[]" value="category_image" />
      <input type="hidden" name="category_image:extension" value="image" />
      <input type="hidden" name="category_image@width" value="1200" />
      <input type="hidden" name="category_image@filename" value="" />
    </td>
  </tr>
</table>

これを先ほど作成した field.html に貼り付けると、以下のようにカテゴリーの管理ページの「カスタム設定」にフォームが作られます。



今回は「お知らせ」カテゴリーの設定画面で以下のように設定しておきましょう。

カテゴリーの説明お知らせを記載しています。
背景画像任意のサンプル画像を設置

次に入力した情報についてサイトの表側に表示させます。作業場所を /themes/sample/include/page-title.html に戻し、以下の3点を変更しましょう。

  • モジュールフィールドでソース全体を囲む
<!-- BEGIN_MODULE Category_Field -->
<div class="page-title-wrapper" style="background-image: url(/images/header.jpg);">

     <div class="page-title-filter"></div>
     <div class="page-title-inner">
         <div class="acms-container">
             <h1 class="page-title">%{CATEGORY_NAME}</h1>
             <p class="page-description">カテゴリーの説明文が書かれます。</p>
         </div>
     </div>
 </div>
<!-- END_MODULE Category_Field -->
  • 背景画像部分を変更する
変更前
<div class="page-title-wrapper" style="background-image: url(/images/header.jpg);">

変更後
<div class="page-title-wrapper" style="background-image: url(%{ARCHIVES_DIR}{category_image@path});" alt="{category_image@alt}">
  • カテゴリーの説明文を変更する
変更前
<p class="page-description">カテゴリーの説明文が書かれます。</p>

変更後
<p class="page-description">{category_description}</p>

以上でページタイトル部分の変更は完了です。

<!-- BEGIN_MODULE Category_Field -->
<div class="page-title-wrapper" style="background-image: url(%{ARCHIVES_DIR}{category_image@path});" alt="{category_image@alt}">

    <div class="page-title-filter"></div>
    <div class="page-title-inner">
        <div class="acms-container">
            <h1 class="page-title">%{CATEGORY_NAME}</h1>
            <p class="page-description">{category_description}</p>
        </div>
    </div>
</div>
<!-- END_MODULE Category_Field -->


11.一覧ページ:「トピックパス」モジュールを実装する

Webサイトの階層構造と現在地の関係をわかりやすくするために、トピックパス ( パンくずリスト ) が用意されています。この部分をモジュール化して、自動的にカテゴリー名やエントリー名が反映されるようにしましょう。



作業するファイルは、冒頭でインクルードした themes/sample/include/topicpath.html です。

<nav class="topicpath">
    <ol class="topicpath-list acms-container sp-container clearfix">
        <li class="topicpath-item"><a href="index.html" class="topicpath-link">HOME</a></li>
        <li class="topicpath-item"><a href="list.html" class="topicpath-link">カテゴリー名</a></li>
        <li class="topicpath-item"><a href="entry.html" class="topicpath-link">エントリー名</a></li>
    </ol>
</nav>

MODULE タグとモジュールIDを追加する

まずは Topicpath モジュールの スニペット を修正箇所の直後に貼り付けます。

<nav class="topicpath">
    <ol class="topicpath-list acms-container sp-container clearfix">
        <li class="topicpath-item"><a href="index.html" class="topicpath-link">HOME</a></li>
        <li class="topicpath-item"><a href="list.html" class="topicpath-link">カテゴリー名</a></li>
        <li class="topicpath-item"><a href="entry.html" class="topicpath-link">エントリー名</a></li>
    </ol>
</nav>

<!-- BEGIN_MODULE Topicpath -->
<ol class="acms-topicpath acms-margin-bottom-mini clearfix">
    <!-- BEGIN blog:loop -->
    <li><a href="{url}">{name}</a></li><!-- END blog:loop --><!-- BEGIN category:loop -->
    <li><a href="{url}">{name}</a></li><!-- END category:loop --><!-- BEGIN entry -->
    <li><a href="{url}">{title}</a></li><!-- END entry -->
</ol>
<!-- END_MODULE Topicpath -->

このスニペットを参考にして、編集箇所を BEGIN_MODULE TopicpathEND_MODULE Topicpath で囲みましょう。

<!-- BEGIN_MODULE Topicpath -->
<ol class="acms-topicpath acms-margin-bottom-mini clearfix">
    <!-- BEGIN blog:loop -->
    <li><a href="{url}">{name}</a></li><!-- END blog:loop --><!-- BEGIN category:loop -->
    <li><a href="{url}">{name}</a></li><!-- END category:loop --><!-- BEGIN entry -->
    <li><a href="{url}">{title}</a></li><!-- END entry -->
</ol>
<!-- END_MODULE Topicpath -->

次に管理画面より以下のようにモジュールIDを作成していきます。



モジュールトピックパス(Topicpath)
idtopicpath
名前トピックパス
引数カテゴリーID(cid)とエントリーID(eid)にチェック
階層>ブログ下階層のブログも含める
階層>カテゴリー下階層のカテゴリーも含める

トピックパスのモジュールID設定では、階層の設定を忘れないようにしましょう。「下階層のブログ(カテゴリー)も含める」と設定をしておくことで、子ブログや子カテゴリーを持つ深い階層のサイトの場合でも、トピックパスに全ての階層が表示されるようになります。

また表示設定では階層の数や起点の代替ラベルなどを確認することができます。ここでは以下の2点について設定しましょう。



階層の数(空白)
起点の代替ラベルHOME

モジュールIDの作成が完了したら、編集箇所にモジュールIDを追記します。


<!-- BEGIN_MODULE Topicpath id="topicpath" --> <ol class="topicpath-list acms-container sp-container clearfix"> <li class="topicpath-item"><a href="index.html" class="topicpath-link">HOME</a></li> <li class="topicpath-item"><a href="list.html" class="topicpath-link">カテゴリー名</a></li> <li class="topicpath-item"><a href="entry.html" class="topicpath-link">エントリー名</a></li> </ol> <!-- END_MODULE Topicpath -->

loop ラベルを追加する

スニペットを参考にして、ブログ名・カテゴリー名が表示される箇所をそれぞれ loop で囲みます。トピックパスに関しては、エントリー部分では該当の1ページのみタイトルが表示されるため、loop タグではなく BEGIN entry を使用します。


<!-- BEGIN_MODULE Topicpath id="topicpath" --> <ol class="topicpath-list acms-container sp-container clearfix"> <!-- BEGIN blog:loop --> <li class="topicpath-item"><a href="index.html" class="topicpath-link">HOME</a></li><!-- END blog:loop --><!-- BEGIN category:loop --> <li class="topicpath-item"><a href="list.html" class="topicpath-link">カテゴリー名</a></li><!-- END category:loop --><!-- BEGIN entry --> <li class="topicpath-item"><a href="entry.html" class="topicpath-link">エントリー名</a></li><!-- END entry --> </ol> <!-- END_MODULE Topicpath -->

<li> 内を編集する

最後に<li>において、それぞれの情報が自動的に取得できるように以下の3点を変数に書き換えます。

  • <a>内のURL部分を全て {url} に変更
  • 「HOME」「カテゴリー名」となっている部分を {name} に変更
  • 「エントリー名」となっている部分を {title} に変更
<!-- BEGIN_MODULE Topicpath  id="topicpath" -->
<ol class="topicpath-list acms-container sp-container clearfix">
  <!-- BEGIN blog:loop -->
  <li class="topicpath-item"><a href="{url}" class="topicpath-link">{name}</a></li><!-- END blog:loop --><!-- BEGIN category:loop -->
  <li class="topicpath-item"><a href="{url}" class="topicpath-link">{name}</a></li><!-- END category:loop --><!-- BEGIN entry -->
  <li class="topicpath-item"><a href="{url}" class="topicpath-link">{title}</a></li><!-- END entry -->
</ol>
<!-- END_MODULE Topicpath -->

トピックパスモジュールでは、ブログ、カテゴリー名は変数 {name} で、エントリー名は変数 {title} で表示することができます。このような変数の使い分けの規則については、それぞれのモジュールの変数表に一覧で記載されています。変数の表記に迷う場合や、追加で新しい情報を載せる場合はぜひご活用ください。

以上でトピックパスの作業は完了です。

12. 一覧ページ:「エントリーサマリー」モジュールを実装する

一覧ページの「カテゴリー名」と出ている部分を「エントリーサマリー」でモジュール化していきます。現在表示しているlist.html は、カテゴリー「お知らせ」の一覧ページです。この部分を動的化することによって、お知らせに所属している3件のエントリーの情報が反映されます。


実装前

実装前


実装後

実装後


編集箇所は list.html の以下の部分です。

<section class="module-section">
   <div class="module-header clearfix">
                        <h2 class="module-heading">カテゴリー名</h2>
   </div>
   <ul class="summary-custom clearfix">
      <li class="summary-custom-entry acms-col-6 acms-col-sm-4">
         <a href="entry.html">
            <div class="photo">
               <img src="/images/box_zoo1.jpg" alt="" class="acms-img-responsive">
        </div>
            <p class="photo-title">エントリー名1</p>
         </a>
         <p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されて...</p>
      </li>
      <li class="summary-custom-entry acms-col-6 acms-col-sm-4">
         <a href="entry.html">
            <div class="photo">
               <img src="/images/box_zoo2.jpg" alt="" class="acms-img-responsive">
            </div>
            <p class="photo-title">エントリー名2</p>
         </a>
         <p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されて...</p>
      </li>
      <li class="summary-custom-entry acms-col-6 acms-col-sm-4">
         <a href="entry.html">
            <div class="photo">
               <img src="/images/box_zoo2.jpg" alt="" class="acms-img-responsive">
            </div>
            <p class="photo-title">エントリー名3</p>
         </a>
         <p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されて...</p>
      </li>
      <li class="summary-custom-entry acms-col-6 acms-col-sm-4">
         <a href="entry.html">
            <div class="photo">
               <img src="/images/box_zoo2.jpg" alt="" class="acms-img-responsive">
            </div>
            <p class="photo-title">エントリー名4</p>
         </a>
         <p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されて...</p>
      </li>
      <li class="summary-custom-entry acms-col-6 acms-col-sm-4">
         <a href="entry.html">
            <div class="photo">
               <img src="/images/box_zoo2.jpg" alt="" class="acms-img-responsive">
            </div>
            <p class="photo-title">エントリー名5</p>
         </a>
         <p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されて...</p>
      </li>
      <li class="summary-custom-entry acms-col-6 acms-col-sm-4">
         <a href="entry.html">
            <div class="photo">
               <img src="/images/box_zoo2.jpg" alt="" class="acms-img-responsive">
            </div>
            <p class="photo-title">エントリー名6</p>
         </a>
         <p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されて...</p>
      </li>
   </ul>

   <nav class="acms-pager-container">
      <ul class="pager">
         <li><a href="list.html" aria-label="前へ" class="pager-link"><span aria-hidden="true">&laquo;</span></a></li>
         <li><span><a href="list.html" class="pager-link">1</a></span></li>
         <li class="cur"><span>2</span></li>
         <li><span><a href="list.html" class="pager-link">3</a></span></li>
         <li><a href="list.html" aria-label="次へ" class="pager-link"><span aria-hidden="true">&raquo;</span></a></li>
      </ul>
   </nav>

</section>

今回は扱うソースコードのボリュームがあるので、loop で繰り返しができる<li>については、1つのかたまりのみ残して先に削除してしまいましょう。

<section class="module-section">
   <div class="module-header clearfix">
                        <h2 class="module-heading">カテゴリー名</h2>
   </div>
   <ul class="summary-custom clearfix">
      <li class="summary-custom-entry acms-col-6 acms-col-sm-4">
         <a href="entry.html">
            <div class="photo">
               <img src="/images/box_zoo1.jpg" alt="" class="acms-img-responsive">
        </div>
            <p class="photo-title">エントリー名1</p>
         </a>
         <p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されて...</p>
      </li>
   </ul>

   <nav class="acms-pager-container">
      <ul class="pager">
         <li><a href="list.html" aria-label="前へ" class="pager-link"><span aria-hidden="true">&laquo;</span></a></li>
         <li><span><a href="list.html" class="pager-link">1</a></span></li>
         <li class="cur"><span>2</span></li>
         <li><span><a href="list.html" class="pager-link">3</a></span></li>
         <li><a href="list.html" aria-label="次へ" class="pager-link"><span aria-hidden="true">&raquo;</span></a></li>
      </ul>
   </nav>

</section>



それではこの編集箇所を、以下のエントリーサマリーのスニペットを参考にして書き換えていきます。


<!-- BEGIN_MODULE Entry_Summary --> <div class="acms-margin-bottom-medium"> @include("/admin/module/setting.html") <!-- BEGIN notFound --> <p>ただいまページを準備しております。もうしばらくお待ちください。</p> <!-- END notFound --> <div class="acms-grid"> <!-- BEGIN unit:loop --> <!-- BEGIN entry:loop --> <div class="acms-col-md-4 js-autoheight-r"> <div class="acms-summary"> <div class="acms-summary-image"><!-- BEGIN image:veil --> <img src="%{ROOT_DIR}{path}[resizeImg(100,100)]" alt="{alt}" width="100" height="100"><!-- END image:veil --><!-- BEGIN noimage --><img src="/images/default/noimage.gif" alt="" width="{noImgX}"><!-- END noimage --> </div> <div class="acms-summary-body"> <h3>{title}</h3> <p>{summary}</p> <p><a href="{url}" class="acms-btn">詳細をみる</a></p> </div> </div> </div> <!-- END entry:loop --> <!-- END unit:loop --> </div> <!-- BEGIN pager:veil --> <div class="acms-text-center"> <ul class="acms-pager"> <!-- BEGIN backLink --><li><a href="{url}">« 前の{backNum}件</a></li><!-- END backLink --> <!-- BEGIN page:loop --><li{pageCurAttr}[raw]><span><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></span></li><!-- END page:loop --> <!-- BEGIN lastPage:veil --><li><span>...</span></li><li{pageCurAttr}[raw]><span><a href="{lastPageUrl}">{lastPage}</a></span></li><!-- END lastPage:veil --> <!-- BEGIN forwardLink --><li><a href="{url}">次の{forwardNum}件 »</a></li><!-- END forwardLink --> </ul> </div> <!-- END pager:veil --> </div> <!-- END_MODULE Entry_Summary -->

MODULE タグとモジュールIDを追加する

まずは該当箇所を BEGIN_MODULE Entry_SummaryBEGIN_MODULE Entry_Summaryで囲みます。

<!-- BEGIN_MODULE Entry_Summary -->
<section class="module-section">
   <div class="module-header clearfix">
                        <h2 class="module-heading">カテゴリー名</h2>
   </div>
   <ul class="summary-custom clearfix">
      <li class="summary-custom-entry acms-col-6 acms-col-sm-4">
         <a href="entry.html">
            <div class="photo">
               <img src="/images/box_zoo1.jpg" alt="" class="acms-img-responsive">
        </div>
            <p class="photo-title">エントリー名1</p>
         </a>
         <p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されて...</p>
      </li>
   </ul>

   <nav class="acms-pager-container">
      <ul class="pager">
         <li><a href="list.html" aria-label="前へ" class="pager-link"><span aria-hidden="true">&laquo;</span></a></li>
         <li><span><a href="list.html" class="pager-link">1</a></span></li>
         <li class="cur"><span>2</span></li>
         <li><span><a href="list.html" class="pager-link">3</a></span></li>
         <li><a href="list.html" aria-label="次へ" class="pager-link"><span aria-hidden="true">&raquo;</span></a></li>
      </ul>
   </nav>

</section>
<!-- END_MODULE Entry_Summary -->

合わせて、モジュールIDも以下のように作成していきましょう。



モジュールサマリー(Entry_Summary)
idindex_summary
名前一覧ページのエントリーサマリー
引数カテゴリーID(cid)
ページ(page)チェックを打つ

エントリーヘッドラインのモジュールID設定では、引数としてカテゴリーIDで「お知らせ」を選択しましたが、汎用の一覧ページ用のテンプレートでは、個別にカテゴリーを指定することができません。したがって、今回の引数についてはカテゴリーIDのチェックボックスにチェックを打ち、表示されているページが所属するカテゴリーの情報を反映するようにします。

またエントリーサマリーなど改ページが必要なモジュールについてページャーを機能させるためには、「ページ(page)」へのチェックが必要になります。このチェックを忘れると、2ページ目以降を表示させることができなくなるので注意しましょう。



さらに表示設定からはサマリーの文字数について「100」と設定しておきましょう。



モジュールIDの作成が完了したら、編集箇所にモジュールIDを追記します。また参考にするスニペットには、管理画面に関する include文@include("/admin/module/setting.html")や、ページが見つからなかった時に表示される BEGIN notFound部分も含まれているので、こちらも忘れずに書き加えておきましょう。

<!-- BEGIN_MODULE Entry_Summary id="index_summary" -->
<section class="module-section">
@include("/admin/module/setting.html")
<!-- BEGIN notFound -->
<p>ただいまページを準備しております。もうしばらくお待ちください。</p>
<!-- END notFound -->

略

</section>
<!-- END_MODULE Entry_Summary -->

ここからは、サマリー部分とページャー部分に分けて解説していきます。まずはサマリー部分の作業から始めましょう。



サマリー部分に loop と veil ブロックを追加する

まずはスニペットを参考にして、サマリー部分の<li>タグを unit:loopentry:loop で囲みます。

略

<ul class="summary-custom clearfix">
   <!-- BEGIN unit:loop -->
   <!-- BEGIN entry:loop -->
   <li class="summary-custom-entry acms-col-6 acms-col-sm-4">
      <a href="entry.html"><div class="photo">
         <img src="/images/box_zoo1.jpg" alt="" class="acms-img-responsive">
      </div>
      <p class="photo-title">エントリー名1</p></a>
      <p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されて... </p>
   </li>
   <!-- END entry:loop -->
   <!-- END unit:loop -->
</ul>

略

さらに画像部分において、veil ブロックで囲っていきます。これと合わせて、メイン画像が何も登録されていないときに表示される noimage 画像の情報も追記しておきましょう。veil ブロックについては、詳しくはチュートリアルレベル7「フィールドの入力項目をカスタマイズする ①テキストのみ」をご覧ください。

変更前
<img src="/images/box_zoo1.jpg" alt="" class="acms-img-responsive">

変更後
<!-- BEGIN image:veil --><img src="/images/box_zoo1.jpg" alt="" class="acms-img-responsive"><!-- END image:veil --><!-- BEGIN noimage --><img src="/images/default/noimage.gif" alt="" width="{noImgX}"><!-- END noimage -->

サマリー部分の<li> 内を編集する

サマリーの<li> 内について書き換える箇所は以下の3点です。

  • サマリーのリンク先を{url}に変更する
変更前
<a href="entry.html"><div class="photo">

変更後
<a href="{url}"><div class="photo">
  • サマリーの画像へのパスを、グローバル変数と校正オプションを使って書き換える
変更前
<img src="/images/box_zoo1.jpg" alt="" class="acms-img-responsive">

変更後
<img src="%{ROOT_DIR}{path}[resizeImg(320,320)]" alt="{alt}" class="acms-img-responsive">
  • サマリーのタイトルと概要文を変更する
変更前
<p class="photo-title">エントリー名1</p></a>
<p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されて...</p>

変更後
<p class="photo-title">{title}</p></a>
<p>{summary}</p>

以上で<li>内の編集は完了です。サマリー部分について、ソースの全体像は以下のようになります。

<ul class="summary-custom clearfix">
      <!-- BEGIN unit:loop -->
      <!-- BEGIN entry:loop -->
      <li class="summary-custom-entry acms-col-6 acms-col-sm-4">
         <a href="{url}"><div class="photo">
            <img src="%{ROOT_DIR}{path}[resizeImg(320,320)]" alt="{alt}" class="acms-img-responsive"><!-- END image:veil --><!-- BEGIN noimage --><img src="/images/default/noimage.gif" alt="" width="{noImgX}"><!-- END noimage -->
            </div>
         <p class="photo-title">{title}</p></a>
         <p>{summary}</p>
      </li>
<!-- END entry:loop -->
<!-- END unit:loop -->
</ul>



一覧表示に便利な「組み込みJS」を追記する

現時点でエントリーサマリーを見ると、各ブロックの高さがバラバラになっています。またリンクのクリック範囲も画像とタイトル部分にしか適応されていません。これらを最適化するために、組み込みJSで2つの機能を追加していきましょう。組み込みJSについて、詳しくはチュートリアル学習「a-blog cmsの内部構造について」をご覧ください。

設定する先は index.html の以下の<li>内です。

変更前
<li class="summary-custom-entry acms-col-6 acms-col-sm-4">

変更後
<li class="summary-custom-entry acms-col-6 acms-col-sm-4 js-autoheight-r js-biggerlink">

js-autoheight-r

PC やスマートフォンで横並びの数が違う場合にも、自動的に隣の要素を認識して高さを揃えてくれます。

js-biggerlink

リンクのクリックエリアをブロックの全範囲に拡大します。

以上でサマリー部分のモジュール化は完了です。

続いてページャー部分について作業していきます。ページャーはモジュールIDで設定する表示件数が実際のエントリーの件数を下回らないと表示されないため、一時的に表示件数を1件に設定し直しておきましょう。



修正箇所は以下の部分です。

<nav class="acms-pager-container">
   <ul class="pager">
      <li><a href="list.html" aria-label="前へ" class="pager-link"><span aria-hidden="true">&laquo;</span></a></li>
      <li><span><a href="list.html" class="pager-link">1</a></span></li>
      <li class="cur"><span>2</span></li>
      <li><span><a href="list.html" class="pager-link">3</a></span></li>
      <li><a href="list.html" aria-label="次へ" class="pager-link"><span aria-hidden="true">&raquo;</span></a></li>
   </ul>
</nav>

ページャーのスニペットはこのようになっています。ご覧のように a-blog cms 特有のブロックや可変のclassが多く含まれており、非常に複雑です。そのためこの部分に関しては、編集箇所を基準とするのではなく、スニペットを基準として静的ファイルで振られていたクラス名をスニペットの該当部分に追記する方法で実装していきます。

<!-- BEGIN pager:veil -->
<div class="acms-text-center">
   <ul class="acms-pager">
      <!-- BEGIN backLink --><li><a href="{url}">« 前の{backNum}件</a></li><!-- END backLink -->
      <!-- BEGIN page:loop --><li{pageCurAttr}[raw]><span><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></span></li><!-- END page:loop -->
      <!-- BEGIN lastPage:veil --><li><span>...</span></li><li{pageCurAttr}[raw]><span><a href="{lastPageUrl}">{lastPage} 
</a></span></li><!-- END lastPage:veil -->
      <!-- BEGIN forwardLink --><li><a href="{url}">次の{forwardNum}件 »</a></li><!-- END forwardLink -->
   </ul>
</div>
<!-- END pager:veil -->

ページャーのスニペットのクラス名を書き換える

まずはスニペットの<div class="acms-text-center"><ul class="acms-pager">のクラス名を、既存のコードを参考にして以下のように書き換えます。

<div class="acms-pager-container">
   <ul class="pager">

略

   </ul>
</div>

さらに複数の<li>や<a>について、既存のコードに振られているclass="pager-link"を追記します。

<!-- BEGIN backLink --><li><a href="{url}" class="pager-link">« 前の{backNum}件</a></li><!-- END backLink -->
<!-- BEGIN page:loop --><li{pageCurAttr}[raw] class="pager-link"><span><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></span></li><!-- END page:loop -->
<!-- BEGIN lastPage:veil --><li class="pager-link"><span>...</span></li><li{pageCurAttr}[raw]><span><a href="{lastPageUrl}">{lastPage}</a></span></li><!-- END lastPage:veil -->
<!-- BEGIN forwardLink --><li><a href="{url}" class="pager-link">次の{forwardNum}件 »</a></li><!-- END forwardLink -->

最後に「« 前の{backNum}件」「次の{forwardNum}件 »」と書いてある部分について「«」「»」に変更しましょう。以上でページャーの実装は完了です。この部分のコードの全体像は以下のようになります。

<!-- BEGIN pager:veil -->
<div class="acms-pager-container">
<ul class="pager">
<!-- BEGIN backLink --><li><a href="{url}" class="pager-link">&laquo;</a></li><!-- END backLink -->
<!-- BEGIN page:loop --><li{pageCurAttr}[raw] class="pager-link"><span><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></span></li><!-- END page:loop -->
<!-- BEGIN lastPage:veil --><li class="pager-link"><span>...</span></li><li{pageCurAttr}[raw]><span><a href="{lastPageUrl}">{lastPage}</a></span></li><!-- END lastPage:veil -->
<!-- BEGIN forwardLink --><li><a href="{url}" class="pager-link">&raquo;</a></li><!-- END forwardLink -->
</ul>
</div>
<!-- END pager:veil -->


仕上げをする

最後にモジュールのタイトルについて修正しましょう。「カテゴリー名」となっている部分にカテゴリー名「お知らせ」を表示するためには、グローバル変数を使用します。

変更前
<div class="module-header clearfix">
   <h2 class="module-heading">カテゴリー名</h2>
</div>

変更後
<div class="module-header clearfix">
   <h2 class="module-heading">%{CATEGORY_NAME}</h2>
</div>

以上でエントリーサマリーの作業は全て完了です。



13. 詳細ページ:「エントリーボディ」モジュールを実装する

最後に詳細ページのエントリー部分を「エントリーボディ」でモジュール化しましょう。この部分について動的化されると、それぞれのエントリーが表示されるだけでなく、サイトの表示画面からエントリーの新規登録もできるようになります。


実装前

実装前


実装後

実装後


MODULE タグとモジュールIDを追加する

エントリーボディのスニペットには、以下のようなエントリー管理に関わるインクルード文が複数含まれています。

インクルード文 内容 表示
@include("/admin/entry/revision-info.html") バージョン管理 管理
@include("/admin/entry/title.html") 管理ページのタイトル表示用 管理
@include("/include/unit.html") ユニットの内容を表示 一般
@include("/include/form/unit.html") 動的フォームの表示 一般
@include("/admin/entry/edit.html") エントリー追加・更新用フォーム表示 管理
@include("/admin/entry/add.html") ユニット追加フォーム表示 管理
@include("/admin/form2/edit.html") 動的フォーム管理用フォーム表示 管理
@include("/admin/entry/action.html") 変更・追加ボタン表示 管理

これらがないとそれぞれの機能が動作しないので、誤って削除しないよう注意しなければなりません。そのため、エントリー本文のモジュール化についても、サマリーのページャーと同様にスニペットを基準とした方法で実装していきます。

編集箇所は以下の部分です。

<article class="entry clearfix">
<header class="acms-page-header page-header">
<!--
<p class="entryInfo">
<time datetime="2016-04-27">2016年04月27日(水)</time>
<span class="acms-label entry-category"><a href="list.html">カテゴリー名</a></span>
<span class="acms-label acms-label-danger entry-new">NEW</span>
</p>
-->
<h1 class="entry-title"><a href="entry.html">エントリー名1</a></h1>
</header>

<div class="acms-entry entry-column">
<div class="acms-grid">
<div class="column-image-auto js_notStyle acms-col-sm-12">
<a href="/images/bear.jpg">
<img class="columnImage" src="/images/bear.jpg" alt="" width="858" height="483">
</a>
</div>
<p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。</p>
<h2>見出しを設定しています</h2>

<div class="entry-container">
<table>
<tbody>
<tr><th>項目名1</th><td>内容が書かれています。内容が書かれています。内容が書かれています。</td></tr>                                    <tr><th>項目名2</th><td>内容が書かれています。内容が書かれています。</td></tr>                                   <tr><th>項目名3</th><td>内容が書かれています。</td></tr>                                  
<tr><th>項目名4</th><td>内容が書かれています。</td></tr>                              
</tbody>
</table>
</div>


<div class="column-image-left acms-col-sm-6">
<a href="/images/bear.jpg">
<img class="columnImage" src="/images/bear.jpg" alt="" width="418" height="278">
</a>
</div>
<!-- 画像 -->
<div class="column-image-left acms-col-sm-6">
<a href="/images/bear.jpg">
<img class="columnImage" src="/images/bear.jpg" alt="" <br="">width="418" height="278"&gt;</a>
</div>

<p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。</p>

<hr class="clearHidden">
</div>
</div>

<footer class="entry-footer">
<div class="clearfix">
<div class="entry-tag-wrapper acms-col-md-6">
</div>
<div class="acms-col-md-6">
<div class="share-wrapper">
<p class="share-text">シェアする</p>
<ul class="share-list">
<li class="share-item"><a href="http://www.facebook.com/share.php?u=*****" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="share-item-facebook"><span class="acms-icon-facebook"></span></a></li>
<li class="share-item"><a href="http://twitter.com/share?url=*****&amp;text=*****&amp;via=#" target="_blank" class="share-item-twitter"><span class="acms-icon-twitter"></span></a></li>
<li class="share-item"><a href="https://plus.google.com/share?url=*****" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="share-item-gplus"><span class="acms-icon-gplus"></span></a></li>
</ul>
</div>
</div>
</div>
</footer>
</article>

<ul class="serial-nav clearfix">
<li class="serial-nav-item serial-nav-item-prev">
<a href="entry.html">« 前のエントリー</a>
</li>
<li class="serial-nav-item serial-nav-item-next">
<a href="entry.html">次のエントリー »</a>
</li>
</ul>

この編集箇所の直後に、エントリーボディのスニペットを貼り付けましょう。

<!-- BEGIN_MODULE Entry_Body -->
<div>
<!-- BEGIN notFound -->
<p>ただいまページを準備しております。もうしばらくお待ちください。</p>
<!-- END notFound -->

<!-- BEGIN serialNavi:veil -->
<ul class="acms-pager">
    <li>
        <!-- BEGIN prevNotFound -->prev not found<!-- END prevNotFound -->
        <!-- BEGIN prevLink -->
        <a href="{url}">« {name}[trim(27, '...')|escape]</a>
        <!-- END prevLink -->
         </li>
    <li><a href="{upperUrl}">一覧へ</a></li>
    <li> 
        <!-- BEGIN nextNotFound -->next not found<!-- END nextNotFound -->
        <!-- BEGIN nextLink -->
        <a href="{url}">{name}[trim(27, '...')|escape] » </a>
        <!-- END nextLink -->
    </li>
</ul>
<!-- END serialNavi:veil -->

<!-- BEGIN entry:loop -->
@include("/admin/entry/revision-info.html")

<div class="acms-page-header">
        @include("/admin/entry/title.html")
    <!-- BEGIN title:veil -->
        <h2><a href="{titleUrl}">{title}[raw]</a></h2>
    <!-- END title:veil -->
</div>
<div>
    <div>
        <!-- BEGIN unit:veil -->
        <div class="acms-entry">
            <div class="acms-grid-r">
                        @include("/include/unit.html")
            </div>
        </div>
        <hr class="clearHidden">
        <!-- END unit:veil -->
        <!-- BEGIN continueLink:veil -->
        <p><a href="{continueUrl}" class="acms-btn-flat"><span class="acms-icon-arrow-right"></span>「{continueName}」の続きを読む</a></p>
        <!-- END continueLink:veil -->

        <!-- BEGIN formBody -->
                @include("/include/form/unit.html")
        <hr class="clearHidden">
        <!-- END formBody -->

        <!-- BEGIN adminEntryEdit -->
                @include("/admin/entry/edit.html")
                @include("/admin/entry/add.html")
        <!-- END adminEntryEdit -->

        <!-- BEGIN adminFormEdit -->
                @include("/admin/form2/edit.html")
        <!-- END adminFormEdit -->

        <!-- BEGIN tag:veil -->
        <p>タグ:<!-- BEGIN tag:loop --><a href="{url}" class="acms-inline-space">{name}</a> <!-- END tag:loop --></p>
        <!-- END tag:veil -->

                @include("/admin/entry/action.html")
    </div>
    <!-- BEGIN footer:veil -->
    <div>
        <p class="acms-text-info">Posted by {posterName} at {date#H}:{date#i}  <a href="{inheritUrl}#permalink">パーマリンク</a>
            <!-- BEGIN commentAmount -->
            <a href="{commentUrl}#comment">コメント ( {commentAmount} )</a>
            <!-- END commentAmount -->
        </p>
    </div>
    <!-- END footer:veil -->
</div>
<!-- END entry:loop -->

<!-- BEGIN pager:veil -->
<div class="acms-text-center">
    <ul class="acms-pager">
        <!-- BEGIN backLink --><li><a href="{url}">« 前の{backNum}件</a></li><!-- END backLink -->
        <!-- BEGIN firstPage:veil --><li{pageCurAttr}[raw]><span><a href="{firstPageUrl}">{firstPage}</a></span></li><!-- END firstPage:veil -->
        <!-- BEGIN page:loop --><!-- BEGIN glue --><!-- END glue --><li{pageCurAttr}[raw]><span><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></span></li><!-- END page:loop -->
        <!-- BEGIN lastPage:veil --><li>...</li><li{pageCurAttr}[raw]><span><a href="{lastPageUrl}">{lastPage}</a></span></li><!-- END lastPage:veil -->
        <!-- BEGIN forwardLink --><li><a href="{url}">次の{forwardNum}件 »</a></li><!-- END forwardLink -->
    </ul>
</div>
<!-- END pager:veil -->
</div>

<!-- BEGIN simplePager:veil -->
<ul class="serialNav clearfix">
    <li class="serialNavItem serialNavItemPrev"><!-- BEGIN prevPage -->
        <a href="{url}">« 前ページ</a>
        <!-- END prevPage -->
    </li>
    <li class="serialNavItem serialNavItemNext"><!-- BEGIN nextPage --><a href="{url}">次ページ »</a>
        <!-- END nextPage -->
    </li>
</ul>
<!-- END simplePager:veil -->

<!-- END_MODULE Entry_Body -->

スニペットを貼り付けると、修正箇所の下部にエントリーが表示されるのが確認できます。



次に以下のようにモジュールIDを作成します。今回はエントリー末に前後リンクがついているため、表示設定タブから前後リンクを表示させるようチェックを打っておきましょう。

モジュールエントリー本文(Entry_Body)
identry_body
名前詳細ページのエントリー本文
引数カテゴリーID(cid)とエントリーID(eid)にチェック
前後リンク「前後リンクを表示できるようにする。」にチェック


モジュールIDの作成が完了したら、スニペットのBEGIN_MODULE Entry_Bodyに追記します。

<!-- BEGIN_MODULE Entry_Body id="entry_body" -->

略

<!-- END_MODULE Entry_Body -->

スニペットを編集する

ここからは、既存の静的ファイルと見比べて都度スニペットを編集していきます。修正箇所は大きく分けてつです。

  • BEGIN serialNavi:veilから始まる以下の前後リンクのコードを全削除する
<!-- BEGIN serialNavi:veil -->
<ul class="acms-pager">
   <li>
   <!-- BEGIN prevNotFound -->prev not found<!-- END prevNotFound -->
   <!-- BEGIN prevLink -->
   <a href="{url}">« {name}[trim(27, '...')|escape]</a>
   <!-- END prevLink -->
   </li>
   <li><a href="{upperUrl}">一覧へ</a></li>
   <li> 
   <!-- BEGIN nextNotFound -->next not found<!-- END nextNotFound -->
   <!-- BEGIN nextLink -->
   <a href="{url}">{name}[trim(27, '...')|escape] » </a>
   <!-- END nextLink -->
   </li>
</ul>
<!-- END serialNavi:veil -->
  • エントリータイトル部分のclass="acms-page-header"<h2><a href="{titleUrl}">{title}[raw]</a></h2>について既存のコードのタグとクラスに変更する
変更前
<div class="acms-page-header">
@include("/admin/entry/title.html")
   <!-- BEGIN title:veil -->
      <h2><a href="{titleUrl}">{title}[raw]</a></h2>
   <!-- END title:veil -->
   </div>

変更後
<div class="acms-page-header page-header">
@include("/admin/entry/title.html")
   <!-- BEGIN title:veil -->
      <h1 class="entry-title"><a href="{titleUrl}">{title}[raw]</a></h1>
   <!-- END title:veil -->
   </div>


  • BEGIN footer:veil についてSNSボタンを含んだ既存のコードに置き換える
変更前
<!-- BEGIN footer:veil -->
<div>
   <!-- BEGIN commentAmount -->
   <a href="{commentUrl}#comment">コメント ( {commentAmount} )</a>
   <!-- END commentAmount -->
   <p class="acms-text-info">Posted by {posterName} at {date#H}:{date#i}  <a href="{inheritUrl}#permalink">パーマリンク</a>
   </p>
</div>
<!-- END footer:veil -->
変更後
<footer class="entry-footer">
<div class="clearfix">
<div class="entry-tag-wrapper acms-col-md-6">
</div>
<div class="acms-col-md-6">
<div class="share-wrapper">
<p class="share-text">シェアする</p>
<ul class="share-list">
<li class="share-item"><a href="http://www.facebook.com/share.php?u=*****" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="share-item-facebook"><span class="acms-icon-facebook"></span></a></li>
<li class="share-item"><a href="http://twitter.com/share?url=*****&amp;text=*****&amp;via=#" target="_blank" class="share-item-twitter"><span class="acms-icon-twitter"></span></a></li>
<li class="share-item"><a href="https://plus.google.com/share?url=*****" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="share-item-gplus"><span class="acms-icon-gplus"></span></a></li>
</ul>
</div>
</div>
</div>
</footer>


  • エントリー下部に前後リンクを設置する
元になるソース部分
<ul class="serial-nav clearfix">
   <li class="serial-nav-item serial-nav-item-prev">
      <a href="{url}">&laquo; 前のエントリー</a>
   </li>
   <li class="serial-nav-item serial-nav-item-next">
      <a href="{url}">次のエントリー &raquo;</a>
   </li>
</ul>
変更後
<!-- BEGIN serialNavi:veil -->
<ul class="serial-nav clearfix">
    <li class="serial-nav-item serial-nav-item-prev">
        <!-- BEGIN prevNotFound -->prev not found<!-- END prevNotFound -->
        <!-- BEGIN prevLink -->
        <a href="{url}">&laquo; 前のエントリー</a>
        <!-- END prevLink -->
    </li>
    <li class="serial-nav-item serial-nav-item-next">
        <!-- BEGIN nextNotFound -->next not found<!-- END nextNotFound -->
        <!-- BEGIN nextLink -->
        <a href="{url}">次のエントリー &raquo;</a>
        <!-- END nextLink -->
    </li>
</ul>
<!-- END serialNavi:veil -->


以上でエントリーボディのモジュール化は完了です。既存の編集箇所については削除しましょう。



14. テンプレートファイルの名前を変更する

5回のモジュール化の作業を経て、ファイル内に含まれていた過半数の内部リンクが {url} で変数化できました。最後に index.html 、list.html 、entry.html のファイル名を、 a-blog cmsで一般的に使われる形へ変更しましょう。

種類  ファイル名
トップページ _top.html
一覧ページ index.html
詳細ページ _entry.html

またこの変更に伴ってテーマ設定のテンプレートファイル名も修正します。ここでは、手入力で設定することによるミスが回避できる template.yaml を使ってテンプレートを指定していきましょう。/themes/sample/ に template.yaml というファイルを用意し、下記のように記述してください。

tpl_top         : _top.html
tpl_index       : index.html
tpl_detail      : _entry.html
tpl_404         : 404.html
tpl_admin       : admin.html
tpl_entry_edit  : _entry.html
tpl_entry_add   : _entry.html
tpl_login       : login.html

ファイルを用意したら、テーマ設定の「テンプレート選択ファイル(template.yaml)の値を優先する」にチェックをうち、このファイルの情報をa-blog cmsに伝えるようにします。


以上でテンプレートファイルの名前を変更は完了です。

15. 最後に

これで小規模なサイトのテーマ作成における大まかな一連の作業が終了しました。今回の総復習では触れていませんが、他にもこのsampleテーマではサブカラムのエントリーリストやバナー、トップページのスライダーなども、モジュールを利用して動的化することができます。お時間がある方は是非チャレンジしてみてください。



1回で全てを理解するのは難しいかもしれませんが、複雑なプログラムのロジックを考える必要もありません。エンジニアでなくても実装可能なCMS、それが a-blog cms なのです。


以上で復習1は終了です
次の復習2へ進みましょう