ワードプレスでアドセンスを見出し2つおきに自動挿入する方法(プラグインなし)

割と記事が長くなると、せっかく記事いっぱい書いたんだし、アドセンス広告をいくつも貼り付けたくなるときありますよね。でもいちいち手動でアドセンスコードを貼り付けるのも面倒です。プラグインを導入するとページ表示速度が劣化する恐れがあるので躊躇もしてしまいますよね。

そんなあなたに朗報です!このページでは「プラグインなしにワードプレスでアドセンスを見出し(h2)2つおきに自動挿入する方法」を紹介します。

アドセンスを見出し2つおきに挿入する様子

この「2つ」という部分はちょっとだけ設定値をいじるだけで変更することも可能です。1つおき、3つおきにも簡単に変更することができます。

アドセンスをいろんな間隔で挿入する様子

こういったカスタマイズ方法や自動挿入する仕組みについても解説しておりますので、アドセンスの自動挿入に興味のある方は是非このページを読んで参考にしてみてください。

アドセンスを見出し2つおきに自動挿入する方法

アドセンスを見出し2つおきに自動挿入する手順は下記の3つとなります。

  • アドセンスコードを取得する
  • プログラムを functions.php にコピペする
  • プログラムにアドセンスコードをコピペする

基本はコピペでできますが、functions.php 編集時は下記の点に注意しましょう。

  • 変更前に functions.php のバックアップを取っておき、問題があったときにすぐに戻せるようにしておきましょう
  • 親テーマの functions.php を変更してしまうと親テーマの更新に影響がある場合があります

それでは上記の3手順を一つ一つ解説していきたいと思います。

アドセンスコードを取得する

まずアドセンスのページからアドセンスコードを取得してください。同じ広告が表示されないように複数アドセンスコードを取得しておくと良いと思います。

取得するアドセンスコード

このページで紹介するプログラムでは二種類のアドセンスコード数を設定できるようになっています。が、設定するアドセンスコード数は変更可能です。変更方法はアドセンスコード数を変更するで解説します。

ここではまず2つのアドセンスコードを取得したこととして解説進めていきます。

プログラムを functions.php にコピペする

次に下記プログラムを functions.php にコピペします。

// h2 N個おきにAdSenseを自動挿入 Start
function adsense_before_headings_skip($the_content) {
    // 投稿ページ以外の場合はすぐに終了
    if(!is_singular()){
        return $the_content;
    }
    // 広告設置する見出しの間隔を設定
    // $interval - 1 個おきにアドセンスが挿入される
    $interval = 3;

    // 間隔設定がおかしい場合はすぐに終了
    if($interval < 1){
        return $the_content;
    }

    // 何個目の見出しから設置するかを設定
    // 数字は0からカウントアップ
    // なので1つ目の見出しであれば0を設定
    // 2つ目の見出しであれば1を設定
    $initial = 0;

    // 表示するアドセンスコードの設定
    // 表示したい広告の種類分 $adN を作成する

    // $ad1に一つ目のアドセンスコードを格納
    $ad1 = <<< EOF
<p class="auto-insert-class">スポンサーリンク</p>
// ここを1つ目のアドセンスコードで上書き
EOF;

    // $ad2に二つ目のアドセンスコードを格納
    $ad2 = <<< EOF
<p class="auto-link-class">スポンサーリンク</p>
// ここを2つ目のアドセンスコードで上書き
EOF;

    // アドセンスコードをさらに追加する場合はここで行う

    // ループ処理しやすいように$ad配列に$ad1, $ad2を格納
    $ad = array ($ad1, $ad2);
    // ↑はアドセンスコード数に応じて設定。例えば3種類設定したいのであれば
    // $ad3を$ad1や$ad2同様に作成し、下記で配列を作成すればオーケー
    // $ad = array ($ad1, $ad2, $ad3);

    // 設定されたアドセンスコード数を取得
    $adnum = count($ad);

    // h2見出しのパターンを作成
    $pattern = '/^<h2.*?>.+?<\/h2>$/im';
    // $headings[0]にページ内の全てのh2見出し要素を格納
    if ( !preg_match_all( $pattern, $the_content, $headings )) {
        // 見出しがない場合は終了
        return $the_content;
    }

    // 表示するアドセンスコードを格納する変数
    $adcount = 0;
    // $interval 間隔でループを実行。初期値は $initial
    for($i = $initial; $i < count($headings[0]); $i = $i + $interval){
        // $headings[0]に格納された「h2要素」を「アドセンスコード + h2要素」に置換
        $the_content = str_replace($headings[0][$i], $ad[$adcount]."\n".$headings[0][$i], $the_content);
        $adcount++;
        // 設定されたアドセンス数を上回った場合は
        // 再度先頭のアドセンスコードから表示する
        if($adcount >= $adnum){
            $adcount = 0;
        }
    }

    // 置換後のコンテンツを返却
    return $the_content;
}
add_filter('the_content','adsense_before_headings_skip');
// h2 N個おきにAdSenseを自動挿入 End

