【Movable Type】ノンプログラマーでも怖くない！変数で一歩踏みこむテンプレートカスタマイズ

MovableType

2012.12.13

会社入口のドアノブ、パチパチ打率が9割超えてるhakoishiです。
タスケテ。

さて、本日はMovable Type Advent Calendar 2012 13日目のエントリーとしてお送りします。

MTのテンプレートカスタマイズって、他CMSと比較してもノンプログラマー担当率高いのでは。
テンプレートタグを埋め込むだけ、って方も少なくないと思います。
一歩踏み出して変数も使ってみましょうか。怖くないよ。
かく言う自分もノンプログラマーです。

MTタグの中身を変数に格納。

まずは基本から。
ブログ名を、変数『blogtitle』に格納したいときはこう書きます。


<MTSetVarBlock name="blogtitle"><$mt:BlogName<MTSetVarBlock name="blogtitle"><$mt:BlogName$></MTSetVarBlock>gt;</MTSetVarBlock>

これを呼び出す時はこうします。
h1の中に表示させたい場合です。


<h1><$MTGetVar name="blogtitle"<h1><$MTGetVar name="blogtitle"$></h1>gt;</h1>

実用例

headのtitleとdescriptionの指定に変数を使ってみます。
MTの場合、アーカイブタイプによってタイトルや概要を取得できるタグが違ってきます。
表示側のテンプレートは変数を呼び出すだけにして、
定義側はアーカイブタイプによって分岐させておくとすっきりしますよ。

定義

とりあえずブログトップと記事詳細ページの場合だけ。
カテゴリ別や日付別、著者別など、好きなだけ定義できますけども。


<mt:If name="main_index"> /* ブログトップページ */
<MTSetVarBlock name="v-title"><$mt:BlogName<mt:If name="main_index"> /* ブログトップページ */
<MTSetVarBlock name="v-title"><$mt:BlogName$></MTSetVarBlock>
<MTSetVarBlock name="v-description"><$mt:BlogDescription$></MTSetVarBlock>

<mt:Elseif name="entry_archive"> /* 記事詳細ページ */
<MTSetVarBlock name="v-title"><$mt:EntryTitle$></MTSetVarBlock>
<MTSetVarBlock name="v-description"><$mt:EntryExcerpt$></MTSetVarBlock>
</mt:if>gt;</MTSetVarBlock>
<MTSetVarBlock name="v-description"><$mt:BlogDescription<mt:If name="main_index"> /* ブログトップページ */
<MTSetVarBlock name="v-title"><$mt:BlogName$></MTSetVarBlock>
<MTSetVarBlock name="v-description"><$mt:BlogDescription$></MTSetVarBlock>

<mt:Elseif name="entry_archive"> /* 記事詳細ページ */
<MTSetVarBlock name="v-title"><$mt:EntryTitle$></MTSetVarBlock>
<MTSetVarBlock name="v-description"><$mt:EntryExcerpt$></MTSetVarBlock>
</mt:if>gt;</MTSetVarBlock>

<mt:Elseif name="entry_archive"> /* 記事詳細ページ */
<MTSetVarBlock name="v-title"><$mt:EntryTitle<mt:If name="main_index"> /* ブログトップページ */
<MTSetVarBlock name="v-title"><$mt:BlogName$></MTSetVarBlock>
<MTSetVarBlock name="v-description"><$mt:BlogDescription$></MTSetVarBlock>

<mt:Elseif name="entry_archive"> /* 記事詳細ページ */
<MTSetVarBlock name="v-title"><$mt:EntryTitle$></MTSetVarBlock>
<MTSetVarBlock name="v-description"><$mt:EntryExcerpt$></MTSetVarBlock>
</mt:if>gt;</MTSetVarBlock>
<MTSetVarBlock name="v-description"><$mt:EntryExcerpt<mt:If name="main_index"> /* ブログトップページ */
<MTSetVarBlock name="v-title"><$mt:BlogName$></MTSetVarBlock>
<MTSetVarBlock name="v-description"><$mt:BlogDescription$></MTSetVarBlock>

<mt:Elseif name="entry_archive"> /* 記事詳細ページ */
<MTSetVarBlock name="v-title"><$mt:EntryTitle$></MTSetVarBlock>
<MTSetVarBlock name="v-description"><$mt:EntryExcerpt$></MTSetVarBlock>
</mt:if>gt;</MTSetVarBlock>
</mt:if>

表示

表示側は常にこれでOK。
もちろん、OGPの指定にも使いまわせます。 ※タイトルタグにブログ名や階層も併せて表示するとベターですけど、それは今回は割愛。


<title><$mt:GetVar name="v-title"<title><$mt:GetVar name="v-title"$></title>
<meta name="description" content="<$mt:GetVar name="v-description"$>">gt;</title>
<meta name="description" content="<$mt:GetVar name="v-description"<title><$mt:GetVar name="v-title"$></title>
<meta name="description" content="<$mt:GetVar name="v-description"$>">gt;">

予約変数を使ってみる。

MTが元々持っている変数です。
mt:Ifやmt:Unlessと組み合わせて、

ループの1つだけ処理変える
ループの最後1つだけ処理変える
偶数回目だけ変える

といったことができます。

例えばブログのトップページ。
『各記事下に「ページトップへ」のリンク入れてるけど、最後の記事にだけはいらない（ページの最後にあるから）』
という場合はこうです。


