Wordpress

WordPressの見出しH2タグにアドセンスなどの広告を追加する方法

WordPressでブログ運営をしているとよく見かけるのが、H2タグの上にアドセンスなどの広告を追加されていいます。

WordPressの仕組みが分かっている人ならば秒でわかるが、ブログなどでWordPressを始めてばかりの人は何をどうすればいいのか見当もつかないです。

今回は初心者でも簡単に出来る方法を紹介したいと思います。

設定前の注意点

まず本手順は万が一失敗するとWordPressがエラーとなります。

一字一句間違わずにコピー&ペーストをしてください。

はじめにWordPressのダッシュボードから「外観」→「テーマエディター」を選択してください。

 

今回編集するファイルはfunctions.phpファイルになります。

function.phpに後述の

一番最初にH2タグにのみ追加

一番初めにGoogleAdsenseのリンクユニットを追加する例を消化します。
function add_ads_before_1st_h2($the_content) {
if (is_single()) {
$ads = <<< EOF
<div style="text-align: center;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<br>
EOF;
$h2 = '/<h2.*?>/i';
if ( preg_match( $h2, $the_content, $h2s )) {
$the_content = preg_replace($h2, $ads.$h2s[0], $the_content, 1);
}
}
return $the_content;
}

add_filter('the_content','add_ads_before_1st_h2');
4~15行目までを自分のアドセンスや広告コードに変更すればOKです。

2の倍数や3の倍数などの○倍数に追加する

ちょっと応用編です。

広告などをすべてに貼ると見栄えが悪くなります。

なので〇の倍数の時だけ表示するようにする例を紹介します。
function add_ad_before_h2_for_2times($the_content) {
$ad = <<<EOF
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-XXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOF;
if ( is_single() ) {
$h2 = '/^<h2.*?>.+?<\/h2>$/im';
if ( preg_match_all( $h2, $the_content, $h2s ))
if ( $h2s[0] ) {
$i = 0;
foreach($h2s[0] as $h2item) {
if ($i % 2 == 0) {
$the_content = str_replace($h2item, $ad.$h2item, $the_content);
}
$i++;
}
}
}
}
return $the_content;
}

add_filter('the_content','add_ad_before_h2_for_2times');
上の例では2の倍数の時に広告を表示しています。

3の倍数にしたい場合は、以下のように書きましょう。
function add_ad_before_h2_for_3times($the_content) {
$ad = <<<EOF
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOF;
if ( is_single() ) {
$h2 = '/^<h2.*?>.+?<\/h2>$/im';
if ( preg_match_all( $h2, $the_content, $h2s )) {
if ( $h2s[0] ) {
$i = 0;
foreach($h2s[0] as $h2item) {
if ($i % 3 == 0) {
$the_content = str_replace($h2item, $ad.$h2item, $the_content);
}
$i++;
}
}
}
}
return $the_content;
}

add_filter('the_content','add_ad_before_h2_for_3times');

黄色塗りのところが変わったことに注目してください。

これは3で割って0の場合、つまり3の倍数の時は広告を表示します。

すべてのH2タグに追加する

最後にすべての見出しに広告を表示する例です。
function add_ad_before_h2($the_content) {
$ad = <<<EOF
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-4158222935313433"
data-ad-slot="2915405823"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOF;
if ( is_single() ) {
$h2 = '/^<h2.*?>.+?<\/h2>$/im';
if ( preg_match_all( $h2, $the_content, $h2s )) {
if ( $h2s[0] ) {
foreach($h2s[0] as $h2item) {
$the_content = str_replace($h2item, $ad.$h2item, $the_content);
}
}
}
}
return $the_content;
}

add_filter('the_content','add_ad_before_h2');

 

もし一からWordPressを勉強したいなら以下の本がオススメです。

 

関連記事

-Wordpress

Copyright© スタートアップIT企業社長のブログ , 2020 All Rights Reserved.