WordPress の見出しにセクションリンクコピーボタンを表示する方法

function custom_toc_enqueue_scripts() {
    // Font Awesomeを読み込む
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

    // WordPress標準のClipboard.jsを読み込む
    wp_enqueue_script('clipboard', includes_url('js/clipboard.min.js'), array(), null, true);

    // カスタムスクリプトをインラインで追加
    wp_add_inline_script('clipboard', '
        function addCopyButtons() {
            document.querySelectorAll(".toc_list a").forEach(function(tocLink) {
                var targetId = tocLink.getAttribute("href").substring(1);
                var targetElement = document.getElementById(targetId);
                if (targetElement) {
                    // 既にコピーリンクボタンがあるかどうかをチェック
                    if (!targetElement.querySelector(".copy-link-button")) {
                        var button = document.createElement("button");
                        button.className = "copy-link-button";
                        button.setAttribute("data-link", "#" + targetId);
                        button.setAttribute("aria-label", "セクションのURLをコピー"); // アクセシビリティ名を追加
                        button.innerHTML = \'<i class="fa-regular fa-clipboard"></i>\';

                        targetElement.appendChild(button);
                    }
                }
            });

            var clipboard = new ClipboardJS(".copy-link-button", {
                text: function(trigger) {
                    return window.location.origin + window.location.pathname + trigger.getAttribute("data-link");
                }
            });

            clipboard.on("success", function(e) {
                alert("セクションのURLをコピーしました");
                e.clearSelection();
            });

            clipboard.on("error", function(e) {
                alert("Failed to copy link.");
            });
        }

        window.addEventListener("load", function() {
            addCopyButtons(); // 目次が完全に生成された後に実行
        });
    ');
}
add_action('wp_enqueue_scripts', 'custom_toc_enqueue_scripts');

button.innerHTML = \'<i class="fa-regular fa-clipboard"></i>\';

button.copy-link-button {
	background: none;
	border: none;
	color: #1a73e8;
	cursor: pointer;
	font-size: .8em;
	margin-left: .5em;
	opacity: .3;
}

button.copy-link-button:hover {
	opacity: 1;
}