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

公開日: 使い方など
Knowledge Base 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 '
' . $rdms . '
'; } add_shortcode('randtxt', 'randomhtml');
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

[randtxt]
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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

'1つめの画像やテキスト、広告コード',
  '2つめの画像やテキスト、広告コード',
  '3つめの画像やテキスト、広告コード',
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

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

'1つめの画像やテキスト、広告コード',
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

上の例では

[randtxt]
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

基本となるのは

//特定のhtml分をランダムに呼び出す
function randomhtml() {
$rdm = array(
  '1つめの画像やテキスト、広告コード',
  '2つめの画像やテキスト、広告コード',
  '3つめの画像やテキスト、広告コード',
);
$rdm = $rdm[rand(0, count($rdm)-1)];
return '
' . $rdms . '
'; } add_shortcode('randtxt', 'randomhtml');
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

です。

このコードは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は怖くありませんよ。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
【中古】 WordPressレッスンブック 2.8対応 ステップバイステップ形式でマスターできる /エビスコム【著】 【中古】afb

【中古】 WordPressレッスンブック 2.8対応 ステップバイステップ形式でマスターできる /エビスコム【著】 【中古】afb

108 円 (税込)
エビスコム【著】販売会社/発売会社:ソシム発売年月日:2009/09/18JAN:9784883376735//付属品〜CD−ROM1枚付
【送料無料】 WordPress標準デザイン講座20LESSONS WordPress5 / Gutenberg対応 / 野村圭 【本】

【送料無料】 WordPress標準デザイン講座20LESSONS WordPress5 / Gutenberg対応 / 野村圭 【本】

2,786 円 (税込) 送料込
基本情報ジャンル建築・理工フォーマット本出版社翔泳社発売日2019年06月ISBN9784798156514発売国日本サイズ・ページ303p 23×19cm関連キーワード 9784798156514 【FS_708-2】出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

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

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報