Question

然后你将媒体添加到wordpress主题的帖子中，比如图像，总是这样：

<img src="http://localhost:8888/example/wp-content/uploads/example.jpg" alt="leaf graphic" title="leaf graphic" class="alignright size-medium wp-image-3109" height="25" width="30"/>

但我的目标是将我添加到div中的任何图像包装在div中，如下所示：

<div class="card">
<img class="img-fluid" src="http://localhost:8888/example/wp-content/uploads/example.jpg" alt="" />
</div>

有没有办法做到这一点？

Answer 1

您可以使用 media_send_to_editor 过滤器。当您将任何媒体插入编辑器时，它会通过该过滤器。

add_filter('media_send_to_editor', 'inserted_image_div', 10, 3 );

function inserted_image_div( $html, $send_id, $attachment )
{
    return '<div class="card">'.$html.'</div>';
}

Answer 2

如果您尝试用标题包装图像，这将不起作用，因为WordPress在将图像和标题输出到屏幕时会使用短代码。在这种情况下，似乎完全忽略了media_send_to_editor过滤器。

要包装带有标题的图像，您需要编辑简码的输出。

add_filter( 'img_caption_shortcode', 'my_img_caption_shortcode', 10, 3 );

function my_img_caption_shortcode( $empty, $attr, $content ){
    $attr = shortcode_atts( array(
        'id'      => '',
        'align'   => 'alignnone',
        'width'   => '',
        'caption' => ''
    ), $attr );

    if ( 1 > (int) $attr['width'] || empty( $attr['caption'] ) ) {
        return '';
    }

    if ( $attr['id'] ) {
        $attr['id'] = 'id="' . esc_attr( $attr['id'] ) . '" ';
    }

    return '<div ' . $attr['id']
    . 'class="wp-caption ' . esc_attr( $attr['align'] ) . '" '
    . 'style="max-width: ' . ( 10 + (int) $attr['width'] ) . 'px;">'
    . '<div class="CLASS-NAME-HERE">' . do_shortcode( $content ) . '</div>'
    . '<p class="wp-caption-text">' . $attr['caption'] . '</p>'
    . '</div>';

}

do_shortcode($content)输出图像，因此该行是您添加包装div或其他容器的地方：

'<div class="CLASS-NAME-HERE">' . do_shortcode( $content ) . '</div>'

请参见https://codex.wordpress.org/Plugin_API/Filter_Reference/img_caption_shortcode

如何在the_content（）中的div中包装图像;？

2 个答案: