为包含两张图片的 WordPress `<div>` 元素添加类，轻松自定义图片样式

2024-03-17 02:15:19

为 WordPress 图片元素中的 <div> 添加类

在 WordPress 中处理图片元素时，有时您可能希望自定义包含图片的 <div> 元素的外观。本文将指导您为包含两张图片的 <div> 元素添加一个类，从而允许您使用 CSS 进行自定义样式。

问题

WordPress 默认情况下不会自动为图片元素周围的 <div> 添加类。因此，如果您希望对包含多张图片的 <div> 元素进行样式化，则需要手动添加类或使用其他方法。

解决方案

要解决此问题，您可以使用以下 PHP 代码：

// 将类添加到包含两张图片的 `<div>` 元素中
function add_class_to_image_div( $content ) {
    if ( preg_match_all( '/<div class="wp-block-image">.*?<img.*?>.*?<img.*?>.*?<\/div>/', $content, $matches ) ) {
        foreach ( $matches[0] as $match ) {
            $content = str_replace( $match, '<div class="wp-block-image sideBySide">' . $match, $content );
        }
    }
    return $content;
}
add_filter( 'the_content', 'add_class_to_image_div' );

此代码使用正则表达式搜索包含两张图片的 <div> 元素。如果找到这样的元素，它将添加一个名为“sideBySide”的类。您可以使用 CSS 为此类添加样式，从而对包含多张图片的 <div> 元素进行自定义样式化。

Gutenberg 编辑器

对于 Gutenberg 编辑器，您需要使用以下代码：

// 将类添加到包含两张图片的 `<div>` 元素中（Gutenberg 编辑器）
function add_class_to_image_div_gutenberg( $block_content, $block ) {
    if ( $block['blockName'] === 'core/image' ) {
        if ( count( $block['innerBlocks'] ) === 2 ) {
            $block_content = str_replace( '<div class="wp-block-image">', '<div class="wp-block-image sideBySide">', $block_content );
        }
    }
    return $block_content;
}
add_filter( 'render_block', 'add_class_to_image_div_gutenberg', 10, 2 );