it-swarm-ko.tech

커스텀 로고에 CSS 클래스를 추가하는 방법은 무엇입니까?

내 테마에 대해 custom-logo 를 활성화하고 <?php the_custom_logo(); ?>을 헤더에 인쇄하도록했습니다. 이 이미지에 직접 더 많은 클래스를 추가 할 수 있습니까? 기본적으로 custom-logo와 함께 제공됩니다.

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;
}

참조 : wordpress 사용자 정의 로고 및 로고 링크 클래스를 변경하는 방법

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_logoget_custom_logo 클래스를 추가하기 위해 wp_get_attachment_image 를 호출하고 custom-logo 를 사용합니다. 후자의 함수에는 이미지 속성을 조작하는 데 사용할 수있는 wp_get_attachment_image_attributes 가 있습니다.

그래서 당신이 할 수있는 것은 custom-logo 클래스가 있는지 검사하고, 그렇다면 더 많은 클래스를 추가하는 필터를 만드는 것입니다.

7
cjbj

나는 하나의 답을 찾은 것 같아요. 그러나 이것이 올바른지 궁금합니다. 어쨌든 조금 더러운 느낌이 들었습니다. wp-includes/general-template.php의 로고 관련 부분을 내 테마의 functions.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