从媒体上传器中插入图片到图元素

用于你的 functions.php 文件或功能插件

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

它还会获取你输入的标题，并在 <figure> 标签中作为 <figcaption> 插入。示例插入代码

<figure id='post-18838 media-18838' class='align-none'>
  <img src='//youresite.com/wp-content/uploads/2012/10/image.png' alt='Title of image'>
  <figcaption>Caption for image</figcaption>
</figure>

Caspar Hübinger

# 2012年11月19日

这很好，但可以改进。:)

function html5_insert_image($html, $id, $caption, $title, $align, $url) {
  $src  = wp_get_attachment_image_src( $id, $size, false );
  $html5 = "<figure id='post-$id media-$id' class='align$align'>";
  $html5 .= "<img src='$src[0]' alt='$title' width='$src[1]' height='$src[2]' />";
  $html5 .= "</figure>";
  return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

请注意，$url 并不保存图片的源 URL，而是“添加媒体”窗口中“链接 URL”字段的值。通过 wp_get_attachment_image_src() 和 $id 获取实际的图片源 URL 会更加安全。

就我而言，我也会放弃 $caption 部分，这应该通过 image_add_caption_shortcode 过滤器来完成。但是上面的函数 *可以* 使用一个语句来为图片添加可选的链接。

Jeff Byrnes

评论永久链接# 2013年6月23日

@Caspar

感谢你的提醒；我似乎找不到关于 image_add_caption_shortcode 过滤器的任何文档，你愿意对此进行扩展或指引我到一些文档吗？

@Chris，感谢你去年发布了这个，它真的救了我的项目！

Karl

# 2012年12月20日

糟糕，这在 WordPress 3.5 中似乎不起作用。我无法理解为什么没有人发现这个代码片段一开始就无法运行，但快速切换到运行 3.4 的本地主机显示它可以正常运行。问题是：发生了什么变化/坏了？

祝一切顺利，Karl

Taylor McRae

# 2013年3月2日

我真的很喜欢这个小片段！刚刚在我的最新版本中尝试了一下，它完美运行！感谢分享，Chris！

Elie Herrera

# 2013年9月17日

在 3.6.1 上不起作用
有什么更改可以使其适应新版本吗？

此致

Jeff Byrnes

评论永久链接# 2013年9月17日

在我的 3.6.1 安装中可以正常运行。

Jovian

# 2013年10月23日

这种图片的 HTML 自定义代码存在一个问题
如果你尝试删除帖子中嵌入的图片，WYSIWYG 只是删除了 <img/>（或 <a><img/></a>），但保留了 <figure>"blank"</figure>。
这真的很糟糕。我需要找到解决方案……任何帮助都欢迎。即使只是指明正确的搜索方向也会不胜感激。

John King

# 2013年10月29日

您好，感谢上面所有的帮助。在 WP 3.7 中，我在这页面的代码方面遇到了几个困难。我已经尝试修改了代码，现在我使用以下代码来输出漂亮的 HTML 图像和标题

function html5_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt) {
  $src  = wp_get_attachment_image_src( $id, $size, false );
  $html5 = "<figure class='align$align'>";
  $html5 .= "<img src='$src[0]' alt='$alt' />";
  if ($caption) {
    $html5 .= "<figcaption>$caption</figcaption>";
  }
  $html5 .= "</figure>";
  return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

Mixa

# 2014年10月13日

感谢各位，但是如果一些图片有指向大尺寸图片的链接怎么办？

Arnd

# 2014年10月20日

感谢这个技巧，但 Jovian 说的没错：它不能与 TinyMCE 一起使用。因此，它实际上毫无用处 - 当最终用户尝试删除或移动图片时，一切都会乱七八糟。:-(
有什么想法吗，大家……？

Roman

评论永久链接# 2015年10月26日

老帖子，但也许这对某些人有帮助
https://gist.github.com/zerosignalproductions/8325712

Tobias

# 2015年10月28日

感谢你的代码！我也希望这个代码能够使用响应式图片，我其实不是程序员，但这就是我让它工作的方法，使用选定的尺寸作为备用，请告诉我如何更智能地编写代码，我在将所有数组放在一行时遇到了问题，因此出现了多行的“$html .=”

function html5_insert_image($html, $id, $caption, $title, $align, $url, $size) {
    $src = wp_get_attachment_image_src( $id, $size, false );
    $srclarge = wp_get_attachment_image_src( $id, large, false );
    $srcmedium = wp_get_attachment_image_src( $id, medium, false );
    $srcsmall = wp_get_attachment_image_src( $id, thumbnail, false );
    $html5 = "<figure id='post-$id media-$id' class='align$align'>";
    $html5 .= "<img src='$src[0]' srcset='";
    $html5 .= "$srcsmall[0] 320w, ";
    $html5 .= "$srcmedium[0] 640w, ";
    $html5 .= "$srclarge[0] 1100w";
    $html5 .= "' alt='$title' />";
    $html5 .= "<figcaption>$caption</figcaption>";
    $html5 .= "</figure>";
    return $html5;
  }
  add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

Greg Ledger

# 2016年1月7日

@ Tobias
这很酷，而且效果很好，但是……
我可以注释掉哪些代码行来删除 srcset？

Bane

# 2016年4月23日

如何在另一个表单上的特定“添加媒体”按钮上添加过滤器？

Nick

# 2018年8月24日

如果你想要在用户删除照片时删除 <figure> 元素（或你用它来包装图片的任何其他父元素），这里有一个我编写的很小的 TinyMCE 插件，你可以将其整合到 WP 中

tinymce.PluginManager.add( 'advanced_image', function( editor, url ) {
  editor.on('NodeChange', function (e) { // check everytime a node is changed
    var text = editor.getBody(); // grab editor content
    var $images = $(text).find('figure'); // grab all figure elements (images)

    $images.each(function() { // loop through each found figure (image)
      if(!$('img', this).length) { // check if the figure is empty (an image was removed)
        $(this).remove(); // remove it!
      }
    });
  });
});

评论

发表回复 取消回复

发表回复取消回复