Movable Type の管理画面のメニューバーに、ブックマークを追加するカスタマイズを行ってみました。

このブックマークの追加については、「Bookmarks」というプラグインでも実現できるようですが、なんとなく僕の中で「自分で簡単にカスタマイズできるものは自分でやる」というポリシーみたいなものがあるので、今回もテンプレートのカスタマイズで実現してみました。

カスタマイズの準備

カスタマイズするテンプレートは header.tmpl というファイルで、以下の場所にあります。このファイルをローカルにコピーしてカスタマイズします。

• mt
  • tmpl
    • cms
      • include
        • header.tmpl

テンプレートのカスタマイズ

header.tmpl のカスタマイズ

カスタマイズといっても、このファイルには、次のソースように、header.tmpl の 183、184 行目の間に 1 行挿入するだけです。

</mt:if> <!-- 183行目 -->
 <mt:include name="include/bookmark.tmpl"> <!-- この1行を追加 -->
 </ul> <!-- 184行目 -->

bookmark.tmpl のカスタマイズ

続いて、UTF-8 を扱えるテキストエディタで、以下のようなソースを記述した bookmark.tmpl というファイルを新規に作成します。

<mt:SetHashVar name="test">
<mt:SetVar name="[リンクの名前]" value="[URL]">
</mt:SetHashVar>
<li class="nav-menu"><a href="/blog/cms/mt_tinybeans_admin.cgi?__mode=list&_type=template&blog_id=1"><span>ブックマーク<span mt:command="open-menu">&nbsp;</span></span></a>
<ul>
<mt:Loop name="test" sort_by="key"><li class="section"><a href="<mt:var name="__value__">"><mt:var name="__key__"></a></li></mt:Loop>
</ul></li>

このファイルの 2 行目の [リンクの名前] と [URL] を、ブックマークしたいページや Web サイトに関する情報に書き換えます。この行を複製すれば、いくらでもブックマークは増やせます。

今回は、良くアクセスするテンプレートのページと、テンプレートを書くときにチェックすることが多い外部サイトのページを、次のように登録してみました（僕の管理ページの URL は隠してます）。

<mt:SetHashVar name="test">
<mt:SetVar name="[mtml] css-style" value="/blog/...">
<mt:SetVar name="[mtml] js-yuga" value="/blog/...">
<mt:SetVar name="[mtml] div_id_primary" value="/blog/...">
<mt:SetVar name="[mtml] div_id_secondary" value="/blog/...">
<mt:SetVar name="[mtml] div_id_extra" value="/blog/...">
<mt:SetVar name="[link] CSSセレクタに関するおさらい" value="http://hyper-text.org/archives/2007/01/css_electors_reference.shtml">
<mt:SetVar name="[link] CSSセレクタに関するおさらい 2" value="http://hyper-text.org/archives/2007/01/css_electors_reference_2.shtml">
<mt:SetVar name="[link] CSSセレクタに関するおさらい 3" value="http://hyper-text.org/archives/2007/01/css_electors_reference_3.shtml">
<mt:SetVar name="[link] テンプレートタグリファレンス" value="http://www.movabletype.jp/documentation/appendices/tags/">
<mt:SetVar name="[link] jQuery 1.2.6 リファレンス" value="http://stacktrace.jp/jquery/api/">
<mt:SetVar name="[link] jQuery日本語リファレンス" value="http://semooh.jp/jquery/">
</mt:SetHashVar>
<li class="nav-menu"><a href="/blog/cms/mt_tinybeans_admin.cgi?__mode=list&_type=template&blog_id=1"><span>ブックマーク<span mt:command="open-menu">&nbsp;</span></span></a>
<ul style="width: auto;">
<mt:Loop name="test" sort_by="key"><li class="section"><a href="<mt:var name="__value__">"><mt:var name="__key__"></a></li></mt:Loop>
</ul></li>

ファイルのアップロード

カスタマイズした「 header.tmpl 」と、新規に作成した「 bookmark.tmpl 」を UTF-8 で保存し、次のように「 alt-tmpl 」ディレクトリの中に「 include 」ディレクトリを作成し、その中にアップロードします。

• mt
  • alt-tmpl
    • include
      • header.tmpl
      • bookmark.tmpl

表示結果

管理画面を表示させてみると次のようになります。

スマートなやり方かどうかは微妙ですが、今のところ便利です。データベースにも何も影響はないので気楽に導入できます。

管理画面のカスタマイズについては『Movable Type プロフェッショナル・スタイル MT4.1対応』の Track B の「 5 ユーザー指向の管理画面をつくる」がとても参考になります。

以上です。