사용자 정의 로고에 CSS 클래스를 추가하는 방법은 무엇입니까?


18

custom-logo테마를 사용하도록 설정 <?php the_custom_logo(); ?>하고 헤더에 인쇄했습니다 . 이 이미지에 클래스를 직접 더 추가 할 기회가 있습니까? 기본적으로는와 함께 제공됩니다 custom-logo.

답변:


16

워드 프레스는 사용자 정의 로고 사용자 정의에 필터 후크를 제공합니다. 후크 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

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

필요에 따라 수업을 조정합니다.


7

자신 이 클래스 를 추가하기 위해 호출하는에 the_custom_logo의존한다는 것을 알았습니다 . 후자의 함수에는 이미지 속성을 조작하는 데 사용할 수 있는 필터 가 있습니다.get_custom_logowp_get_attachment_imagecustom-logowp_get_attachment_image_attributes

그래서 당신이 할 수있는 일은 custom-logo클래스가 있는지 확인 하고 그렇다면 클래스를 추가하는지 확인하는 필터를 작성하는 것 입니다.


2

하나의 답변을 찾았습니다. 그러나 이것이 올바른 방법인지 궁금합니다. 어쨌든 조금 더럽습니다 : 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 );
}

1

솔루션을 찾는 다른 사람에게만 해당됩니다. 나는 이것을 받아 들였다. 허용 된 답변보다 훨씬 명확하다.

또한 링크의 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;   
} 
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.