我已经花了几个小时来解决这个问题,但是我似乎找不到解决问题的方法,因此我认为外表确实会有所帮助。
我已经编写了WordPress短代码,以更好地管理我的投资组合中的延迟加载图片。我正在使用占位符URL-encoded SVG来防止内容回流。
svg存储在变量中并包含引号。 SVG将与其余的短代码一起返回。但是,不会返回SVG的xmlns元素周围的引号。
这是我的代码:
function img_shortcode( $atts , $content = null ) {
// Attributes
$atts = shortcode_atts(
array(
'caption' => 'no',
'src' => '',
'name' => 'media',
'captionclass' => 'caption',
'width' => '0',
'height' => '0',
),
$atts,
'img'
);
$urlsvg = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ". $atts['width'] ." ". $atts['height'] ."'%3E%3C/svg%3E";
if($atts['caption'] == 'yes')
{
return '<figure class="container"><img class="lozad" src="' . $urlsvg . '" data-src="' . $atts['src'] . '" alt="' . $atts['name'] . '" /><figcaption class="' . $atts['captionclass'] . '">'.$content.'</figcaption></figure>';
}
else{
return '<img class="lozad" src="' . $urlsvg . '" data-src="' . $atts['src'] . '" alt="' . $atts['name'] . '" />';
}
}
add_shortcode( 'img', 'img_shortcode' );
这是返回的内容:
<figure class="container"><img class="lozad" src="data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox='0 0 1300 1248'%3E%3C/svg%3E" data-src="linktotheimage" alt="alttextofimg"><figcaption class="caption">Caption text.</figcaption></figure>
我绝不是php专家,实际上我确定我缺少对其他所有人来说最明显的东西,但我似乎无法看到阻止我的引号出现的原因回到。
我试图用双引号替换单引号,结果是相同的。
谢谢
答案 0 :(得分:0)
尝试在引号周围使用反斜杠: 代替
$urlsvg = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ". $atts['width'] ." ". $atts['height'] ."'%3E%3C/svg%3E";
尝试
$urlsvg = "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox='0 0 ". $atts['width'] ." ". $atts['height'] ."'%3E%3C/svg%3E";
反斜杠应该可以解决所有问题。
答案 1 :(得分:0)
不确定为什么xmlns='..'
的字符串中不返回单引号,而对于viewBox='..'
的字符串却不返回。您的代码似乎很好。
您可以尝试使用名为escaping的东西,在其中使用反斜杠(\
)删除字符具有的任何特殊含义。因此,例如,您可以在代码中编写
$urlsvg = "data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ". $atts['width'] ." ". $atts['height'] ."\"%3E%3C/svg%3E";
仅使用双引号。
编辑:导致此问题的原因是所谓的“ HTML Minifier”,它删除了"
或'
字符。