web-dev-qa-db-ja.com

HTML5の<figure>タグとキャプション機能を使ってWordPressに画像を挿入する

WordPressのメディアアップローダを使って画像をアップロードしてからエディタに挿入すると、幅と高さの属性も付属します（eg width="440" height="340"）

しかし今、私は以下のコード（ source ）を使ってimageタグを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 );
functionsfilterseditorcustomization
1
Learning by doing

幅と高さは[1]と[2]です。そのため、これらはimgタグに追加されています。テーマに html5キャプションのサポートがある場合 - キャプションがある場合、これは破損したhtmlを出力します（最近はかなり標準的です）。

キャプションがあるかどうかをチェックしてWPショートコードを返すか、キャプションがない場合はFigureマークアップを使用するように修正しました。テストして動作します。

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