Topページのサイトタイトルのタグをh1に変更する

トップページのサイトタイトルのラッパーは<p>から<h1>に変更します。他のページでは<p>のまま表示します。

変更前

<p class="wp-block-site-title">
    <a
        href="http://bdev.com"
        target="_self"
        rel="home"
        aria-current="page">
        bdev
    </a>
</p>

変更後はh1タグがpタグになります。

<h1 class="wp-block-site-title">
    <a
        href="http://bdev.com"
        target="_self"
        rel="home"
        aria-current="page">
        bdev
    </a>
</h1>

php編集


/****************************
Topページのサイトタイトルのタグを<h1>に変更する
 *****************************/
function my_change_h1_coresitetitle($block_content, $block) {
    // トップページ以外ではそのまま返す
    if (! is_front_page()) {
        return $block_content;
    }

    // 対象ブロックが "core/site-title" である場合のみ処理
    if ('core/site-title' !== $block['blockName']) {
        return $block_content;
    }

    // <p>タグを削除し、<h1>で囲んで返す
    $tag_to_remove = ['<p class="wp-block-site-title">', '</p>'];
    $content_without_p = str_replace($tag_to_remove, '', $block_content);

    return sprintf(
        '<h1 class="wp-block-site-title">%s</h1>',
        $content_without_p
    );
}
add_filter('render_block_core/site-title', 'my_change_h1_coresitetitle', 10, 2);

1.サイトタイトルブロックのみ$block_contentに入る

$block_contentをvar_dumpすると次のコードを取得できる。

// ヘッダーのサイトタイトル
<p class="wp-block-site-title">
    <a href="http://bdev.com" target="_self" rel="home" aria-current="page">bdev</a>
</p>
// フッターのサイトタイトル
<h2 class="wp-block-site-title">
    <a href="http://bdev.com" target="_self" rel="home" aria-current="page">bdev</a>
</h2>

2. pタグの削除

$content_without_p = str_replace($tag_to_remove, '', $block_content);

$block_contentで渡ってきたHTMLコードの中から、<p class=”wp-block-site-title”>を探し削除します。続けて、$block_contentで渡ってきたHTMLコードの中から、</p>を探し削除します。

その結果、$content_without_pには<a>~</a>が残ります。

3.h1タグの挿入

return sprintf(
'<h1 class="wp-block-site-title">%s</h1>',
    $content_without_p
);

サイトタイトルのタグにしたいh1をsprintfの第一引数に渡し、%sに$content_without_pを当てはめます。その結果、<h1>タグで囲うことができました。

<h1 class="wp-block-site-title">
    <a href="http://bdev.com" target="_self" rel="home" aria-current="page">bdev</a>
</h1>