[Помогите] Подсветка активного пункта самодельного меню

Тема в разделе "Wordpress", создана пользователем iga, 27 окт 2015.

  1. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    Есть шаблон, вёрстаный на bootstrap. В нём есть меню вида:
    HTML:
    <div id="menu">
        <div class="container">
            <div class="row hidden-sm">
                  <div class="col-lg-2 col-md-2 col-sm-4"><a href="/punkt1" class="btn btn-primary" alt="">Пункт1</a></div>
                  <div class="col-lg-2 col-md-2 col-sm-4"><a href="/punkt2" class="btn btn-primary" alt="">Пункт2</a></div>
                  <div class="col-lg-3 col-md-3 col-sm-4"><a href="/punkt3" class="btn btn-primary" alt="">Пункт3</a></div>          
                  <div class="col-lg-3 col-md-3 col-sm-0"><a href="/punkt4" class="btn btn-primary" alt="">Пункт4</a></div>
                  <div class="col-lg-2 col-md-2 col-sm-0"><a href="/punkt5" class="btn btn-primary" alt="">Пункт5</a></div>
                  <div class="hidden-lg hidden-md hidden-sm"><a href="/punkt6" class="btn btn-primary" alt="">Пункт6</a></div>
                  <div class="hidden-lg hidden-md hidden-sm"><a href="/punkt7" class="btn btn-primary" alt="">Пункт7</a></div>
            </div>
        </div>
    </div>
    Задача: подсветить активный пункт меню(раздела, в котором находится пользователь).

    Знаю про возможность wordpress создавать меню из админки, но не знаю как быть с тем, что у меня пункты 6 и 7 появляются только при малых разрешениях.

    Может можно как-то организовать выделение, не перелопачивая код в ul и li?

    P.S. У Гугла спрашивал, ничего не помогло :(
     
  2. Bnopen

    Bnopen Команда форума

    Регистрация:
    3 мар 2013
    Сообщения:
    1.264
    Симпатии:
    534
    iga, можно попробовать использовать Bootstrap Scrollspy Plugin
     
  3. VaLeXaR

    VaLeXaR

    Регистрация:
    24 мар 2015
    Сообщения:
    61
    Симпатии:
    86
    Можна поставить проверку на текущий урл.
    Код:
    <a href="/punkt1" class="btn btn-primary<?php if($_SERVER['REQUEST_URI'] == '/punkt1') echo ' active';?>" alt="">Пункт1</a>
    А вообще, меню Bootstrap делаю через
    wp-bootstrap-navwalker
    https://github.com/twittem/wp-bootstrap-navwalker

    Если нужно добавить некоторым пунктам меню свои классы, то и для этого есть плагин. Хотя бы и этот https://ru.wordpress.org/plugins/custom-menu-class/
     
  4. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    VaLeXaR, Да, я уже примастырил похожую конструкцию
    Код:
    <?php if (is_category(2)) echo ' active'; ?>
    Минус такого способа только в том, что если зайти на страницу поста, то кнопка гаснет.
     
  5. VaLeXaR

    VaLeXaR

    Регистрация:
    24 мар 2015
    Сообщения:
    61
    Симпатии:
    86
    Так в том и прикол. Вы выводите ссылки не встроенными средствами. Поэтому я для постройки меню использую или wp-bootstrap-navwalker, или выстраиваю его через wp_nav_menu. Вы же можете зменить функцию wp_nav_menu и внести свои параметры. Тогда меню будет выводится встроенными средствами и система сможет отследить активность пункта меню.
     
  6. Marrie

    Marrie

    Регистрация:
    7 сен 2015
    Сообщения:
    51
    Симпатии:
    10
    скачать валкер и зарегистрировать меню в functions.php:

    function wp_setup() {
    require 'inc/general/class-Upbootwp_Walker_Nav_Menu.php';
    register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'Primary' ),
    ) );

    }

    add_action( 'after_setup_theme', 'wp_setup' );

    Создать в админке меню и вывести его в шапке:


    <?php
    $args = array('theme_location' => 'primary',
    'menu_class' => 'nav navbar-nav',
    'container'=>false,
    'fallback_cb' => '',
    'menu_id' => 'main-menu',
    'walker' => new Walker_Nav_Menu());
    wp_nav_menu($args);
    ?>