因此，我试图在帖子中自定义单个图像的输出，添加自定义div和类。我在网上找到了一个很好的教程-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编辑器中文本的输出：

<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>

以下是我在视觉上的Wordpress WYSIWIG编辑器中输入的内容：

请让我知道，如果你有任何建议，如何让这个工作正常。如果你知道在帖子上编辑单个插入图像的另一种解决方案，我很想听听。我尽量不影响任何其他插入的媒体，如图库，因此任何只过滤帖子中的img标签的东西都不会有帮助。

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