【WordPress】プラグインを使わずショートコードでアクセスするたびに違う画像(広告)をランダム表示する方法

公開日:2018年7月24日 使い方など
【WordPress】プラグインを使わずショートコードでアクセスするたびに違う画像(広告)をランダム表示する方法

タイトル付けが非常に難しい・・・表現の紹介です。今回の方法で実装できるのは【アクセスがあるたび(画面をリロードするたび)に違う画像やテキスト、広告を表示する】方法です(表示中にランダムで画像が変わるという【ローテーション表示】ではありません)。

・・・と分かりにくい表現から入ってしまいましたが、複数の画像を表現する方法って2つあるんです。1つは今回紹介するページを表示するたびに違うコンテンツを表示する方法、もう1つは表示しているさ中に画像がどんどん切り替わる方法です(これでも分かりにくい??)。

後者はより動作が複雑になるのでWordPressなら素直に画像スライダーなどを使った方が簡単だと思います(笑)。でも、前者のアクセスされる度に違うコンテンツを表示するのは・・・実は簡単なコードで実装できます。

もう1つ例を挙げると、使っているテーマによってはヘッダー画像をランダム表示・・・という項目があると思います。これを選択すると複数の画像がアクセスされる度に代わりますよね?(これも当サイトで使ってます)。

これと同じ動作をショートコードで任意の場所で実行できるようにしよう!!という方法の紹介になります(更に分かりにくい??)。

もう1つ例を挙げると(もういい??)、複数の広告を入れたいけど本文やサイドバーのスペースは限られているからあきらめて・・・なんてことよくありますよね?しかもチョイスした広告が本当に効果的なのかが分からないなんてこともたくさんありますよね?そんなときにいけそうな広告タグをいくつか用意しておいて、ページが表示される度に同じスペースでも違うものを表示しちゃおう(これが一番分かりやすいかな?)というのが今回の目的です。

前置きというか不明瞭な説明が長くなってしまいました・・・。

まあ興味のある方はやってみてくださいね。

ページ表示のたびに切り替わる画像(広告・任意のテキストなど)を設置する方法

簡単すぎてびっくりしないようにしてください(笑)。手順は2つだけです

まずテーマのfunctions.phpへ以下のコードを追加します

//特定のhtml分をランダムに呼び出す
function randomhtml() {
$rdm = array(
'1つめの画像やテキスト、広告コード',
'2つめの画像やテキスト、広告コード',
'3つめの画像やテキスト、広告コード',
);

$rdm = $rdm[rand(0, count($rdm)-1)];
return '
<div class="oriads">' . $rdm . '</div>
';
}
add_shortcode('randtxt', 'randomhtml');

そして、投稿の本文などに

[randtxt]

というショートコードを入れると・・・上のままだったら、ショートコードを挿入した場所がアクセスするたび(ブラウザをリロードするたび)に「1つめの画像やテキスト、広告コード」「2つめの画像やテキスト、広告コード」「3つめの画像やテキスト、広告コード」のうちの1つが表示されるようになります。

「1つめの画像やテキスト、広告コード」「2つめの画像やテキスト、広告コード」「3つめの画像やテキスト、広告コード」となっているところは文字列でもいいし、画像でもいいし、広告コードでもいいし(つまり文字列でもhtmlコードでもいい)やりたいものを入れてください。

※コードを挿入したり、内容を変えたりするとたまに更新エラーが出ることがあります。これはWordPressのコードチェック機能が過剰防衛したことによるもので、一度

'1つめの画像やテキスト、広告コード',
'2つめの画像やテキスト、広告コード',
'3つめの画像やテキスト、広告コード',

の前の空白を削除して半角で空白を入れ直すとうまく更新できます。

・・・・・以上で終了です(簡単すぎ??)。

すぐに終わってしまったので、ちょこっとカスタマイズ方法をば。

ランダム表示の候補を増やすには

もうお分かりかと思うのですが、上のコードでは3つの候補の中からランダムに表示するようにしています。この候補を増やす(減らす)には

'1つめの画像やテキスト、広告コード',

を必要な数にするだけです。4つの選択候補なら4行、逆に2つの候補なら2行にすればいい!だけなんですね。

複数のショートコードを作りたい

上の例では

[randtxt]

というショートコードで候補の中から1つのテキストや画像がランダム表示されました。

では別の場所に別の候補から抽出したものをショートコードで表示するには??という方法です。

基本となるのは

//特定のhtml分をランダムに呼び出す
function randomhtml() {
$rdm = array(
'1つめの画像やテキスト、広告コード',
'2つめの画像やテキスト、広告コード',
'3つめの画像やテキスト、広告コード',
);

$rdm = $rdm[rand(0, count($rdm)-1)];
return '
<div class="oriads">' . $rdm . '</div>
';
}
add_shortcode('randtxt', 'randomhtml');

です。

このコードは1行目で「randomhtml」という動作名にします!!と宣言しています。そして最後の行で同じものが書かれています。

これをまず別のものにします(半角英数字で分かりやすいものにすればいいと思います)。

そして最終行に「randtxt」という文字列があります。これがショートコード([]で囲まれた部分の中身)になります。これもかぶらないように適当な文字にします。

これで別のランダム表示ブロック?ができますので、あとは候補を設定して入れたい場所にショートコードを入れれば・・・完成です(簡単に説明しすぎですけどこれ以上も以下もないので・・・)。


難しいことを考えていた方・・・簡単すぎてごめんなさい!!と言いたいほど簡単に実装できますので是非試してみてくださいね。

さいごに、紹介したfunction名やショートコード名については「自身の名前+α」にするなど、他のプラグインや機能と重複しないようにすると、更新できたけど表示が真っ白・・・などコードの衝突によるエラーが回避できます。

もしもコード挿入でエラーが起こったら・・

functions.phpでのコードエラーをその場で指摘してくれるのがバージョン4.9から備わった画面真っ白とならないようにする防衛機能なのですが、ここで更新がうまくいったあとでいきなりサイトが真っ白になったりエラーコードのみ表示されたりすることがあります。

これはfunctions.php内でのチェックはOKだったけど、他のところで不具合が発生した!!ということなのです。独自の編集をするときにはよくあることなのでサクッと解消しましょう。

手順は以下の通りです

  1. FTPなどで「WordPressがインストールされている場所」→「wp-content」→「themes」→「今使っているテーマ」を開きます
  2. 1の中に「functions.php」があるのでダウンロードします
  3. ダウンロードしたファイルを開き(メモ帳ではなくTerapadなど無料のテキストエディタが望ましい)、問題を起こしたコードを削除します
  4. 1の場所へ3のファイルを上書きアップロードします

これで元通りになります。今回紹介したコードで衝突が起こるとすればfunction名かショートコード名であることがほとんどなので、それらを変えて再チャレンジしてみてくださいね。

このケースで画面が真っ白になるのはWordPressサイトが壊れた・・・というものではありません。単純にテーマのfunctions.phpに挿入したものとその他のプログラムが何かでうまく動作しませんでした・・というものですから、落ち着いて対処しましょう。

エラーからの離脱方法が分かれば結構WordPressは怖くありませんよ。

【応用】たくさんの候補の中から重複しない複数の重複しない行をランダムに表示させるには(コード例)

例えば5個の候補があるうちの3つをランダムかつ重複がないように表示させるためのコード例です。

//特定のhtml分をランダムに呼び出す
function randomhtml() {
$rdm = array(
'1つめの画像やテキスト、広告コード',
'2つめの画像やテキスト、広告コード',
'3つめの画像やテキスト、広告コード',
'4つめの画像やテキスト、広告コード',
'5つめの画像やテキスト、広告コード',
);
$rand_keys = array_rand($rdm, 3);
shuffle($rdm);
return '
<div class="oriads">' . $rdm[$rand_keys[0]] . '</div>
<div class="oriads">' . $rdm[$rand_keys[1]] . '</div>
<div class="oriads">' . $rdm[$rand_keys[2]] . '</div>
';
}
add_shortcode('randtxt', 'randomhtml');

テスト的に作成したコードですので確実に「重複なしで」「ランダムに」表示できる保証はありません。

記事上部で紹介しているコードと独自関数名・ショートコード名は同一にしていますので、1つのfunctions.phpへ共存させる場合はそれらを別のものへ変更してください(容量は本文中の「複数のショートコードを作りたい」を参照ください)。

候補数を増やす場合はコード中の以下のコードをコピーし、すぐ下へ追加します。

'5つめの画像やテキスト、広告コード',

表示数を増やすには、まず以下のコード中の数字(3)を任意の数へ変更します

$rand_keys = array_rand($rdm, 3);

変更した任意の数に応じて以下の行を増減させます

<div class="oriads">' . $rdm[$rand_keys[0]] . '</div>
<div class="oriads">' . $rdm[$rand_keys[1]] . '</div>
<div class="oriads">' . $rdm[$rand_keys[2]] . '</div>

コード中の[0][1][2]..という部分は[0](1つ目に抽出したもの)、[1](2つ目に抽出したもの)という意味がありますので、4つの結果を表示させる場合は以下のようにすればよいでしょう。

<div class="oriads">' . $rdm[$rand_keys[0]] . '</div>
<div class="oriads">' . $rdm[$rand_keys[1]] . '</div>
<div class="oriads">' . $rdm[$rand_keys[2]] . '</div>
<div class="oriads">' . $rdm[$rand_keys[3]] . '</div>
更新日更新内容
2018年 7月24日【WordPress】プラグインを使わずショートコードでアクセスするたびに違う画像(広告)をランダム表示する方法を公開しました
2021年 4月24日コードの修正を行いました
文末に【応用】たくさんの候補の中から重複しない複数の重複しない行をランダムに表示させるには(コード例)を追加しました
2021年 4月27日文末に【応用】たくさんの候補の中から重複しない複数の重複しない行をランダムに表示させるには(コード例)の修正を行いました
  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。