WordPress开发bookmarklet短代码插件运行报错排查

代码报错来自三个核心问题：

• 书签脚本结构错误：makeRed、makeWhite两个函数定义放在了立即执行函数（IIFE）外部，javascript:协议前缀位置错误，点击链接时函数无法被正确识别，直接触发引用错误。
• 未做URL编码：放在href属性内的JS代码包含大量引号、空格、特殊字符，会直接破坏HTML属性的闭合规则，既会导致HTML解析异常，也会触发JS语法错误。
• 转义逻辑冲突：heredoc段内选择器的反斜杠转义双引号，在拼接HTML时会提前闭合href属性，直接导致属性值截断。

直接替换原有插件代码即可，功能和你原本测试可用的bookmarklet完全一致，点击后会先闪红1秒提示执行成功，再自动展开所有额外示例面板：

<?php
/**
 * Plugin Name:       N-bookmarklet
 * Description:       Bookmarklets
 * Version:           0.1
 * Requires at least: 5.8.1
 * Requires PHP:      7.2
 * Author:            Nonverbis
 */

function oald() {
    // 展开牛津学习者词典额外示例板块
    $js = <<<END
javascript:(function(){
    function makeRed(){
        document.body.style.backgroundColor = "red";
    }
    function makeWhite(){
        document.body.style.backgroundColor = "white";
    }

    makeRed();
    setTimeout(makeWhite, 1000);

    var elements = document.querySelectorAll('.unbox[unbox="extra_examples"]');
    for (const elem of elements) {
        elem.classList.add("is-active");
    }
})();
END;
    // 对JS做URL编码，适配href属性格式要求
    $encodedJs = rawurlencode($js);
    return '<a href="' . $encodedJs . '">Oxford Extra</a>';
}

add_shortcode( 'n-oald', 'oald' );

• 把所有JS逻辑全部收拢到IIFE内部，javascript:前缀放在代码最开头，和你原本测试可用的bookmarklet结构保持一致，不存在作用域问题。
• 选择器外层改用单引号包裹，内部属性选择器用双引号，不需要额外加反斜杠转义，从根源避免转义冲突。
• 用PHP原生rawurlencode()函数对JS代码做URL编码，自动把特殊字符转为URL安全格式，和标准bookmarklet的格式完全一致，不会破坏HTML属性结构。
• 修正了原插件头描述里的拼写错误（Bookmarkets改为Bookmarklets）。

内容的提问来源于stack exchange，提问作者Kifsif