自定义帖子上的单个图像

Question

所以我试图在我的帖子中自定义单个图像的输出，添加自定义div和类。我在网上找到了一个很好的教程 - https://wordpress.stackexchange.com/questions/21474/how-to-wrap-every-image-in-a-post-with-a-div

该功能的作用是，当我添加图像时，它将其放入a中。然后直接显示$ html img并且不显示包含$ url的链接作为href。这不是一个大问题，我可以随时处理返回的$ html内容。

我遇到的主要问题是当我在Wordpress中的插入图像下添加一个段落时，段落文本也包含在一个。

这里的功能是：

add_filter( 'image_send_to_editor', 'wp_image_wrap_init', 10, 8 );    
function wp_image_wrap_init( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
    return '

     <div id="js-simple-lightbox Testing" class="cbp">
        <div class="cbp-item">
            <a href="'. $url . '" data-title="Workout Buddy<br>by Tiberiu Neamu">
              <div class="cbp-caption-defaultWrap">'. $html .'</div>
              </a>
            </div><!-- end cbp-item -->
        </div>
    </div>';


}

这是Wordpress WYSIWIG编辑器中Text：

的输出

<div id="js-simple-lightbox Testing" class="cbp">
<div class="cbp-item">
<div class="cbp-caption-defaultWrap"><a href="http://mountfairfarm-wp/wp-content/uploads/2015/10/Screen-Shot-2015-10-28-at-1.46.05-AM1.png"><img class="alignnone size-full wp-image-243 img-responsive" src="http://mountfairfarm-wp/wp-content/uploads/2015/10/Screen-Shot-2015-10-28-at-1.46.05-AM1.png" alt="Screen Shot 2015-10-28 at 1.46.05 AM" width="290" height="381" /></a></div>
</div>
</div>
<div class="cbp-caption-defaultWrap"></div>
<div class="cbp-caption-defaultWrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula magna tristique, porta diam ornare, lacinia arcu. Sed ac augue mi. In purus turpis, imperdiet eget dui id, convallis sodales velit. Etiam ante lorem, aliquam vitae neque quis, pretium bibendum nisl. Nullam pellentesque leo dui, et lobortis est ornare non. Morbi suscipit orci a tellus vehicula vehicula a a justo. Suspendisse aliquet mattis nunc,</div>
<div class="cbp-caption-defaultWrap"></div>
<div class="cbp-caption-defaultWrap">
<div id="js-simple-lightbox Testing" class="cbp">
<div class="cbp-item">
<div class="cbp-caption-defaultWrap"><a href="http://mountfairfarm-wp/wp-content/uploads/2015/10/Screen-Shot-2015-10-28-at-1.46.10-AM1.png"><img class="alignnone size-full wp-image-241 img-responsive" src="http://mountfairfarm-wp/wp-content/uploads/2015/10/Screen-Shot-2015-10-28-at-1.46.10-AM1.png" alt="Screen Shot 2015-10-28 at 1.46.10 AM" width="268" height="440" /></a></div>
</div>
<!-- end cbp-item -->

</div>
</div>

这是我在Visualpress上使用Wordpress WYSIWIG编辑器的内容：

如果您对如何正常工作有任何建议，请与我们联系。如果您知道在帖子上编辑单个插入图像的另一种解决方案，我很乐意听到。我试图不影响任何其他插入的媒体，如画廊，所以在帖子中过滤img标签的任何东西都不会有帮助。

已更新

我在函数的回调中有一个额外的div，但是当我改变它时它仍然有同样的问题。见下图。

Answer 1

你的功能有太多的div。请改用：

add_filter( 'image_send_to_editor', 'wp_image_wrap_init', 10, 8 );    
function wp_image_wrap_init( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
    return '

     <div id="js-simple-lightbox Testing" class="cbp">
        <div class="cbp-item">
            <a href="'. $url . '" data-title="Workout Buddy<br>by Tiberiu Neamu">
              <div class="cbp-caption-defaultWrap">'. $html .'</div>
              </a>
            </div><!-- end cbp-item -->
        </div>';


}

Answer 2

我得到的最佳答案是在section标记的末尾添加一个＆amp; nbsp函数回调html。这迫使curser脱离了Wordpress的WYSIWIG中的section wrapper。它不是完美的修复，但它有效。

function html5_insert_image($html, $id, $caption, $title, $alt, $align, $url) {
$url = wp_get_attachment_url($id);
$html5 = "<section class='js-simple-lightbox'>";
$html5 .= "<figure class='cbp-item'>";
$html5 .= "<a  class='cbp-lightbox' data-title='$title' href='$url'>";
$html5 .= "<img class='img-responsive' src='$url' alt='$alt' width='100%' />";
$html5 .="</a>";
$html5 .= "</figure>";
$html5 .= "</section>&nbsp;";
return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );