WordPressで指定数のh要素ごとに要素を挿入する

Google AdSenseの自動広告で設定できる記事内広告はわりとおかしな部分に出力されるように思います。

これが嫌だったのでもう少しマシな状態でコンテンツ内に要素を配置する方法はないかと考え、「h要素3つごと」のようにして要素を入れ込む方法を検討しました。

実現したいこと

• WordPressでPHP使用
• 指定した数ごとのh要素の上に要素を追加
• h要素として指定するのは1-6(変更可能)で、h2やh3などの種類を気にせず設定

言葉にすると少しややこしいのですが、例えば以下のような状態を目指します。

<!-- h要素3つごとの上に要素を挿入する -->

<!-- 挿入要素 -->
<h2>h要素</h2>
<h3>h要素</h3>
<h2>h要素</h2>
<!-- 挿入要素 -->
<h3>h要素</h3>
<h4>h要素</h4>
<h5>h要素</h5>
<!-- 挿入要素 -->
<h2>h要素</h2>

なお、最初の挿入位置を1つ目のh要素ではなく、2つ目や3つ目のh要素に変更可能なように作ります。

サンプルコード

add_filter('the_content', 'add_elem_in_post', 11, 1);
function add_elem_in_post($content){
  $content = add_elem_in_post_func($content);
  return $content;
}

function add_elem_in_post_func($content){
  //h要素のパターン
  $heading = '/^<h[1-6].*?>.+?<\/h[1-6]>$/im';
  //h要素が本文中にあれば実行
  if (preg_match_all($heading, $content, $matches)) {
    //h要素の総数を配列から取得
    $len = count($matches[0]);
    //h要素の数を数だけ繰り返して実行
    for ($i=0; $i<$len; $i = $i + 3) {
      //最初のh要素の上に挿入し、以降は3つごとに実行
      $elem    = '<p>挿入する要素</p>';
      $content = str_replace($matches[0][$i], $elem . $matches[0][$i], $content);
    }
  }
  return $content;
}

上記コード内の以下の部分で、最初の挿入位置や挿入する際にあけるh要素の間隔を変更できます。

//最初のh要素の上に挿入し、以降は3つごとに実行
for ($i=0; $i<$len; $i = $i + 3) { //以下省略

//最初の挿入が2つめのh要素の上で、あとは3つごとに挿入
for ($i=1; $i<$len; $i = $i + 3) { //以下省略

//最初の挿入が3つめのh要素の上で、あとは2つごとに挿入
for ($i=2; $i<$len; $i = $i + 2) { //以下省略

結び

一応試して確認はしていますが、当記事以外でもこれ系の処理(投稿内容に対する検索と置換)は概ねGutenberg(ブロックエディタ)でもクラシックエディタでも動作するはずです。

見出し下と本文末への広告配置は定番ではありますが、本文中への配置というのもそれなりにメジャーですし、配置の手がかりとして本文中のh要素の上を選ぶのもそれなりに筋が通る形ではと思います。

本文中の広告は邪魔に感じる場面が多いのですが、ある程度長めの記事の場合にはTVのCMのように一旦区切るような意図であればそこまでいやでもないのではとも考えています。

もっともこれをちゃんとした形でやろうとすると、毎回本文の文字数と見出しの頻度を揃え、かつそれがメインとする画面サイズで適切な状態であるようにしなければならず、結局のところ邪魔になるだけかもしれませんが。