web-dev-qa-db-ja.com

ギャラリーに追加されたクラスを指定する方法

ギャラリーのショートコードにクラスを追加したいのですが、このようにしてクラスを追加しました。

[gallery class="small" columns="2" ids="350,349,302,305"].

混乱が生じた今、私は私のCSSでクラスを指定する方法がわからない。

私が試してみました：

.small .gallery 
.gallery-1 img 
.gallery
cssgallerypost-class
6
Charne

これが3つの方法です

アプローチ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属性をネイティブギャラリーのショートコードに 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

別の方法は、いくつかの文字列の置き換えを利用して現在のクラス属性を変更することです。 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 );

例：

このショートコードを使う：

[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

ギャラリインスタンスにはデフォルトのIDセレクタを使用します。

id='gallery-1'

またはデフォルトのクラスセレクタ

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

123は現在の投稿IDです。

11
birgire