ブロックのマークアップを一部置換する【WordPress】

WordPress

2024.04.21

はじめに
やりたいこと
1. デフォルトのマークアップ（テーブル）
2. 出力したいマークアップ
コード
独自ブロック作成が必要なケース
1. 独自でブロックを作る
2. プラグインを利用する

はじめに

WordPressのブロックエディタでは、ブロックに応じたマークアップが自動出力されます。

WEB制作の現場では、CSSやJSセレクタを指定するために、マークアップの一部変更が必要なケースがあります。

そのような場合に利用するコードを、今回の記事では紹介していきます。

やりたいこと

デフォルトのマークアップ（テーブル）

WordPressの記事編集ページでテーブルを作成すると、以下のようなマークアップが出力されます。

<figure class="wp-block-table">
    <table>
       <tbody>
          <tr>
              <td>aaa</td><td>bbb</td></tr><tr><td>ccc</td><td>ddd</td>
          </tr>
       </tbody>
    </table>
</figure>

出力したいマークアップ

<figure class=”wp-block-table”>の中に１階層divを追加したいとします。

<figure class="wp-block-table">
     //このdiv階層を追加したい。
    <div class="add-markup">
       <table>
          <tbody>
             <tr>
                <td>aaa</td><td>bbb</td></tr><tr><td>ccc</td><td>ddd</td>
            </tr>
          </tbody>
        </table>
     </div>
</figure>

コード

functions.php

function modify_content_markup( $content ) {
    // 正規表現を使って、置換するための変数を定義
    $pattern = '/<figure class="wp-block-table"><table>(.*?)<\/table><\/figure>/';
    $replacement = '<figure class="wp-block-table"><div class="add-markup"><table>$1</table></div></figure>';

    // 置換を実行する
    $modified = preg_replace( $pattern, $replacement, $content );

    // 変更後の記事本文を返す
    return $modified;
}

// the_contentフィルターにフック
add_filter( 'the_content', 'modify_content_markup' );