サイトタイトルブロックの<a>にはデフォルトでtarget=”_self”が入りますが、WP_HTML_Tag_Processorの練習としてtarget=”_blank”に変更します。

コード確認

変更前のサイトタイトルブロックのHTMLコードは次のとおり。

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

完成コード

<?php

/****************************
Topページのサイトタイトルの target="_self" を target="_blank" に変更
 *****************************/
function my_change_sitetitle_attribute($block_content, $block) {
    // トップページ以外ではそのまま返す
    if (! is_front_page()) {
        return $block_content;
    }

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

    $processor = new WP_HTML_Tag_Processor($block_content);

    // 最初の<a>を探す
    while ($processor->next_tag('a')) {
        // target 属性が "_self" なら "_blank" に変更
        if ($processor->get_attribute('target') === '_self') {
            $processor->set_attribute('target', '_blank');
        }
    }
    return $processor->get_updated_html();
}

add_filter('render_block_core/site-title', 'my_change_sitetitle_attribute', 10, 2);

処理の流れ

ステップ	説明
$processor = new WP_HTML_Tag_Processor($block_content)	HTML コンテンツを解析するクラスを初期化
$processor->next_tag('a')	次の <a> タグを順番に探す
$processor->get_attribute('target')	現在の target 属性の値を取得
if ($processor->get_attribute('target') === '_self')	target が "_self" の場合、条件に一致
$processor->set_attribute('target', '_blank')	target="_self" を target="_blank" に変更
$processor->get_updated_html()	変更後のHTMLを取得して返す

$block_contentにページ内に挿入されたサイトタイトルブロックのHTMLコードが入っている

// ヘッダーのサイトタイトル
<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>

$block_contentを引数に渡してWP_HTML_Tag_Processorクラスを初期化する。$processorの中身をvar_dumpすると、このオブジェクトが現在どんなHTMLを処理しているか、どこまで解析が進んでいるか、どのタグを探しているかといった情報が保持しているのか、などがわかる。

最初の<a>の検索を開始するとできること

next_tag(‘a’)を呼び出すと、WP_HTML_Tag_Processorの内部状態が変化する。

"sought_tag_name" に 'a' がセットされる

["sought_tag_name":"WP_HTML_Tag_Processor":private]=>
string(1) "a"

"attributes" に <a> タグの属性が解析されて入る

["attributes":"WP_HTML_Tag_Processor":private]=>
array(4) {
  ["href"]         => string(16) "http://bdev.com"
  ["target"]       => string(5) "_self"
  ["rel"]          => string(4) "home"
  ["aria-current"] => string(4) "page"
}

<a>の内容を取得・解析できたため、メソッドを呼んで値の更新が可能になる。

属性取得：get_attribute

$href = $processor->get_attribute('href'); // http://bdev.com

属性変更：set_attribute

$processor->set_attribute('target', '_blank');

属性追加：set_attribute

$processor->set_attribute('rel', 'noopener noreferrer');

属性を削除：remove_attribute

$processor->remove_attribute('target');

更新されたHTML取得：get_updated_html

$updated_html = $processor->get_updated_html();

変更後のソース確認

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