Question

我遇到了一个问题，我正在尝试使用内联样式设置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缺少并替换为空格。所以背景图像看起来像：

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

这是wordpress正在“帮助”我的保护吗？不管怎么说？

Answer 1

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

但是，我发现，如果你取出引号并只打印没有引号的链接，它就可以了。

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

这是前面的答案基本上所做的，而不是使用printf。

Answer 2

试试这个

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] );     
}

?>>

Answer 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中测试）查看

Answer 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>';

您需要将双引号和单引号还原。

Wordpress短代码从内联样式中剥离斜线？

4 个答案: