使用HTML5<Figure>标签和标题功能在WordPress中插入图像

时间：2017-03-10 作者：Learning by doing

当我通过WordPress媒体上传器上传图像，然后将其插入编辑器时，它还附带了宽度和高度属性(eg width="440" height="340")

但现在我使用以下代码(source) 将图像标记替换为figure。不幸的是width 和height 缺少属性。知道如何将它们插入吗？

    function html5_insert_image( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
        $src  = wp_get_attachment_image_src( $id, $size, false );
        $html5 = "<figure id=\\"post-$id media-$id\\" class=\\"align-$align\\">";

        if ( $url ) {
        $html5 .= "<a href=\\"$url\\" class=\\"image-link\\"><img src=\\"$src[0]\\" alt=\\"$alt\\" /></a>";
        } else {
            $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 );

1 个回复
最合适的回答,由SO网友:Christina 整理而成

宽度和高度为[1] 和[2]. 因此，这些都添加在img标签上。如果主题具有html5 caption support 如果你有一个标题的话，这会输出扭曲的html（现在很标准）。

Corrected to check if there is a caption and return the WP shortcode or if no caption, then use the figure markup. Tested and works.

function html5_insert_image( $html, $id, $caption, $title, $align, $url, $size, $alt ) {

    if( empty( $caption ) ) :

        $src  = wp_get_attachment_image_src( $id, $size, false );

        $html = "<figure id=\\"post-$id media-$id\\" class=\\"align-$align\\">";

        if ( $url ) {
            $html .= "<a href=\\"$url\\" class=\\"image-link\\"><img src=\\"$src[0]\\" width=\\"$src[1]\\" height=\\"$src[2]\\" alt=\\"$alt\\" /></a>";
        } else {
            $html .= "<img src=\\"$src[0]\\" width=\\"$src[1]\\" height=\\"$src[2]\\" alt=\\"$alt\\" />";
        }

        $html .= "</figure>";

    endif;

    return $html;

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

标签： functions   filters   editor   customization   小码农  

相关推荐

Problem in functions.php file

我正在尝试使用functions.php. 以下是我迄今为止所做的工作： <?php function blogroom() { wp_enqueue_style(\'bootstrap\', get_stylesheet_directory_uri() . \'/assets/lib/bootstrap/dist/css/bootstrap.min.css\'); wp_enqueue_style(\'loade