如何指定添加到我的图库的类

时间:2015-11-10 作者:Charne

我想向我的gallery短代码中添加一个类,这是我添加类的方式:

[gallery class="small" columns="2" ids="350,349,302,305"].
现在出现了混淆,我不知道如何在css中指定类。

我尝试过:

.small .gallery 
.gallery-1 img 
.gallery

1 个回复
SO网友:birgire

这里有三种方法

方法#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 );

Example:

如果我们设置class 本机库短代码的属性为small:

[gallery class="small" columns="2" ids="350,349,302,305"].
然后HTML输出将为:

<div class="wpse-gallery-wrapper-small">
    <!-- The default gallery HTML output comes here -->
</div>
我们现在可以用.wpse-gallery-wrapper-small 类别选择器。

方法#2

另一种方法是在一些字符串替换的帮助下修改当前的class属性。让我们使用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 );

Example:

使用此短代码:

[gallery class="small" columns="2" ids="350,349,302,305"].
将提供以下HTML输出:

<style>...</style>

<div id="gallery-1" class=\'gallery wpse-gallery-small ... \'> ... </div>
其中,类选择器.wpse-gallery-wrapper-small.

方法#3使用gallery实例的默认id选择器。

id=\'gallery-1\' 
或默认类选择器:

class=\'gallery galleryid-123 gallery-columns-3 gallery-size-thumbnail\'
在哪里123 是当前帖子id。

相关推荐

在带有PHP的子主题中包含style.css

在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中,必须将下面的代码放入函数中。php的子主题,但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它,那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我,放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s