前回 までに、Movable Typeをインストールするところまでを書いたが、ようやくカスタマイズに入る。ここからが本番である。
以前にも書いている がCMSでサイトを構築する場合、大きく２つのケースがある。 CMSで用意されたテーマを基にカスタマイズしていく方法 と オリジナルでデザインしたサイトにCMSを実装していく方法 だ。
今回扱っていくのは後者。デザインやHTMLコーディング済みのサイトにCMSを実装していく方法だ。
逆に、これが分かれば、テーマをカスタマイズしていくこともできるだろう。
トップページの「新着情報」だけをCMS化
まずは、トップページに表示する「新着情報」などをMovable Typeで更新できるようにする方法だ。
例えば、すでに公開されているサイトがあり、HTMLなどのソースがあるものとする。その上で、「新着情報」だけをCMS化し、残りのページは静的ファイルとしてFTPでアップロードする場合として考える。
ヘッダーやフッター、グローバルナビが共通化されないため、修正する場合は、CMSのテンプレートと静的ファイルを別々に修正しなくてはいけないが、変更があまりない場合は、この方法が早い。
この場合、トップページのindexファイルと、新着情報の一覧ページ、新着情報の詳細ページのみ、CMSでテンプレート化する。他は一切触らない。
具体的なサイトがあったほうが分かりやすいが、実際の案件は公開しにくいため、荒川印刷様で公開されているMovable Typeの無料テンプレートをベースにさせていただこうと思う。
こちらは、商用OKで報告の義務もなく、どこにも広告が表示されないという無料テンプレートなため、既存のコーディングデータがない、という場合にも使っていただけるもの。インストール方法やカスタマイズ方法も上記ページに記載されているので、それはそれで使っていただければと思うが、今回は、このテーマをインストールするのではなく、デモサイトで公開されているソースを利用させていただく。
ソースデータを下記よりダウンロードしていただきたい。
ダウンロード
ダウンロードしたファイルを解凍し、index.html を確認する。この中の「Information」部分をMovable Typeで更新できるようにしよう。
まずは一式をFTPアップロード
最初にダウンロードしたファイル一式を前回 Movable Typeをインストールしたサイトにアップロードする。
そのまま全てアップロードして構わない。 index.html のみ上書きになるはずだ。
アップしたら、テストサイトのURLにアクセスし、普通にWebサイトとして表示されることを確認しよう。
何も設定していないので、メールフォームなどは送れないとは思うが、一通りウェブサイトとして表示されるはずだ。
Movable Typeでトップページを書き換える
次に前回インストールしたMovable Typeにサインインしよう。前回の例でいえば、下記のようなURLになっている。
（例：http://ae00000000.smartrelease.jp/cgi-bin/mt/mt.cgi ）
サインインをしたら、「ウェブサイト」のタブから、作成してあるウェブサイトの「テンプレート」をクリックする。
あらかじめ、テーマに沿ったテンプレートがいくつか表示されている。このうち、「メインページ」というのがトップページのテンプレートだ。クリックしよう。
メインページを開くと表示されているのが、MTタグというものを交えて作られているトップページのソースだ。このテンプレートの基づいて、再構築をするとindex.htmlが作成される。
ここに記述された内容を理解するのも大事なのだが、今回は既存のサイトにMTを埋め込む。ということで、ここに記述されている内容は 全部削除する 。削除して、先ほどアップロードした index.html ファイルをテキストエディタか何かで開いて、そのソースをここに貼り付けてみてほしい。
さて、ここで「保存と再構築」をクリックすると、index.html が作成され、既存のものに上書きされる。
ただ、今はすでにアップロードされているソースを貼り付けただけなので、上書きされても違いが分からない。MTタグが一切使われていないので、記述されているHTMLの内容をそのまま書き出すだけだ。書き換えられたことがわかるように、少しだけ修正してみよう。
ソースの下の方に記述されている「MTレスポンシブテーマ」と書かれている部分に、 <mt:WebsiteName> と記述してみて欲しい。その上で、「保存と再構築」をクリックしてみよう。
再構築が終わったら、テストサイトのトップページを再読み込みしてみよう。
MTタグに書き換えた部分が、Movable Typeで作成したウェブサイトの名前に変わっていれば成功だ。Movable Typeで書き出した index.html に書き換わっている。
同様にサイトの上部に表示されるサイト名なども書き換えてもいい。MTタグではなく、直接テキストを記述しても問題ない。保存した時に、MTタグが間違えていたら教えてくれるので、いろいろ試してもらって問題ない。
なお、右側の「ステータス」にある「更新履歴を表示」をクリックすると、デフォルトでは20件まで変更履歴が残っているので、間違えたら以前の状態に戻ることもできる。
また、「タグリファレンス」に表示されるMTタグ名をクリックすると、公式のタグリファレンスが表示され、タグの意味や使い方、タグによっては「モディファイア」と呼ばれるオプションのようなものを確認することができる。
MTタグは数が多いので覚えきれないと思うので、このタグリファレンスを確認しながらカスタマイズしていくことになる。
「新着情報」部分をMT化
新着情報を作成していくにあたり、新規にウェブサイト内に「ブログ」を作成し、新着情報の更新をしていってもいいのだが、あえてブログは作らず、ウェブサイトで「記事」を更新していくようにしよう。
メニューの「記事」をクリックし、「新規」をクリックしよう。右上の「新規作成」をクリックしても同じだ。
いくつか記事を作成しよう。タイトルと本文を記入し、右側の公開をクリックする。
記事の一覧に戻ってみると、記事がいくつか投稿されているのが確認できる。
トップページに表示するタグを書いていないので、まだどこにも表示されない。ただ、記事の詳細ページは作られてはいる。一覧の記事タイトルの右横にあるアイコンをクリックしてみよう。まだデザインを何も触っていないので、最初にインストールしたテーマのデザインだが、記事詳細ページが表示されるはずだ。
さて、では、トップページに表示されるようにしよう。
テンプレートの「メインページ」を開く。
メインページ内の新着情報の記述部分を探す。記載されているHTMLは下記の部分だ。
<section class="homeNews">
<h2>Information</h2>
<dl class="tableLike">
<dt>2016/12/16</dt>
<dd><a href="news/2016/12/css.html">用意されているCSSスタイル一覧</a></dd>
<dt>2016/12/01</dt>
<dd>「本文」欄が空の記事にはリンクが張られません（件名以外の詳細が必要ない場合などに利用）</dd>
<dt>2016/06/12</dt>
<dd><a href="news/2016/06/multiblog.html">プラグイン「MultiBlog」の設定を必ず行ってください</a></dd>
<dt>2016/02/05</dt>
<dd><a href="news/2016/02/10.html">新着情報一覧ページにおいて、標準では記事10件ごとにページ送りが発生します</a></dd>
<dt>2015/08/20</dt>
<dd><a href="news/2015/08/post-1.html">標準では最新5件がトップに表示されます</a></dd>
</dl>
<p class="textBtn"><a href="news/index.html">過去の一覧を見る</a></p>
</section><!-- /homeNews -->
ここに、Movable Typeで更新した記事を、最新５件表示するようにしよう。また、記事が１件もない場合は、このブロック全てが非表示になるようにしておこう。
記事の一覧を表示するには、MTEntries タグを使う。
全体をMTEntriesタグで括り、最新の５件表示するというモディファイアを追加する。
<mt:Entries lastn="5">
<section class="homeNews">
<h2>Information</h2>
<dl class="tableLike">
<dt>2016/12/16</dt>
<dd><a href="news/2016/12/css.html">用意されているCSSスタイル一覧</a></dd>
<dt>2016/12/01</dt>
<dd>「本文」欄が空の記事にはリンクが張られません（件名以外の詳細が必要ない場合などに利用）</dd>
<dt>2016/06/12</dt>
<dd><a href="news/2016/06/multiblog.html">プラグイン「MultiBlog」の設定を必ず行ってください</a></dd>
<dt>2016/02/05</dt>
<dd><a href="news/2016/02/10.html">新着情報一覧ページにおいて、標準では記事10件ごとにページ送りが発生します</a></dd>
<dt>2015/08/20</dt>
<dd><a href="news/2015/08/post-1.html">標準では最新5件がトップに表示されます</a></dd>
</dl>
<p class="textBtn"><a href="news/index.html">過去の一覧を見る</a></p>
</section><!-- /homeNews -->
</mt:Entries>
これで、上限５回まで、記事の回数だけ、この中身を繰り返す。
h2タグのInformationというタイトル部分は５回繰り返す必要はない。最初の１回目だけ表示したい部分を MTEntriesHeader で括り、最後の１回だけ表示したい部分を MTEntriesFooter で括る。
また、５回繰り返すべきところは、５個表示されているので、１個だけ残して削除する。
<mt:Entries lastn="5">
<mt:EntriesHeader>
<section class="homeNews">
<h2>Information</h2>
<dl class="tableLike">
</mt:EntriesHeader>
<dt>2016/12/16</dt>
<dd><a href="news/2016/12/css.html">用意されているCSSスタイル一覧</a></dd>
<mt:EntriesFooter>
</dl>
<p class="textBtn"><a href="news/index.html">過去の一覧を見る</a></p>
</section><!-- /homeNews -->
</mt:EntriesFooter>
</mt:Entries>
さて、一度、この状態で「保存と再構築」をして、トップページを見てみよう。
新着記事部分は、同じタイトルが３つ並んでいる。ダミーで作成した記事が３件あるので、３回繰り返されている。ただし、まだ入力した記事タイトルを表示するタグを書いていないので、記載されているHTMLをそのまま３回繰り返しているだけだ。ダミー記事を６件以上作成しても、５件までしか表示されないはずだ。
ここで、一旦、記事の一覧に行ってみよう。入力されている記事全てにチェックを入れ、プルダウンで「記事の公開を取り消し」を選んで「GO」をクリックしよう。これで、全ての記事が、一旦下書き状態になって、公開されていない状態になる。ここでトップページを確認すると、Informationのブロックが丸ごとなくなっているのが確認できる。
確認したら、また記事の一覧から、全てにチェックを入れ、「公開」ボタンを押そう。再びInformationのブロックが表示される。
さて、では、同じタイトルが繰り返されていた部分を変更しよう。
<dt>2016/12/16</dt>
<dd><a href="news/2016/12/css.html">用意されているCSSスタイル一覧</a></dd>
この部分だ。
日付の部分は MTEntryDate タグを使う。日付の表記の仕方は、formatモディファイア で指定する。
詳細ページへのリンクは、MTEntryPermalink を使う。
記事のタイトルは MTEntryTitle だ。
下記のようになる。
<dt><mt:EntryDate format="%Y/%m/%d"></dt>
<dd><a href="<mt:EntryPermalink>"><mt:EntryTitle></a></dd>
ちなみに、MTタグは複数の書き方を許している。
<$MTEntryTitle$>
<MTEntryTitle>
<MTEntryTitle />
<mt:EntryTitle>
<$mt:EntryTitle$>
<mt:EntryTitle />
<mtentrytitle>
<MTENTRYTITLE>タグ名の前後にある$は、あってもなくても良い。
末尾に/をつけても良い。
mtの後ろに:をつけても良い。
大文字小文字は問わない。
好みの問題で、タグリファレンスにも入り混じっていたりする。
さて、書き換えたところで「保存と再構築」をし、トップページを見てみよう。
タイトルが記事ごとに変わり、リンク先も別々になった。
Movable Typeのテンプレートカスタマイズの基本はこのような感じだ。
まだ、「過去の一覧を見る」の部分は静的なHTMLのままだし、記事が５件未満であれば、そもそも表示しないようにしたいところ。記事の詳細ページもデザインを合わせたい。それはまた次回以降に。
また、カスタマイズで質問などがあったら、メールやFacebookメッセージなどでご連絡いただきたい。優先的に取り上げるようにしたいと思う。