【WordPress】ボタンブロックのa要素にidを設定する方法

2023 4/12

2023年4月12日

実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。

初心者

計測用にWordPressボタンブロックのa要素にidを設定したい

そんな場合のカスタマイズです。

WordPressのブロックオプションには、ブロックのアウター要素にidやクラスを設定するオプションがあります。ですが、あくまでアウターに指定するオプションなので、ブロック内部の要素にクラスやidを設定することはできません。

Googleアナリティクスでクリックのあったボタンを計測するといったケースなど、どうしてもブロック内部の要素にidを設置したい時に困りますよね？

本記事ではWordPress6.2から実装されているWP_HTML_Tag_Processorクラスを活用し、ボタンブロック内部のa要素にidを追加設定するコードを紹介します。

この記事を書いた人

IT業界24年のベテランエンジニア
WordPressで企業サイトの構築しています
取り扱いWordPressテーマは300個オーバー

SWELLマニアのかんたです

ボタンブロックのa要素にidを設定するカスタマイズ方法

以下２つのパターンごとにボタンブロックのa要素にidを設定する方法を紹介します。

カスタマイズパターン

全ボタンブロックに同一のidを設定するカスタマイズ
ボタンごとに個別のidを設定するカスタマイズ

かんた

それぞれを解説します！

全ボタンブロックに同一のidを設定するカスタマイズ

正直このパターンを運用しているサイトで利用することはないと思いますが、コードの仕組みを理解するためにサンプルを紹介します。

ボタンブロックのコード例

コアのボタンブロックが対象の場合についてです。WP_HTML_Tag_Processorでボタンブロック内のa要素にtestというidを設定するコードです↓

function button_block_atnak($block_content, $block) {
    if ($block['blockName'] === 'core/button') {
            $w = new WP_HTML_Tag_Processor($block_content);
            $w->next_tag('a');
            $w->set_attribute('id', 'test');
            return $w->get_updated_html();  
    }
    return $block_content;
}
add_filter('render_block', 'button_block_atnak', 10, 2);

コードは子テーマのfunctions.php、またはCode Snippetsに貼り付けます。

フィルターフック適用後の出力HTMLは次の通りです。

<div class="wp-block-buttons is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-75">
<a id="test" class="wp-block-button__link wp-element-button" href="http://test.com" target="_blank" rel="noreferrer noopener">ボタン</a>
</div>
</div>

「カスタムブロック」が対象のコード例

コアのボタンブロックではなく、テーマに内包されているボタン系のカスタムブロックの場合についてです。

以下は、有料テーマSWELLのカスタムブロックである「SWELLボタンブロック」内のa要素に、testというidを設定するコードです。コード自体はほぼ同じ。２行目の対象のブロックを指定する場所だけ変更しています。

function button_block_atnak($block_content, $block) {
    if ($block['blockName'] === 'loos/button') {
            $w = new WP_HTML_Tag_Processor($block_content);
            $w->next_tag('a');
            $w->set_attribute('id', 'test');
            return $w->get_updated_html();  
    }
    return $block_content;
}
add_filter('render_block', 'button_block_atnak', 10, 2);

フィルターフック適用後の出力HTMLは次の通りです。

<div class="swell-block-button is-style-btn_normal">
<a id="test" href="http://aaa.com" class="swell-block-button__link"><span>test</span></a>
</div>

ボタンごとに個別のidを設定するカスタマイズ

クリックがあった場所を特定するといった計測目的のために、ボタンブロックごとに一意のidを設定したいという運用ケースについてです。

識別用にボタンブロックに接頭語付きのクラス名を設定します。設定方法はブロックオプション内の「高度な設定」→「追加CSS クラス」でga-任意のクラス名のフォーマット形式にします。

例えばga-ad01、ga-ad02といったクラス名です。

ボタンブロックのコード例

コアのボタンブロックを利用する場合のコードです。ボタンブロックにga-任意のクラス名が付いている場合に、クラス名をa要素のidに設定します。

function button_block_atnak($block_content, $block) {
    if ($block['blockName'] === 'core/button') {
        if (preg_match('/<div\sclass="[^"]*\bga-([^"\s]*)\b[^"]*"/', $block_content, $matches)) {
            $class_name = $matches[1];
            $w = new WP_HTML_Tag_Processor($block_content);
            $w->next_tag('a');
            $w->set_attribute('id', 'ga-'.$class_name);
            $block_content = $w->get_updated_html();
        }
    }
    return $block_content;
}
add_filter('render_block', 'button_block_atnak', 10, 2);

例えば、ga-testというクラス名を設定したボタンブロックのHTMLは次のように出力されます↓

<div class="wp-block-buttons is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-75 ga-test">
<a id="ga-test" class="wp-block-button__link wp-element-button" href="http://test.com" target="_blank" rel="noreferrer noopener">ボタン</a>
</div>
</div>

かんた

a要素にid=”ga-test”が付きました！

ga-testという、同名のidとクラス名があるのは避けたいという場合、a要素側のidから接頭語のga-を外すことも可能です↓

function button_block_atnak($block_content, $block) {
    if ($block['blockName'] === 'core/button') {
        if (preg_match('/<div\sclass="[^"]*\bga-([^"\s]*)\b[^"]*"/', $block_content, $matches)) {
            $class_name = $matches[1];
            $w = new WP_HTML_Tag_Processor($block_content);
            $w->next_tag('a');
            $w->set_attribute('id', $class_name);
            $block_content = $w->get_updated_html();
        }
    }
    return $block_content;
}
add_filter('render_block', 'button_block_atnak', 10, 2);

「カスタムブロック」が対象のコード例

先ほど同様に有料テーマSWELLのカスタムブロックを例にします。

function button_block_atnak($block_content, $block) {
    if ($block['blockName'] === 'loos/button') {
        if (preg_match('/<div\sclass="[^"]*\bga-([^"\s]*)\b[^"]*"/', $block_content, $matches)) {
            $class_name = $matches[1];
            $w = new WP_HTML_Tag_Processor($block_content);
            $w->next_tag('a');
            $w->set_attribute('id', $class_name);
            $block_content = $w->get_updated_html();
        }
    }
    return $block_content;
}
add_filter('render_block', 'button_block_atnak', 10, 2);

a要素の接頭語を外す場合のコード↓

function button_block_atnak($block_content, $block) {
    if ($block['blockName'] === 'loos/button') {
        if (preg_match('/<div\sclass="[^"]*\bga-([^"\s]*)\b[^"]*"/', $block_content, $matches)) {
            $class_name = $matches[1];
            $w = new WP_HTML_Tag_Processor($block_content);
            $w->next_tag('a');
            $w->set_attribute('id', $class_name);
            $block_content = $w->get_updated_html();
        }
    }
    return $block_content;
}
add_filter('render_block', 'button_block_atnak', 10, 2);