Widget Manager の使い方(その2:公開テンプレートに適用する)

Widget Manager の使い方(その2:公開テンプレートに適用する)

Posted at July 12,2006 1:10 AM
Tag:[MovableType, Plugin, WidgetManager]

Widget Manager プラグインの応用編ということで、その1 に続き、今回は公開テンプレートを Widget Manager で制御する方法を紹介します。

ここでは 3 カラムレイアウトで適用する例を基本に説明します。2カラムレイアウトについては文中で適宜説明を加えています。

1.テンプレートの修正

公開テンプレートの左カラムおよび右カラムの内容を全て削除し、下記のように MTWidgetManager タグの1行だけになるように変更します。

       :
      (省略)
       :
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<$MTWidgetManager name="First Widget Manager"$>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
       :
      (省略)
       :
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<$MTWidgetManager name="Widget Manager Right"$>
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
       :
      (省略)
       :

2カラムで利用する場合は、上記から不要な方の「×カラム開始?×カラム終了」を全て削除し、残したサイドバーの方に

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

を設定してください。

なお公開テンプレートから削除した内容は新しい Widget として後で使用しますので、エディタの画面または他のファイルに残しておいてください。

2 Widget Manager の作成

Widget Manager はデフォルト状態で使える状態になっていますが、このままでは片方のサイドバーしか制御できないため、3カラムレイアウトで利用する場合は Widget Manager をもうひとつ作成して両サイドバーを制御できるようにします(2カラムでご利用になる場合はこの項目をスキップしてください)。

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

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

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

3.テンプレートモジュールの修正

デフォルトで登録されているテンプレートモジュールの中身を、公開テンプレートの各モジュールの内容に入れ替えます。デフォルトのテンプレートモジュールの内容は元に戻すことができませんので、必要に応じてデフォルトテンプレートモジュールの内容を他のファイル等にバックアップしておいてください。
ここでは Widget に登録されている「最近の投稿」に、公開テンプレートの「エントリーリスト(最近のエントリー)」を設定してみます。

管理メニューの「テンプレート」→「モジュール」で「Widget: 最近の投稿」を開き、「テンプレートの内容」をすべて削除します。そして先ほど削除したテンプレートから「エントリーリスト」の部分(下記)をコピーして、「テンプレートの内容」にペーストします。

<!-- エントリーリスト開始 -->
<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>
<!-- エントリーリスト終了 -->

ここに示している「エントリーリスト」の一番最初の行と最後の行はコメントなので、特に含めなくても問題ありません(ここでは分かりやすくするために含めています)。

同様に、他のテンプレートモジュールも入れ替えてください。公開テンプレートの Widget が対応しているのは下記のテンプレートモジュールです。

  • Widget: 最近の投稿
  • Widget: カレンダー
  • Widget: 最近のコメント
  • Widget: 検索フォーム
  • Widget: タグ クラウド (サイドバー)
  • Widget: カテゴリーリスト
  • Widget: 月別アーカイブリスト
  • Widget: クリエイティブ・コモンズ (「CCライセンス」が対応します)

対応するテンプレートモジュールが存在しない

  • Widget: 最近のトラックバック

は、新しくテンプレートモジュールを作成します。

作り方は、テンプレートモジュール一覧の画面右上にある「モジュールを新規作成」をクリックし、次の画面の「テンプレート名」欄に「Widget: 最近のトラックバック」という具合に、先頭に「Widget:」という名称を付与して適当な名前を与え、あとはテンプレートの内容を設定し、保存します。

[参考]MovableTypeで行こう!Widget Managerに「最近のトラックバック」モジュールを追加する

また、公開テンプレートで Widget として用意されていない

  • Widget: Technorati Search
  • Widget: 月別ドロップダウン
  • Widget: フィードを取得

については、下記のリストをご利用ください。

Widget: Technorati Search

<div class="sidetitle">Technorati</div>
<div class="side">
<form id="ts_s" method="post" action="http://technorati.com/search.php">
<fieldset>
<legend><a href='http://www.technorati.com/'>Technorati</a> search</legend>
<input type="hidden" name="sub" value="searchlet" />
<input type="text" id="ts_search" name="s" size="23" maxlength="255" value="" /><br />
<input type="radio" checked="checked" name="from" id="ts_yb" value="<$MTBlogURL$>" />
<label for="ts_yb" title="<$MTBlogName$>">このブログ</label><br />
<input type="radio" name="from" id="ts_www" value="" /> <label for="ts_www">すべてのブログ</label>
<input type="submit" class="btn" value="検索" />
</fieldset>
</form>
<p id="ts_l" class="ts_l"><a href="http://technorati.com/search/<$MTBlogURL$>" id="ts_lh">» ここにリンクしているブログ</a></p>
</div>

Technorati Search を利用する場合は、スタイルシートに下記を追加してください。

fieldset {
    padding:5px;
}

Widget: 月別ドロップダウン

