【SANGOカスタマイズ】記事中広告を増やす方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、WordPress有料テーマの「SANGO」で記事中広告を増やすカスタマイズ方法をご紹介します。

sangoにはデフォルトで、はじめのh2見出しの前にアドセンス広告を表示させるウィジェット「記事中広告」があります。

管理画面の「外観→ウィジェット」から簡単にアドセンスのコード追加ができるというものです。

すごく便利な機能なのですが、このままですと以下の問題やリクエストに応えられません。

はじめのh2見出しの前だけじゃ広告足りない…
h2前にも広告表示させたいけど、h3見出し前にも広告出したい…!!
4番目のh3見出し前にはアドセンスじゃなくてアフィリエイトのリンクつき画像を表示させたい…!!

今回の記事では上記の悩みを全て解決するカスタマイズ方法をご紹介します。

それでは参りましょう!!

【SANGOカスタマイズ】記事中広告を増やしてみよう！
まとめ
SANGOカスタマイズ記事まとめ

【SANGOカスタマイズ】記事中広告を増やしてみよう！

指定したh3見出し前にだけ記事中広告表示

まずは、指定したh3見出し前にだけ記事中広告を表示するようカスタマイズしていきましょう。

編集するファイルは、「子テーマのfunctions.php」のみとなります(^o^)

↓↓ファイルの一番下の方にある、こちらの記述より上に追記していきます。

functions.php

/************************
 *function.phpへの追記はこの上に
 *************************/

以下、コードをfunctions.phpにコピペしていただければ大丈夫です。

functions.php

function ads_before_headline_v2($the_content) {
    //ウィジェットを$adに格納
    ob_start();
      dynamic_sidebar('ads_in_contents');
    $ad = ob_get_contents();
    ob_end_clean();
  if ( is_single() && is_active_sidebar('ads_in_contents') ) {//見出し前広告のウィジェットがアクティブのとき
    $h3 = '/^<h3.*?>.+?<\/h3>$/im';//h3見出しのパターン
    if ( preg_match_all( $h3, $the_content, $matches_v2 )) {//h3見出しが本文中にあるかどうか
      if ( $matches_v2[0] ) {
        if ( $matches_v2[0][3] ) {//4番目のh3見出し前に記事内広告を挿入
          $the_content  = str_replace($matches_v2[0][3], $ad.$matches_v2[0][3], $the_content);
        }
        if ( $matches_v2[0][7] ) {//8番目のh3見出し前に記事内広告を挿入
          $the_content  = str_replace($matches_v2[0][7], $ad.$matches_v2[0][7], $the_content);
        }
        if ( $matches_v2[0][11] ) {//12番目のh3見出し前に記事内広告を挿入
          $the_content  = str_replace($matches_v2[0][11], $ad.$matches_v2[0][11], $the_content);
        }
      }
    }
  }
  return $the_content;
}
add_filter('the_content','ads_before_headline_v2');

上記のコードでは、「4番目、8番目、12番目のh3見出し前」にアドセンス記事内広告を自動で表示するよう指定しています。

何番目に広告を表示させるかはご自分のブログにあわせてよしなに変更してください(^o^)

■$matches_v2コピペ用

1番目のh3見出し前：$matches_v2[0][0]
2番目のh3見出し前：$matches_v2[0][1]
3番目のh3見出し前：$matches_v2[0][2]
4番目のh3見出し前：$matches_v2[0][3]
5番目のh3見出し前：$matches_v2[0][4]
6番目のh3見出し前：$matches_v2[0][5]
7番目のh3見出し前：$matches_v2[0][6]

プログラム的な話を少しさせていただくと、ポイントは以下かなと思います。

↓↓↓

str_replaceを使用
$the_content（記事コンテンツが入ってる変数）の中から$matches_v2[0][n-1]（n-1番目のh3見出し）を検索
検索してヒットしたh3見出しに結合演算子の「.」で手前にアドセンス記事中広告を結合させる

分からない関数やメソッドが出てきたらとりあえずググって使い方を調べるとよりカスタマイズの楽しみが増しますね(^o^)

興味がある方はただコピペするだけで終わらせずに調べてみてphpへの理解を深めるのもよいでしょう。

指定したh3見出し前にだけAmazonアフィリエイトのリンクつき画像を表示

ブログをやってる方の大半はAmazonアフィリエイトをやっていると思います。

そんな方にはこちらのカスタマイズ法もおすすめなので参考にしていただければ幸いです(^o^)

functions.phpを少し書き換える

先程追加したコードを少し書き換えていきます。

広告の表示は以下を想定しています。

アフィリエイトのバナー画像は「本は、耳で聴こう。」でお馴染みのAudibleさん
4、12、20番目のh3見出し前にAudibleバナーを表示
8、16番目のh3見出し前にはアドセンスの記事内広告を表示

functions.phpのコードは以下のようになります。

functions.php

function ads_before_headline_v2($the_content) {
    //ウィジェットを$adに格納
    ob_start();
      dynamic_sidebar('ads_in_contents');
    $ad = ob_get_contents();
    ob_end_clean();
    // オーディブルバナーを$audibleに格納
    ob_start(); ?>
    <a href="AmazonアフィリエイトURL" class="Audible300" target="_blank">
    	<div class="Audible300-Img" style="background:url('バナー画像のURL') no-repeat center; background-size:cover; background-position:center;"></div>
    </a>
    <?php
    $audible = ob_get_contents();
    ob_end_clean();
  if ( is_single() && is_active_sidebar('ads_in_contents') ) {//見出し前広告のウィジェットがアクティブのとき
    $h3 = '/^<h3.*?>.+?<\/h3>$/im';//H3見出しのパターン
    if ( preg_match_all( $h3, $the_content, $matches_v2 )) {//H3見出しが本文中にあるかどうか
      if ( $matches_v2[0] ) {
        if ( $matches_v2[0][3] ) {//4番目のH3見出し手前にオーディブルバナーを挿入
          $the_content  = str_replace($matches_v2[0][3], $audible.$matches_v2[0][3], $the_content);
        }
        if ( $matches_v2[0][7] ) {//8番目のH3見出し手前に広告を挿入
          $the_content  = str_replace($matches_v2[0][7], $ad.$matches_v2[0][7], $the_content);
        }
        if ( $matches_v2[0][11] ) {//12番目のH3見出し手前にオーディブルバナーを挿入
          $the_content  = str_replace($matches_v2[0][11], $audible.$matches_v2[0][11], $the_content);
        }
        if ( $matches_v2[0][15] ) {//16番目のH3見出し手前に広告を挿入
          $the_content  = str_replace($matches_v2[0][15], $ad.$matches_v2[0][15], $the_content);
        }
        if ( $matches_v2[0][19] ) {//20番目のH3見出し手前にオーディブルバナーを挿入
          $the_content  = str_replace($matches_v2[0][19], $audible.$matches_v2[0][19], $the_content);
        }
      }
    }
  }
  return $the_content;
}

MEMO

バナー画像は、「メディア→新規追加」でアップロード。バナー画像のURLは「バナー画像をクリック→リンクをコピー」で取得してください。

バナー画像のCSS

子テーマのstyle.cssにバナー画像用のcssを追加します。

オーディブルの「300 × 250px」の画像の縦横比率は「250 / 300 * 100」で求めて83.33%となります。

style.css

.Audible300{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 300px;
  display: block;
}
.Audible300-Img{
  padding-top: 83.33%;
  width: 100%;
}

padding-topに指定している値がバナー画像の縦横比率となりますのでご自身の画像に合わせて比率を計算して書き換えて下さいまし(^o^)