h2見出し数でアドセンス位置を変えるWordPressカスタマイズ方法

children-with-pc

こんにちは、Simplicy2信者の田村ひかりです。

ブログ内の広告の効果的な位置は様々なところで議論されていると思われます。

記事中の広告が比較的有効だという話はよく耳にするかもしれません。
そしてそれを簡単に実装するのが「h2タグの前(あるいは後ろ)に広告を挿入する」方法です。
この手法は「アドセンス h2」等で検索していただけると数多くのブログが取り上げています。

しかし、h2タグの前に広告を挿入するということはh2タグが存在しないといけません
私は見出し0の駄記事をよく書きます。
つまりh2タグは使っていません。
複数の見出しできれいに構成されたものだけがブログじゃないんです。

見出しがない記事でもたくさんある記事でも対応できるような広告配置方法が必要となります。

今回はh2タグ数に応じて、広告位置を変化させるWordPressカスタマイズのご紹介です。

記事サンプル

実際に実装してみた際のイメージは以下の様になります。

h2タグが0-1個の場合

記事タイトル直下の記事上(ad11)の位置と記事下(ad12)の位置の二箇所に広告を挿入します。
ad1x
後述しますが、モバイルでアクセスした場合はad11を表示しません。

h2タグが2個の場合

記事上(ad21)二つ目のh2タグの直前(ad22)記事下(ad23)の三箇所に広告を挿入します。
ad2x

h2タグが3個以上の場合

二つ目のh2タグの直前(ad31)三つ目のh2タグの直前(ad32)記事下(ad33)の三箇所に広告を挿入します。
ad3x

スポンサーリンク

カスタマイズ方法

functions.phpに以下のコードを追記し、3, 7, 11行目の「(○○のコードを貼り付け)」となっているところをアドセンス等の広告コードに書き換えてください。

スポンサーリンク

コード解説

部分的に分けてPHPに詳しくない方向けに解説していきます。

1行目

編集不要

$the_content(記事本文)を今からいじるよ!くらいのイメージでオーケーです。
h2を書き換えるためここで記事本文を取得する必要があります。

2-12行目

要編集

前述したように、3, 7, 11行目の「(○○のコードを貼り付け)」となっているところをアドセンス等の広告コードに書き換えてください。
のアレです。
一般的な広告の配置を想定しているので、ビッグバナー等指定されているコードじゃなくても大丈夫です。

14-17行目

お好みで編集

「スポンサーリンク」から「広告」等に広告ラベルを変えたい場合はこちらを編集してください。

19-21行目

編集不要

広告前後のdivタグです。css弄りたい場合以外はそのままでいいです。
$ad_middleがPC用、$ad_mmiddleがスマホ用の広告前divタグ。
$ad_bottomが広告後divタグ。

23ー31行目

お好みで編集

スマホ用の広告配置を指定しています。
記事サンプルのところにあったad11-ad33ってのはこれを指しています。
ここを編集する場合は

  • $ad300(300*250の広告コード)を$ad_res(レスポンシブの広告コード)に書き換える
  • $ad_resを$ad300に書き換える
  • 空白にする($ad11のように)

のいずれかになります。
$ad11のように空白にするとその位置の広告は表示されません。
見出しなしのスマホの場合、文字量によってはad11とad12が一画面に表示される可能性が大いにあるため、ad11を表示していません。

「そんな駄記事書きませんですのよ!」って方は24行目を

としてください。

32-41行目

お好みで編集

先ほどがスマホ用で、こちらはPC用です。
スマホ用とは変わり、$ad336(336*280の広告コード)と$ad_res(レスポンシブの広告コード)を使い分けています。

42行目

編集不要

h2を探すための正規表現です。
「h2じゃなくてh1タグやh3タグの直前に広告を入れたい!」って場合には編集がいりますが、h2ならそのままで。

43-59行目

お好みで編集

h2に広告コードを挿入する処理部分です。
44行目でh2タグの数を数えます。
45-47行目がh2が0つor1つの処理、48-51行目でh2が2つの処理、52-55行目がh2が3つ以上の処理です。

46, 49行目では記事本文の前に$adxxを挿入しています。
記事上に広告を配置するパターンのときのものです。

47, 51, 55行目では記事本文の後に$adxxを挿入しています。
記事下に広告を配置するパターンのときのものです。

50, 53, 54行目ではh2タグの直前に$adxxを挿入しています。
str_replaceというのは置換関数です。
str_replace(A, B, C)と記述することで、「Cの文中にある全てのAをBに置換する」処理をします。
今回は$the_content(記事本文)の文中にある全ての$h2s[0][x](h2タグ)を$adxx.$h2s[0][x](広告コード+h2タグ)に置換しています。

60行目

編集不要

WordPressに今までの処理を実行してもらう為のマジックワードです。とりあえず書いておくという認識でいいです。

広告の除外(Simplicity2用)

内部SEO施策済みのWordPressテーマ「Simplicity2」には広告の除外が簡単にできる機能がデフォルトで存在します。
広告に何か問題があった際の一括非表示や広告を表示したくないページを個別に指定できるのです。

2行目に「if(is_ads_visible()){」を、return $the_content()の前に「}」を1つ追加するだけです。

以下の3点がきちんと反映されるようになります。
逆に言えば、先ほどのカスタマイズをしないと以下の3点は反映されず、Simplicity2の魅力が半減してしまいます。

記事編集画面の広告の設定

記事編集画面の広告の設定

カスタマイズ->広告->全ての広告の表示

カスタマイズ->広告->全ての広告の表示

カスタマイズ->広告->広告除外記事のID/広告除外カテゴリのID<

カスタマイズ->広告->広告除外記事のID/広告除外カテゴリのID

これができるだけで広告の扱いがだいぶ楽になります。
WordPressのテーマでお悩みの方はぜひSimplicity2をおすすめします。

wp_is_mobile()とis_mobile()(Simplicity2用)

PCとスマホで広告配置を変える為に、WordPressの条件分岐タグ「wp_is_mobile()」を使っています。
if文と組み合わせることで、「PCならダブルレクタングルで並べて広告表示」、「スマホなら1つだけ広告表示」みたいなことができます。
タブレットの場合はスマホ用の表示になってしまいます。
タブレットでもPCと同じ表示にしたい場合は自分で分岐処理を作る必要があります。

Simplicity2のブログテーマを使っている場合は、「is_mobile()」という条件分岐タグがあるので「wp_is_moblie()」を書き換えた上で、
カスタマイズ/レイアウト(全体・リスト)/タブレットはモバイル表示
のチェックを外せば、タブレットもPC表示されます。
ismoblie

おわりに

Simplicity2作者のわいひら氏のブログである下記の記事を参考に修正をくわえました。

見出しをたくさん使う方にとっては上記のわいひら氏のカスタマイズ方法で十分です。

いかがでしたでしょうか。
不明点ありましたらコメント等いただければ回答致します。
自分の中では更なる改善案もありますが、複雑になるのでここらへんでまとめておこうと思い公開しました。
気が向いたらまた手をつけます。

以上Simplicity2のステマでした。嘘です。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする