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

公開日: 更新日: 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. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

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

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

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

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

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

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

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

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

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

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

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

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

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

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

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

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

上の例では

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

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

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

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

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

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

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

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

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

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

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

というショートコードで候補の中から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. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

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

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

です。

このコードは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の人気商品楽天市場の人気商品
CS Shop
たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

1,944 円 (税込) 送料込
<p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

3,456 円 (税込) 送料込
<p>プラグインの開発から運用までを網羅</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>CMSのデファクト・スタン..
楽天ウェブサービスセンター CS Shop

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

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

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


【スポンサーリンク】