it-roy-ru.com

Логотип с несколькими изображениями для темы

У моего веб-сайта есть логотип, и у этого логотипа есть 2 состояния (то есть онлайн и оффлайн). У каждого из них есть изображение, которое будет загружено на носитель. Я пытаюсь добиться того, чтобы при наведении курсора состояние логотипа менялось (это можно сделать довольно легко). Однако, чтобы легко отслеживать изображение логотипа, я хочу разрешить теме поддерживать custom_logo через add_theme_support. Это работает на полпути, что означает, что я могу контролировать только 1 изображение в данный момент. Могу ли я позволить добавить 2 разных изображения из настройки темы (логотип) и отобразить их? заранее спасибо

1
Tree Nguyen

Я предполагаю, что под онлайн и оффлайн вы подразумеваете активные состояния логотипа. Я думаю, что есть несколько вариантов для вас. Первые две опции можно использовать в вашей теме, а затем просто изменить файл изображения в каталоге.

Вариант первый (без использования WP):

Вы можете использовать простое использование прозрачности. Примените прозрачный эффект к логотипу, а затем наведите курсор мыши, сделайте прозрачность полной. Например:

.logo {
    opacity: 0.75;
}

.logo:hover {
    opacity: 1;
}

// If you want to use SASS:

.logo {
    opacity: 0.75;

    &:hover {
        opacity: 1;
    }
}

Вариант второй (без использования WP):

Если вам нужно использовать изображения вместо эффекта наведения, то вы можете попробовать следующее (снова используя классы):

.logo {
    background-image: url('path/to/your-off-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Have to set a width/height in order for the background to appear
    height: 200px;
}

.logo:hover {
    background-image: url('path/to/your-on-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

// If you want to use SASS:

.logo {
    background-image: url('path/to/your-off-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Have to set a width/height in order for the background to appear
    height: 200px;

    &:hover {
        background-image: url('path/to/your-on-image.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
}

Вариант третий (используя настройщик в WP):

Взято из WP Документов по настройке

С помощью этой опции вы должны зарегистрировать настройку, используя следующее:

function mytheme_customize_register( $wp_customize ) {
    //All our sections, settings, and controls will be added here

    $wp_customize->add_section( 'my_site_logo' , array(
        'title'      => __( 'My Site Logo', 'mytheme' ),
        'priority'   => 30,
    ) );

    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            'logo',
            array(
               'label'      => __( 'Upload a logo', 'theme_name' ),
               'section'    => 'my_site_logo',
               'settings'   => 'my_site_logo_id' 
            )
        )
    );

}
add_action( 'customize_register', 'mytheme_customize_register' );

Приведенный выше код будет добавлен в файл functions.php, который должен находиться в каталоге вашей темы. Для того, чтобы получить изображение вы делаете следующее:

get_theme_mod( 'my_site_logo_id' );

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

Пожалуйста, проверьте кодекс, чтобы проверить различные варианты, которые вы можете иметь, чтобы достичь того, чего вы хотите.

2
EBennett

При использовании add_theme_support('custom-logo'); загрузчик логотипа, который добавляется в раздел Site Identity, будет использовать WP_Customize_Image_Control, который не поддерживает несколько изображений, только для 1.

Более простое решение :

Добавьте второй элемент управления чуть ниже одного WordPress с этим кодом:

function your_theme_customizer_setting($wp_customize) {
// add a setting 
    $wp_customize->add_setting('your_theme_hover_logo');
// Add a control to upload the hover logo
    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'your_theme_hover_logo', array(
        'label' => 'Upload Hover Logo',
        'section' => 'title_tagline', //this is the section where the custom-logo from WordPress is
        'settings' => 'your_theme_hover_logo',
        'priority' => 8 // show it just below the custom-logo
    )));
}

add_action('customize_register', 'your_theme_customizer_setting');

используйте его с get_theme_mod( 'your_theme_hover_logo' ).

Комплексное решение :

Создайте свой собственный элемент управления, который будет принимать 2 изображения.

2
David Lee

по умолчанию вы можете иметь только одно изображение в качестве логотипа, но его можно расширить до двух с помощью другого пользовательского элемента управления в настройщике wp.

другое решение - использовать одно изображение с активным и парящим состояниями. и управляйте видом с помощью свойства css position, как старый способ использования значков изображений.

например, вы можете иметь высоту изображения 100 пикселей. 50px будет содержать логотип по умолчанию, а другие 50px будут содержать логотип при наведении. затем по умолчанию показывают высоту изображения от 0 до 50 пикселей, а когда оно активно или находится в режиме наведения, меняют положение фона с 50 на 100 пикселей. высота обертки изображения должна быть 50px с overflow:hidden

0
Anwer AR