functions.php はワードプレスのダッシュボードから編集することも可能です。

「外観」→「テーマエディター」から編集画面に移れます。

テーマエディターのある場所

すると下のような画面が表示されますので、最初に functions.php を選択します。

すると画面の左側に functions.php が開かれますので、その中に上記のプログラムソースコードをコピペします。

functions.php 編集画面

すでに functions.php にプログラムが記述されている場合は、それらの邪魔にならないように注意してください。コピペする場所は <?php 〜 ?> の間であればどこでも良いです。

もちろんテーマエディターでなく直接 functions.php を編集しても良いです。

プログラムにアドセンスコードをコピペする

最後にプログラムの下記の「// ここを1つ目のアドセンスコードで上書き」コメント部分に取得したアドセンスコード1つ目を、「// ここを2つ目のアドセンスコードで上書き」コメント部分にアドセンスコード2つ目をそれぞれコピペして上書きします。

    // $ad1に一つ目のアドセンスコードを格納
    $ad1 = <<< EOF
<p class="auto-insert-class">スポンサーリンク</p>
// ここを1つ目のアドセンスコードで上書き
EOF;

    // $ad2に二つ目のアドセンスコードを格納
    $ad2 = <<< EOF
<p class="auto-link-class">スポンサーリンク</p>
// ここを2つ目のアドセンスコードで上書き
EOF;

最後に保存ボタンを押せばアドセンス自動挿入のための作業は完了です!

もしテーマエディターで下のようなエラーが出て保存できない場合は、

テーマエディターで発生するエラーの例

指摘されている行の先頭の空白を一旦削除し、その後タブキーで空白を再度加えてみてください。

それによって他の行で同じエラーが出る場合もありますが、その場合はその行も同様の方法で空白をタブに置き換えてください。何回か繰り返せば保存成功するようになります。どうも空白とタブとが混在するのがダメな場合があるようです(PHP の場合は本当は空白が正解なはずなのに…)。

アドセンス自動挿入結果

上記の3手順を行うと、アドセンス広告が h2 見出し1つ目、4つ目、7つ目・・・の上側に表示されるようになります。

アドセンス表示結果

上記のプログラムではアドセンスコードを2つのみ設定していますので、3つ目の広告表示からは1つ目のアドセンスコードの広告から再び表示していくことになります。

同じアドセンスコードが使用されるので同じ広告が表示される可能性が高いです。同じ広告が表示されないようにアドセンスコードをもっと多く設定したい方は、その方法をページ後半のアドセンスコード数を変更するで解説していますので、是非そちらも読んで見てください。

プログラムの制約

このプログラムには下記の制約がありますので注意してください。

  1. 投稿ページ全てにアドセンスが挿入される
  2. 同じ見出しタグかつ同じ見出し文の見出しがあると「間隔がずれる」「同じ見出しに2つ広告が表示される」可能性あり

ただしプログラムを変更すればこれらの制約も解除することが可能です。この方法についてはさまざまなカスタマイズ方法で解説します。

自動挿入する仕組み

自動挿入をどうやって実現しているかについても解説しておきます。

これを知っていれば自分の好きなようにカスタマイズして使用することもできます。ポイントだけ解説しまので、他の部分についてはソースコードのコメントを参考にしてください。

ソースコード読めば仕組みは理解できる、プログラムに興味ない、といった方はこの章は飛ばしてさまざまなカスタマイズ方法に進んでください。

ページ内の h2 見出し要素を探す

まずアドセンスコードの自動挿入の前準備として、ページ内から h2 見出し要素を探し、見つけた h2 要素を配列に格納する処理を行ないます。

