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

Question

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

18 февр. 2017 г., 17:42:33

Просмотры: 16.9K

Голосов: 4

На моем сайте есть логотип, который имеет два состояния (например, онлайн и офлайн). Для каждого состояния есть отдельное изображение, загружаемое в медиабиблиотеку. Я хочу, чтобы при наведении курсора состояние логотипа менялось (это можно легко реализовать). Однако, чтобы упростить управление изображениями логотипа, я хочу добавить поддержку custom_logo через add_theme_support. Пока это работает лишь частично - я могу управлять только одним изображением. Есть ли способы добавить два разных изображения через настройки темы (custom logo) и отображать их? Заранее спасибо.

Tree Nguyen

153

темы логотип

Комментарии

Встроенная поддержка пользовательского логотипа в теме позволяет использовать только 1 изображение. Вам необходимо создать собственный элемент настройки или просто добавить второй элемент загрузки изображения под стандартным и использовать его как изображение при наведении.

David Lee

18 февр. 2017 г. 18:31:34

Все ответы на вопрос

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

Простое решение:

Добавьте второй элемент управления прямо под стандартным с помощью этого кода:

function your_theme_customizer_setting($wp_customize) {
    // Добавляем настройку
    $wp_customize->add_setting('your_theme_hover_logo');
    // Добавляем элемент управления для загрузки логотипа при наведении
    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'your_theme_hover_logo', array(
        'label' => 'Загрузить логотип для наведения',
        'section' => 'title_tagline', // Это раздел, где находится custom-logo из WordPress
        'settings' => 'your_theme_hover_logo',
        'priority' => 8 // Показываем прямо под стандартным логотипом
    )));
}

add_action('customize_register', 'your_theme_customizer_setting');

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

Сложное решение:

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

David Lee

3.94K

18 февр. 2017 г. 21:28:43

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

Другое решение — использовать одно изображение, содержащее оба состояния: обычное и при наведении. И управлять отображением с помощью свойства CSS position, как это делалось в старом способе использования иконок.

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

Anwer AR

1.01K

18 февр. 2017 г. 21:10:36

Комментарии

интересный способ. Никогда не думал и не знал о таком подходе в CSS. Обязательно попробую :). Спасибо

Tree Nguyen

19 февр. 2017 г. 01:02:09

Не рекомендуется возиться с настройщиком для этого. Проще найти, переопределить и изменить логотип, который является частью CSS-файла, чем пытаться разобраться, где вы разместили опцию для его управления. Количество усилий, необходимых для написания и тестирования решения, не оправдано. Дополнительным преимуществом является то, что весь код можно поместить под GIT и отслеживать изменения логотипа.

(Очевидно, что темы, которые распространяются, нуждаются в такой опции, но, по моему мнению, для темы, разрабатываемой под конкретный сайт, это бесполезная функция)

Mark Kaplun

23.7K

18 февр. 2017 г. 21:35:45

EBennett 316 · Accepted Answer · 2017-02-18T21:03:58Z

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

###Вариант первый (без использования WP): Вы можете использовать простой эффект прозрачности. Примените эффект прозрачности к логотипу, а при наведении сделайте его полностью непрозрачным. Например:

.logo {
    opacity: 0.75;
}

.logo:hover {
    opacity: 1;
}

// Если вы хотите использовать SASS:

.logo {
    opacity: 0.75;

    &:hover {
        opacity: 1;
    }
}

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

.logo {
    background-image: url('путь/к/вашему-офф-изображению.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Нужно задать ширину/высоту, чтобы фон отображался
    height: 200px;
}

.logo:hover {
    background-image: url('путь/к/вашему-он-изображению.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

// Если вы хотите использовать SASS:

.logo {
    background-image: url('путь/к/вашему-офф-изображению.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Нужно задать ширину/высоту, чтобы фон отображался
    height: 200px;

    &:hover {
        background-image: url('путь/к/вашему-он-изображению.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
}

###Вариант третий (использование кастомайзера в WP): Взято из документации WP Customiser

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

function mytheme_customize_register( $wp_customize ) {
    //Все наши секции, настройки и элементы управления будут добавлены здесь

    $wp_customize->add_section( 'my_site_logo' , array(
        'title'      => __( 'Логотип моего сайта', 'mytheme' ),
        'priority'   => 30,
    ) );

    // Добавляем настройку для второго изображения логотипа
    $wp_customize->add_setting('second_logo', array(
        'default' => '',
        'sanitize_callback' => 'esc_url_raw',
    ));

    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            'logo',
            array(
               'label'      => __( 'Загрузить логотип', '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' );

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

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