【コピペOK】WordPress(ワードプレス)投稿画像からランダムで指定数だけ画像表示する

【コピペOK】Wordpress(ワードプレス)投稿画像からランダムで指定数だけ画像表示する
この記事の評価お願いします!
[polldaddy rating=”8416169″]

タイトルを書きましたが、うーんさっぱり分かりませんよねw
投稿された記事でアップした画像を、右カラムにランダムで指定数だけ表示したいと言うものです。
ページを見たときに、ランダムでいろいろと過去作を表示させて、制作事例を紹介したいと言う案件で作ったものです。
でも投稿記事って事例の写真(画像)だけじゃないですよね? ですので、指定ファイル名の画像だけと言う条件付きです。

簡単に以下に仕様まとめです。

やりたいこと 【コピペOK】WordPress(ワードプレス)投稿画像からランダムで指定数だけ画像表示するでやりたいこと

投稿した記事で使っている画像をランダムで表示させたい。
自動で更新したい。
ランダムで表示する画像数を指定したい。
1度にランダム表示するときに、同じ画像は表示しない。
決まった画像だけでランダムで表示させたい。

というもの。
この仕組みを作るために条件を追加。

決まった画像を選ぶために画像のファイル名にルールをつける。
決まった画像は一定サイズにする。

ググって近しいものはあったのですが、少し応用が必要でした。(以下参照あり)
今回は2カラムのサイトで、右カラムのPHPに入れます。

コピペで簡単にできますので、是非お試しください。

【コピペOK】Wordpress(ワードプレス)投稿画像からランダムで指定数だけ画像表示する

ランダムで表示するスクリプト

プログラム本体はfanction.phpに記載します。

function my_random_images($count=1, $size='thumbnail'){
$args = array(
        'showposts' => $count,
        'post_type' => 'attachment',
        'post_mime_type' => 'image',
        'orderby' => 'rand',
        'meta_query' => array(
                array(
                 'key' => '_wp_attached_file',
                 'value' => 'banner', // 画像に「banner」というファイル名がついている画像の中からランダムで表示
                 'compare' => 'LIKE'
                )
        )
);
  
  $images = get_posts($args);
  echo '<div class="my-images">';
  foreach($images as $image)
    echo wp_get_attachment_image($image->ID,full); // thumbnail|medium|large|full|array(width, height) 画像の表示サイズ指定
  echo '</div>';
}

今回は、2カラムの右カラムに表示させたいので、サイドバー(sidebar.php)の表示させいたい部分に以下のソースをコピペします。

<?php my_random_images(5); ?> // カッコ()内の数字は、ランダムで表示する画像数

ランダムで表示するスクリプト(簡易版)

新しい画像が増えることがなく、一定の中からと決まっていればもっと簡易的にすることもできます。直接以下の内容を表示させたいテンプレートに入れます。(例として、同じ右カラムに入れる場合)

<img src="http://xxxxxxxxxx.com/wp-content/uploads/2016/06/banner<?php echo(mt_rand(1,5)); ?>.jpg" width="100%" alt="<?php bloginfo('name'); ?>"> // カッコ()内の数字は、ランダムで表示する画像数で、「banner」と名前が付く中でという条件は同じです。画像のフォルダ位置は自分の環境に合わせてください。

今回のポイントと
紹介アイテム

PVを考えたり、ユーザーの興味を沸かせるためにも、実例表示は重要です。また、ランダムでいろいろと表示させることで、サイトの雰囲気も変わるので効果的です。案次第でいろんな使い方もできるので是非取り入れてみてはいかがでしょうか。

紹介アイテム 参考&Special Thanks

下記の記事を参考にさせていただいたり、コードをそのまま、あるいは改造して使用させていただきました。

WordPressのトップページで投稿に添付された画像をランダム表示する(参考)

【コピペOK】Wordpress(ワードプレス)投稿画像からランダムで指定数だけ画像表示する

ABOUTこの記事をかいた人

1998年からWEB関連の仕事に従事。角川グループのWEB会社に入社し、ディレクター、デザイナーとして経験を積む。2004年よりフリーランスとして活動し、2008年に法人を設立。サイトの制作だけでなく運用保守や紙媒体も行う。専門学校の非常勤講師も経験。