Movable Type のウェブページでページ単位でテンプレートのサイドカラムの配置を切り替えるというものです。
今回おこなうのは、記事ごとでカラムレイアウトを切り替えることができるようにしよう、ってことです。「そんなことする必要があるのか?」とかいわれそうなんですが、例えば、特定の記事で左サイドにメニューをおいてみたいとか。内容的には、MT4: ちょっとしたレイアウト技を思いついた(blog.aklaswad.com)に似ています。なんで今更というか(記事ねたをおもいついてから知ったw)。。なお、本記事で取り上げる「ウェブページ」とは、広義のウェブページではなくて、Movable Typeのシステム上で「ブログ記事/ウェブページ」といった分類の「ウェブページ」のことです。(ウェブサイトを管理する『ブログ』と『ウェブページ』の使い分け - Movable Type ドキュメント)
カラムレイアウトが切り替わるしくみ
Movable Typeのデフォルト(クラシックブログ)のテンプレートで見ていくとします。
デフォルトテンプレートでインポートされるCSS、mt-static/themes/minimalist-red/screen.cssと、mt-static/themes-base/blog.cssを見れば一目瞭然です。
screen.css先頭にlayouts: layout-wtt, layout-twt, layout-wt, layout-tw
という記述があります。このクラスが指定されているのが、body要素で、ウェブページのテンプレートでbody要素のコードは以下のようになってます。
<body id="<$mt:BlogTemplateSetID$>" class="mt-page-archive <$mt:Var name="page_layout"$>">
page_layoutという変数名がページのレイアウトを決定するものです。この値の実際の出力は、class="mt-page-archive layout-wtt"のようになっています(3カラムを選択している場合です)。
wttをtwtに変更しますと、画面左から大・小・小というカラムレイアウトが小・大・小に切り替わるというわけです。
これをウェブページにおいて記事ごとに切り替えられるようにするには、クラス名が分岐するようなカスタマイズが必要で、ここではプライベートタグ(先頭に@のついたタグ)を使う方法でおこなってみます。この方法ならば、カスタムフィールドのないMTOSでもカスタマイズできます。
ウェブページテンプレートのカスタマイズ
まずは、ウェブページテンプレートの先頭に以下のコードを置き、@twtというプライベートタグがつけられたページには、page_layoutの内容を上書して変更すると云う形にします。
<MTPageIfTagged tag="@twt" include_private="1"> <mt:setvar name="page_layout" value="layout-twt" /> </MTPageIfTagged>
これであとはページによってプライベートタグをつけるのみという感じです。前置きの長さの割にこれだけかって感じですが。@twtがついていないウェブページは、デフォルトのままの筈ですが、もしうまくいかないようならば、page_layout読み込みの箇所でdefault値を明示して、
class="mt-page-archive <$mt:Var name="page_layout" default="layout-wtt"$>">
のようにしておけばよいかと思います。
もう少しカスタマイズして、layout-twtというクラスが選択されているときに、何かするという条件分岐を追加してみたいと思います。
分岐には変数page_layoutを使えばよいでしょう。サイドバーのウィジェットなどに以下のようなコードを使います。
<mt:Ignore>「小・大・小」のレイアウトのときに何かする</mt:Ignore> <mt:If name="page_layout" eq="layout-twt"> <!-- do something --> </mt:If>
確認はMTOS-5.01-jaのみでおこないました。以上です。