web-dev-qa-db-ja.com

カスタムロゴにCSSクラスを追加する方法

私は自分のテーマに対して custom-logo を有効にして、それを<?php the_custom_logo(); ?>でヘッダに表示させました。この画像に直接いくつかのクラスを直接追加する機会はありますか？デフォルトではcustom-logoだけがあります。

theme-developmentthemescssadd-theme-supportlogo
17
leymannx

WordPressはカスタムロゴのカスタマイズにフィルターフックを提供します。フックget_custom_logoはフィルタです。ロゴクラスを変更するには、このコードが役に立ちます。

add_filter( 'get_custom_logo', 'change_logo_class' );


function change_logo_class( $html ) {

    $html = str_replace( 'custom-logo', 'your-custom-class', $html );
    $html = str_replace( 'custom-logo-link', 'your-custom-class', $html );

    return $html;
}

参照： ワードプレスのカスタムロゴとロゴリンククラスを変更する方法

14
Dhinju Divakaran

これがwp_get_attachment_image_attributesフィルターを通してクラスを追加しようとする方法の提案です（未テスト）。

add_filter( 'wp_get_attachment_image_attributes', function( $attr )
{
    if( isset( $attr['class'] )  && 'custom-logo' === $attr['class'] )
        $attr['class'] = 'custom-logo foo-bar foo bar';

    return $attr;
} );

ニーズに合わせてクラスを調整します。

12
birgire

ご存じのとおり、the_custom_logoは get_custom_logo に依存しています。これは、 wp_get_attachment_image を呼び出してcustom-logoクラスを追加します。後者の関数には、 wp_get_attachment_image_attributes というフィルタがあり、これを使って画像の属性を操作できます。

だからあなたができることはcustom-logoクラスがそこにあるかどうかをチェックし、もしあればさらにクラスを追加するフィルタを構築することです。

7
cjbj

一つの答えを見つけたと思います。しかし、これが正しい方法であるかどうか本当に疑問に思いますか？それはどういうわけかちょっと汚い感じがします：私は単にロゴ関連の部分を私のテーマのfunctions.phpにwp-includes/general-template.phpからコピーして、いくつかのカスタムクラスを追加して名前を変更しました：

function FOOBAR_get_custom_logo( $blog_id = 0 ) {
    $html = '';

    if ( is_multisite() && (int) $blog_id !== get_current_blog_id() ) {
        switch_to_blog( $blog_id );
    }

    $custom_logo_id = get_theme_mod( 'custom_logo' );

    if ( $custom_logo_id ) {
        $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
            esc_url( home_url( '/' ) ),
            wp_get_attachment_image( $custom_logo_id, 'full', false, array(
                'class'    => 'custom-logo FOO-BAR FOO BAR', // added classes here
                'itemprop' => 'logo',
            ) )
        );
    }

    elseif ( is_customize_preview() ) {
        $html = sprintf( '<a href="%1$s" class="custom-logo-link" style="display:none;"><img class="custom-logo"/></a>',
            esc_url( home_url( '/' ) )
        );
    }

    if ( is_multisite() && ms_is_switched() ) {
        restore_current_blog();
    }

    return apply_filters( 'FOOBAR_get_custom_logo', $html );
}

function FOOBAR_the_custom_logo( $blog_id = 0 ) {
    echo FOOBAR_get_custom_logo( $blog_id );
}
2
leymannx

ソリューションを探している他の誰かのためだけに。 私はこれを見つけました 、受け入れられた答えよりもはるかに明確です。

さらに、リンク上のURLも簡単に変更できます！受け入れられた答えよりももう少し詳細。

add_filter( 'get_custom_logo', 'add_custom_logo_url' );
function add_custom_logo_url() {
    $custom_logo_id = get_theme_mod( 'custom_logo' );
    $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
            esc_url( 'www.somewhere.com' ),
            wp_get_attachment_image( $custom_logo_id, 'full', false, array(
                'class'    => 'custom-logo',
            ) )
        );
    return $html;   
}
1
Fred Bradley