TIPS ダイナミック・サイドバーを活用

ウィジェット・リストWordPress 2.5 の新機能で最も素晴らしいと思うのは、ダイナミック・サイドバーだ。WordPress 2.3までは、サイドバーをカスタマイズするには sidebar.php というテンプレートファイルを編集する必要があった。それが、新バージョンでは、テンプレートファイルをいじらなくてもサイドバーに表示する機能を選択・表示することができるようになったのだ。それも、マウスクリックとドラッグ・アンド・ドロップだけでほとんどの作業が済んでしまうのがスゴい。

ダイナミック・サイドバーにはテキスト・ウィジェットという機能があり、テキストだけでなくHTMLも自由に書き込むことができる。その最もシンプルな応用例が、本サイトの右上隅の「ようこそ♪」メッセージだ。サイトの簡単な紹介を書いて表示することができるし、必要に応じて書き換えることも簡単だ。

今回はダイナミック・サイドバーのテキスト・ウィジェットを利用して、他のサイトのオブジェクトを表示する方法を紹介しよう。サンプルはWindows Live Photoのスライドショーだが、Google AdSense、Amazon 商品リンクなどにも同様の方法で応用可能だ。

ウィジェット管理

まず、WordPressの管理画面にログインし、「デザイン」→「ウィジェット」を選択すると、左のような管理画面が表示される(過去のWordPressからバージョンアップしたためか、画面の一部が日本語化されていないのはご容赦いただきたい)。

次に、テキスト・ウィジェットの追加を選択する。下の画面を参照されたい。

すると、画面右側のリストに「テキスト」という項目が追加される。
この項目はドラッグ・アンド・ドロップで上下の位置を変更することができるので、好きな場所に移動する。

テキスト・ウィジェットの追加

テキスト・ウィジェットの編集

ここで、「テキスト」項目の「編集」をクリックすると、左下のような小窓が開く。この辺りのインターフェースはAJAXを効果的に活用している。

Windows Live Photo でアルバムを表示し、右側のメニューにある「コンテンツの挿入」をクリックする。すると、画面下側に「スライドショーの挿入」、「写真の挿入」というパートが表示される。「スライドショーの挿入」の下のテキストボックスをクリックすると、'<object width=”0″ height=”0″ (以下略)’ といったHTMLを選択することができる。ここで、キーボードの Ctrl + V を押下して、クリップボードにコピーする。

WordPressの画面に戻り、「テキスト」のテキストエリアにペーストする。これで、スライドショーを挿入することができた。しかし、デフォルトのサイズでは大きすぎるので、幅と高さを調整する必要がある。デフォルトでは width=”360″ height=”240″ となっている。ぼくの場合は、これを width=”180″ height=”135″ に書き換えた。

設定を保存編集が終わったら、「変更」をクリックして、この小窓を閉じる。最後に、「変更を保存」をクリックするとサイドバーの変更が保存され、ブログに反映される。ぼくのサイトのトップページに表示されているとおりである。

さて、ダイナミック・サイドバーは便利な機能だが、これまで、WordPressのテンプレート・タグを編集することによってサイドバーをカスタマイズしてきた人には不満が残るかもしれない。しかし、これもExec-PHP というプラグインを追加することで解決可能だ。インストールは他のプラグインと同様で、ファイルのアップロードと有効化を行うだけである。設定を変更する必要もないだろう。これで、テキスト・ウィジェットにPHPのコードを書き、実行することができるようになる。

その例が、このサイトのサイドバーにある「カテゴリー」だ。標準で用意されている「カテゴリー」ウィジェットでは、非表示にしたいカテゴリーや階層の深さを設定することができないが、テンプレートタグが利用できれば簡単である。具体的には次のようなコードを書いている。

<ul>
<?php
wp_list_categories(‘orderby=name&show_count=1&title_li=&exclude=17’); ?>
</ul>

この例では、nameでソート (orderby=name)、ポスト数を表示 (show_count=1)、タイトルは省略 (title_li=)、17番のカテゴリーを非表示 (exclude=17) としている。

このように、WordPress 2.5 のダイナミック・サイドバーは便利であるし、中でもテキスト・ウィジェットは様々に応用が可能なツールである。

コメントを残す