WordPress サイドバーのバナー広告を自動で切り替える

IT,WordPress

WordPress サイドバーのバナー広告を自動で切り替える

WordPressでブログを運営していて、サイドバーに表示しているバナー広告やアフィリエイト広告の画像を、自動で切り替えたいと思ったことはありませんか？
特に商品を紹介する広告では、同じ広告を表示し続けるよりも、様々な商品を紹介した方が毎日サイトを訪れてくれているユーザーも飽きないかと思います。そこで、表示する広告画像を毎日自動で変更する方法を紹介したいと思います。
少しだけphpとcssの知識が必要ですが、初心者でも分かりやすいように書いていますので是非試してみて下さい。

必要なもの・知識

  • WordPress
  • プラグイン「PHP Code Widget」
  • プラグイン「Insert PHP Code Snippet」
  • cssの編集（コードの追加）
  • 少しだけphpの知識（書き方を真似するだけでOK）

必要なプラグインについて

  • PHP Code Widget
    サイドバーでphpを使用できるようにするプラグインです。次に紹介する「Insert PHP Code Snippet」で作成したコードをサイドバーに表示するために必要になります。
  • Insert PHP Code Snippet
    phpで記述したショートコード（コードの塊）を、本文やサイト内に簡単に追加できるプラグインです。今回は広告用のショートコード作成し、「PHP Code Widget」でサイドバーに表示します。

手順

1. プラグイン「PHP Code Widget」のインストール

1.0. WordPressの左メニューから「プラグイン」> 「新規追加」を選択
1.1. プラグインの検索窓に「PHP Code Widget」を入力
1.2. PHP Code Widgetの「今すぐインストール」をクリック

2. プラグイン「Insert PHP Code Snippet」のインストール

2.0. WordPressの左メニューから「プラグイン」> 「新規追加」を選択
2.1. プラグインの検索窓に「Insert PHP Code Snippet」を入力
2.2. Insert PHP Code Snippetの「今すぐインストール」をクリック

3. 画像広告表示切り替え用のPHPコードを作成

3.1. プラグイン「Insert PHP Code Snippet」をインストールすると、左メニューに「XYZ PHP Code」という項目が追加されているので、カーソルを合わして「PHPCode Snippets」を選択する。

3.2. 「Add New PHP Code Snippet」をクリック

3.3. タイトルとPHPコードを入力して「Create」をクリック

タイトルは、自分が分かりやすい名前をつけます。

PHPコードへは、下記の「日ごとに３つの商品を切り替えて表示する」コードを貼り付けます。
まずはこのコードで表示確認を行うことをおすすめします。後で応用編として、３つ以上の商品の掲載方法や、表示数を１つ以上に増やす方法なども紹介しているので、表示確認が終わってから応用編を行う方が、結果的にスムーズに実装できるかと思います。

<div class="ad-daily">
<?php
  $contents_list = [
    '商品Aのhtmlコード',
    '商品Bのhtmlコード',
    '商品Cのhtmlコード',
  ];
  mt_srand(strtotime(date_i18n("Y-m-d")));
  shuffle($contents_list);
  for ($i=0; $i < 1; $i++) {
    print($contents_list[$i]);
  }
  mt_srand(); // 乱数を戻す
?>
</div>

上記の '商品Aのhtmlコード'、’商品Bのhtmlコード'、’商品Cのhtmlコード'を、下記のように掲載したい商品のhtmlコードに入れ替えて下さい。

この例の商品のhtmlコードは、画像広告用になります（imgタグが含まれる）。
iframeでも表示はされますが、レイアウトが崩れる場合があります。その場合は後で紹介するcssにて、imgをiframeに変更することで対応が可能です。

4. 画像広告表示切り替え用のPHPコードをサイドバーに追加する

4.1. WordPressの左メニューから「外観」> 「ウィジェット」を選択

4.2. 「Insert PHP Snippet」をクリック

4.3. 追加したい項目を選択し、「ウィジェットを追加」をクリック

私はテーマにSimplicity2を利用しているので、表示内容は人によって異なります。

4.4. 追加した項目にSnippetが追加されているので、タイトルを設定し、Choose Snippetから先ほど3.3.章で作成したタイトルを選択し、「保存しました」「完了」をクリック

これでサイドバーにコードの内容が表示されます！
もし表示されない場合は、コードの内容を今一度見直してみて下さい。
よくある間違いとしては、,(カンマ)が抜けていたり、文末の;(セミコロン)が抜けているなどがあります。

5. 画像広告を横幅いっぱいに表示する

CSSのコードに下記を追加します。これは追加したサイドバーの画像をサイドバーの横幅いっぱいに変更するコードです。

.ad-daily img {
  width: 100%;
  height: auto;
}

もし画像ではなく埋め込み動画などのiframeの場合は、上記ad-daily imgをad-daily iframeとして下さい。

6. 基礎が完成

画像広告は無事サイドバーに表示できたでしょうか？

次に応用編として、

  • ３つ以上商品を表示したい場合
  • 表示数を１つ以上にしたい場合
  • 月ごとに表示内容を切り替えたい場合

を紹介します。必要な項目をご覧下さい。

応用方法

３つ以上商品を表示したい場合

左メニューの「XYZ PHP Code」>「PHPCode Snippets」を選択します。作成したPHPコードを編集するには下記画像赤枠の「編集マーク」をクリックします。

コードの修正箇所は、下記になります。

  $contents_list = [
    '商品Aのhtmlコード',
    '商品Bのhtmlコード',
    '商品Cのhtmlコード',

ここに、下記のように追加していけばOKです。（商品D、商品Eを追加）

  $contents_list = [
    '商品Aのhtmlコード',
    '商品Bのhtmlコード',
    '商品Cのhtmlコード',
    '商品Dのhtmlコード',
    '商品Eのhtmlコード',

こんな感じでどんどん追加していって下さい。

表示数を１つ以上にしたい場合

左メニューの「XYZ PHP Code」>「PHPCode Snippets」を選択します。作成したPHPコードを編集するには下記画像赤枠の「編集マーク」をクリックします。

下記が表示数に関連するコードです。

  for ($i=0; $i < 1; $i++) {
    print($contents_list[$i]);
  }

表示数を３つにしたい場合は下記のようになります。

  for ($i=0; $i < 3; $i++) {
    print($contents_list[$i]);
  }

見て気づかれたかもしれませんが、「$i < 3」の数字が表示数になります。表示したい画像広告数を３つ以外に変更したい場合は、お好きな数字に変更してください。

月毎に表示内容を切り替えたい場合

左メニューの「XYZ PHP Code」>「PHPCode Snippets」を選択します。作成したPHPコードを編集するには下記画像赤枠の「編集マーク」をクリックします。

下記が日毎に表示を切り替えるための設定コードです。

mt_srand(strtotime(date_i18n("Y-m-d")));

これを下記のように変更することで月毎に変更できます。

mt_srand(strtotime(date_i18n("Y-m")));

date関数を理解することで、時間毎や曜日毎に設定することも可能です。もし興味があれば調べて設定してみて下さい。

まとめ

無事に表示することはできたでしょうか？これで毎日サイトを訪れてくれるユーザーにも飽きられずに広告を見てもらえるかと思います。
色々と応用もできますので、よければ自分の思ったようにカスタマイズしてみて下さい。

また、記事内に広告を表示する方法についての記事もありますので、よければこちらもご覧ください。

補足として、
WordPressの設定によっては、表示内容の変更が0時で行われない場合があります。その場合は、左メニューの「設定」>「一般」から、タイムゾーンの設定を見直してみて下さい。

php,WordPress

Posted by noramyao3