[WordPress] H2タグの文字の前に番号を追加するカスタムスクリプト（functions.php）

2024.08.30

H2タグの前に番号を付けるために、WordPressの functions.php にカスタムスクリプトを追加しました。
H2タグを検出し文字列を置き換える処理を、フィルターとして ‘the_content’に追加します。
H3タグでも同様に階層的な番号付けができます。

1. H2タグの文字の前に番号を追加したい

WordPressサイトのfunctions.phpにコードを追加して、H2タグの文字の前に番号を追加したい、と考えました。

function add_numbers_to_h2($content) {
    $h2_count = 0;
    $pattern = '/<h2.*?>(.*?)<\/h2>/i';
    
    $content = preg_replace_callback($pattern, function($matches) use (&$h2_count) {
        $h2_count++;
        return sprintf('<h2>%d. %s</h2>', $h2_count, $matches[1]);
    }, $content);
    
    return $content;
}
add_filter('the_content', 'add_numbers_to_h2');

add_numbers_to_h2関数は、投稿のコンテンツを受け取り、修正したコンテンツを返します。
この関数をWordPressのthe_contentフィルターにフックします。

コードの説明：

正規表現を使用してH2タグを検出します。
preg_replace_callback関数を使って、見つかったH2タグを番号付きのものに置き換えます。

目次を生成した後に動作します。

目次に戻る

2. H3タグも付けたいなら？

H3タグを “1-1.” の形式で追加する場合、H2タグとH3タグの両方に対応したより複雑なスクリプトが必要になります。

function add_numbers_to_h2_h3($content) {
    $h2_count = 0;
    $h3_count = 0;
    $pattern = '/<(h2|h3).*?>(.*?)<\/\1>/i';
    
    $content = preg_replace_callback($pattern, function($matches) use (&$h2_count, &$h3_count) {
        if (strtolower($matches[1]) === 'h2') {
            $h2_count++;
            $h3_count = 0;
            return sprintf('<h2>%d. %s</h2>', $h2_count, $matches[2]);
        } else {
            $h3_count++;
            return sprintf('<h3>%d-%d. %s</h3>', $h2_count, $h3_count, $matches[2]);
        }
    }, $content);
    
    return $content;
}
add_filter('the_content', 'add_numbers_to_h2_h3');

preg_replace_callback関数内で、見つかったタグがH2かH3かを判断し、適切な形式で番号を追加します。