【Movable Type入門】新着情報をCMS化の続き

【Movable Type入門】シリーズ 、前回の新着情報をCMS化の続きだ。

前回は、トップページにMovable Typeの更新情報を表示するようにした。管理画面で「記事」を更新すると、日付とタイトルが表示される。

今回は、リンク先のデザインをカスタマイズしよう。引き続き、前回使ったソースを使っていく。

「記事」テンプレートを差し替え

まずは「デザイン→テンプレート」の中から、「アーカイブテンプレート」にある「記事」をクリックする。ここが記事用のテンプレートだ。

今回は既存のHTMLがあるという前提なため、前回同様、中の記述を__全部削除__だ。

前回も利用したデモサイトのソースのうち、「/news/2015/08/post-1.html」などは記事詳細のページなので、これを使おう。テキストエディタなどでHTMLのソースを表示し、すべてコピーしてテンプレートに貼り付けてみる。

ここで、「保存と再構築」をしてみよう。そして、トップページからInformationの中のタイトルをクリックすると、デザインが変わっているのが確認できるだろう。

しかし、まだHTMLを貼り付けただけなので、どのタイトルをクリックしても同じ内容のページが表示されるはずだ。

各ページにMovable Typeで更新した情報が反映されるように編集していく。

相対パスをMTタグを使った絶対パスに変更

Movable Typeで個別の記事ページを作成するとき、どういうURLにするかはテンプレートの下にある「テンプレートの設定」をクリックし、 アーカイブマッピング で確認できる。 yyyy/mm/entry-basename.html となっているのではないだろうか。yyyy が作成日の年であり、mm が月である。entry-basename というのは記事更新時に変更することもできる「 出力ファイル名 」だ。

現状、テンプレート内からのスタイルシートや画像の読み込みは、 <link rel="stylesheet" href="../../../common/css/base.css"> というような相対パスになっている。たまたまアーカイブマッピングとあっているので、デザインが崩れていないが、アーカイブマッピングを変更したら崩れる可能性があるため、 ../../../ の部分を / だけにしてトップディレクトリからの ルートパス に変更するか、Movable Typeの 公開パス に合わせた絶対パスに合わせるようにMTタグを使うようにする。

ここでは、公開サイトがトップディレクトリに置かれても、特定のディレクトリ内に置かれても問題ないように、MTWebsiteURL というMTタグで絶対パスを出力するようにする。

これは、「設定→全般」の公開パスにある ウェブサイトURL が出力されるというものだ。

数が多いので、一括置換できるテキストエディタなどで変換して、貼り付け直すと早い。ページ間のリンクなども含めてなので20か所ほどある。

一括置換で変換したソースを「記事」テンプレートに貼り付け直して「保存と再構築」をしよう。

今回は絶対パスに変換したが、公開サイトのURLが決まっている場合などは、ルートパス の方が扱いやすいこともあるので、状況によって使い分かるとよい。

記事部分をMTタグに差し替え

次にページごとに、入力した記事の内容が反映されるようにMTタグを埋め込んでいこう。今回のソースで言えば下記の部分。

<div class="content">

  <h2 class="btm06">標準では最新5件がトップに表示されます</h2>
  <p>2015/08/20</p>

  <div class="entryBody">

  最新5件の記事タイトルがトップに表示されるよう設定されています。<div>これは管理画面の設定用テンプレートモジュールから簡単に変更が可能です。</div>


  </div>

  <p class="top40 textBtn2"><a href="<mt:WebsiteURL>index.html">新着情報一覧に戻る</a></p>

</div><!-- /content -->

トップページでも使用した、MTEntryTitle を記事タイトルにする。また、投稿日部分は MTEntryDate だ。

なお、記事テンプレートで、繰り返しもないので、MTEntries は不要だ。

記事の本文には、MTEntryBody を使う。MTEntryMore も書いておこう。

記事の投稿画面には、タブで「本文」を「続き」に切り替えることができる。「本文」に書いた内容がMTEntryBody、「続き」に書いた内容がMTEntryMoreに書き出される。

