Wordpress 短代码从内联样式中去除斜线？答案

【问题标题】：Wordpress shortcode strips slashes from inline style?Wordpress 短代码从内联样式中去除斜线？
【发布时间】：2023-03-12 11:24:01
【问题描述】：

我在尝试使用内联样式设置 div 的背景图像时遇到问题（以显示帖子中的特色图像）。简码类似于：

[all-systems]

处理函数是这样的：

$markup = '';

$img = get_the_thumbnail(...); 

// if I die($img) at this point, I am getting a valid link to my image like
// http://somedomain.com/wp-content/uploads/2015/03/pic.jpg

$markup .= "<div style='background-image('" . $image . "')>...</div>";

return $markup;

短代码吐出的结果标记是正确的，但我的background-image url 中的/ 缺失并替换为空格。所以背景图像实际上看起来像：

http:  mydomain.com wp-content upload 2015 03 pic.jpg

这是 wordpress 正在“帮助”我的一项保护措施吗？反正围绕这个？

【问题讨论】：

标签： html css wordpress shortcode

【解决方案1】：

试试这个

if ( $thumbnail_id = get_post_thumbnail_id() ) {
    if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
        printf( ' style="background-image: url(%s);"', $image_src[0] );     
}

?>>

【讨论】：

【解决方案2】：

有一个关于“为什么/背后的原因”的旧讨论 here 并没有真正解决任何问题......

但是，我发现，如果您去掉引号并打印不带引号的链接，它就可以正常工作。

$markup .= "<div style='background-image(" . $image . ")>...</div>";

这就是之前的答案本质上所做的，而是使用 printf。

【讨论】：

【解决方案3】：

检查内联样式之前的 html 格式是否正确，并且没有未闭合的标签。我最近遇到了我正在编写的显示 img 标签的简码的问题。 img src 中的 url 中的斜线已从其中剥离。造成这种情况的原因是未关闭的锚标记。一旦锚标签被正确关闭，浏览器就会正确地用斜杠渲染 img src。

例如这个带有未闭合 href 的锚点：

<a href="http://en.wikipedia.org/>wikipedia</a>

在 img 标签之前会将 img src 渲染为

http:  mydomain.com wp-content upload 2015 03 pic.jpg

当通过检查元素查看时（在 Chrome 和 Safari 中测试）

【讨论】：

【解决方案4】：

问题与引号有关

你可以这样解决它：

$bg_img_url = "background-image:url('img/folder/img-name-".$variable.".jpg'); background-position:center; ";

$markup .=  '<div class="class" style="' . $bg_img_url . '"></div>';

您需要恢复双引号和单引号。

【讨论】：