【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');

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

[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 '
' . $rdms . '
'; } 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は怖くありませんよ。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
できるWordPress WordPress Ver.4.x対応 [ 星野邦敏 ]

できるWordPress WordPress Ver.4.x対応 [ 星野邦敏 ]

1,512 円 (税込) 送料込
WordPress Ver.4.x対応 星野邦敏 相澤奏恵 インプレスデキル ワード プレス ホシノ,クニトシ アイザワ,カナエ 発行年月:2017年08月 ページ数:254p サイズ:単行本 ISBN:9784295002017 星野邦敏(ホシノクニトシ) WordPressのテーマやプラグインを開発している株式会..
いちばんやさしいWordPressの教本第3版 [ 石川栄和 ]

いちばんやさしいWordPressの教本第3版 [ 石川栄和 ]

1,706 円 (税込) 送料込
評価 4
石川栄和 大串肇 インプレスBKSCPN_【bookーfestivalーthr】 イチバン ヤサシイ ワードプレス ノ キョウホン イシカワ,ヒデカズ オオグシ,ハジメ 発行年月:2017年02月 ページ数:256p サイズ:単行本 ISBN:9784295000792 石川栄和(イシカワヒデカズ) 株式会社ベクトルの..
楽天ウェブサービスセンター CS Shop
トップへ戻る