Movable Typeテンプレート講座第2回

「アイテム」ウィジェットをカスタマイズ

　「アイテム」ウィジェットは、ブログに登録された画像を一覧表示します（図2-1）。そのため「アイテム」にあるサムネイルをクリックすると、オリジナルの画像が表示されます。ユーザーとすれば、画像をクリックしたらその画像を使用しているブログ記事にリンクしてほしいところですが、アイテムは複数のブログ記事で使い回しができるためそのような仕様になっているのでしょう。

　しかし、ほとんどの人は、ブログ記事で一度使用したアイテムをほかの記事で使用することはないでしょう。本記事では、「画像をクリックしたら、それを使用しているブログ記事にジャンプする」ようにカスタマイズしたいと思います。

　まず、「アイテム」ウィジェットが機能するためには画像が必要ですので、先にアップロードしておきましょう。

　「新規作成 > ファイルアップロード」で画像をアップロードするとアイテムとして自動的に追加され、トップページにアップロードした画像が追加されていきます。いくつかの画像は、新規ブログ記事にも挿入しておきましょう。

　「アイテム」ウィジェットを編集するには、「デザイン」メニューのウィジェットを選択します。ウィジェット一覧の中に「アイテム」がありますので、それをクリックし編集画面を開きます（図2-2）。

サムネイルのリンク先をエントリーにする

　編集するコードを次のように変更します。

　コードを変更する際は、元々あったコードをタグで囲むとよいでしょう。は、その間にあるMTタグやテキストをすべて無視して出力しません。

　さて、オリジナルのウィジェットと上記の変更したウィジェットは、画像を一覧表示する点は同じですが、根本的な発想の仕方が異なっています。

　オリジナルはで示すアイテムを基準にしています。つまり、アイテムとして登録した画像を取り出し、そのサムネイルのリンク先を、アイテムの本体にしています。

　一方、変更後はで示すように、エントリー（ブログ記事）を基準にしています。エントリーが使用しているアイテムを取り出し、そのアイテムのサムネイルを表示し、リンク先をエントリー記事にしています。

　2つは、同じような結果を出力しますが、異なるアプローチになります。例えば、最近、画像を使用しないエントリーが10件以上続けば、変更後ではアイテムが1つも表示されませんが、アイテムを基準にしているオリジナルでは、エントリーに使用されているかどうかを問わずアイテムが10個表示されるようになっています。しかし、変数やといったタグを駆使すれば、まったく同じ結果にすることも可能です。

　次ページでは新規にウィジェットを作成し、ウィジェットセットに登録します。