MT：管理画面のカスタマイズ（alt-tmplの活用）その2

(2010年4月 4日 20:58) | コメント(0) | トラックバック(0)

以前MovableType(以下MT)の管理画面カスタマイズの記事を書きましたが、非常に中途半端なところで終わらせていたのでその続きを書く事にしました。

前回はalt-tmplにコードを追記するとどうなるか？的な記事でとどめていましたが、今回はもう一歩踏み込んで、より実用的なソースを紹介します。
前回の記事では「<div id="content-header"><div id="content-header-inner" class="inner pkg">の下にメニューを追加」と書きましたが、今回は<div id="content-header">直下に追加しています。

カスタムメニューは外部ファイル化が望ましい

メンテナンス性を考えれば当然外部ファイル化した方がいいですよね。特に条件分岐させて違うメニューを読込ませたりする時にメニュー毎に別ファイルにすると便利です。

考え方は前回にも紹介しましたが野田純生さんの「壊れにくいカスタマイズの為に」を参考にさせていただいています。

<div id="content-header">


<mt:include name="include/edit_entry_extra.tmpl">

カスタムメニューは「edit_entry_extra.tmpl」という外部ファイルにしてインクルードしています。ファイルの置き場所は別にどこでもいいのですが「header.tmpl」と同じ場所にしました。
インクルードしたファイルの中身はこんな感じです。

<MTSetVarBlock name="blog_id"><$MTBlogID$></MTSetVarBlock>
<MTIf name="blog_id" eq="10">

<div id="myMenu">
<ul>
<li><span class="myMenu_Head">トップページ</span><a href="mt.cgi?__mode=view&_type=entry&id=57&blog_id=10">リード文</a><a href="#">会社概要</a></li>
<li><span class="myMenu_Head">事業概要</span><a href="mt.cgi?__mode=view&_type=entry&id=60&blog_id=11">リード文</a><a href="#">事業紹介</a><a href="#">当社の強み</a></li>
<li><span class="myMenu_Head">会社情報</span><a href="#">リード文</a><a href="#">会社概要</a><a href="#">組織図</a></li>
<li><span class="myMenu_Head">業務実績</span><a href="#">リード文</a><a href="#">実績紹介</a></li>
<li><span class="myMenu_Head">採用情報</span><a href="#">リード文</a><a href="#">応募要項</a><a href="#">応募フォーム</a></li>
<li><span class="myMenu_Head">お問合せ</span><a href="#">リード文</a><a href="#">お問合せフォーム</a></li>
<li><span class="myMenu_Head">サイトマップ</span><a href="#">リード文</a></li>
</ul>
<a href="javascript:history.back();">一つ前のページへ戻る</a>
</div>
<MTElse>

MyMenu
</MTElse>
</MTIf>

このメニューではMTIfを使ってブログ毎に違うメニューを表示させる仕掛けをしています。<$MTBlogID$>でブログIDを取得、IDが「10」ならメニューを表示、それ以外はメニューは表示されません。

この例では企業サイト用のメニューを想定して制作してみました。トップページと事業概要のリード文編集用のリンクだけ記入して後は＃にしてしまっています。

トップページのリード文編集画面へのリンクをみると「entry&id=57&blog_id=10」となっています。「ブログID10、エントリーID57」を指定しています。事業概要のリード文は「entry&id=60&blog_id=11」ですので「ブログID11、エントリーID60」を指定しています。
マルチブログとしてサイトを制作している際でもID指定を間違えなければピンポイントで表示させたいページを指定出来るのでサイト運営者の負担を軽減させる事が出来ます。

もちろん、こういったブログ間を行き来するメニューを作成する場合は編集対象にしている各ブログの権限を状況に合わせて調整してください。

おまけとしてJavaScriptでhistory.backをつけています。個人的にこれを付けておくとサイト運用者に説明がし易かったりするので・・・。

さて、レイアウトを調整する為にCSSに追記です。管理画面のCSSは「mt-static/css/main.css」ですが、今回は「alt-tmpl/include」内に「mymenu.css」という外部CSSを置いて読込ませています。
やはりなるべくデフォルトのCSSに手を加えてしまうと後々面倒くさいので。CSSの内容は以下の通り。

#content-header {
   padding-top: 15px;
}
#myMenu {
   width:920px;
   text-align:left;
   padding-left:20px;
   font-size:12px;
   line-height:1.5em;
   color: #333333;
   margin-top: 0px;
   margin-right: auto;
   margin-left: auto;
   margin-bottom: 0px;
}
#myMenu li {
   background-color:#FFFFFF;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: #CCCCCC;
}
#myMenu li a {
   padding-left: 1em;
}
.myMenu_Head {
   display:block;
   font-weight:bold;
   color:#FFFFFF;
   width:10em;
   float:left;
   background-color: #666666;
   padding-left: 0.5em;
}