<mt:Entries>
<mt:EntriesHeader><div id="block-entries"></mt:EntriesHeader>
<h2><a href="#"><$mt:EntryTitle
<mt:Entries>
<mt:EntriesHeader><div id="block-entries"></mt:EntriesHeader>
<h2><a href="#"><$mt:EntryTitle$></a></h2>
<$mt:EntryBody$>

<mt:Unless name="__last__"> /* 最後でなければ表示 */
<p><a href="#">ページトップへ</a></p>
</mt:Unless>

<mt:EntriesFooter></div></mt:EntriesFooter>
</mt:Entries>
gt;</a></h2>
<$mt:EntryBody
<mt:Entries>
<mt:EntriesHeader><div id="block-entries"></mt:EntriesHeader>
<h2><a href="#"><$mt:EntryTitle$></a></h2>
<$mt:EntryBody$>

<mt:Unless name="__last__"> /* 最後でなければ表示 */
<p><a href="#">ページトップへ</a></p>
</mt:Unless>

<mt:EntriesFooter></div></mt:EntriesFooter>
</mt:Entries>
gt;

<mt:Unless name="__last__"> /* 最後でなければ表示 */
<p><a href="#">ページトップへ</a></p>
</mt:Unless>

<mt:EntriesFooter></div></mt:EntriesFooter>
</mt:Entries>

インクリメントしてみる。

MTでもインクリメントできるんですよね。
弊社のWebサイトでの使用例をご紹介します。

実用例

スタッフ紹介 | 会社案内 | 株式会社シーブレイン
このページの各スタッフ下、執筆ブログとtwitterアカウントの部分です。


<ul>
<li>執筆ブログ（あれば表示）</li>
<li>twitterアカウント（あれば表示）</li>
</ul>

こういうマークアップで、共に任意の項目なので、どちらもないという人はulごと生成しない形にしたかったわけです。

※共にカスタムフィールドで、バシャログ執筆者→staffEntryCFBashalog、twitterアカウント→staffEntryCFTwitterText　としてタグが定義されているものとします。

まずは変数に0を格納。mtif内で条件に合致したら++;。
最後まで0のままだったらどの条件も満たしていない、という考え方です。


<mt:Setvar name="socialflag" value="0"> /* 変数を定義して0に */

<mt:If tag="staffEntryCFBashalog"><mt:Setvar name="socialflag" op="++"></mt:If> /* バシャログブロガーは++; */
<mt:If tag="staffEntryCFTwitterText"><mt:Setvar name="socialflag" op="++"></mt:If> /* twitterアカウントあれば++; */

<mt:Unless name="socialflag" eq="0"> /* 変数『socialflag』が0でなければ */
<ul class="social">
<mt:if tag="staffEntryCFBashalog"> /* バシャログブロガーなら */
<li class="weblog"><a href="http://c-brains.jp/blog/wsg/" target="_blank">バシャログ。</a></li>
</mt:if>
<mt:if tag="staffEntryCFTwitterText"> /* twitterアカウントあれば */
<li class="twitter"><a href="https://twitter.com/<$mt:staffEntryCFTwitterText<mt:Setvar name="socialflag" value="0"> /* 変数を定義して0に */

<mt:If tag="staffEntryCFBashalog"><mt:Setvar name="socialflag" op="++"></mt:If> /* バシャログブロガーは++; */
<mt:If tag="staffEntryCFTwitterText"><mt:Setvar name="socialflag" op="++"></mt:If> /* twitterアカウントあれば++; */

<mt:Unless name="socialflag" eq="0"> /* 変数『socialflag』が0でなければ */
<ul class="social">
<mt:if tag="staffEntryCFBashalog"> /* バシャログブロガーなら */
<li class="weblog"><a href="http://c-brains.jp/blog/wsg/" target="_blank">バシャログ。</a></li>
</mt:if>
<mt:if tag="staffEntryCFTwitterText"> /* twitterアカウントあれば */
<li class="twitter"><a href="https://twitter.com/<$mt:staffEntryCFTwitterText$>" target="_blank">@<$mt:staffEntryCFTwitterText$></a></li>
</mt:if>
</ul>
</mt:Unless>gt;" target="_blank">@<$mt:staffEntryCFTwitterText<mt:Setvar name="socialflag" value="0"> /* 変数を定義して0に */

<mt:If tag="staffEntryCFBashalog"><mt:Setvar name="socialflag" op="++"></mt:If> /* バシャログブロガーは++; */
<mt:If tag="staffEntryCFTwitterText"><mt:Setvar name="socialflag" op="++"></mt:If> /* twitterアカウントあれば++; */

<mt:Unless name="socialflag" eq="0"> /* 変数『socialflag』が0でなければ */
<ul class="social">
<mt:if tag="staffEntryCFBashalog"> /* バシャログブロガーなら */
<li class="weblog"><a href="http://c-brains.jp/blog/wsg/" target="_blank">バシャログ。</a></li>
</mt:if>
<mt:if tag="staffEntryCFTwitterText"> /* twitterアカウントあれば */
<li class="twitter"><a href="https://twitter.com/<$mt:staffEntryCFTwitterText$>" target="_blank">@<$mt:staffEntryCFTwitterText$></a></li>
</mt:if>
</ul>
</mt:Unless>gt;</a></li>
</mt:if>
</ul>
</mt:Unless>