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

スポンサーリンク

The following two tabs change content below.

ゆーすけ

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム

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

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

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

自動表示だから便利!

スポンサーリンク

出来るようになること

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

表示例 1

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

Ex1

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

表示例 2

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

Ex2

表示例 3

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

Ex3

スマホにも対応

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

 

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

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

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

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

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

Cyberduck

2,900円
(2017.03.16時点)
posted with ポチレバ
function.phpの子テーマを用意する

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

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

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

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

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

子テーマを使おう!STORK(ストーク)に子テーマをインストールする方法

2017.03.07

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 ( $h2s0 ) {//チェックは不要と思うけど一応
if (is_mobile()){//スマホ表示
if ( $h2s0[0] ) {//1番目のH2見出し手前にad1を挿入
$the_content = str_replace($h2s0[0], $ad1.$h2s0[0], $the_content);
}
if ( $h2s0[1] ) {////H2が2個以上なら最後のH2見出し手前にad2を挿入
$the_content = str_replace($h2s0[count($h2s0) – 1], $ad2.$h2s0[count($h2s0) – 1], $the_content);
}
} else {//PC表示
if ( $h2s0[0] ) {//1番目のH2見出し手前にad3を挿入
$the_content = str_replace($h2s0[0], $ad3.$h2s0[0], $the_content);
}
if ( $h2s0[1] ) {////H2が2個以上なら最後のH2見出し手前にad4を挿入
$the_content = str_replace($h2s0[count($h2s0) – 1], $ad4.$h2s0[count($h2s0) – 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の審査は厳しいものの、一度通ってしまえば複数のブログで使いまわすこともできますもんね。

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

スポンサーリンク

スタイリッシュなサイン、作ります!

世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に応じて作ります。

サービス開始から半年たらずで100件以上のオーダーをいただいています。

サインは1件3000円。納品時には書き方のコツ資料、書き順動画、サイン練習帳もお送りします。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!