どーも。こんにちは。
トシです。
数日悩んだものの、なんとか答えが見つかったので備忘を兼ねて。久しぶりにパソコン系の記事になります。
今回はWordPressのウィジェットに書くだけの、時間差で広告を表示するコードについて。
広告の時間差表示の考えられるパターン
今回、ネットビジネスを教えてる人から『広告を時間差で表示できるようにしたいのですが・・』という相談があったので考えてみました。
時間差表示で考えられるパターンは主に以下の3つかと。
・記事を一定ピクセル数スクロールしたら表示
・記事の特定の位置までスクロールしたら表示
・記事を開き、一定時間経過したら表示
んで、上から考えてみたのですが、
・一定ピクセル数スクロールしたら
→まあ有り。でも、ネットのブラウザによって書き方が変わるっぽいので微妙。
・特定の位置までスクロールしたら
→記事内にタグを差し込む必要があるため面倒。
・一定時間経過したら
→ブラウザで書き方は変わらないし、一番無難かも。
という結論に至ったため、3つ目の案を採用することにしました。
ウィジェットの『テキスト』に書くことで動きます
考えたコードは以下。
実際に書いてるコードで、その内容は『サイトを開いてから50秒に1回、合計2回まで広告を表示する』というもの。
リンクなんかは適当に変えてますし、実際のコードではコメント部分は省いてます。
<script src=”https://広告.js” type=”text/javascript” charset=”UTF-8″> </script>
<script type=”text/javascript”>
var i = 0; //広告を2回まで表示したいため、表示回数カウント用の変数を用意
function adopen(){
if (i>=1 && i<3) { //広告表示回数1以上、3未満の場合
Ad.show({
appkey:”personal_key”,
}); //Ad.show以降が広告表示処理
i++; //広告を表示した場合、表示回数を1追加
setInterval(adopen, 50000); //50秒に1回広告表示を繰り返し
}else{ //広告表示回数が1未満の場合
i++; //表示回数を1追加
setInterval(adopen, 50000); //以降は50秒に1回広告表示を繰り返し
}
}
adopen();
</script>
jQueryで考えるより、JavaScriptで書いた方が簡単だった
ぶっちゃけ、最近全くコードを触っていなかったため、ここに到るまで時間がかかりました。
たったこれだけ考えるのに1日使ってしまった感じ（笑）
んで、その過程で
・moreタグに差し込む
・広告表示をショートコード化する
など、いろいろ試してみたのですが、WordPressでよくある『jQuery』で書こうとするとなかなかうまく行きませんでした。
それよりも、単純にJavaScriptで書いた方が簡単で確実というね。
なので広告の表示を少しだけ変えたい方は、無理にjQueryで書くんではなく、JavaScriptで書いてみるといいかもしれません。
広告の表示程度なら、これで十分ですから。
最後に、今回の考察で参考にしたページを紹介。
Element.offsetHeight- 全体の高さを取得する
プログラミングって楽しいですが、基本を忘れてると終わりが見えなくて辛いですね（笑）
