WordPressプラグインランダムに画像を表示するRandomImage
b-cures.のサイト内にアップしたフリー素材をトップページにてピックアップ表示させるために、RandomImageというプラグインをインストールした。
設定はいたって簡単で、現時点で最新Verのrandomimage-5.0.zipを解凍し、wp-contentのpluginsの直下にrandomimage.phpを入れるだけ。
ダウンロードはこちらから。
Random Image Plugin for WordPress – Justinsomnia
2つのZIPファイルがアップされています。
randomimage-standalone-1.0.zipではなく、randomimage-5.0.zipをダウンロードしてくださいね。
わたしは間違えましたけど。(*´ ＞ ＜ ｀；*)
日本語に翻訳されていないから、最初は設定に戸惑うのだけれど、日本人の中に解説してくれてるサイトがたくさんあったので非常に助かった。
解説してくれた皆様方に感謝ですっ！！
RandomImageは初期設定では、
<strong>%1</strong><br />
%2<br />
<em>%3</em>
となっている。
SEO的にあまりSTORONGタグを頻繁に使いたくないので、この部分を
<p>%1<br />%2</p>
<p><em>%3</em></p>
へ変更。
でも、画像にパーマリンクが張られるだけで、画像のタイトルに記事ページへのリンクが張られないので、直接RandomImageのphpファイルをイジってみました。
phpファイルの一番下の方に、
$image_html = $image_template_html;
$image_html = str_replace(“%1″, $post_title, $image_html);
$image_html = str_replace(“%2″, “<a href=’$post_permalink’><img src=’$image_src’ alt=’$image_alt’ $image_attributes /></a>”, $image_html);
という記述があるので、これを
$image_html = $image_template_html;
$image_html = str_replace(“%1″, “<a href=’$post_permalink’ title=’$post_title’>$post_title</a>”, $image_html);
$image_html = str_replace(“%2″, “<a href=’$post_permalink’><img src=’$image_src’ alt=’$image_alt’ $image_attributes /></a>”, $image_html);
へ変更した。
実際に変更を加えたのは、
$image_html = str_replace(“%1″, “<a href=’$post_permalink’ title=’$post_title’>$post_title</a>”, $image_html);
の部分だけです。
RandomImageの設定項目の説明を・・・。
英文ばっかりだからわからない人もきっと多いはず！
Include images from posts? は表示する項目を投稿記事にするかページの記事にするかです。
投稿記事のみを反映させたいならば、posts?にチェックを入れてPages? のチェックを外します。
Include images from galleries? はWordPressのギャラリーにアップしている画像も含みますか？の意味です。含まない場合はチェックを外します。
Sort Images Randomly? は、画像をランダムに表示させますか？の意味です。
ここのチェックを外すと新着記事の画像のみ反映されます。
チェックを入れておくと、すべての記事中の画像がランダムで表示されます。
How many images to display? は、画像をいくつ表示させますか？の意味です。
ちなみにわたしは3に設定をしています。
HTML Template:
%1 = title
%2 = image
%3 = caption
%4 = excerpt
%1
%2
%3
e.g. %1
%2
%3
は、画像を表示する際にしようするタグです。<li>タグでFloatさせると綺麗に横並びにできますね。
HTML between images: は、画像と画像の間に入れるタグです。
タグを繰り返し使用するのはSEO的にあまりよろしくないので、削除するか、
タグで囲まれるようにHTMLタグの部分を修正することを推奨します。
Optional attributes for <img alt=”" /> tags: は、画像を表示する<img>タグの中にスタイルシートをかませることができるので、その詳細設定です。画像の横幅を200pxなどで指定することができます。
Limit by categories/tags:
(leave unchecked for all) は、画像を表示させたいカテゴリの一覧です。
ここのチェックを外しておくと、全てのカテゴリ内の画像が表示に反映されます。
String to match in the <img alt=”" /> class: は、画像タグの中にスタイルシートをかませていると、使用しているタグを指定して表示する画像を区別させることができます。
たとえば、CSSでrandomimageと記述していれば、<img alt=”" class=”randomimage” />というタグが入っている画像のみ表示に反映させることができます。
Regex to match against the <img alt=”" /> src: は、画像を呼び出すタグの中に例としてimagesという記述が含まれている画像のみ表示に反映させることができるという設定項目です。
以上がRandomImageの設定。
これらの設定が終わったあとに、画像を表示させたいphpファイルに<?php randomimage(); ?>というタグを追記すれば画像が表示させるようになります。
わたしはWordPressのウィジェットを使うのが嫌なので、index.phpに上記のタグを追記しました。
このプラグインをウィジェットで動かすためにPHP Codeというプラグインがさらに必要なようですが、PHP Codeを入れなくてもちゃんと動きましたお。