WordPressで広告を自動挿入する方法「プラグインなしで即実装」

WordPressで広告を自動挿入する方法「プラグインなしで即実装」

うぇぶとまと / Webエンジニア

本文を書く→アドセンスコード設置→本文を書く→アドセンスコード設置、、、記事を書くたびに同じコードを設置するなんて手間すぎるでしょ、、、なんか良い方法ないの?あ、自分カスタマイズとか苦手だから難しいのはダメよ。

「記事中にアドセンスコードを挿入する手間を省きたい(自動化させたい)、けれども自動化にかかるコストは抑えたい、だってプログラミングとかカスタマイズとか全然分からないから。」

こんな要望に応える記事になります。

本記事では、記事中にアドセンス広告を自動挿入する方法について解説しております、広告設置を自動化させると下記のようなメリットがあります、今まで手動で設置していた方には是非オススメしたい。

広告の設置を自動化させると、、、

  • アドセンスコードのコピペミスを防げる
  • メンテナンスが超簡単になる
  • 広告を気にせずライティングに集中できる

うん、自動化させない理由が見つからないです。

WordPressならプラグインを使えばよくね?

確かにそうですが今回に限ってはオススメできません、理由は下記の通り。

  • プラグインを使うとサイトが重たくなる
  • プラグインをメンテナンスするコストがかかる
  • プラグインを使わなくても誰でも実装できる

何でもかんでもプラグインに頼ると後々後悔することになる、自分や読者の為にもここは自力で実装すべきでしょう、うん。

前置きの方が本題より長いという珍事を避けるためにもさっそく見ていきましょう、やることは一つだけです。

実装する上で必要なもの【準備編】

実装する上で必要なもの【準備編】

実装する上で用意してほしいものは「アドセンスコード」のみ。

いつも記事内に挿入しているコードでOKです、あとは管理画面にログインして頂ければ準備完了です。

広告を記事中に自動挿入する方法「コピペのみ」【実装編】

先に完成イメージをどうぞ

広告を記事中に自動挿入する方法(完成イメージ)

これから解説する手順を踏めば、上記のように見出し上(h2タグの上)にアドセンス広告が自動表示されるようになります、「なぜ見出し上なのか?」については「コンテンツを邪魔せずクリックされやすい位置が見出し上だから」と答えておきます。

完成をイメージした上で実際に実装していきたいと思います、手順は下記の通り。

  1. 管理画面からテーマ編集画面を開く
  2. 使用テーマのfunctions.phpに実装コードをコピペ
  3. コピペしたコードの一部分をアドセンスコードに置き換える

これだけですね、マウス操作だけで完結します。笑

それぞれ解説していきますね。

①:管理画面からテーマ編集画面を開く

警告文が表示されたら「理解しました」をクリックしてください
 
[ダッシュボード] > [外観] > [テーマの編集]

管理画面から「外観 > テーマの編集」をクリックして編集画面を開きましょう、上のような警告文が表示されたら「理解しました」をクリックしてください、気になる方は子テーマを作ってからここに戻ってきてください(WordPress初心者は必ず覚えておきたい【子テーマの作り方】

編集画面を開いたら[functions.php]を開こう

編集画面を開いたら[functions.php]を開こう
 
「テーマのための関数(functions.php)」をクリックして開いてください。

②:使用テーマのfunctions.phpに実装コードをコピペ

下記のコードをエディタの最終行に追加してください。

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  //
// 本文中にアドセンスコードを自動挿入する
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  //
function add_ads_before_h2($the_content) {
if (is_single()) {
$ads = <<< EOF
ここにアドセンスコード「置き換えてください」
EOF;
$h2 = '/^.+?<\/h2>$/im';//H2見出しのパターン

if ( preg_match_all( $h2, $the_content, $h2s )) {
  if ( $h2s[0] ) {

    // 1つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][0] ) {
      $the_content  = str_replace($h2s[0][0], $ads.$h2s[0][0], $the_content);
    }

    // 3つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][2] ) {
      $the_content  = str_replace($h2s[0][2], $ads.$h2s[0][2], $the_content);
    }

    // 5つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][4] ) {
      $the_content  = str_replace($h2s[0][4], $ads.$h2s[0][4], $the_content);
    }

    // 7つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][6] ) {
      $the_content  = str_replace($h2s[0][6], $ads.$h2s[0][6], $the_content);
    }

  }
}
}
return $the_content;
}
add_filter('the_content','add_ads_before_h2');

