wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

PHP・shuffleやarrayを使った、画像ランダム表示方法~メインビジュアルやバナー・テキストにも利用可能

   

こんにちは、管理人@SS_mshpです。

今回は、以前お取引先のスクールの担当者さまと、『サイトのメインビジュアル画像ってランダムに切り替えられない?』という話をしていたので、実際にプログラムを組んで対応してみます。

wordpressユーザーなのでPHPを使用します(javascriptなどでも出来そうです)。さっそく実装してみましょう。

画像ランダム切り替えに使えそうな、PHPプログラム

本やサイトで調査したところ、以下のようなPHPが使えると判断しました。
『array(配列変数・複数の値を入れられる)』
『shuffle関数(配列の要素をシャッフルしてランダムに)』
『rand関数(ランダムに)』

このサイトの管理人は、最近、『配列のなかにカテゴリを入れて、特定カテゴリだけ広告配信』みたいな配列変数とかもやっていたので、arrayを使ってみます。

PHPのarray・shuffleを使って、画像ランダム切り替えする方法

いろいろ探してみたところ、shuffleについてシンプルに書いてあった、初心者のPHP入門サイトさんの『shuffle-配列関数:配列をシャッフル』を参考にしてみました。

arrayに入れた要素の中からshuffleでランダムに取り出す例

arrayの配列の中に4つの数字を入れて、shuffleでシャッフルしてランダムに並び替え、current()で参照してechoするという流れで、ランダムな数字がでます。

$ar = array(1, 2, 3, 4);
shuffle($ar);
echo current($ar);


このサイトのメニュー下につけてみました。リロード(再読み込み)するたびに、ランダムに数字が入れ替わる状態になります。数字はただのテキストなので、配列の中にいくつか文章を入れることで、テキストをランダムに表示することにも対応できます

ランダム画像切り替えプログラム

<?php $ar = array(
‘<img src=”https://sounds-stella.jp/music-creation/wp-content/uploads/20180706a.jpg” alt=”” width=”640″ height=”480″ class=”aligncenter size-full wp-image-6049″ />’ ,

‘<img src=”https://sounds-stella.jp/music-creation/wp-content/uploads/20180706b.jpg” alt=”” width=”640″ height=”383″ class=”aligncenter size-full wp-image-6050″ />’
,
‘<img src=”https://sounds-stella.jp/music-creation/wp-content/uploads/20180706c.jpg” alt=”” width=”640″ height=”343″ class=”aligncenter size-full wp-image-6051″ />’);
shuffle($ar);
echo current($ar); ?>

基本的には、上の数字表示と同じです。違う部分は、このサイトの画像表示タグを3つもってきて配列の中に入れた点です。『'<img src=”●●” />’』のように、画像タグをクォーテーションマークで囲って入れないと、閉じる部分を誤認識して『syntax error, unexpected ‘<', expecting ')'』みたいなエラーになるので注意しましょう。

PHPで画像ランダム表示した例

このサイトのヘッダー下に画像タグをいれて、ランダムで切り替えてみた例です。リロード(再読み込み)すると別の画像がでます。スタイルシートで横幅をボックスに対して100%などに広げたりすると、メインビジュアル(トップページの上のほうとかにある大きい画像)などにも対応可能です。そのほか、アフィリエイトバナーなどにも使えるかもしれません

PHPランダム画像切り替えをやるにあたって、参考にしたサイト

今回の記事・画像切り替えについて(検索したら出てきた)参考にしたサイトです。他の関数を使ったりと様々なやり方があるので、PHP学習されている方は、ぜひこちらも読んで見てください。
また、バナー・テキスト・ヘッダーなども切り替えて、読者に変化を見せられるようにしていただければ幸いです。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

侍エンジニア塾ブログにあったPHPコードをシンプルに書いてみる(foreachで配列キーや値取得・continueで空要素スキップ)

今回は、(自分もまだプログラム学習中の身ですが)よくある『プログラム学習 …

【PHPでWPカスタマイズ】プラグイン不使用で、テーマに関連記事表示機能を実装しPV・滞在時間を上げる

今回は、サイトをしっかり見てもらうために、『WordPressサイトに、 …

wordpress構成ファイルのxmlrpc.phpを無効化する方法【実は攻撃されやすい】

今回は、wordpressの構成ファイルで、ちょっとクセのある『xmlr …

【別に止めなくてOK】wordpressサイトなどに、アメブロ・fc2など無料ブログの更新情報を表示して連携する方法

今回は、『無料ブログにすべきかwordpressにすべきか』という疑問に …

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用するのは『 …

【wordpressカスタマイズ】llorix_oneなどビジネストップ1カラムテーマで、カスタマイザーで入らない動画・オーディオを入れる

今回は、人気の海外ディベロッパーのwordpressテーマで、動画やオー …

【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)

今回は、推奨されてるWPの子テーマについてですが、『結局親テーマいじる羽 …

【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?

今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …

ワードプレスでデータベースにたまる余計なデータって何があるの?事例と対処方法

今回は、ワードプレスのサイトでよくある『データベースにたまる余計なデータ …

【WPカスタムフィールドはこう使う】カップ焼きそばレビュー記事に、カスタムフィールドで評価スコアを(CSSつけ方もあり)

今回はwordpressの機能『カスタムフィールド』で、より具体的に利用 …

【PHPで条件分岐】wordpressのサイトで、ページごと(固定・記事・カテゴリ・複数ページ)に、表示される内容を変えたいっ!

今回は、wordpressのサイトで使われるPHPプログラムの条件分岐で …

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpres …