WordPress站点textarea复制时直引号变弯引号导致代码失效如何解决

该问题的根源是WordPress自带的wptexturize过滤器，默认会对所有文章内容中的直引号进行转换，替换为符合排版规范的弯引号，该规则也会作用于文章内嵌入的textarea内容，导致textarea实际渲染的内容已经是弯引号，用户复制后自然会拿到错误格式的代码。

方案1：精准关闭当前内容的引号转换规则 #

不要全站关闭wptexturize（会影响全站内容排版），你可以在输出这段textarea代码的位置，临时移除该过滤器，输出完成后再恢复：

// 临时移除引号转换过滤器
remove_filter( 'the_content', 'wptexturize' );
// 输出你的textarea代码，和你之前写的一致
echo '<textarea style="resize: none; margin: 0px; padding: 5px; max-width: 100%; height: 150px; width: 720px;" readonly="readonly">
    <a href="https://fdmotion.com">
        <img src="https://fdmotion.com/wp-content/uploads/2021/09/banner1.jpg" alt="FDMotion Custom Orthotics" />
    </a>
</textarea>';
// 恢复过滤器，不影响后续内容的排版
add_filter( 'the_content', 'wptexturize' );

如果你的这段代码是通过短代码输出的，把上面的逻辑放到短代码的处理函数里即可。

方案2：添加一键复制功能，避免手动复制的转义问题 #

直接通过JS将原始正确的代码写入用户剪贴板，完全绕过手动复制可能产生的格式转换问题，同时也提升用户体验：
首先修改你的HTML结构，增加一个复制按钮：

<textarea id="embed-code" style="resize: none; margin: 0px; padding: 5px; max-width: 100%; height: 150px; width: 720px;" readonly="readonly">
    <a href="https://fdmotion.com">
        <img src="https://fdmotion.com/wp-content/uploads/2021/09/banner1.jpg" alt="FDMotion Custom Orthotics" />
    </a>
</textarea>
<button id="copy-btn">复制引用代码</button>

然后添加对应的JS代码：

document.getElementById('copy-btn').addEventListener('click', async function() {
    const code = document.getElementById('embed-code').value;
    try {
        await navigator.clipboard.writeText(code);
        this.textContent = '复制成功';
        setTimeout(() => {
            this.textContent = '复制引用代码';
        }, 2000);
    } catch (err) {
        this.textContent = '复制失败，请手动复制';
    }
});

方案3：通过自定义字段存储引用代码 #

不需要修改过滤器规则，你可以在文章编辑页新增一个自定义字段，字段名比如embed_code，将你要输出的引用代码直接填写到自定义字段的值中，输出的时候直接调用自定义字段内容即可：

$embed_code = get_post_meta( get_the_ID(), 'embed_code', true );
if ( $embed_code ) {
    echo '<textarea style="resize: none; margin: 0px; padding: 5px; max-width: 100%; height: 150px; width: 720px;" readonly="readonly">' . esc_textarea( $embed_code ) . '</textarea>';
}

WordPress默认不会对自定义字段的内容执行wptexturize转换，所以不会出现引号被替换的问题。

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