Widget Manager プラグインの使い方(その1:デフォルトテンプレートを3カラムにして利用する)

Widget Manager プラグインの使い方(その1:デフォルトテンプレートを3カラムにして利用する)

Posted at July 11,2006 1:27 AM
Tag:[MovableType, Plugin, WidgetManager]

Widgetの管理Movable 3.3 で新たに追加された Widget Manager プラグイン。このサイトで以前「Sidebar Manager plugin でサイドバーのレイアウトを変更する」で紹介したものがバンドルされたようです。

これで何ができるかと申しますと、サイドバーにある「最近のエントリー」や「カテゴリーリスト」等の Widget(ウィジェット)の表示位置を、プラグインの管理画面(左のスクリーンショット)を使って、ドラッグ&ドロップで配置や表示・非表示を自由に変更できるようになります。
これを一旦設定してしまえば、Widget の位置を変更するためにテンプレートの編集画面を開く必要がなくなります。

サイドバーに表示するための Widget は、「テンプレートモジュール」としてひとつずつ登録し、Widget を表示するテンプレートには、これまで Widget を表示していた部分を下記のタグに置き換えるだけです。

<$MTWidgetManager name="Widget Managerの名前"$>

基本的な利用方法は Six Apart のページに掲載されています。

Widget Manager

ここでは応用編ということで、デフォルトテンプレートを3カラムに変更し、サイドバーを Widget Manager で制御する方法について記したいと思います。

1. テンプレートの修正

WIdget Manager を利用したいテンプレートの構成を下記のように修正します(サンプルはメインインデックス)。修正した部分を赤、追加した部分を青で示しています。*1

       :
      (省略)
       :
<body class="layout-three-column main-index">
       :
      (省略)
       :
<div id="pagebody">
   <div id="pagebody-inner" class="pkg">
 
      <div id="alpha">
         <div id="alpha-inner" class="pkg">
            <$MTWidgetManager name="First Widget Manager"$>
         </div>
      </div>
 
      <div id="beta">
         <div id="beta-inner" class="pkg">
       :
      (省略)
       :
         </div>
      </div>
 
      <div id="gamma">
         <div id="gamma-inner" class="pkg">
            <$MTWidgetManager name="Widget Manager Gamma"$>
         </div>
      </div>
 
   </div>
</div>
       :
      (省略)
       :

全体の構成としては

  • alpha:左カラム
  • beta:中央カラム
  • gamma:右カラム

になります。

上記の変更手順ですが、まず body 要素の class 属性を layout-three-column にします。

次に、エントリー本文を表示している

<div id="alpha">
   <div id="alpha-inner" class="pkg">
    :
  (省略)
    :
   </div>
</div>

の alpha および alpha-inner という名称を beta および beta-inner に変更します。

さらに、

<div id="beta">
   <div id="beta-inner" class="pkg">
    :
  (省略)
    :
   </div>
</div>

の beta および beta-inner という名称を gamma および gamma-inner に変更します。gamma の内容はサイドバーになっていますので、これらをごっそり削除して、

<$MTWidgetManager name="Widget Manager Gamma"$>

の1行に変更します。

最後に、beta に変更したタグの直前に

<div id="alpha">
   <div id="alpha-inner" class="pkg">
      <$MTWidgetManager name="First Widget Manager"$>
   </div>
</div>

を追加します。

2 Widget Manager の作成

Widget Manager はデフォルト状態で使える状態になっていますが、このままでは片方のサイドバーしか制御できないため、Widget Manager をもうひとつ作成して両サイドバーを制御できるようにします。

Widgetの管理ブログの管理画面(メイン・メニューからブログ名を選択した次の画面)またはテンプレート一覧画面にある「Widgetの管理」をクリックします。
Widget Managerを作成次の画面の右上にある 「Widget Managerを作成」をクリックします。
Widget Managerの名前次の画面左上にある「Widget Managerの名前」に Widget Manager Gamma を入力します。Widget Manager の名前は何でも構いませんが、1.1項で作成した
<$MTWidgetManager name="Widget Manager Gamma"$>

の赤色部分と一致するようにしてください。

また、利用する Widget Manager に Widget がひとつも設定されていない状態で再構築するとエラーになりますので、この時点で新しく作成した Widget Manager に何かひとつ Widget を「インストールされているWidget」にドラッグ&ドロップしておいてください。

これで再構築すれば 3カラムで表示され、さらに Widget Manager によって Widget を制御できるようになります。

完成画面

*1:色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox/Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

3カラム from KAJIYA.JP LOG
小粋空間さんのエントリーを参考に3カラムにしてみました。 真ん中が・・・狭い^^... [続きを読む]

Tracked on October 5, 2006 10:44 AM

ムーバブルタイプ Widget Managerの使い方 from デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
ムーバブルタイプ3.3から、標準装備されておりますプラグインWidget Managerなんですが、こいつは非常に便利なツールなのです。が・・・意外と使い... [続きを読む]

Tracked on October 30, 2006 5:10 PM

WidgetManagerを利用する from WebRoom
MovableType 3.3x バージョンから標準搭載されたプラグイン WidgetManage... [続きを読む]

Tracked on February 28, 2007 6:16 PM

Movable Type 3.34 へバージョンアップ from 京ぽんでモブログ
 かねてから懸案だった Movable Type 3.34 へのバージョンアップ... [続きを読む]

Tracked on March 5, 2007 10:02 PM

Blogのお勉強 from Christmas CD Collection
現実逃避的にちょこちょこ作成しているこのblogですが、やはり、「デフォルトから... [続きを読む]

Tracked on March 25, 2007 3:06 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)