自動でh2タグの上に広告を追加させる方法

ゴール

記事内の広告について毎回手動で入力するのは大変だったので、自動でh2タグの上に記事を追加する機能を追加しました。
本記事では下のような画像の様にh2タグ上に広告が自動追加されることを目指します。

必要なもの

	必要なもの		価格(円)
1	PC		ピンキリ
1	備考	インターネット接続可能なこと
2	WordPressのアカウント		無料
2	備考	持っていない場合は、こちらを参照→WordPressのインストール方法

方法

自動でh2タグの上に広告を追加させる方法

自動でh2タグの上に広告を追加させる機能のような追加機能については直接WordPressのコードを変更するというより、テーマのfunctions.phpに機能を追加することが主流のようです。
テーマごとにfunctions.phpは定められていると思いますが、今回の記事ではSimplicity2を例としてまとめたいと思います。

functions.phpの編集方法はWordPressの左側のメニューにある外観->テーマの編集を選択し、テーマのための関数(functions.php)を選択します。
また、このとき編集するテーマが”Simplicity child”であることにも注意してください。

本ブログでは
/* 以下にSimplicity子テーマ用の関数を書く */
の下にコードを追加していくことにします。

functions.phpの追加コード

/*** 追加　内容：広告をh2の上に自動表示できるようにする関数 ***/
function add_ad_before_h2($the_content) {

//スマホ・タブレット向けの広告
$adMobile = <<< EOF
<script src="★【スマホ・タブレット向けの広告のURL】★"></script>
<br/>
EOF;
//PC（モバイル端末以外)向けの広告
$adPC = <<< EOF
<script src="★【PC（モバイル端末以外)向けの広告のURL】★"></script>
<br/>
EOF;

  if ( (is_single())||(is_page()) ) {//投稿ページ
    $h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
    if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
      //配列サイズ
      $h2sSize=count($h2s[0]);
      for($i=0;$i<$h2sSize;$i++){
        if($h2s[0][$i]) {
          if(wp_is_mobile()){//端末確認
            $ad='スポンサーリンク<br/>'.$adMobile.'</script>';
          }else{
            $ad='スポンサーリンク<br/>'.$adPC.'</script>';
          }
          $the_content  = str_replace($h2s[0][$i], $ad.$h2s[0][$i], $the_content);
        }
      }
    }
  }
  return $the_content;
}
add_filter('the_content','add_ad_before_h2');

/*** 追加　内容：広告をh2の上に自動表示できるようにする関数 ***/

function add_ad_before_h2($the_content) {

//スマホ・タブレット向けの広告

$adMobile = <<< EOF

<br/>

EOF;

//PC（モバイル端末以外)向けの広告

$adPC = <<< EOF

<br/>

EOF;

if ( (is_single())||(is_page()) ) {//投稿ページ

$h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン

if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか

//配列サイズ

$h2sSize=count($h2s[0]);

for($i=0;$i<$h2sSize;$i++){

if($h2s[0][$i]) {

if(wp_is_mobile()){//端末確認

$ad='スポンサーリンク<br/>'.$adMobile.'</script>';

}else{

$ad='スポンサーリンク<br/>'.$adPC.'</script>';

}

$the_content = str_replace($h2s[0][$i], $ad.$h2s[0][$i], $the_content);

}

return $the_content;

}

add_filter('the_content','add_ad_before_h2');

上のソース内の
・★【スマホ・タブレット向けの広告のURL】★
・★【PC（モバイル端末以外)向けの広告のURL】★
に該当する広告のURLを記入して、functions.phpに追加します。

コード反映確認

ソースコードが反映されていることを確認するために、下のtestAdd_Ad_Before_H2.htmlをブログ投稿画面で確認してみてください。

<h2>ゴール</h2>
本記事の目標はｘｘｘです。
<h2>必要なもの</h2>
必要なものはｘｘｘです。
<h2>自動でh2タグの上に広告を追加させる方法</h2>
自動でh2タグの上に広告を追加させる方法を説明します。
<h3>functions.phpの追加コード</h3>
functions.phpの追加コードは・・・・
<h3>コード反映確認</h3>
コード反映確認をします。
<h4>サブ項目</h4>
サブ項目は・・・・