如何在PHP中正确转义内联CSS内的URL以解决WordPress混合内容报错

• 问题核心原因
  你遇到的混合内容报错和转义逻辑无关，本质是代码强制拼接了http://协议，当你的站点用HTTPS访问时，HTTP资源会被浏览器安全策略拦截。你之前的两次修改只是加了esc_url()转义，没有修改强制HTTP的逻辑，所以报错依然存在。
• 修复方案
  直接替换背景图URL的生成逻辑即可，推荐两种适配HTTPS的写法：

1. 协议相对路径写法（自动适配当前页面的HTTP/HTTPS协议）

<div class="row sal-feature-wrap" style="
   background-repeat:no-repeat; 
   background-size:100% auto; 
   background-image: url('<?php 
   // 去除左侧多余斜杠避免协议相对路径出错
   $image_base_url = ltrim($image_base_url, '/');
   echo esc_url( '//' . $image_base_url ); 
   ?>');">

2. WordPress原生SSL判断写法（兼容性更强）

<div class="row sal-feature-wrap" style="
   background-repeat:no-repeat; 
   background-size:100% auto; 
   background-image: url('<?php 
   $protocol = is_ssl() ? 'https://' : 'http://';
   $image_url = strpos($image_base_url, 'http') !== 0 ? $protocol . $image_base_url : $image_base_url;
   echo esc_url( $image_url );
   ?>');">

• 重复报错排查方向
  同一个报错出现两次，优先排查两个常见原因：

1. 该小工具在页面中被注册/调用了两次，导致同一段代码输出了两次
2. 浏览器缓存了之前的报错记录，修改代码后清空浏览器缓存、站点缓存再测试即可

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