コーディング次第だが、「本文」を表示しておいて、何かをクリックしたら「続き」が表示されるような仕組みや、「本文」と「続き」の間に、何かを定型的に挟み込むなどもできる。

さて、書き換えたソースは下記のようになる。

<div class="content">

  <h2 class="btm06"><mt:EntryTitle></h2>
  <p><mt:EntryDate format="%Y/%m/%d"></p>

  <div class="entryBody">

    <mt:EntryBody>
    <mt:EntryMore>

  </div>

  <p class="top40 textBtn2"><a href="<mt:WebsiteURL>news/index.html">新着情報一覧に戻る</a></p>

</div><!-- /content -->

「保存と再構築」をして、トップページからのリンクを確認しよう。ページごとに内容が変わるはずだ。

最後に、ページのタイトル部分も MTEntryTitle に差し替え、記事テンプレートは終了しよう。

<title>標準では最新5件がトップに表示されます | Information | MTレスポンシブテーマ</title>

　↓

<title><mt:EntryTitle> | Information | MTレスポンシブテーマ</title>

記事一覧を編集

あとは、同一のページであるが、トップページの「過去の一覧を見る」と記事ページの「新着情報一覧に戻る」をクリックした先のページだ。/news/index.html のファイルにあたる部分。ここもデザインを反映して記事内容が表示されるようにしよう。

デフォルトの状態では、この一覧のページを生成するテンプレートは存在しないはず。新たにテンプレート自体を作る。

メニューから「デザイン→テンプレート」を選び、「インデックステンプレートの作成」をクリックすると、空のテンプレートが表示される。

テンプレート名を「Information」にしておこう。そして、空のテキストエリアに「/news/index.html」のソースを貼り付ける。そして、出力ファイル名に news/index.html と記入し、保存しよう。

最後に、下記のソースの部分をMTタグを使って置き換える。

<div class="content">
   <script src="../common/js/pager.js"></script>
   <ul class="paginatedList" data-list-length="10">

    <li><span class="date">2016/12/16</span>
      <a href="2016/12/css.html">用意されているCSSスタイル一覧</a></li> 

    <li><span class="date">2016/12/01</span>
        「本文」欄が空の記事にはリンクが張られません（件名以外の詳細が必要ない場合などに利用）</li> 

    <li><span class="date">2016/06/12</span>
      <a href="2016/06/multiblog.html">プラグイン「MultiBlog」の設定を必ず行ってください</a></li> 

    <li><span class="date">2016/02/05</span>
      <a href="2016/02/10.html">新着情報一覧ページにおいて、標準では記事10件ごとにページ送りが発生します</a></li> 

    <li><span class="date">2015/08/20</span>
      <a href="2015/08/post-1.html">標準では最新5件がトップに表示されます</a></li> 

    <li><span class="date">2015/03/15</span>
      表示確認用のテスト投稿</li> 

    <li><span class="date">2015/01/10</span>
      表示確認用のテスト投稿</li> 

  </ul>

  <div class="pagination"></div>

</div><!-- /content -->

差し替えの方法は、前回のトップページと同じではあるが、MTEntriesの部分のみ、トップページでは５件までという表示にしたが、lastn="0"として全件表示するようにしてみる。記事が多すぎるようになってきたら100件などに絞ってもいいかもしれない。

<div class="content">

<script src="../common/js/pager.js"></script>
  <mt:Entries lastn="0">
    <mt:EntriesHeader>
      <ul class="paginatedList" data-list-length="10">
    </mt:EntriesHeader>
        <li><span class="date"><mt:EntryDate format="%Y/%m/%d"></span>
          <a href="<mt:EntryPermalink>"><mt:EntryTitle></a></li> 
    <mt:EntriesFooter>
      </ul>
    </mt:EntriesFooter>
  </mt:Entries>    
<div class="pagination"></div>

</div><!-- /content -->

これでカスタマイズは完了だ。「保存と再構築」をして、動作確認をしてみよう。

次回は、パーツの共通化あたりをやってみたい。