WordPress 記事内のバナー広告を自動で切り替える

IT,WordPress

前回はWordPressのブログサイトでアフィリエイトをされている方などに向けて、サイドバーのバナー広告を自動で切り替える方法を紹介しました。
今回は記事内のバナー広告を記事ごと＆毎日に自動で切り替える方法を紹介したいと思います。

下記記事のサイドバーの自動切り替えを実装されている方は、コードを少し変更するだけなのでとても簡単にできます。今回の説明ではプラグインのインストールなどは省いているので、インストールをされていない方は下記記事を参考にインストールなどしてみて下さい。

必要なもの・知識

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

プラグインの説明

  • Insert PHP Code Snippet
    phpで記述したショートコード（コードの塊）を、本文やサイト内に簡単に追加できるプラグインです。今回は広告用のショートコード作成し、記事に表示します。

方法

1. プラグイン「Insert PHP Code Snippet」のインストールとPHPコード作成

プラグインのインストール方法は、こちらの記事をご覧ください。

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

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

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

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

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

PHPコードへは、下記の「記事ごと＆日ごとに３つの商品を切り替えて表示する」コードを貼り付けます。初めての人は、まずはこのコードで表示確認を行うことをおすすめします。慣れない内は、一つずつ確認しながら行う方が、うまくいかない時の原因を発見しやすくなります。
後で応用編として、３つ以上の商品を切り替えて掲載する方法や、表示数を１つ以上に増やす方法などを紹介しています。表示ができたら応用編にチャレンジしてみてください。

<div class="ad-daily-single">
<?php
  $contents_list = [
  '商品Aのhtmlコード',
  '商品Bのhtmlコード',
  '商品Cのhtmlコード',
  ];

  mt_srand(strtotime(date_i18n("Y-m-d")) + get_the_ID());
  shuffle($contents_list);
  print($contents_list[0]);
  mt_srand(); // 乱数を戻す
?>
</div>

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

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

コードの補足として、get_the_ID()関数で記事のIDを取得し、乱数ジェネレーターのseed値に利用しています。これで、記事毎に異なるコンテンツを表示しています。

3. PHPコードを記事に追加する

3.1. プラグイン「Insert PHP Code Snippet」のトップ画面を表示します。
（左メニュー「XYZ PHP Code」＞「PHPCode Snippets」）

3.2. ２章で追加したPHPコードの、Snippet Short Code項目のショートコード（下記赤枠）をコピーします。

3.3. PHPコードを表示したい記事の編集画面を表示します。

3.4. 画像コードを表示したい箇所にカスタムHTMLにて、コピーしたショートコードを貼り付けます。

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

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

CSSのコードに下記を追加します。これは追加した広告を記事の横幅いっぱいに変更するコードです。

.ad-daily-single {
  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コードを編集するには下記画像赤枠の「編集マーク」をクリックします。

下記が１つのみ表示するためのコードになります。

  print($contents_list[0]);

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

  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")) + get_the_ID());

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

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

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

まとめ

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

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

php,WordPress

Posted by noramyao3