我正在为WordPress开发一个带有下划线的主题。

当用户使用TinyMCE编辑器添加图像时，将插入以下代码：

<img class="wp-image-45 size-full aligncenter" src="http://example.com/wp-content/uploads/2016/06/process.png" alt="process" width="849" height="91" />

当我查看Wordpress生成的最后一个页面时，HTML显示在DOM中

<img class="wp-image-45 size-full aligncenter" src="http://example.com/wp-content/uploads/2016/06/process.png" alt="process" width="849" height="91" srcset="http://example.com/wp-content/uploads/2016/06/process.png 849w, http://example.com/wp-content/uploads/2016/06/process-300x32.png 300w, http://example.com/wp-content/uploads/2016/06/process-768x82.png 768w" sizes="(max-width: 849px) 100vw, 849px">

我创建了一个函数来生成一个宽度为300px的缩略图：

add_action( \'after_setup_theme\', \'images_theme_setup\' );
function images_theme_setup() {
    add_image_size( \'preload-thumb\', 300 ); // 300 pixels wide (and unlimited height)
}

现在我想使用Pil(https://github.com/gilbitron/Pil) 兼容标记以提供图像，以便我可以提供preload-thumb 然后为更大的形象服务

我需要更改标记以匹配以下内容

<figure class="pil">
    <img src="img/my-image.jpg" data-pil-thumb-url="img/thumb-my-image.jpg" data-full-width="5616" data-full-height="3744" alt="">
</figure>

function html5_insert_image($html, $id, $caption, $title, $align, $url) {
  $url = wp_get_attachment_url($id);
  $html5 = "<figure id=\'post-$id media-$id\' class=\'align-$align\'>";
  $html5 .= "<img src=\'$url\' alt=\'$title\' />";
  $html5 .= "</figure>";
  return $html5;
}
add_filter( \'image_send_to_editor\', \'html5_insert_image\', 10, 9 );

   add_filter( \'image_send_to_editor\', \'wpse_231693_img_markup\', 10, 7 );
   function wpse_231693_img_markup ($html, $id, $alt, $title, $align, $url, $size ) {
       $metadata = wp_get_attachment_metadata ($id);
       $url = wp_get_attachment_url($id);
       $html = \'<figure class="pil"><img src="\' . $url . 
               \'" data-pil-thumb-url="XXX" data-full-width="\' . $metadata[\'width\'] .
               \'" data-full-height="\' . $metadata[\'height\'] .
               \'" alt="\' . $alt . \'"></figure>\';
       return $html;
   }