コピペ一発!WordPress本文中にウィジェットでアドセンス挿入するカスタマイズ方法

以前2度にわたり、投稿本文中のH2見出し手前に手軽にアドセンス(広告)を表示する方法を書きました。

ブログの記事中、特にリード文あとの広告は、アドセンスの収益面からみて有効な手段だと思います。 その理由は、ページに訪れてみたも...
Google AdSenseをWordpressの本文中に表示するにはいろいろな方法があります。 主な方法は以下の4つ。 ...

ただ、これらの方法だと、PHPの編集に慣れていない人は、Wordpressのテンプレートファイルにコードを組み込むときなどの編集に苦戦してしまうようです。

ならば、コピペ一発でテンプレートファイルの編集を終えることができ、広告などのコードを普段使い慣れたテキストウィジェットなどで貼り付けられるようにしてしまえば、特に難しいことをする必要はなく簡単にカスタマイズできるのではないかと思います。

今回は、その手軽なカスタマイズ方法を考えてみたので紹介します。

photo by Daniel Sempértegui

スポンサーリンク
レクタングル(大)広告

カスタマイズの主な手順

今回の主な手順は以下になります。

  1. functions.phpにコードを貼り付ける
  2. テキストウィジェットから広告コードを貼り付ける

やることは、たったこれだけで済みます。特に、テーマファイルの編集はコードを1回だけコピペするだけで済むので、「編集に失敗してサイトが真っ白になる率」はかなり低くなると思います。

functions.phpにコードを貼り付ける

まずは、functions.phpの1番下あたりに、以下のコードを貼り付けます。

///////////////////////////////////////
// 投稿本文中ウィジェットの追加
///////////////////////////////////////
register_sidebars(1,
  array(
  'name'=>'投稿本文中',
  'id' => 'widget-in-article',
  'description' => '投稿本文中に表示されるウィジェット。文中最初のH2タグの手前に表示されます。',
  'before_widget' => '<div id="%1$s" class="widget-in-article %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<div class="widget-in-article-title">',
  'after_title' => '</div>',
));

///////////////////////////////////////
//H2見出しを判別する正規表現を定数にする
///////////////////////////////////////
define('H2_REG', '/<h2.*?>/i');//H2見出しのパターン

///////////////////////////////////////
//本文中にH2見出しが最初に含まれている箇所を返す(含まれない場合はnullを返す)
//H3-H6しか使っていない場合は、h2部分を変更してください
///////////////////////////////////////
function get_h2_included_in_body( $the_content ){
  if ( preg_match( H2_REG, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか
    return $h2results[0];
  }
}

///////////////////////////////////////
// 投稿本文中の最初のH2見出し手前にウィジェットを追加する処理
///////////////////////////////////////
function add_widget_before_1st_h2($the_content) {
  if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする
       is_active_sidebar( 'widget-in-article' ) //ウィジェットが設定されているとき
  ) {
    //広告(AdSense)タグを記入
    ob_start();//バッファリング
    dynamic_sidebar( 'widget-in-article' );//本文中ウィジェットの表示
    $ad_template = ob_get_clean();
    $h2result = get_h2_included_in_body( $the_content );//本文にH2タグが含まれていれば取得
    if ( $h2result ) {//H2見出しが本文中にある場合のみ
      //最初のH2の手前に広告を挿入(最初のH2を置換)
      $count = 1;
      $the_content = preg_replace(H2_REG, $ad_template.$h2result, $the_content, 1);
    }
  }
  return $the_content;
}
add_filter('the_content','add_widget_before_1st_h2');

大まかな説明は、コメントに書いてあるので参照してください。

上記のコードは、親テーマ、子テーマどちらに貼り付けても動作しますが、なるべく子テーマでカスタマイズした方が無難かと思います。

上記のコードを貼り付けると、Wordpress管理画面の「外観→ウィジェット」に以下のようなウィジェットエリアが作成されます。

