h2タグの前にアドセンスを自動的に表示させる方法

こんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

今回のカスタマイズではh2タグの前に自動的にアドセンス広告を表示させる方法をご紹介します。

どうせ貼るなら作業を自動化して楽に貼りたい！そう思うのはみんな同じですよね。ぜひ参考にしてみてください。

出来るようになること

これから紹介する方法を使うと、記事の中に登場する最初のh2タグの前と、最後のh2タグの前、合計2箇所に自動的にアドセンス広告を表示できるようになります。

表示例 1

例えば一般的なブログの構成ってこんな感じです。

そうするとアドセンスは上みたいに自動的に表示されます。

表示例 2

見出しがh2タグ2つしか使われてない場合は毎回の見出し後にアドセンスが表示されることになります。

表示例 3

h2タグが1つしか使われてない場合アドセンスは1つしか表示されません。

スマホにも対応

PCとスマホで別々のアドセンスを表示させることができます。

h2の前にアドセンスを表示させる方法

では具体的なやり方の紹介です。

これから紹介するコードをコピペしていけば基本的にカスタマイズ完了しますが、function.php にカスタマイズを加えるので下手ないじり方をすると画面が真っ白になってしまいます。

事前にfunction.php のコピーを取っておいたりFTPソフトを用意するなどしてすぐ対応できるようにしておきましょう！

おすすめFTPソフトはこちら。

Cyberduck

2,900円

(2017.03.16時点)

David Kocher

posted with ポチレバ

 

function.phpの子テーマを用意する
必ず function.php の子テーマを作り、子テーマにコードを埋め込むようにしましょう！

やり方はかんたん。
CyberduckなどのFTPソフトを使ってブログデータに直接アクセスし、親テーマフォルダにあるfunction.phpを子テーマフォルダにコピペするだけ。

親テーマは[public_html]-[wp-content]-[themes]-[使ってるテーマ]の中にあるよ。

さらにアドセンス前に「スポンサーリンク」の文字をバランスよく表示するためにCSS（スタイルシート）にもちょっと書き加えます。

こっちも子テーマを用意しておきましょう。

function.php コード紹介

こちらのコードを function.php の子テーマに貼り付けてください。

//最初と最後のh2見出し手前にアドセンスを表示（PC・スマホ切り替え）
function add_ad_before_h2_for_2times($the_content) {
//スマホで最初に表示させるアドセンス
$ad1 = <<< EOF
<p class=”ad-label”>スポンサーリンク</p>
<div class=”ad-h2″>
ここにスマホで最初のh2タグ前に表示させるアドセンスコードを貼り付けます
</div>
EOF;
//スマホで2番目に表示させるアドセンス
$ad2 = <<< EOF
<p class=”ad-label”>スポンサーリンク</p>
<div class=”ad-h2″>
ここにスマホで最後のh2タグ前に表示させるアドセンスコードを貼り付けます
</div>
EOF;
//PCで最初に表示させるアドセンス
$ad3 = <<< EOF
<p class=”ad-label”>スポンサーリンク</p>
<div class=”ad-h2″>
ここにPCで最初のh2タグ前に表示させるアドセンスコードを貼り付けます
</div>
EOF;
//PCで2番目に表示させるアドセンス
$ad4 = <<< EOF
<p class=”ad-label”>スポンサーリンク</p>
<div class=”ad-h2″>
ここにPCで最後のh2タグ前に表示させるアドセンスコードを貼り付けます
</div>
EOF;
if ( is_single() ) {//投稿ページ
$h2 = ‘/^<h2.*?>.+?<\/h2>$/im’;//H2見出しのパターン
if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
if ( $h2s⁰ ) {//チェックは不要と思うけど一応
if (is_mobile()){//スマホ表示
if ( $h2s⁰[0] ) {//1番目のH2見出し手前にad1を挿入
$the_content = str_replace($h2s⁰[0], $ad1.$h2s⁰[0], $the_content);
}
if ( $h2s⁰[1] ) {////H2が2個以上なら最後のH2見出し手前にad2を挿入
$the_content = str_replace($h2s⁰[count($h2s⁰) – 1], $ad2.$h2s⁰[count($h2s⁰) – 1], $the_content);
}
} else {//PC表示
if ( $h2s⁰[0] ) {//1番目のH2見出し手前にad3を挿入
$the_content = str_replace($h2s⁰[0], $ad3.$h2s⁰[0], $the_content);
}
if ( $h2s⁰[1] ) {////H2が2個以上なら最後のH2見出し手前にad4を挿入
$the_content = str_replace($h2s⁰[count($h2s⁰) – 1], $ad4.$h2s⁰[count($h2s⁰) – 1], $the_content);
}
}
}
}
}
return $the_content;
}
add_filter(‘the_content’,’add_ad_before_h2_for_2times’);

CSSコード紹介

次にこちらのコードをCSSの子テーマに貼り付けてください。

/*————————————–
アドセンスのラベル表記
————————————–*/
.ad-label {
font-size: 80%;
color: #333;
text-align: center;
margin-bottom: 5px;
}

/*————————————–
見出し（h2）前のアドセンス
————————————–*/
.ad-h2 {
margin-bottom: 30px;
}

これを貼ることで文字のバランスが取れるようになります。

なおこれらのカスタマイズはこちらのページを参考にカスタマイズを加えさせていただきました。

まとめ

ブログの収益化で一番有名な方法はGoogleアドセンスを貼ることです。

Googleの審査は厳しいものの、一度通ってしまえば複数のブログで使いまわすこともできますもんね。

作業は出来る限り簡略化して良質な記事作成のために時間を割くようにしましょう！