Как создать разное меню для мобильной и десктопной версии в дочерней теме twentytwelve

Question

Как создать разное меню для мобильной и десктопной версии в дочерней теме twentytwelve

26 апр. 2015 г., 16:56:32

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

Голосов: 4

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

Что я сделал до сих пор:

В файл functions.php моей дочерней темы я добавил следующий код:

     register_nav_menus( array(
     'primary' => __( 'Основная навигация', 'twentytwelve' ),
     'mobile' => __( 'Мобильная навигация', 'mobile'),
     ) );

Теперь я могу создать два меню в панели управления. (панель управления>меню>расположение)

В файле header.php я точно не знаю, что нужно изменить, чтобы загружалось мое мобильное меню вместо основного.

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <button class="menu-toggle"><?php _e( 'Меню', 'twentytwelve' ); ?></button>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Перейти к содержимому', 'twentytwelve' ); ?>"><?php _e( 'Перейти к содержимому', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

Я пытался изменить <?php _e( 'Меню', 'twentytwelve' ); ?> на <?php _e( 'Меню', 'mobile' ); ?>, но это не изменило содержимое меню на мое мобильное меню.

Я не очень хорошо знаком с этим кодом, поэтому надеюсь, кто-то сможет указать мне правильное направление.

Спасибо за помощь!

patrick

141

меню навигация мобильный theme twenty twelve

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

Комментарии

Функция wp_is_mobile не рекомендуется для изменений темы и адаптивности

Chris Pink

21 февр. 2025 г. 16:33:05

Комментарии

У меня была такая же проблема ‍♀️ Надо было догадаться... спасибо, что поделились!

ea0723

21 февр. 2022 г. 20:21:18

Nikolai 69 · Answer 1 · 2015-06-08T16:07:12Z

Как было рекомендовано в похожем посте: https://wordpress.stackexchange.com/a/156494/74343

1.) Создайте меню так, как вам нужно, и назовите их как угодно, например "mobile-menu" и "desktop-menu".

2.) В вашей дочерней теме в файле header.php вы можете переключать меню в зависимости от флага wp_is_mobile() следующим образом:

if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'menu' => 'mobile-menu' ) );
} else {
     wp_nav_menu( array( 'menu' => 'desktop-menu' ) );
}

Однако я использовал плагин "WP Responsive Menu", который позволил мне выбрать меню для мобильных устройств. В настройках "WP Responsive Menu" нужно указать элемент, который НЕ следует показывать на мобильных устройствах, в случае темы twenty twelve это: "#site-navigation".

Удачного кодинга!

Jordan 21 · Answer 2 · 2018-02-23T17:19:58Z

Если кто-то еще следит за этой веткой, я долго бился над этой проблемой, и ни одно из решений не сработало... Но я смог сделать это с помощью CSS!

По сути, создайте одно большое меню со всеми пунктами, которые вам нужны для мобильных и десктопных устройств. Затем добавьте классы: "hide-mobile" и "hide-desktop" к соответствующим пунктам меню.

Используйте этот CSS:

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}

Jordan

21

23 февр. 2018 г. 17:19:58

Jeroen Onstenk 1 · Answer 3 · 2018-08-04T15:39:02Z

В дополнение к комментарию Джордана, важно знать, как добавить класс к пункту меню в WordPress:

Чтобы добавить CSS-классы к меню WordPress, сначала перейдите в раздел "Внешний вид" > "Меню" в вашей теме WordPress. Затем найдите вкладку "Настройки экрана" в правом верхнем углу экрана. Нажмите, чтобы открыть панель, и установите флажок с надписью "CSS-классы". Выберите меню, которое хотите отредактировать, и нажмите на ссылку, к которой нужно добавить CSS-класс.

Jeroen Onstenk

1

4 авг. 2018 г. 15:39:02

BrianHenryIE 117 · Answer 4 · 2019-09-07T01:44:12Z

Другой подход, который не требует переопределения файлов/шаблонов темы:

В файле functions.php дочерней темы добавьте:

/**
 * Регистрируем расположение меню 'mobile' в WordPress, чтобы его можно было настроить в админке.
 */
register_nav_menus( array(
    'mobile' => 'Мобильное меню (заменяет основное)',
) );

/**
 * При построении меню, если используется расположение 'primary' и мы на мобильном устройстве,
 * заменяем его на расположение 'mobile'.
 * 
 * @see wp_nav_menu()
 */
add_filter( 'wp_nav_menu_args', function( $args ) {

    if( 'primary' === $args['theme_location'] && wp_is_mobile() ) {
        $args['theme_location'] = 'mobile';
    }

    return $args;
} );

Затем настройте мобильное меню в разделе wp-admin / Внешний вид / Меню.