Как добавить CSS класс к пользовательскому логотипу?

16 июн. 2016 г., 13:14:28
Просмотры: 30.2K
Голосов: 22

Я активировал custom-logo для моей темы и вывожу его с помощью <?php the_custom_logo(); ?> в шапке сайта. Есть ли возможность просто добавить дополнительные классы к этому изображению напрямую? По умолчанию оно имеет только класс custom-logo.

0
Все ответы на вопрос 7
1
27

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

18 июн. 2016 г. 08:48:29
Комментарии

Спасибо, это работает отлично!

Чем больше я на это смотрю, тем больше мне грустно.

get_custom_logo() должен принимать строку классов и не требовать фильтра. Также у него должна быть возможность выводить HTML-ссылку или нет.

Adam Patterson Adam Patterson
30 мар. 2020 г. 06:38:35
1
15

Вот один из возможных способов добавления классов через фильтр 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;
} );

где вы можете настроить классы в соответствии с вашими потребностями.

16 июн. 2016 г. 13:46:23
Комментарии

Спасибо, ваше решение работает лучше всего.

S1awek S1awek
17 янв. 2020 г. 12:18:16
0

Как вы уже обнаружили, функция the_custom_logo использует get_custom_logo, которая в свою очередь вызывает wp_get_attachment_image для добавления класса custom-logo. Последняя функция имеет фильтр wp_get_attachment_image_attributes, который можно использовать для изменения атрибутов изображения.

Таким образом, вы можете создать фильтр, который проверяет наличие класса custom-logo и, если он есть, добавляет дополнительные классы.

16 июн. 2016 г. 13:43:16
0

Для всех, кто ищет решения. Я нашел это, и мне кажется, что это гораздо понятнее, чем принятый ответ.

Плюс здесь даны простые способы изменить 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;   
} 
26 июн. 2019 г. 14:48:28
0

Я нашел одно решение. Но мне действительно интересно, правильный ли это подход? Он кажется немного "грязным": я просто скопировал части кода, связанные с логотипом, из 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', // добавил классы здесь
                '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 );
}
16 июн. 2016 г. 13:29:13
0

Вы можете использовать фильтр get_custom_logo_image_attributes

add_filter( 'get_custom_logo_image_attributes', function(  
$custom_logo_attr, $custom_logo_id, $blog_id  )
{
    $custom_logo_attr['class'] = 'your-custom-class';

    return $custom_logo_attr;
} ,10,3);
21 апр. 2022 г. 21:17:30
0

Одно небольшое изменение к ответу @Dhinju Divakaran выше. Сначала замените строку "custom-logo-link", а затем "custom-logo", так как "custom-logo" внутри "custom-logo-link" также заменялся. Ниже обновлённый код.

function change_logo_class($html) {
    
    $html = str_replace('custom-logo-link', 'navbar-brand', $html);
    $html = str_replace('custom-logo', 'img-fluid', $html);
    return $html;
}
add_filter( 'get_custom_logo', 'change_logo_class' );
31 мая 2024 г. 13:53:34