<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="sidetitle">Monthly Archives</div>
<div class="side">
<select onchange="nav(this)">
<option>月を選択</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$></option>
</MTArchiveList>
</select>
</div>
</MTIfArchiveTypeEnabled>
 
<script type="text/javascript" charset="utf-8">
function nav(sel) {
   if (sel.selectedIndex == -1) return;
   var opt = sel.options[sel.selectedIndex];
   if (opt && opt.value)
      location.href = opt.value;
}    
</script>

Widget: フィードを取得

<div class="side">
<a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
[<a href="http://www.sixapart.com/about/feeds">フィードとは</a>]
</div>

「Widget: フィードを取得」には公開テンプレートの「RSSフィード」を使っても構いません。

設定は以上です。
あとは Widget Manager の利用方法に従って操作してください。3カラムでご利用になる場合は、Widget Managerの名前が「First Widget Manager」が左カラム、「Widget Manager Right」が右カラムになります。2カラムの場合はデフォルトの「First Widget Manager」になります。
必要に応じて新しい Widget を作ってみるのも良いでしょう。

4.アーカイブテンプレートについて

公開テンプレートではインデックステンプレート(メインページ・アーカイブページ)とアーカイブテンプレート(カテゴリー・日付・エントリー)のサイドバーの内容が異なっています(左側のみ)したがって、アーカイブテンプレートにも Widget Manager を適用される場合には

カテゴリーアーカイブ用左サイドバー
日付アーカイブ用左サイドバー
エントリーアーカイブ用左サイドバー

の3つについて、任意の名称で Widget Manager を作成して、さらにテンプレートモジュールも「カテゴリー一覧」と「月別一覧」の2つを作成して、それぞれをカテゴリーアーカイブ用 Widget と日付アーカイブ用 Widget として登録してください。
インデックステンプレートの左サイドバーの内容をアーカイブテンプレートに適用しても正常な表示になりませんのでご注意ください。

2006.07.14 追記
4項を追加しました。

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


トラックバック

