【WordPress】動的に項目を追加・削除できる管理画面を作成する方法

add_action('admin_menu', function() {
      // メニュー登録
    add_menu_page('設定テスト', '設定テスト', 'manage_options' , 'my_test_option'
      , 'echo_my_test_option','',3);

    register_setting( 'test-settings-group', 'my_test_item' );

      // スクリプト登録
    add_action('admin_enqueue_scripts', function ($hook) {
      if ('my_test_option' !== substr($hook, -strlen('my_test_option'))) return;
      wp_enqueue_script('my_test_option', get_template_directory_uri() . '/my_test_option.js');
    });
});

  // 管理画面出力
function echo_my_test_option() {
  $datas = get_option('my_test_item',array());
  
?>
  <div class="wrap">
    <h2>設定テスト</h2>
    <form method="post" action="options.php">
      <?php 
        settings_fields( 'test-settings-group' );
        do_settings_sections( 'test-settings-group' );
      ?>
      <p><button id="my-test-add" type="button">項目追加</button></p>
      <table id="my-test-table" class="widefat striped">
        <thead><tr>&nbsp;<th></th><th>項目１</th><th>項目２</th><th>&nbsp;</th></tr></thead>
        <tbody id="my-test-tbody">
        <?php
            foreach( $datas as $v ){
                  echo_my_test_option_item($v['item1'],$v['item2']);
            }
        ?>
        </tbody>
      </table>
      <?php submit_button(); ?>
    </form>
    <?php
    echo '<template id="my-test-template">';
    echo_my_test_option_item( '' , '' );
    echo '</template>';
    ?>
  </div>
<?php
}
  // tr要素の生成
function echo_my_test_option_item($value1,$value2) {

  $tag = '<tr><th scope="row" class="my-test-number"></th>'
  .'<td><input type="text" class="my-test-item" data-itemname="[item1]" value="%s"></td>'
  .'<td>'
  .'<textarea class="my-test-item" data-itemname="[item2]" rows="7">%s</textarea>'
  .'</td>'
  .'<td>'
  .'<button class="my-test-del" type="button">削除</button>&nbsp;'
  .'<button class="my-test-up" type="button">▲</button>&nbsp;'
  .'<button class="my-test-down" type="button">▼</button>'
  .'</td>'
  .'</tr>';
  
  echo sprintf( $tag , esc_attr($value1) , esc_textarea($value2) );
}

document.addEventListener("DOMContentLoaded",()=>{
    const tbody = document.getElementById("my-test-tbody");
    const template = document.getElementById("my-test-template");

        // 追加ボタン押下処理
    document.getElementById("my-test-add")
        .addEventListener("click", () => {addNode();renumber();});
    // TRの新規追加
    const addNode = () => {
        // テンプレートから複製を作成
        const node = template.content.firstElementChild.cloneNode(true);
        // テーブルに追加
        tbody.appendChild(node);
    };
    
        // テーブル内ボタン押下の処理
    tbody.addEventListener('click', event => event.target.eventFunc?.());
        // 削除処理・上移動処理・下移動処理
    const deleteTr = function () {this.remove(); renumber();};
    const upTr = function () { this.myTestData?.prevTr.before(this); renumber(); };
    const downTr = function () { this.myTestData?.nextTr.after(this); renumber(); };

        // ボタンと呼び出される関数の定義
    const btmEvent = [
        { class:"my-test-del",func:deleteTr},
        { class: "my-test-up", func: upTr },
        { class: "my-test-down", func: downTr }
    ];

    // name属性の更新
    const renumber =()=>{
        const trNode = tbody.getElementsByTagName("tr");
            // テーブルにtrが無い=>追加して再実行
        if (trNode.length === 0) { addNode(); renumber();return}

        for (let i = 0; i < trNode.length; i++) {
            const node = trNode[i];
                
            if(node.myTestData === undefined ){
                  // ボタンにイベント関数をセット
                btmEvent.forEach(e => node.getElementsByClassName(e.class)[0]
                        .eventFunc = e.func.bind(node));
                  // 入力項目を抽出
                node.myTestData = { items:Array.from(node.getElementsByClassName("my-test-item")) };
            }
                // 行番号のセット
            node.getElementsByClassName("my-test-number")[0].innerText
                = (i+1).toString();
                // name属性のセット
            node.myTestData.items.forEach(
                e=>e.setAttribute('name', `my_test_item[${i}]${e.dataset.itemname}`));
                // 前後のTRへの参照セット
            node.myTestData.prevTr = i === 0 ? null : trNode[i-1];
            node.myTestData.nextTr = i === trNode.length-1 ? null : trNode[i + 1];
        };
    };

    renumber();
});