Làm cách nào để thêm lớp CSS vào logo tùy chỉnh?

Tôi đã kích hoạt custom-logocho chủ đề của mình và để nó được in <?php the_custom_logo(); ?>vào tiêu đề. Có bất kỳ cơ hội nào để chỉ cần thêm một số lớp nữa vào hình ảnh này trực tiếp không? Mỗi mặc định nó chỉ đi kèm custom-logo.

WordPress cung cấp một móc lọc để tùy chỉnh logo tùy chỉnh. Móc get_custom_logolà bộ lọc. Để thay đổi lớp logo, mã này có thể giúp bạn.

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

Tham khảo: Cách thay đổi logo tùy chỉnh wordpress và lớp liên kết logo

Đây là một gợi ý về cách chúng ta có thể thử thêm các lớp thông qua wp_get_attachment_image_attributesbộ lọc (chưa được kiểm tra):

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

nơi bạn điều chỉnh các lớp học theo nhu cầu của bạn.

Như bạn thấy mình the_custom_logodựa vào get_custom_logo, mà chính nó gọi wp_get_attachment_imageđể thêm custom-logolớp. Hàm sau có bộ lọc wp_get_attachment_image_attributesmà bạn có thể sử dụng để thao tác các thuộc tính hình ảnh.

Vì vậy, những gì bạn có thể làm là xây dựng một bộ lọc kiểm tra xem custom-logolớp có ở đó không và nếu có thêm nhiều lớp.

Tôi nghĩ rằng tôi đã tìm thấy một câu trả lời. Nhưng tôi thực sự tự hỏi nếu đây là cách đúng? Tôi cảm thấy hơi bẩn một chút nào đó: Tôi chỉ đơn giản là sao chép các phần liên quan đến logo từ wp-gộp / general-template.php vào hàm.php của chủ đề của tôi và đổi tên các hàm với một số lớp tùy chỉnh được thêm vào:

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

Chỉ cần cho bất cứ ai khác đang tìm kiếm giải pháp. Tôi tìm thấy điều này , mà tôi thấy rõ ràng hơn nhiều so với câu trả lời được chấp nhận.

Thêm vào đó, nó cũng cung cấp những cách đơn giản để thay đổi URL trên liên kết! Chỉ cần chi tiết hơn một chút so với câu trả lời được chấp nhận.

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