【WordPress】ランダムに画像を表示する方法

バナーなどで複数の画像を表示したいことはありますよね。

そのために1つプラグインをインストールするのはサイトを重くするのではないかと思います。

今回はプラグイン無しでWordPressでランダムに画像を表示する方法を紹介します。

カスタマイズをした例

当サイトのサイドバーのプロフィールに実装をしています。

アクセスする度&更新する度に画像がランダムに読み込まれる仕組みです。

実際にやってみよう

使う画像を用意する

まずは、使う画像を複数枚用意します。何枚でもOKです。

今回は3枚用意したので、以下のようなファイル名で保存しておきました。

このように連番でファイル名をつけます。

background1.png
background2.png
background3.png

使う画像をアップロード

準備ができたら任意の場所に画像をアップロードします。

今回は子テーマの中にフォルダを作りました。この中に先程の画像を上げればOKです。

コードを設置する

結論としては以下のコードをタグ内に挿入するだけです。

PHP
<?php echo(mt_rand(1,3)); ?>

このままでは使えないので実際のコードを見ていきましょう。

HTML
<img src="/フォルダを設置するサイトアドレス/background/background<?php echo(rand(1,3)); ?>.png" alt="背景画像" /></div>

コードの解説

imgタグ内に乱数を生成するPHPコードを挿入することでランダムに画像が選ばれるようになっています。

カッコ内の数字はファイル名の最後の数字です。今回は画像を3つ用意したので1から3を指定しています。

5枚用意したなら以下のようになります。

PHP
<?php echo(mt_rand(1,5)); ?>

画像に欠番があると表示されないことがあるので必ず連番になるようファイルを設置してください。

ちょこっとカスタマイズ

当サイトではサイドバーに設置したかったので、テキストウィジェットでphpを使えるようにしました。

以下の記述をfunctions.phpに追記します。

編集の前にはバックアップを忘れずに。

functions.php
function widget_text_exec_php( $widget_text ) {
    if( strpos( $widget_text, '<' . '?' ) !== false ) {
        ob_start();
        eval( '?>' . $widget_text );
        $widget_text = ob_get_contents();
        ob_end_clean();
    }
    return $widget_text;
}
add_filter( 'widget_text', 'widget_text_exec_php', 99 );

参考: How to Run PHP Codes in WordPress Text Widget

まとめ

今回はWordPressでランダムに画像を表示する方法をご紹介しました。

残念ながら投稿には直接PHPコードは挿入できないので、プラグインに頼る必要があります。

少し手間がかかるかもしれませんが、実際にやってみるとサイトに華がでる(?)のでやってみてくださいね。

( *´꒳`*)੭⁾⁾

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA