WordPressで最初のh2の前に要素を一括挿入する方法

著者:牧野健人

WordPressでページの最初のh2の前に要素を一括挿入したいケースは、下記の通り珍しくありません。

そこでこの記事では、プラグインを使わずにこれを実現するPHPコードを解説します。

牧野健人

記事の著者牧野健人

株式会社リラクス 代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

WordPressで最初のh2の前に要素を一括挿入する方法

PHPは下記の通りです。挿入したい要素のHTMLや適用したいディレクトリなどを書き換えた上で、functions.phpに追記してください。

function insert_html_before_first_h2($content) {
    // 現在のURLのパス部分を取得
    $request_uri = $_SERVER['REQUEST_URI'];

    // '/column/'がパスに含まれる場合のみ、HTMLを挿入する
    if (strpos($request_uri, '/column/') !== false) {
        // 挿入したいHTML
        $html_to_insert = '<!-- 挿入したいHTML -->';

        // 最初のh2タグを見つける
        $first_h2_pos = strpos($content, '<h2');

        // h2タグがあれば、指定したHTMLを挿入する
        if ($first_h2_pos !== false) {
            $content = substr_replace($content, $html_to_insert, $first_h2_pos, 0);
        }
    }

    return $content;
}
add_filter('the_content', 'insert_html_before_first_h2');

コードの解説は下記の通りです。

関数を定義

今回の処理をおこなう関数としてinsert_html_before_first_h2()を定義し、引数として記事のコンテンツである$contentを受け取ります。

現在のURLのパスを取得し、変数に保存

$_SERVER['REQUEST_URI']により現在のURLのパスを取得して、変数$request_uriに保存します。

現在のURLが特定のディレクトリを含むかをチェック

特定のディレクトリがURLに含まれている場合にのみ、HTMLを挿入する後述の処理を実行します。

なお、strpos()関数は、文字列が見つかった場合はその位置を、見つかれなかった場合はfalseを返します。そのため、trueかどうかではなく、falseでないかをチェックする必要があります。

挿入するHTMLを変数に保存

挿入したいHTMLを記述して変数$html_to_insertに保存します。

$content内で最初の<h2>タグの位置を検索し、その位置を変数に保存

strpos関数によって、$contentの中の最初のh2の位置を取得します。h2classidなどの属性を持つことも多いので、閉じタグを含めない'<h2'を検索文字列としています。

substr_replace関数を使ってHTMLを挿入

引数の説明は下記の通りです。

$content
置換対象の文字列。
$html_to_insert
置換する文字列(今回の場合、事前に変数に保存したHTML)。
$first_h2_pos
置換を開始する位置(この場合、最初のh2タグの位置)。
0
置換する部分文字列の長さ。0を指定することで、元の文字列を削除せずに新しい文字列が挿入されます。

$contentをリターン

$contentをリターンします。この$contentは、指定したディレクトリがURLに含まれている場合にはHTMLを最初のh2の前に挿入する処理が施されたものであり、そうでない場合は何も更新がされていないものになります。

add_filter関数を使って、関数をthe_contentフィルターに追加

コンテンツが表示される前にinsert_html_before_first_h2関数が実行され、指定されたHTMLが挿入されます。

WebサイトのCV数を増やしたいなら無料相談 / お問い合わせ