使用 Figure/Figcaption 插入图片 | CSS-Tricks

适用于简单的插件或 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 );

Robert Mayer

# 2012年8月18日

哦，我的天哪！谢谢！！！很棒的功能！如此简单，但功能强大！

Namanyay Goel

# 2012年11月19日

网址不起作用，有人能帮忙吗？ :/

Jan

# 2012年11月28日

这不起作用，因为 $url 指的是图片链接的包装，而不是图片源 URL。
但即使你使用 wp_get_attachment_image_src() 或 get_image_tag() 生成图片，所见即所得编辑器也不会接受 figure 元素，并且每次保存文章时都会在它前面和后面添加新行。
我决定为此使用短代码，并在渲染文章时交换图片。

Ahrengot

评论永久链接# 2012年12月6日

我也有这些问题，最重要的是我似乎找不到编辑器中选择的尺寸（大、中、缩略图），而 wp_get_attachment_image_src() 需要它作为参数。

John O'Nolan

# 2012年12月10日

$url 参数只需要稍作调整，添加一行代码即可 - 请尝试以下操作


/**
 * Swap P Tags for Figure Tags on Images
 */
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' />";
    if ($caption) {
    $html5 .= "<figcaption>$caption</figcaption>";
    }
    $html5 .= "</figure>";
    return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

John O'Nolan

评论永久链接# 2012年12月10日

注意：此过滤器总体而言（原始版本和我的版本）不具有追溯性。它仅筛选通过编辑器插入帖子的图片 - 它不会更正已发布帖子的任何图片。
John O'Nolan

评论永久链接# 2012年12月10日

第二点说明：图片插入帖子后，您将无法再为其添加标题。必须在插入图片时添加标题。如果您已添加图片并希望为其添加标题，请从帖子编辑器中删除图片，然后重新插入并添加标题。

Kyle

# 2013年1月7日

现在有个问题 - 所有这些都运行良好，但是如果我想将该图片包装在 a href 标签中怎么办？似乎无法包含链接，在插入时会将其删除。当然，我可以手动操作，但这似乎违背了此方法的初衷。我并不是 PHP 或 WordPress 方面的专家，所以不想搞砸任何重要的事情（似乎像在标题中添加“if (urllink)”之类的东西一样简单，但同样，不想搞砸）。

Attila Hajzer

# 2013年11月6日

这一行代码的作用是什么？

add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

它的用途是什么？它是如何工作的？

kadir

# 2014年3月14日

致 Kyle 以及可能以后来此的人。
向标签中添加 URL 参数非常简单。

只需将函数更改为
function html5_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt) { $url = wp_get_attachment_url($id); $src = wp_get_attachment_image_src( $id, $size, false ); $html5 = "<a href='$url'><figure class='align$align'>"; $html5 .= "<img src='$src[0]' alt='$alt' />"; if ($caption) { $html5 .= "<figcaption>$caption</figcaption>"; } $html5 .= "</figure></a>"; return $html5; } add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

Pedro Xaramillo

# 2015年1月9日

我刚刚尝试了 Kadir 基于 Chris 的代码链接的那个，它在 WordPress 4.1 中似乎工作正常，无论是新帖子还是之前的帖子。感谢 Kadir 和 Chris！

Nick Toye

# 2015年1月28日

好的，如果您更改图片的对齐方式，此方法将不起作用。我的意思是，如果您在图片对话框中将其设置为右对齐，则不会发生任何事情。因此，您必须在弹出栏中设置它。

但是，如果您需要将其切换为左对齐，它就不会更新。

Todd

# 2015年1月28日

您也可以更新 [caption] 短代码。

if ( !function_exists('update_caption_shortcode') ) {

    function update_caption_shortcode ($val, $attr, $content = null) {

        $a = shortcode_atts(array(
            'id' => '',
            'align' => 'alignnone',
            'width' => '',
            'caption' => ''
        ), $attr);

        $html = '<figure id="'.esc_attr($a['id']).'" class="wp-post-attachment '.esc_attr($a['align']).'" style="width:'.esc_attr($a['width']).'px;">';
        $html .= do_shortcode($content);
        if ( $a['caption'] !== '' ) {
            $html .= '<figcaption class="wp-caption">' . esc_attr($a['caption']) . '</figcaption>';
        }
        $html .= '</figure>';

        return $html;
    }
    add_filter( 'img_caption_shortcode', 'update_caption_shortcode', 10, 3 );
}

major_tom

# 2017年3月28日

你好，

此时，插入后无法进行任何编辑（对齐）。

zerosignalproductions 创建了一个 gist，支持锚点和 tinymce 用于删除带有图片的 figure 标签 https://gist.github.com/zerosignalproductions/8325712

我将其修改为还支持使用鼠标悬停按钮更改对齐方式： https://gist.github.com/netzgestaltung/7722e46cb39eca253afb2f7b724d511d

也许有人会发现它有用……

Nathalie Bergeron

# 2019年3月16日

我认为您需要在第一行添加此内容
$url = wp_get_attachment_url($id);

评论

发表评论 取消回复

发表评论取消回复