entry-image

MovableType 3.3 の Widget 機能で効率良くサイトを管理【その2】

前回のエントリでメモしたように Movable Type 3.3 では Widget Manager という便利な機能がつきました。

いままでのバージョンでは、テンプレートの中で共通で使う部品を「モジュール化」して管理する手法がポピュラーに使われてきたと思います。

このブログでもサイドバーの項目はセクションごとにモジュール化して管理していました。それだけでも十分に効率良く管理できますが、今回の Widget Manager 機能を使うと、テンプレートの種類ごとに表示・非表示を選択したり順序を変更したり、という煩雑な作業が直感的にできるようになるためさっそくこのブログでも導入しました。

いままでの管理(テンプレート・モジュール)

いままでのバージョンの MT で使ってきた方法はこのような感じにモジュールを作成して、任意のテンプレートで使いたい場合に <$MTInclude module="モジュールの名前"$> というように呼び出しをしていました。

モジュールを活用して必要な部品を読み込む管理方法

便利ではありましたが、出現順を変更したい場合には記述している全てのテンプレートを書き換えなければなりませんでしたので、アップグレードと同時に、直感的にびゅんびゅん配置を変更できる Widget に変更してみたくなったので試してみました。

いままでのモジュールを Widget 化する

というわけでいままでのモジュールを Widget 化してみます。

すでにブログを運用中なので、先にモジュールの名称を変更してしまうと運用中のテンプレートに影響してしまうので、安全のために新しく Widget を作成することにしました。

すでにモジュール化しているソースコードと同じ部分を Widget にするだけなので、テンプレート > モジュール(タブ) > 「モジュールを新規作成」を押して、モジュール化したい部分のソースコードを同じようにペーストするだけです。

異なる点は、テンプレート名の先頭に Widget: と入れること。たったこれだけで Widget に使えるパーツになります。

Widget: 最近のエントリ

Widget: の後につける名称は、あとで他と混乱しないようなわかりやすい名称をつけると良いと思います。GUI 上で表示される名前となるのでこの名称は日本語でもアルファベットでも大丈夫のようです(Widget: は半角アルファベット)。

ひととおり部品がそろったら Widget Manager へ

Widget: で始まる部品の作成が一通り済んだら、次はテンプレート画面の下の方にあるリンク「Widget の管理」をクリックして Widget Manager 管理画面に移動し、(ここでは)サイドバーに使うための Widget Manager を新規作成しますので「Widget Manager を作成」をクリックします。

Widget Manager を新規作成

必要な部品を選び、ドラッグして保存

新しく作成する Widget Manager の名称を入力し、(ここでは Sidebar としました)表示させたい部品を「インストールされている Widget」の領域にドラッグします。

Widget Manager の編集画面

出現させたい順序をドラッグしながら調整して、問題がなければ「変更を保存」して再構築します。

最後に Widget を挿入したいテンプレートに一行加えて完成

Widget が無事できたら、最後に挿入したいテンプレートの挿入したい場所に Widget を呼び出すコードを一行入れるだけで完成です。

<$MTWidgetManager name="Sidebar"$>

インデックステンプレートには全部品を出したいけれど、月別アーカイブにはある部品を出したくない、などというときのために、最初に作った部品を活かして複数の Widget Manager を作成しておくととても便利だと思います。

先ほど「Sidebar」という名称の Widget Manager を作りましたが、「IndexSidebar」「ArchiveSidebar」などというように名称を変えて保存するだけでいろいろなテンプレートの性格にあわせた部品の調整ができるようになります。

Commentscomment feed

* Gravatarに登録(FREE)するとあなたのアバターが表示されます。

  1. MELL
    • MELL
    • はじめまして^^

      モジユール化をしようと、色々検索してたら
      こちらにたどり着きました。

      Widgetは便利そうですね
      うちのような3カラムのサイトとかでも使えるのかなぁ?

      出来ると楽なんですよね^^

    August 4, 2006 1:26 PM

  2. purprin
    • purprin [TypeKey Profile Page]
    • > MELL さん
      3カラムでももちろん Widget 使えます。
      挿入したい場所に一行加えるだけなので、あとはどこに挿入したいか(いわゆる右サイドバーなのか左サイドバーなのか)、どのパーツにしたいか、を選択するだけで可能ですよ。

    August 4, 2006 10:27 PM

  3. 雨宮
    • 雨宮
    • 大変勉強になりました。
      有益な情報をありがとうございます。
      また、お邪魔します。
      しかし、デザインの綺麗なサイトですね。
      羨ましい!

    November 15, 2006 5:41 AM

  4. purprin
    • purprin [TypeKey Profile Page]
    • > 雨宮さん
      ありがとうございます。しかし、デザイン作り替えたい症候群が発病中です。今後ともよろしくお願いします。

    November 29, 2006 2:11 AM

  5. ceo-minaki
    • ceo-minaki
    • widgetの設定終了後
      <$MTWidgetManager name="Sidebar"$>
      を挿入すれば、完成ということになってますが、初期設定だとすればどこに挿入すればいいのでしょうか?挿入したいテンプレートってたとえばどこですか?

    December 6, 2006 8:06 PM

  6. purprin
    • purprin [TypeKey Profile Page]
    • > ceo-minaki さん
      例えば、インデックス・テンプレート » メインページ というテンプレートの以下のコード
      -------------------------------------------------------
      <div id="beta">
      <div id="beta-inner" class="pkg">
      -------------------------------------------------------

      の直後に挿入すると、Widget Manager で設定した内容をサイドバーに表示することができます。

      インデックス・テンプレートの他にも、アーカイブ・テンプレート(エントリー・アーカイブ/日付アーカイブ/カテゴリ・アーカイブ)でも同じように挿入することができますので、挿入したいと思われるテンプレートに一行書き加えてお試しください。

    December 7, 2006 6:00 PM

Post a comment

コメント投稿フォーム:

Search this site

コトノハ - ○×ソーシャルで私が回答した最新のコト 5 件を表示しています。クリックすると別窓でその「コト」に移動します。

  • entry-image

    Web 標準の日バナー貼付に際して、microformats から...

  • entry-image

    paperboy& co から、空港をイメージしたソーシャ...

  • entry-image

    今日は駄文いくつか。 デザインワークをしていると、当初考えていたレ...