静的HTMLサイトからCMSのテーマを作ってみよう 3「モジュール編」

目次

  1. はじめに
  2. タイトルタグを動的に変更する
  3. インクルード機能でファイルをまとめる
  4. グローバルナビゲーションの実装
  5. トップページのスライダーの画像を変更できるように実装
  6. トピックパスを実装
  7. サイト内検索機能を実装する
  8. テンプレートのファイル名を変更し、テーマ設定ファイルを作る
  9. まとめ

はじめに

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

このページは 静的HTMLサイトからCMSのテーマを作ってみよう 2「カスタムフィールド編」 の続きになります。

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

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

現在、<head> 内の <title> 〜 </title> について初期状態のままですので、この部分も自動で編集されるように実装を進めます。

> エントリータイトル | カテゴリー名 | ブログ名

タイトルタグについては、OGPモジュールというモジュールが用意されておりますので、タイトルタグに加え、<meta>部分もこれで対応が可能です。

<!-- BEGIN_MODULE Ogp -->
<title>{title}</title>
<meta property="og:url" content="%{PERMALINK}">
<meta property="og:site_name" content="%{ROOT_BLOG_NAME}">
<meta property="og:title" content="{title}">
<meta property="og:type" content="{type}">
<!-- BEGIN_IF [{description}[delnl]/nem/] -->
<meta property="og:description" content="{description}[mb_trim(350, '...')|delnl|escape]"><!-- END_IF --><!-- BEGIN_IF [{image}/nem/] -->
<!-- BEGIN_IF [{image@type}/eq/media] -->
<meta property="og:image" content="http://localhost/media/{image}">
<meta property="og:image:secure_url" content="http://localhost/media/{image}" />
<!-- ELSE -->
<meta property="og:image" content="http://localhost/archives/{image}">
<meta property="og:image:secure_url" content="http://localhost/archives/{image}" />
<!-- END_IF -->
<meta property="og:image:width" content="{image@x}" />
<meta property="og:image:height" content="{image@y}" /><!-- END_IF --><!-- BEGIN_IF [{description}[delnl]/nem/] -->
<meta name="description" content="{description}[mb_trim(350, '...')|delnl|escape]"><!-- END_IF --><!-- BEGIN_IF [{keywords}/nem/] -->
<meta name="keywords" content="{keywords}"><!-- END_IF -->
<!-- END_MODULE Ogp -->

このスニペットでもいいのですが、beginnerテーマの中に用意されている /themes/beginner/include/head/meta.html を利用した方が Twitterカードについても対応されているのでオススメかもしれません。

sampleフォルダーに includeフォルダーを作成し、その中に headフォルダーを作り、meta.html ファイルをコピーしてきます。

index.html , list.html , entry.html の <title> <meta> を削除して

@include("/include/head/meta.html")

に置き換えます。このインクルード機能について説明ができていませんので、次でしっかり説明をします。

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

テンプレートの HTML の中で、別の HTML を読み込む機能をインクルード機能と呼びます。

一般的に、ヘッダー部分やフッター部分については、どのページでも同様なことが多いので、 header.html や footer.html のようなファイルを用意し各ファイルからインクルードします。 フォルダー名の決まりはありませんが、include にまとめるのが a-blog cms の一般的なルールになっています。

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

さらに、インストール時に最初から用意されている beginnerテーマを参考に紹介しておきますが、基本はモジュール単位でファイル分けインクルードするようにしています。

<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
  @include("/include/head/meta.html")
  @include("/include/head/link.html")
  @include("/include/head/js.html")
</head>
<body>
<!-- ヘッダー -->
@include("/include/header.html")
<div class="acms-container js-pretty-scroll-container">
  <!-- ※管理用パーツ -->
  @include("/admin/action.html")
  @include("/include/header/top-image.html")
  <div class="acms-grid">
    <main class="acms-col-lg-9 main">
      <div class="main-inner is-space-right">
        <!-- エントリーヘッドライン（トップ用） -->
        @include("/include/entry/headline-top.html")
        <!-- エントリーサマリー -->
        @include("/include/entry/summary-top.html")
        <!-- 確認用テンプレート --> 
        @include("/include/check-seo.html")
      </div>
    </main>
    <div class="acms-col-lg-3 side">
      <div class="js-pretty-scroll">
        <!-- 検索フォーム -->
        @include("/include/parts/search.html")
        <!-- ピックアップリスト -->
        @include("/include/entry/summary-pickup.html")
        <!-- バナー -->
        @include("/include/siteparts/banner.html")
        <!-- リンクリスト -->
        @include("/include/siteparts/link-list.html")
        <!-- モバイル：ナビゲーションメニュー -->
        @include("/include/parts/mobile-nav.html")
        <!-- ログインボタン -->
        @include("/include/parts/login-button.html")
      </div>
    </div>
  </div>
</div>
<!-- お問い合わせ -->
@include("/include/footer/suggest.html")
<!-- フッター -->
@include("/include/footer.html")
</body>
</html>

グローバルナビゲーションの実装

ナビゲーションは index.html , list.html , entry.html どのページにもあります。この段階では、インクルード機能でしっかりファイル分けができているようであれば、1つのファイルのみ修正すればいい事になっています。

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

<div class="header-nav"> の辺りを Navigation に置き換えていきます。 Navigation モジュールは、<ul><li> で書かれていますが、入れ子構造にできる仕様になっており、それを1つの <!-- BEGIN navigation:loop --> 〜 <!-- END navigation:loop --> で作られているので制御用のブロックが多く分かりにくいです。

