「画像サムネイルを並べるRandom Image Plugin(for WordPress)」

• Tweet
• 

• Tweet
• 

ブログ記事に画像を挿入したりします。
サムネイル一覧作ってないの思い出しました。
Takumaです。
　

【サムネイル】
画像や文書のファイルを縮小表示したもの。多数のファイルを一覧表示する際に使われる。 」(by Yahoo！辞書)

　

というわけで、久しぶりにworepressの改造です。

▼takumart.net：過去記事▼
「ユーザーヒートとページ内導線解析」 | takumaの「デザインはあれでアートはそれで」in takumart.net

にて、このブログのヒートマップ検証をしたわけですが、3カラムタイプのいちばん右。
このカラム中盤の注目率が下がっていました。

・セカンドページ以降で「最新記事」へ回遊ができていない。
・下部のブログパーツにアテンションを奪われている。
・テキストベースで構成されたエリアは本文でない限り読み飛ばされる。

というのが、複数の検証結果から改めて見えてきました。

■この中盤領域に新しいアテンションを■■■■■■■■■■■■

というわけで、この「魔の右カラム中盤(←命名ｗ)」に回遊窓口＆アテンションを作り、下部のブログパーツ領域に行く前にピックアップできないものか。

というわけで、最新記事との絡みで「最新画像」を表示することにしてみました。

いろいろと、調べてみたのですがカラム表示で管理画面から適切な調整ができる下記のwordpressプラグインを選択しました。

▼ピックアップサイト▼
Random Image Plugin for WordPress – Justinsomnia

■大まかな手順は以下のとおり■■■■■■■■■■■■■■■■

●導入(プラグインダウンロードからテンプレート改造＆プラグイン可動)

(Step.1) 上記公式サイトからプラグインファイルをダウンロードして解凍。

(Step.2)「randomimage.php」をwp-content/pluginsにアップロード。

(Step.3) プラグインを有効。

(Step.4)「<?php randomimage(); ?>」と表示させたいテンプレートファイルの街頭箇所にソースを挿入して本番環境にアップ。

※takumaの場合は、右カラムのphpファイルに挿入しました。

そして、細かい設定をwordpressの管理画面から行います。

●設定(基本機能実装後の表示内容微調整)

(Step.4) wordpress管理画面にログイン。

(Step.5) [各種設定]＞[Random Image]のタブを開く。

(Step.6)以下、表示項目を調整して適正化す。。

(Step.7)「Update Opthions」ボタンをクリックして反映。

(a)Include images from WordPress posts? / Pages?
「アクティブのページ：posts」もしくは「固定のページ：page」のどこから画像を抽出するかを選択できます。
⇒「最新画像」なので「posts」のみをチェックしました。

(b)Sort Images Randomly?
抽出するサムネイルが対象先から「ランダム」もしくは「最新記事から順番」に表示されるかを決める。チェックを入れるとランダム。
⇒「最新画像」なのでチェックをはずしました。

(c)How many images to display?
抽出表示するサムネイル点数の数を決めることができます。
⇒二段組みにしたかったので「10」にしました。

(d)HTML Template
各抽出されたサムネイルにセット(1ブロック)で表示する要素指定が行えます。
「%1が記事タイトル、%2が画像、%3がalt」ですが、1と3に関しては文章が長いとサムネイルが見づらくなるので注意です。
⇒「%2」だけで初回は表示することにしました。

(e)HTML between images
複数のサムネイル間のHTML要素指定です。デフォルトでは改行タグが入っています。
⇒特に必要ないのでカラにしました。

(f)Optional attributes for ＜img＞ tags
画像サムネイルに対する指定。画像のサイズや各画像サムネイルにひもづくCSS指定を行えます。
⇒画像サイズと画像周りのマージン調整指定をしました。

(g)Limit by categories/tags
画像抽出対象となるカテゴリの指定。チェックしたカテゴリのみを表示しますが、チェックなしの場合は全対象となります。
⇒チェックなしで全対象

(h)String to match in the ＜img＞ class
「記事側で指定したclass指定」と「この設定で指定したclass指定」が合致した際にのみ表示されるようにする指定項目。
⇒個別指定が必要ないため空欄

(i)Regex to match against the ＜img＞ src
画像のファイル名を指定して表示する場合の指定項目。JPGやGIFやPNGが指定できるが、項目入力すると他の拡張子ファイルが表示されない。
⇒個別指定が必要ないため空欄

という感じで、簡単に表示されました。
実作業時間としては15分程度でした。各項目の意味を探すのに若干手間取りましたがｗ
さて、ヒートマップの結果はどうなるやら。ドキドキですな。

■参考サイト■■■■■■■■■■■■■■■■■■■■■■■■

・記事の画像をサイドバーなどにランダム表示するプラグイン[WP] – ミblog : レビューや日常など
・WordPressプラグイン『Random Image plugin』を使って過去記事を掘り起こす。 – HAAYA
・記事やページ内の画像をランダムに表示してくれるプラグイン | Tips Community
・WordPressの記事画像のサムネイルをランダムに表示するプラグインRandom Image | 無料で使える情報探す「おぼえがき」

■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
HOW TO MAKE WONDER CHRISTMAS – イセタンワンダークリスマス 2009

●んで、一言

Flash絵本のようなコンテンツ。
世界のどこかにある「ワンダーエデン」を舞台に、クリスマスシーズンで大忙しの様子をファンタジックかつシュールテイストのイラストで展開していきます。
(作家は、クラウス・ハーパニエミ氏だそうです。)

次回は11月25日とのことで、12月16日に準備が進められているパーティー会場が公開になるそうです。

クリスマスシーズンのキャンペーン系がこれからも多くなりますね。
こういう、ストーリーのあるコンテンツは楽しみですね。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■