h2見出しを検索する様子

実際に h2 見出し要素を検索して配列に格納しているのは下記の部分になります。

// h2見出しのパターンを作成
$pattern = '/^<h2.*?>.+?<\/h2>$/im';
// $headings[0]にページ内の全てのh2見出し要素を格納
if ( !preg_match_all( $pattern, $the_content, $headings )) {

2行目で検索する文字列のパターンを生成して $pattern に格納しています。この2行目では下記のような文字列パターンが生成されます。

検索文字列のパターン生成

このパターンでマッチする行(◯)、マッチしない行(×)の例をいくつか紹介しておきます。

  • ◯:<h2>見出し</h2>
  • ◯:<h2 id=”test”>見出し</h2>
  • ×:<h3>アイウエオ</h3>
  • ×:<h2></h2>

つまり、基本的に h2 要素にマッチするパターンになっています(見出し文がないとマッチしません)。

このパターンを変更することで検索する行を変更することが可能です。これを利用して h2 見出しと h3 見出し2つおきにアドセンスを自動挿入する方法を、このページ後半の h3 もカウント対象に含めるで解説しています。

パターン生成後、4行目でこのパターンにマッチする行を $the_content の中から検索し、見つかったものを $headings[0][i] に格納します。

4行目で使用している preg_match_all 関数は、第一引数で指定したパターンにマッチする行を第二引数に格納された文字列から検索し、マッチした行を第三引数の配列に格納していく関数になります。

第二引数に指定する $the_content にはページ記事部分の HTML が格納されています。ですので、その HTML の中から上記のパターンにマッチする行が第三引数で指定した $headings の $headingss[0][0] から順に格納されていくことになります(2つ目にマッチした行は $headings[0][1] 、3つ目にマッチした行は $headings[0][2] といったように順々に格納されていきます)。

上記の $pattern に格納されたパターンでは h2 要素がマッチしますので、ページの記事中の全ての h2 要素が 配列 $headings[0] に格納されることになります。

文字列の置換で自動挿入する

続いてアドセンスコードの挿入を行います。実際にアドセンスコードの挿入を行なっているのは下記部分になります。

$the_content  = str_replace($headings[0][$i], $ad[$adcount]."\n".$headings[0][$i], $the_content);

何を行なっているかというと、単純に文字列の置換です。$the_content 内から配列 $headings[0] に格納された文字列(つまり h2 要素)を見つけ出し、その見つけた「配列 $headings[0] に格納された文字列」を「配列 $ad に格納されたアドセンスコードと配列 $headings[0] に格納された文字列とを連結した文字列」で置換しているだけです。

アドセンスコードを置換により挿入する様子

この置換によりアドセンスコードが h2 見出し前に挿入されることになります。例えば下記のような h2 要素があるのであれば、

<h2>見出しです</h2>

次のように h2 要素の前にアドセンスコードが挿入されます。

<script>
  アドセンスコード
</script>
<h2>見出しです</h2>

この置換を $headings[0] に格納された文字列(h2 要素)全てに対して実行すれば、全 h2 見出しの上側にアドセンス広告を表示することも可能です。

文字列の置換を見出し2つおきのみに行う

でも広告を表示しすぎるとユーザーにとってはページが見にくくなってしまいますよね。ですので、間隔を空けて表示できるように、置換を行うループを見出し3個間隔で行うようにします。3個間隔で表示するので見出し2つおきに表示されることになります。

挿入を間隔をあけて行う様子

そのループを行なっているのが下記部分です。

for($i = $initial; $i < count($headings[0]); $i = $i + $interval){
    // $headings[0]に格納された「h2要素」を「アドセンスコード + h2要素」に置換
    $the_content  = str_replace($headings[0][$i], $ad[$adcount]."\n".$headings[0][$i], $the_content);
    $adcount++;
    // 設定されたアドセンス数を上回った場合は
    // 再度先頭のアドセンスコードから表示する
    if($adcount >= $adnum){
        $adcount = 0;
    }
}

$interval はプログラムの先頭で設定する変数で、アドセンスを挿入する見出しの間隔を格納する変数になります。ループ内で $headings[0][$i] のように $headings[0] のインデックスとして $i を使用していますが、この $i をループが繰り返されるたびに $interval 分増加させることにより、$interval 間隔で挿入を行うことを実現しています。

$interval をプログラムの先頭で “3” に設定しているため、アドセンスは h2 見出し3つ間隔で、つまり h2 見出し2つおきに挿入することができます。

以上の、「ページ内の h2 見出し要素を探す」「文字列の置換で自動挿入を行う」「文字列の置換を見出し2つおきのみに行う」により、アドセンスを h2 見出し2つおきに表示する機能を実現しています。

そして、この機能を実装した関数 adsense_before_h2_skip を下記で the_content 関数にフックすることにより、 the_content 関数実行時に adsense_before_h2_skip 関数も実行されてアドセンスが自動挿入されることになります。

add_filter('the_content','adsense_before_headings_skip');

スポンサーリンク

さまざまなカスタマイズ方法

ここまではアドセンスを「最初の見出し」から「2つおきに」挿入する方法とその仕組みについて解説してきましたが、プログラムを簡単にカスタマイズして色々な挿入方法を実現することが可能です。ここではそのカスタマイズ方法について解説します。

挿入する間隔を変更する

挿入する間隔を変更するには下記を変更すれば良いです。

$interval = 3;

例えば $interval を “2” に設定すれば h2 見出し2個間隔で、つまり1つおきにアドセンスを挿入することが可能です。

$interval の値を小さくすればアドセンス広告の表示数が多くなりますが、ユーザーがページを見にくくならないように注意しましょう。

表示を開始する見出しを変更する

例えば1つ目の見出しにはアドセンスを表示したくないケースがあると思います。具体的には、既にウィジェット等で1つ目の見出しにアドセンスを表示するようにしている場合、1つ目の見出しにもアドセンスを自動挿入してしまうと2つ広告が表示されてしまうことになります。

そういったことが避けられるように、アドセンスを挿入開始する見出しを設定できるようにしています。具体的には下記で設定することができます。

$initial = 0;

$initial +1 個目の見出しから見出しの上側にアドセンスが挿入されるようになります。ただし “0” からカウントアップしている点に注意してください。例えば1つ目の見出しからアドセンス挿入を開始するのであれば $initial には “0” を設定します。2つ目の見出しから開始するのであれば $initial には “1” を設定してください。

例えば $initial を “2” にした場合、下図のように3つ目の見出しからアドセンスの挿入が開始されます。

3つ目の見出しからアドセンスが挿入される様子

アドセンスコード数を変更する

見出しが多くてアドセンスコード数が足りない(例えば見出しが6個あって見出し1つおきにアドセンスを挿入するのに、アドセンスコードが2つしか設定されていない)場合は、同じアドセンスコードを繰り返し挿入することになります。

同じアドセンスが挿入される様子

そうなると同じ広告が表示されることになりかねないです。これを避けたい方はアドセンスコード設定数を増やしてください。

アドセンス絶対数は下記の3手順で増やすことが可能です。

1. アドセンスコードを取得する

Google AdSense のページから表示に使用するアドセンスコードを追加で取得してください。

2. アドセンスコードをプログラムに記述する

まず $ad1 や $ad2 同様に $ad3 や $ad4 にアドセンスコードを格納してください。格納を行うのは下記のコメントのすぐ下で行えばオーケーです。

// アドセンスコードをさらに追加する場合はここで行う

例えば3つ目のアドセンスコードを追加するのであれば、下記を追加すれば良いです。

// $ad3に三つ目のアドセンスコードを格納
$ad3 = <<< EOF
<p class="auto-link-class">スポンサーリンク</p>
// ここを3つ目のアドセンスコードで上書き
EOF;

そして「// ここを3つ目のアドセンスコードで上書き」のコメント部分をプログラムにアドセンスコードをコピペする同様にしてアドセンスコードで上書きしてください。

3. 配列に追加する

次に新たにアドセンスコードを格納した変数(上記の例であれば $ad3)を $ad 配列に追加してください。

$ad = array ($ad1, $ad2, $ad3);

これで使用するアドセンスコードを追加する作業は完了です。この3つを行えば、後は自動的に追加したアドセンスコードを使用して広告表示が行われるようになります。

同様にして4つ、5つといったたくさんのアドセンスコードを使用することも可能です。

h3 もカウント対象に含める

h3 もカウント対象に含める場合は下記を

$pattern = '/^<h2.*?>.+?<\/h2>$/im';

下記のように変更してください。

$hpattern = '/^<h[23].*?>.+?<\/h[23]>$/im';

これにより h2 と h3 見出し両方において2つおきにアドセンスが挿入されるようになります。

[23]は “2” もしくは “3” のどちらかであればマッチしているとみなす記述になります。ですので h2 要素も h3 要素も両方が配列 $headings[0] に格納されることになります。

投稿ページ以外にもアドセンスを自動挿入する

プログラムの制約の制約 1. があるのはプログラムの先頭で is_single() で投稿ページかどうかを判断し、投稿ページ以外の場合は関数を終了するようにしているからです。

if(!is_single()){
    return $the_content;
}

なので固定ページも含めたい場合はここを is_singular() に変更すれば投稿ページと固定ページにアドセンスを自動挿入することが可能です。

if(!is_singular()){
    return $the_content;
}

同じ見出し文でもアドセンスを自動挿入する

プログラムの制約の制約 2. があるのは、ページ内で同じ見出しタグ(h2 や h3 など)で同じ見出し文があるとそれらの区別ができないためです。

これは h2 だけに見出しを自動挿入する際はほとんど問題にならないと思います。h2 で同じ見出し文をつけることはほぼないですよね。ですので h3 より下の見出しにもアドセンスを自動挿入する際の制約と言ってしまって良いと思います。

h3 以下の見出しにも自動挿入したい場合は下記の方法で全ての見出しの区別がつくようにしてしまえば、この制約を解消することができます。

①見出しに自動で id 属性を付ける

同じ見出しタグで同じ見出し文の見出しに id 属性を付ければこの制約を解消できます。この id 属性で見出しを区別してしまうというわけです。

id 属性を付加する方法については下記で解説していますのでこちらを参考にしていただければと思います。

ページ内リンクの作成方法解説ページのアイキャッチ20秒で完成!ページ内リンクの作成方法を解説

②見出しに自動で id 属性をつける

ただこれだと手動で id 属性を付ける必要があるので少々面倒と感じる方もいると思います。そんな方向けに自動で各見出しに id 属性を付加する方法を下のページで解説しています。

見出しにidを自動設定する方法の解説ページのアイキャッチワードプレスで見出しに自動的に id 属性を付ける方法

このページで解説している add_auto_id 関数実行後に上記のプログラムを実行することで、見出しレベルと見出し文が同じ見出しがあっても等間隔に表示することが可能になります。

参考サイト

偉そうに解説してしまいましたが、$headings に文字列を格納する処理などは下記のサイトを参考にさせていただいています。

h2見出し毎にAdSenseを自動的に差し込むWordPressカスタマイズ(LSC TOWN)

プログラム自体がわかりやすかったので参考になりました!ありがとうございます!

まとめ

このページでは「ワードプレスでアドセンスを見出し2つおきに自動挿入する方法」について解説しました。活用していただければ、自動的に挿入できるようになるのでアドセンス挿入するための手間を省くことができますし、記事の内容だけに集中することができるようになります。

また方法だけでなく仕組みについても解説しましたので、これを参考に自身でどんどんカスタマイズしていただければと思います。他にもこんな風にアドセンスを自動挿入したい!などの要望があればコメントに書いていただければ私ができる限り解説します。気軽にコメントしてください。

実は、今回紹介したようなプログラムであれば PHP の知識があれば簡単に作成できてしまいます。ワードプレスのカスタマイズを今後もしていきたいと考えている方は、PHP の知識は持っておいた方が良いです。

本であれば、例えば下の「WordPressユーザーのためのPHP入門」がオススメです。

ワードプレスをカスタマイズしたい方向けの PHP の解説本ですので、ワードプレスをカスタマイズする上で必要になる PHP の知識を重点的に身につけることができます。

また本だけだとモチベーションが上がらない、理解できないことが多くて挫折する、といった方にはプログラミングスクールを活用することをオススメします。

「TechAcademy」であれば PHP を学べるコースがありますので PHP について重点的に学ぶことが可能です。さらに完全オンライン完結ですのでどこに住んでいても学べますし、時間の融通も効きます。興味があればまずは無料説明会動画を見てみると良いと思います。下のバナーリンクから公式ページに飛ぶことができます!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です