<!-- 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 -->

<nav class="navbar"> の中にある <ul> 〜 </ul> を <!-- BEGIN navigation:loop --> 〜 <!-- END navigation:loop --> に置き換えるような感じで実装を進めてください。

最終的には、以下のようになります。もちろんモジュールIDの設定　id="nav_global" も忘れずに行ってください。

<!-- BEGIN_MODULE Navigation id="nav_global" -->
<div class="header-nav">
  <div class="acms-grid">
    <nav class="navbar">
  <!-- 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 -->
    </nav>
  </div>
</div>
<!-- END_MODULE Navigation -->

モジュールIDの条件設定しか行っていない人は、何も表示されずに焦った人もいることでしょう。表示設定側を以下のように行ってください。

画像だとコピぺできないので、表にも書いておきます。

ラベルURL属性
HOME%{HOME_URL}class="js-link_match_location-full"
会社概要%{HOME_URL}company/class="js-link_match_location"
物件情報%{HOME_URL}realestate/class="js-link_match_location"
お知らせ%{HOME_URL}news/class="js-link_match_location"
採用情報%{HOME_URL}recruit/class="js-link_match_location"
お問い合せ%{HOME_URL}contact/class="js-link_match_location"

class="js-link_match_location" について解説しておきます。

この class をつけておくと、そのディレクトリーを表示している時に class="stay" を JavaScript でつけてくれます。例えば、/news/ の時と /news/entry-11.html どちらでも今は「お知らせ」にいますを伝えるためです。

HOME だけは、少し違って class="js-link_match_location-full" と設定されているので完全一致している時という指定になります。

属性は <li> に設定したい class などを、子要素属性には <a> に追記したい class などを設定できるようになっています。

トップページのスライダーの画像を変更できるように実装

top.html のスライダー部分を探してみます。

<div class="module-section">
  <div class="js-slider">
    <div>
      <a href="list.html" target="_self" class="slider-item"><img src="/images/slider_zoo1.jpg" width="1150" height="400" alt="" class="acms-img-responsive slider-image" /></a>
    </div>
    <div>
      <a href="list.html" target="_self" class="slider-item"><img src="/images/slider_zoo2.jpg" width="1150" height="400" alt="" class="acms-img-responsive slider-image" /></a>
    </div>
    <div>
      <a href="list.html" target="_self" class="slider-item"><img src="/images/slider_zoo3.jpg" width="1150" height="400" alt="" class="acms-img-responsive slider-image" /></a>
    </div>
  </div>
</div>

スライダーは JavaScript で実装されており、上記のような HTML になっています。 class のついていない <div> 部分が3つ同じ構造になっているのが確認できます。

メディアバナーモジュールを利用して実装していきます。バナーというとサブカラムにある a-blog cms のロゴみたいなものを想像しますが、複数件の画像とリンクを管理できればどのようなモジュールでも大丈夫ではありますが、Media_Banner モジュールを利用するとバナーの表示期間の設定も活用できるので便利に使えるのではないでしょうか。

<!-- BEGIN_MODULE Media_Banner -->
<div>
@include("/admin/module/setting.html")
<ul class="acms-list-nostyle acms-grid">
  <!-- BEGIN banner:loop -->
  <li class="acms-col-md-4">
    <!-- BEGIN banner#src -->
    {src}[raw]
    <!-- END banner#src -->
    <!-- BEGIN banner#img -->
    <a href="{url}" target="{target}"><img src="%{MEDIA_ARCHIVES_DIR}{img}" width="{x}" height="{y}" class="acms-img-responsive" alt="{alt}" /></a>
    <!-- END banner#img -->
  </li>
  <!-- END banner:loop -->
</ul>
</div>
<!-- END_MODULE Media_Banner -->

元の HTML を挟むように <!-- BEGIN_MODULE Media_Banner --> 〜 <!-- END_MODULE Media_Banner --> を追記し、モジュールID id="top_image" を設定します。

<!-- BEGIN_MODULE Media_Banner id="top_image" -->
<div class="module-section">
  <div class="js-slider">
    <!-- <div>
      <a href="list.html" target="_self" class="slider-item"><img src="/images/slider_zoo1.jpg" width="1150" height="400" alt="" class="acms-img-responsive slider-image" /></a>
    </div> -->
    <!-- BEGIN banner:loop -->
    <!-- BEGIN banner#img -->
    <div>
      <a href="{url}" target="_self" class="slider-item"><img src="%{MEDIA_ARCHIVES_DIR}{img}" width="{x}" height="{y}" alt="{alt}" class="acms-img-responsive slider-image" /></a>
    </div>
    <!-- END banner#img -->
    <!-- END banner:loop -->
  </div>
</div>
<!-- END_MODULE Media_Banner -->

3つのループのうちの1つをコメントタグで囲み残しておき、2つ目の<div>をスニペットを参考に{変数}に置き換えていきます。3つ目の<div>は削除しました。

トピックパスを実装

トピックパス(パンくずリスト) は index.html には用意していませんが list.html , entry.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>
 </ol>
</nav>

<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>

この部分を、どちらも @include("/include/topicpath.html") として、topicpath.html を用意します。

<!-- 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 -->

Topicpathスニペットを topicpath.html にコピペして