我想在标记周围包装一些html(div和类)(通过图像精灵创建照片角的外观)。
基本上,我想通过函数文件中的一些代码在内容中重写WP添加的所有标记,如下所示:
<a href="#link"><img src="image.jpg" class="someclass"></a>
对此:
<div class="featured-img">
<a rel="#lightbox" href="#link" class="#lightboxclass"><img src="image.jpg" class="someclass"></a>
<div class="corner-nw"></div>
<div class="corner-ne"></div>
<div class="corner-sw"></div>
<div class="corner-se"></div>
</div>
我希望在我或任何其他添加内容的人添加/编辑页面后完成此操作。我试过使用
wp_get_attachment_image 使用下面的函数,它只在第一次将图像添加到编辑内容屏幕时添加html。此外,当图像本身在编辑框中拖动或可能被删除时,html的残余部分就会被弄乱。
function image_corners( $html, $id, $alt, $title ){
$html = \'<div class="featured-img"><img src="\' . esc_attr($img_src) . \'" alt="\' . esc_attr($alt) . \'" title="\' . esc_attr($title).\'" \'.$hwstring.\'class="\'.$class.\'" /><div class="corner-nw"></div><div class="corner-ne"></div><div class="corner-sw"></div><div class="corner-se"></div></div>\';
return $html;
}
add_filter(\'wp_get_attachment_image\',\'image_corners\',10,4);
似乎我用过滤器或挂钩查看的每个选项都只在编辑屏幕的添加图像步骤中添加它。我弄错了吗?我可以使用jquery选项在页面加载时/加载后更改html,但我不太确定如何编写,也不确定是否有必要?感谢您的帮助!
最合适的回答,由SO网友:onetrickpony 整理而成
一种方法是动态执行此操作:
function do_the_replacements($matches){
// $matches[0] = full string
// $matches[1] = link attributes
// $matches[2] = link contentes (the image)
// change \'someclass\' here...
if(strpos($matches[2], \'someclass\') !== false){
return \'
<div class="featured-img">
<a \'.$matches[1].\'>\'.$matches[2].\'</a>
<div class="corner-nw"></div>
<div class="corner-ne"></div>
<div class="corner-sw"></div>
<div class="corner-se"></div>
</div>
\';
}
// no matches, leave it as it is
return $matches[0];
}
function my_content_filter($content){
return
preg_replace_callback(\'#\\<a(.+?)\\>(.+?)\\<\\/a\\>#s\', \'do_the_replacements\', $content);
}
add_filter(\'the_content\', \'my_content_filter\');