自定义WordPress ACF代码字段HTML内容渲染异常求助

后端ACF字段渲染修正 #

你的后端代码存在两个关键问题：

1. 使用print_r()是错误的，它用于打印变量结构（比如数组），而非输出字符串内容，且echo print_r(...)会额外输出布尔值1（因为print_r默认直接输出，返回值为true）。
2. 未正确转义HTML特殊字符，导致浏览器将输入的HTML渲染为元素而非源码。

修正后的渲染函数：

public function render_field($field) {
    // 使用WordPress原生的esc_textarea函数转义特殊字符，适配textarea场景
    $escaped_value = esc_textarea($field['value']);
    ?>
    <textarea name="<?php echo esc_attr($field['name']); ?>"><?php echo $escaped_value; ?></textarea>
    <?php
}

• esc_textarea()会自动处理<、>、&等特殊字符，同时保留换行符，确保textarea中显示的是纯源码文本而非渲染后的HTML元素。
• 注意textarea标签要闭合紧凑，避免换行导致内容前出现多余空格。

前端Twig输出适配 #

前端要确保Prism能正确识别并高亮HTML源码，需保证<code>标签内输出的是转义后的特殊字符（而非原始HTML）。根据后端存储内容的不同，分两种情况处理：

情况1：后端存储原始HTML字符串（推荐） #

Twig默认会自动转义HTML特殊字符，直接输出即可：

{% set bem = bem | extenBem('code-editor', alias) %}

{% block template %}
<pre class="{{ bem.classString }}">
<code>
{{ code }}
</code>
</pre>
{% endblock %}

情况2：后端存储已转义的HTML字符串 #

使用|raw过滤器避免Twig双重转义：

{% set bem = bem | extenBem('code-editor', alias) %}

{% block template %}
<pre class="{{ bem.classString }}">
<code>
{{ code | raw }}
</code>
</pre>
{% endblock %}

额外注意事项 #

• 不要使用contenteditable div作为编辑区域，它会自动解析HTML，很难避免渲染问题，textarea是纯文本编辑的最佳选择。
• 存储数据时，确保ACF字段的存储逻辑是保存原始输入的字符串（转义仅用于显示，而非存储），这样后续前端和后端都能灵活处理。

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