Widget Managerに挑戦!!! from Coffee Time
小粋空間:Widget Managerの使い方(その2:公開テンプレートに適用す... [続きを読む]

Tracked on July 13, 2006 12:44 AM

Widget Manager でさくさくモジュール化♪ from ++Blog-MELL++
以前から 気になってた 「Widget Manager」 なのですが 小枠空間 ... [続きを読む]

Tracked on August 6, 2006 6:30 PM

MTメモ:Widget Managerを活用してみる from TokyoLife -dalog-
またもや、MTの調整に時間を費やした感のある 休日です……[:たらーっ:] 今... [続きを読む]

Tracked on February 18, 2007 9:34 PM
コメント

こんばんは。
3.3にしてから、なんとなく便利そうだなと思ってはいても理解できなくて手を出していなかったWidget Manager ですが、こちらの記事のおかげで理解&利用ができるようになりました。いつもありがとうございます。

ところで、トラックバックを送ろうとしたのですが、どうしても「HTTP error: 403 Throttled」になってしまいます。
リンクも貼ってあるし、何度かタイトルを変えてみてもできませんでした。何故でしょう???

[1] Posted by chiffon : July 12, 2006 10:58 PM

たびたびすみません。日付が変わったら(関係ないか。。。)トラックバックもうまくいきました。お騒がせしました。

[2] Posted by chiffon : July 13, 2006 12:49 AM

>chiffonさん
こんばんは。
記事参照ありがとうございます。
アーカイブページの設定については記述が不足しておりました。すいません(4項を追加しました)。
トラックバックは原因不明で申し訳ありません。
無事に送信できたようで良かったです。
ではでは!

[3] Posted by yujiro : July 14, 2006 1:41 AM

こんにちは

いつもお世話になってます^^

以前から モジュール化を考えていたのですが ずっと放置していましたw

今回のバージョンで Widget Manager を知り

またまた こちらにお世話になりました^^

とりあえず メインだけ 出来上がり ホッとしております

ありがとうございました^^

後ほど TB させて頂きますので よろしくでーす♪

[4] Posted by MELL : August 6, 2006 5:48 PM

>MELLさん
こんにちは。
記事参照&トラックバックありがとうございました。
無事にできたようでなによりです。
ではでは!

[5] Posted by yujiro : August 7, 2006 10:52 AM

いつもお世話になっております。このエントリーのカスタマイズしてみたのですが中央カラムをはじめ右カラム、フッターまでが左カラムの下に落ち込んで崩れてしまいます。 モジュール化に関しては、コピー&ペーストしただけで間違いはないと思います。 このカスタマイズ前までは表示の崩れはなかったのですが・・・
※下記のように崩れます。
http://vita.qee.jp/screenshot/WS000001.JPG

[6] Posted by panser : November 25, 2006 1:47 AM

>panserさん
こんばんは。
ご質問の件ですが、サイドバーの幅に問題がなければHTMLのマークアップに原因があると思われます。
私のサンプルが間違っていたら申し訳ないのですが、画像からは原因が判断できないので、HTML(というかNGになっているページのURL)を拝見させて頂ければ幸いです。
それではよろしくお願い致します。

[7] Posted by yujiro : November 26, 2006 9:46 PM

そうですか? とりあえず今は、表示が崩れるので元に戻しました。 表示のURLはだけでよろしいでしょうか?
とりあえずもうひとつのBlogに環境を移行してみます。 また、その時にご連絡させて頂きますので宜しくお願いします!

[8] Posted by panser : November 27, 2006 1:49 AM

>panserさん
こんにちは。
表示が崩れている状態を続けたくない場合は、生成したHTMLをFTPツールで別のファイル名に変更し、そのファイルのURLをお知らせください。
それではよろしくお願い致します。

[9] Posted by yujiro : November 27, 2006 10:01 AM

はじめてコメントさせていただきます。chinopと申します。
こちらの解説がなければMTのカスタマイズもわからないことだらけでした。
感謝感謝です。m( __ __ )m

今回は、こちらの記事を参考にWidgetを利用してみました。
TOPページは思い通りにほぼ完成し満足していたところ、
その他のテンプレート(アーカイブ)の方が上手くいきません。

仕方がないのでアーカイブの方は直接テンプレートをいじってみたのですが、
cssが一部(サイドタイトル、サイド枠は適用、スクロールバー、フォントサイズなど
不適用)しか適用されていません。

この記事の「4.アーカイブテンプレートについて」を読む限り
サイドバーの内容が違うので、別名でWidgetを作成するとありますが、
ワタシの希望は全てのページでTOPページのサイドバーをそのまま
利用したいだけなのですが・・・

説明がわかりにくいかもしれませんが、アドバイスなどありましたら
ご教授いただければと思います。

よろしくお願いいたします。m( __ __ )m

[10] Posted by chinop : March 11, 2007 10:12 AM

たびたびすみません。先ほどの追記です。

「一部のcssのみ」というのは、
デフォルトの.sidetitle、.sideは適用されていますが、
新たに作成した

.sidelist(=.sideのフォントサイズのみ変更)
.scrool(=height300px超えの場合スクロールバーを表示)

が、タグを書き換えても適用されません。

.sidelistと書き換えても.sideのスタイルが適用されているようです。
.scrollは全く表示されません。

[11] Posted by chinop : March 11, 2007 10:57 AM

>chinopさん
こんにちは。
記事参照ありがとうございます。
最初のご質問の件ですが、まずMovable Type ではインデックステンプレートのサイドバーの一部について、他のアーカイブページで同一に表示されないものがあります(「アーカイブページに「最近のコメント」「最近のトラックバック」を表示する」を参照願います)。
つまりそれに該当しないものであれば共通化が可能ですが4項ではそこまで言及しておりませんでした。

なお、下記のプラグインをご利用になればWidget の共通化が可能と思われます(このプラグインは最近知りました)。

indexcontext
http://blog.aklaswad.com/2007/000078.html

2番目のご質問につきましては、サイトを拝見させて頂きたいので、TypeKeyをサインアウトしてURLを入力の上、再コメント頂けると幸いです。

それではよろしくお願い致します。

[12] Posted by yujiro : March 12, 2007 3:34 PM

youjiroさま

コメントありがとうございます!(感激)
アドバイスいただいたindexcontext、早速拝見いたしました。
このタグを使えば、今考えているようなことができそうですね。
参考にさせていただきます。

それとブログのURLを入れておきました。
まだ未完成のチグハグなブログですが、ご覧いただければと思います。

youjiroさんのコメントを拝見して、少しテンプレートをいぢってみたのですが、
ワタシ自身、テンプレートの構成をあまり理解していないようです。。(;^_^A アセアセ・・・

とりあえず、いただいたアドバイスを参考に試行錯誤してみますが、
お気づきの点などございましたら、再度アドバイスいただけたらと思います。

よろしくお願いいたします。m( __ __ )m

[13] Posted by chinop : March 13, 2007 11:19 PM

連続投稿お許しください。m( __ __ )m

HN間違えてしまいました。。
yujiroさんですね、youjiroになってました。
大変失礼いたしました。(大汗)

[14] Posted by chinop : March 13, 2007 11:23 PM

>chinopさん
こんばんは。
#HNの件はお気遣いなく。

ご質問の件の .side のフォントサイズですが、

.sidelist {
/*    margin: 3px 0 20px;*/
/*    background: none; */
    color: #444444;
*    font-size: 10px; *
*    _font-size: 9px; *
    line-height: 150%;
     :

.sidelist {
/*    margin: 3px 0 20px;*/
/*    background: none; */
    color: #444444;
    font-size: 10px; 
    _font-size: 9px; 
    line-height: 150%;
     :

に修正してみてください。

また拝見させて頂いたところ、スクロールバーはRecent Comments に表示(Recent Trackbacks は高さが300px に満たないので非表示)されているようですが、いかがでしょうか。
それではよろしくお願い致します。

[15] Posted by yujiro : March 14, 2007 12:59 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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