ウィジェットエリアに「投稿本文中」ウィジェットが作成される

テキストウィジェットから広告コードを貼り付ける

先程作成されたウィジェットエリアに、今度はテキストウィジェットを利用してアドセンス等の広告コードを貼り付けます。

作成された「投稿本文中」ウィジェットに、ドラッグ&ドロップでテキストウィジェットを放り込みます。

投稿本文注意ジェットにテキストウィジェットを放り込む

あとは、テキストウィジェットに「ラベルとなるタイトル」と「広告用のコード」を記入し保存します。

テキストウィジェットにアドセンス等の広告を貼り付ける

ウィジェットの設定を終えると、以下のように広告が表示されるようになります。

見出し手前に広告が表示された

上記の、表示例は、Wordpressにデフォルトで入っているTwenty Fifteenをカスタマイズしてみた例です。

まとめ

今回のカスタマイズ方法の利点は、以下になります。

  • テンプレートファイルの編集はfunctions.phpに1回コピペするだけと簡単
  • 広告を貼るのにテンプレートを編集する必要がない
  • 普段使い慣れたテキストウィジェットから手軽に広告を入れ替えることができる
  • 広告に限らずとも、H2見出し手前に表示したいものを、自由に入れることができる

反面、難点を挙げるとすれば以下でしょうか。

  • ウィジェットに無作為に入れると本文とウィジェットが混在し本文の意味がぼやける

あまりむやみやたらに、ウィジェットを放り込みさえしなければ、広告のメンテナンスもしやすくなって、結構管理が楽になるのではないかと思います。

