こちらの記事では、予め用意した広告をランダムに表示させる方法を記録として残しました。
ランダムに広告を表示させる代表例としては、グーグルアドセンスの広告が比較的有名です。
既存のシステムではA8.netでは、「A8内で取り扱っている広告」であれば、ランダムに表示させるローテーションバナーというサービスがあります。
複数のASPであったり、直接企業で契約している場合、複数の広告をランダムで表示させる方法をまとめてみました。
実装手順(Javascriptファイル編)
手順1:Javascriptファイルを作成する
javascriptファイルを作成します。ファイル名は何でも良いですが「random-ad.js」とします。
もしCocoonのテーマを使っている場合は、「外観」→「テーマ編集エディタ」→「javascript.js」のファイルに追加するだけです。
![Wordpressのテーマ編集画面 javaスクリプトを編集(WordPressでランダムに広告を表示させる)](https://ryoumou-trade.net/wp/wp-content/uploads/2024/05/p001.jpg)
追加するコードは以下のようになります。下記の例では、3件のみですが、必要であれば何件でも追加が可能です。
document.addEventListener('DOMContentLoaded', function() {
var ads = [
'<!-- ASPから提供された広告タグ1 -->',
'<!-- ASPから提供された広告タグ2 -->',
'<aaa>サンプルタグ<aaa>'
];
var randomIndex = Math.floor(Math.random() * ads.length); // ランダムなインデックスを生成
var adHtml = ads[randomIndex]; // 選択された広告タグを取得
// 広告をページに追加
document.getElementById('randomAd').innerHTML = adHtml;
});
広告のタグをシングルクォーテーションで囲まれた部分にコピペします。コピペして貼り付けする際に、改行があるとコードエラーになりますので、貼り付けるタグは1行になるように、改行は無い状態にしてください。
サンプルの広告タグに改行がある場合、
<aaa>サンプルタグ
</aaa>
<aaa>サンプルタグ<aaa> ←改行を取り、コピペしてください。
手順2:headタグを追記
新規にjsファイルを作成した場合は、Headタグの中に下記のソースを記載します。Cocoonなどで既存のjsファイルにコードを追加した場合は、手順2の修正は不要です。
<script src="path/to/random-ad.js"></script>
path/to/random-ad.js
は、実際のファイルのパスに置き換えてください。
手順3:実際に広告を掲載したい場所にコードを貼り付け
広告を追加したい場所に直接下記のコードを追加します。
<div id="randomAd"></div>
直接編集することも可能ですが、ウィジェットを追加して、コードを貼り付けるとメンテナンスがしやすいかと思います。テーマがCocoonの場合なら、広告を表示したいウィジェットを選び、テキスト形式で追加しましょう。
![Wordpressでランダムに広告を表示させる対応(ウィジェット)](https://ryoumou-trade.net/wp/wp-content/uploads/2024/05/p002.jpg)
うまくいかなければ、広告用のウィジェットを作り、直接ウィジェット内のテキストにコードを書いてしまう方法もあります。
<div id="mobiPrint"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
-- 省略 --
// 広告をページに追加
document.getElementById('mobiPrint').innerHTML = adHtml;
});
</script>
cocoonの場合は、テンプレート機能が使えるので、便利かと思いましたが、コード一式を保存するとhtmlが書き変わってしまい、pタグが追加されてしまったりとタグ改変の恐れもあるので、使わない方が良いです。実際にやってみましたが、正常に動作はしませんでしたので、テンプレート機能での使用はしないでください。
実装手順(PHP編)
Javascriptより簡単かもしれません。
手順1:funcsion.phpにコードを追加する
広告用にPHPファイルを新規に作るのも良いのですが、今回の例ではfuncsion.phpにソースを書き込みます。Javascriptと違い、コードのミスがあると、ブログが表示されなくなり、FTPを使ってファイルの修正が必要になります。PHPの知識がない方は、十分注意してください。
下記の例では、シングルクォーテーションで囲まれた赤の部分に、表示させたい広告のタグを入れます。
function display_random_ad() {
$ads = array(
'<!-- ASPから提供された広告タグ1 -->',
'<!-- ASPから提供された広告タグ2 -->',
'<!-- ASPから提供された広告タグ3 -->'
);
$random_index = array_rand($ads);
return $ads[$random_index];
}
add_shortcode('random_ad', 'display_random_ad');
![ランダムで広告を表示させる(funcsion.php)](https://ryoumou-trade.net/wp/wp-content/uploads/2024/07/randam01.jpg)
手順2:ランダム広告を表示させたいところにショートコードを記載
WordPressの外観のウィジェットを開き、広告を表示させたい場所に、ショートコードを記載します。
ショートコードは下記のように[]の中に、random_adを入れます。
![ランダム広告を表示させたい場所にショートコードを記載する。](https://ryoumou-trade.net/wp/wp-content/uploads/2024/07/randam02.jpg)
実装手順(プラグインにて)※詳細は別記事に
ランダムで広告を表示させる方法として、当ブログではオリジナルプラグインを作成し、無料で公開しています。オリジナルプラグインに、ランダムで広告を表示させる機能が含まれています。
詳しい使い方は、別途記事を作成しましたので、そちらを参考にしてみてください。
他の使い道
別のセットを作りたい
ランダムに表示したい広告が1セットできました。別のセットを作りたい場合ですが、手順1のソースは、追加したコードの下に同じものを作り「randomAd」のところの文字列を「randomAd2」にするだけでOKです。手順3のウィジェットに貼り付けるコードは、「randomAd2」なので、この部分を修正すれば完了です。
グーグルアドセンスなどの広告に頼らず、自身でブログにマッチし成約率が高そうなものを選びたい場合は、複数の広告を扱うと良いです。広告の貼り方と選び方で収益の差が出てきます。
広告以外の応用
今回紹介したサンプルプログラムコードでは、広告をランダムに表示させる目的ですが、広告以外にも応用ができます。たとえば、ランダムに表示させるサンプルとして以下のようなものがあります。
- 挨拶文
- 写真
- 自身のブログのお勧め記事
同じものを掲載し続けるだけではなく、ちょっとした変化を取り入れるのも、ブログの面白い運営方法ではないでしょうか?
さいごに
今回紹介したサンプルは、知識がある方にとっては簡単すぎる内容かもしれません。全く分からない人にとっては、なんだろう?と思うかもしれませんが、ブログを運営するにあたり、また1つ勉強できたのではないでしょうか?
コメント
はじめまして!ランダムで広告を表示させるプラグインは配布する予定はないでしょうか?
わたしのように素人だとプラグインでの設置が一番安全なのですが、、、
コメントありがとうございます。最近、ブログで公開している機能をプラグイン化したらどうか?という意見を多数いただきます。現在一部のユーザを対象に無償でプラグインを公開しているのですが、需要があるならば、ブログにて全体公開を試みたいと思います。プラグインは既存のソースをプラグイン化するだけなので、数分でできます。近日中に公開したいと思います。また何かありましたら、コメントをお願いします。
2024/8/27[追記]
オリジナルプラグインを公開しました。プラグインの中に、ランダム広告表示機能が含まれています。