③:コピペしたコードの一部分をアドセンスコードに置き換える

コピペしたコードの7行目(エディタの行数とは異なります)にここにアドセンスコード「置き換えてください」とあります、そこを用意したアドセンスコード(自動挿入したいコード)に置き換えてください。

問題なければ「ファイル更新」をクリックしてください、これで実装完了です、簡単だっだでしょ?笑

一応参考例を下に置いておきますので参考にしてください。

アドセンスコードに置き換えた例

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  //
// 本文中にアドセンスコードを自動挿入する
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  //
function add_ads_before_h2($the_content) {
if (is_single()) {
$ads = <<< 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-XXXXXXXXXXXXXXXX"
   data-ad-slot="XXXXXXXXXX"></ins>
<script>
   (adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOF;
$h2 = '/^.+?<\/h2>$/im';//H2見出しのパターン

if ( preg_match_all( $h2, $the_content, $h2s )) {
  if ( $h2s[0] ) {

    // 1つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][0] ) {
      $the_content  = str_replace($h2s[0][0], $ads.$h2s[0][0], $the_content);
    }

    // 3つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][2] ) {
      $the_content  = str_replace($h2s[0][2], $ads.$h2s[0][2], $the_content);
    }

    // 5つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][4] ) {
      $the_content  = str_replace($h2s[0][4], $ads.$h2s[0][4], $the_content);
    }

    // 7つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][6] ) {
      $the_content  = str_replace($h2s[0][6], $ads.$h2s[0][6], $the_content);
    }

  }
}
}
return $the_content;
}
add_filter('the_content','add_ads_before_h2');

エディタでの見え方

エディタでの見え方

よくある質問まとめ

よくある質問・ありそうな質問についてまとめておきました。

  • プラグイン使っちゃダメ?
  • 子テーマ作ってからの方がいいですか?
  • 広告が1・3・5・7番目の見出し上にしか表示されない
  • 9番目の見出し上にも広告を表示させたい

質問①:プラグイン使っちゃダメ?

・回答
実装する自身がなくて不安な方はプラグインを使えばいいと思います、自力で実装するのは多少なりとも失敗のリスクはありますしね、個人的な意見を言えばこのくらい自分でやったほうがいいと思いますが。

質問②:子テーマ作ってからの方がいいですか?

・回答
専門的な知識がない限りは今回の件に関わらず子テーマは作るべき、何かあっても対処できるって方は子テーマを作る必要はないです、理由については「子テーマのデメリット」←サイトが重たくなるという落とし穴をご参考ください。

質問③:広告が1・3・5・7番目の見出し上にしか表示されない

・回答
そういう仕様です、全ての見出し上に広告を表示されると読者にうざがられますよ、収益を上げるならたくさん設置すべきですが少なくとも記事中は回避すべき。

質問④:9番目の見出し上にも広告を表示させたい

・回答
処理を追加すればOKです、コード内にある[// 7つ目のh2見出しの上にアドセンス挿入]とコメントしている下の処理の次にコードを追加しましょう、下に置いておきます。

before

    // 7つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][6] ) {
      $the_content  = str_replace($h2s[0][6], $ads.$h2s[0][6], $the_content);
    }

after

    // 7つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][6] ) {
      $the_content  = str_replace($h2s[0][6], $ads.$h2s[0][6], $the_content);
    }

    // 9つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][8] ) {
      $the_content  = str_replace($h2s[0][8], $ads.$h2s[0][8], $the_content);
    }

ってな感じで今回は以上になります、自動挿入を実装してアドセンスにかかるコストを大幅に削減しちゃいましょう!

他の人が読んでいる記事

コメント (0)

コメントする人

セキュリティのためreCAPTCHAを利用しています。
Googleのプライバシーポリシー利用規約が適用されます。
うぇぶとまと|Webエンジニア
うぇぶとまと|Webエンジニア

飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。