wordpress建站公司 如何指定一个类添加到我的画廊

我想在我的图库短代码中添加一个类，这就是我添加类的方式：

.

现在混乱来了，我不确定如何在我的 css 中指定类。

我努力了：

.small .gallery 
.gallery-1 img 
.gallery

下面介绍三种方法

方法#1

用自定义 HTML 包装输出是很常见的。 我们可以通过使用 post_gallery 过滤器和 gallery_shortcode() 打回来：

/**
 * HTML Wrapper - Support for a custom class attribute in the native gallery shortcode
 */
add_filter( 'post_gallery', function( $html, $attr, $instance )
{
    if( isset( $attr['class'] ) && $class = $attr['class'] )
    {
        // Unset attribute to avoid infinite recursive loops
        unset( $attr['class'] ); 

        // Our custom HTML wrapper
        $html = sprintf( 
            '<div class="wpse-gallery-wrapper-%s">%s</div>',
            esc_attr( $class ),
            gallery_shortcode( $attr )
        );
    }

    return $html;

}, 10 ,3 );

例子：

如果我们设置 class 将原生图库短代码归为 小的:

.

那么 HTML 输出将是：

<div class="wpse-gallery-wrapper-small">
    <!-- The default gallery HTML output comes here -->
</div>

我们现在可以用 .wpse-gallery-wrapper-small 类选择器。

方法#2

另一种方法是在一些字符串替换的帮助下修改当前类属性。 让我们使用 post_gallery 和 gallery_style 一起过滤：

/**
 * HTML Replacement - Support for a custom class attribute in the native gallery shortcode
 */
add_filter( 'post_gallery', function( $html, $attr, $instance )
{
    add_filter( 'gallery_style', function( $html ) use ( $attr )
    {
        if( isset( $attr['class'] ) && $class = $attr['class'] )
        {
            unset( $attr['class'] );

            // Modify & replace the current class attribute
            $html = str_replace( 
                "class="gallery ",
                sprintf( 
                    "class="gallery wpse-gallery-%s ",
                    esc_attr( $class )
                ),
                $html
            );
        }
        return $html;
    } );

    return $html;
}, 10 ,3 );

例子：

使用此简码：

.

将给出以下 HTML 输出：

<style>...</style>

<div id="gallery-1" class="gallery wpse-gallery-small ... "> ... </div>

类选择器在哪里 .wpse-gallery-wrapper-small.

方法#3

使用图库实例的默认 ID 选择器。

id='gallery-1' 

或默认类选择器：

class="gallery galleryid-123 gallery-columns-3 gallery-size-thumbnail"

在哪里 123 是当前的帖子 ID。