WordPress中PHP转HTML data属性JSON出现实体编码异常

在WordPress环境下，将PHP数组通过json_encode转为JSON字符串并设置为HTML的data-tracking属性，渲染后双引号变成了"实体，此前该功能正常。

相关代码 #

function build_ga_tracking($category, $label, $action = 'click', $value = '', $event = 'event') {
  $tracking = array(
    'event' => $event,
    'category' => $category,
    'label' => $label,
    'action' => $action,
    'value' => $value
  );

  $jsonEncodedTracking = json_encode($tracking);

  return "data-tracking='".$jsonEncodedTracking."'";
}

echo("<li><a href='" . $item->url . "' " . build_ga_tracking('Primary Menu', $cleanTitle, 'Click-'.$cleanTitle) . ">" . $title . "</a></li>");

渲染后的异常HTML输出 #

<li><a href="http://localhost:8080/category/money-tips/" data-tracking="{&quot;event&quot;:&quot;event&quot;,&quot;category&quot;:&quot;Primary Menu&quot;,&quot;label&quot;:&quot;Money Tips&quot;,&quot;action&quot;:&quot;Click-Money Tips&quot;,&quot;value&quot;:&quot;&quot;}">Money Tips</a></li>

单独调用build_ga_tracking函数输出正常：

data-tracking='{"event":"event","category":"Primary Menu","label":"Money Tips","action":"Click-Money Tips","value":""}'

已尝试esc_attr()、esc_js()和wp_json_encode()，但均未解决问题。

问题原因 #

核心问题在于一次性拼接整个HTML字符串并echo时，WordPress的输出过滤机制或PHP的自动转义会将字符串中的双引号转为HTML实体。虽然函数返回的是单引号包裹的属性值，但整体输出时的转义规则触发了双引号的实体编码。

解决方案 #

方案1：拆分HTML输出步骤 #

避免将整个HTML作为单一字符串拼接输出，拆分echo语句，让属性值部分单独输出，绕过整体转义：

echo "<li><a href='" . esc_url($item->url) . "' ";
echo build_ga_tracking('Primary Menu', $cleanTitle, 'Click-'.$cleanTitle);
echo ">" . $title . "</a></li>";

方案2：优化函数与属性包裹方式 #

修改函数仅返回JSON字符串，输出时用单引号手动包裹data-tracking属性，同时使用wp_json_encode适配WordPress环境：

function build_ga_tracking($category, $label, $action = 'click', $value = '', $event = 'event') {
  $tracking = array(
    'event' => $event,
    'category' => $category,
    'label' => $label,
    'action' => $action,
    'value' => $value
  );
  // 使用wp_json_encode更适配WordPress的JSON处理
  return wp_json_encode($tracking);
}

// 输出时用单引号包裹data属性值，避免双引号被转义
echo "<li><a href='" . esc_url($item->url) . "' data-tracking='" . build_ga_tracking('Primary Menu', $cleanTitle, 'Click-'.$cleanTitle) . "'>" . $title . "</a></li>";

额外注意 #

• 务必用esc_url()处理URL，符合WordPress安全规范；
• 单引号包裹属性值时，JSON内部的双引号不会被转义为实体，能保证前端正常解析JSON数据。

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