『コピペ一発!WordPress本文中にウィジェットでアドセンス挿入するカスタマイズ方法』へのコメント

  1. 名前:イクメン S 投稿日:2015/11/20(金) 16:25:38 ID:0c1d89f0a

    わいひらさん、こんにちは。

    WordPressの記事を参考にさせて頂いています、イクメン S と申します。
    いつも良質な記事、ありがとうございます。
    大変勉強になっております。

    さて、本記事でご案内頂いたコードをh3へ置き換えて、私のブログも本文に広告を追加しようとしています。が・・・。
    最後までしっかりできたと思っておりますが、うまくいきません。
    http://ayubihs.com/baby-food-must-item3/

    もしよろしければ、お助けいただけますと幸いです。

    どうぞよろしくお願いいたします。

    イクメン S

  2. アバター画像 名前:わいひら 投稿日:2015/11/20(金) 19:53:50 ID:06e727877

    申し訳ないですが、どのようにカスタマイズしたか、詳細な経緯とコードがないと僕も原因はわからないです。
    外観を見るだけで、カスタマイズ内容を推測するのは厳しいです。
    テレビは改造しようとして思った動作がしなかったとして、どのような改造したのかということと、中身を見ないと原因がわからないのと同じ感じです。

  3. 名前:イクメン S 投稿日:2015/11/24(火) 13:36:22 ID:7aa6da948

    わいひらさん、こんにちは。

    お忙しい中ご返信をいただき、ありがとうございました。

    そうですね。失礼いたしました。
    自身で解決していきたいと思います。

    引き続き「寝ログ」の記事を参考にさせて頂きたいと思います。
    どうぞよろしくお願いいたします。

    イクメン S

  4. アバター画像 名前:わいひら 投稿日:2015/11/24(火) 15:37:13 ID:827893e20

    こんにちは。
    お役に立てずに申し訳ないです。
    こちらこそよろしくお願いします。

  5. 名前:イクメン S 投稿日:2015/11/25(水) 21:08:57 ID:e586ec5d4

    わいひらさん、こんにちは。

    無事に本件解決できました。
    その節は失礼いたしました。

    引き続き、どうぞよろしくお願いいたします。

    イクメン S

  6. アバター画像 名前:わいひら 投稿日:2015/11/25(水) 22:00:08 ID:34408b3aa

    こんにちは。
    うまくいったようでよかったです。

  7. 名前:ジョー 投稿日:2016/02/06(土) 17:22:51 ID:b4534d306

    wordpressのテーマの編集でfunctions.php内の一番下に上記のコードをそのまま記入して更新した結果サーバーエラー500が出てしまって焦りました。

    1.9.3安定版のファイルをアップロードして現在は表示してる状態ですが原因わかりませんか?

  8. アバター画像 名前:わいひら 投稿日:2016/02/07(日) 19:26:53 ID:d64d1b6f1

    サイトを拝見した感じでは、Simplicityをご利用かと思います。
    エラーメッセージがわからないので確かなことはわからないですが、Simplicityでは、デフォルトでこの機能が組み込まれているので、関数名が衝突して、エラーが出るかもしれません。
    Simplicityの場合は、ウィジェット画面で、「投稿本文中」ウィジェットを利用すれば同様のことができるかと思います。

  9. 名前:名無しさん 投稿日:2016/03/10(木) 17:09:47 ID:90a9070cd

    こんにちは。
    これってアドセンスの規約違反になりませんかね?

  10. アバター画像 名前:わいひら 投稿日:2016/03/10(木) 19:35:59 ID:2c49f4643

    こんにちは。

    アドセンスポリシーのどの条項に違反しますでしょうか?
    これがわからないと、どういった違反なのかがわからないのでちょっと答えるのが難しいです。

    紛らわしいみたいなことであれば、僕は「スポンサーリンク」もしくは「広告」ラベルなしに挿入すれば、違反にもなり得ると思いますが、ラベルをしっかりと記載して広告であることを明示すれば、違反にならないと思っています。
    ただ、僕もGoogleの人ではないので、100%は保証できません。アドセンスポリシーの判断については、個人にゆだねたいと思います。

  11. 名前:小松 投稿日:2016/08/29(月) 18:29:39 ID:ea5acc932

    ホントにコピペ一発ですね^-^
    記事中にアドセンスを表示したい、でも表示したくないページもある…いちいちファンクションをあまりいじりたくないというときに出会い、本当に助かりました。
    ありがとうございます!

  12. アバター画像 名前:わいひら 投稿日:2016/08/29(月) 20:11:38 ID:0120098c8

    そうなんです。コピペ一発で、出来た方が楽かなと思ってコードを書いてみました。
    記事がお役に立ったようでよかったです!

  13. 名前:2001Y 投稿日:2016/09/07(水) 23:43:12 ID:2b4305bd3

    Simplicityを利用させていただいているのですが、最初のh2ではなく4っつ目のh2にも表示したいのですが、以下のコードで正しいのでしょうか。
    これでは、4つめのh2がなくても表示されてしまう気がします。

    ///////////////////////////////////////
    // 投稿本文中ウィジェットの追加
    ///////////////////////////////////////
    register_sidebars(1,
    array(
    ‘name’=>’投稿本文中2’,
    ‘id’ => ‘widget-in-article2’,
    ‘description’ => ‘投稿本文中に表示されるウイジェット。文中最初のH2タグの手前に表示されます。’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));

    ///////////////////////////////////////
    //H2見出しを判別する正規表現を定数にする
    ///////////////////////////////////////
    define(‘H2_REG’, ‘//i’);//H2見出しのパターン

    ///////////////////////////////////////
    //本文中にH2見出しが最初に含まれている箇所を返す(含まれない場合はnullを返す)
    //H3-H6しか使っていない場合は、h2部分を変更してください
    ///////////////////////////////////////
    function get_h2_included_in_body( $the_content ){
    if ( preg_match( H2_REG, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか
    return $h2results[0];
    }
    }

    ///////////////////////////////////////
    // 投稿本文中の最初のH2見出し手前にウィジェットを追加する処理
    ///////////////////////////////////////
    function add_widget_before_1st_h2($the_content) {
    if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする
    is_active_sidebar( ‘widget-in-article2’ ) //ウィジェットが設定されているとき
    ) {
    //広告(AdSense)タグを記入
    ob_start();//バッファリング
    dynamic_sidebar( ‘widget-in-article2’ );//本文中ウィジェットの表示
    $ad_template = ob_get_clean();
    $h2result = get_h2_included_in_body( $the_content );//本文にH2タグが含まれていれば取得
    if ( $h2result ) {//H2見出しが本文中にある場合のみ
    //最初のH2の手前に広告を挿入(最初のH2を置換)
    $count = 3;
    $the_content = preg_replace(H2_REG, $ad_template.$h2result, $the_content, 1);
    }
    }
    return $the_content;
    }
    add_filter(‘the_content’,’add_widget_before_1st_h2′);

  14. アバター画像 名前:わいひら 投稿日:2016/09/08(木) 11:22:28 ID:9b0f964f7

    それではだめなような気がします。
    ただ、記事中のコードを変更して利用する場合は、僕がデバッグをするわけにもいかないので、詳しい検証は自前でお願いします。

  15. 名前:てんとう虫 投稿日:2016/12/27(火) 14:42:46 ID:f7f96bf8c

    はじめまして。ご紹介頂いたコードを使わせて頂きました。
    リード文内に正しく広告が表示されたのですが、広告をセンター寄せに
    する方法はございませんでしょうか。

    当方、stinger8を利用しております。
    管理者様の広告はセンター寄せになっており
    何か方法があるのかと思いコメントさせて
    頂きました。よろしくお願い致します。

  16. アバター画像 名前:わいひら 投稿日:2016/12/27(火) 17:24:50 ID:98dd41efb

    この記事のコードを利用しているのであれば、style.cssなどに以下のように書けば多分いけるのではないかと思います。

    .widget-in-article {
        text-align: center;
    }

    もし、うまくいかない場合は、実際のページのURLを書き込んでいただけると実際のHTML要素に合わせて書けると思います。

  17. 名前:てんとう虫 投稿日:2016/12/28(水) 08:53:41 ID:74691dd6f

    ご回答ありがとうございました。
    お教え頂いたコードで中央寄せできました。

  18. 名前:magu 投稿日:2017/03/24(金) 16:26:25 ID:8289ec86c

    始めまして、記事拝見させていただきました。
    テーマでstinger8を使用しているのですが、functions.phpに張り付けてもウィジェット部分に投稿本文中のウィジェットは出てきませんでした。代わりに管理画面の上にコピペした部分が出てきました。stringer8ではコピペだけではダメなのでしょうか?

  19. 名前:magu 投稿日:2017/03/24(金) 16:41:11 ID:8289ec86c

    すみません、先ほど投稿したmaguです。
    一応、ウィジェットの追加はできたみたいですが、投稿本文中やウィジェットの説明文となる部分が空白で真っ白な状態でした。テキストを入れ込む事が出来て、adsenseの広告もH2の上に表示するところまでは行ったのですが、H2ではなく目次の上に表示されるようになりました。何が問題でしょうか?

  20. アバター画像 名前:わいひら 投稿日:2017/03/24(金) 18:02:40 ID:bc1aa79cd

    この記事に書かれた方法は、あくまでサンプルプログラムなので、それで正常動作です。
    目次というのは、他のプラグインのものと思いますけど、そうなってくるとプラグイン等の競合問題だと思います。
    先程書いた通り、ここに書いてあるのは、サンプルプログラムなので、「他のプラグインがインストールして合った場合」までは考慮して書いていません。
    たとえ、サンプルプログラムでなかったとしても、全てのプラグインのインストールを考慮してコードを書くということはできないので。

  21. アバター画像 名前:わいひら 投稿日:2017/03/24(金) 18:08:58 ID:bc1aa79cd

    一応以前僕が書いたTable of Contents Plusプラグインの対処方法を載せておきます。
    https://wp-simplicity.com/simplicity-and-toc/
    プラグインとの競合問題は、こんな感じで、自前でコードを編集して対処していただくしかないかもしれません。

  22. 名前:ちゃりん 投稿日:2017/04/12(水) 08:56:11 ID:a0fe4d01a

    初めまして!
    おかげ様で最初のH2前にアドセンスを置くことができました。
    ありがとうございます。

    実は厚かましいお願いがあります。
    3番目のh2上にも同じようにアドセンスを置きたくて
    わいひらさんのコードをいじってみたいのですが

    コードのどの部分を買えればいいんでしょうか?
    何度かトライしましたがうまくいかなくて・・・

    もし可能ならコードを教えてくださるとありがたいです。

    ありがとうございました。
    失礼します。

  23. アバター画像 名前:わいひら 投稿日:2017/04/12(水) 19:22:35 ID:4f1789d46

    はじめまして。
    そういったカスタマイズについては、以下の記事を参考にしてみてください。
    本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordpressカスタマイズ方法
    1番目と3番目に表示するのであれば、2番目の広告タグ挿入部分は空欄にしておけばいけるかと思います。

  24. 名前:ちゃりん 投稿日:2017/04/13(木) 18:27:25 ID:46391db1e

    わいひら様

    返信ありがとうございます。
    とても参考になりました!
    色々なやり方があるんですね!

    ただ、どうしてもウィジェット形式で
    3番目のH2上に挿入したいので
    もう一度チャレンジしてみます!

    ありがとうございました!

  25. 名前:D-Box 投稿日:2017/05/11(木) 00:35:59 ID:62522b250

    初めまして。
    いつも良質な記事を参考にさせていただき助かっています。

    ウィジェットをモバイル条件分岐で表示させるにはどの箇所を変更すればよろしいでしょうか?

    お時間あるときに返答いただければ幸いです。

  26. アバター画像 名前:わいひら 投稿日:2017/05/11(木) 20:56:41 ID:52fd6f749

    はじめまして。

    この部分をwp_is_mobile()を利用して条件分岐すれば多分いけるのではないかと思います。

    add_filter('the_content','add_widget_before_1st_h2');
  27. 名前:D-Box 投稿日:2017/06/01(木) 21:42:35 ID:7fac77605

    すみません。返信いただいていることに先程気付きました。
    ありがとうございます。試してみます。

  28. 名前:doing 投稿日:2017/06/09(金) 16:51:48 ID:00e21e5c2

    初めまして!とてもわかりやすく、ずっと悩んでいたことが解決しました。
    このウィジェットだと、ラベルをセンター寄せすることは出来ませんでしょうか?
    そこだけが悩みなのですが、何か方法がありましたらご教授いただきたく思います。
    どうぞよろしくお願いします。

  29. アバター画像 名前:わいひら 投稿日:2017/06/09(金) 20:19:18 ID:1ab2dbe68

    はじめまして。

    CSSでtext-alignをcenterにすれば、おそらくできるかと思います。

  30. 名前:doing 投稿日:2017/06/09(金) 22:46:24 ID:00e21e5c2

    ありがとうございます!

  31. 名前:gakky 投稿日:2017/08/17(木) 09:08:50 ID:a92f3db37

    初めまして。
    最初のH2の手前ではなく、最後のH2の手前に挿入するにはどこをどのように
    修正したらよろしいでしょうか?

  32. アバター画像 名前:わいひら 投稿日:2017/08/17(木) 13:29:06 ID:d12491b34

    はじめまして。

    僕自身現時点では、手軽に実装する方法は思いつきませんでした。
    文字を逆順にひっくり返して対象文字もひっくり返して置換するか、後方から一行ずつ取得して置換するしか無いのかもしれません。
    いずれにせよ詳しいコードを書くのは大変なので、申しわけないですが、上記のように簡単なヒントだけになりますがご了承ください。