Подсказки на компьютерную тематику

Можно подсмотреть, если забыли…

Как добавить классы CSS в меню WordPress при использовании Bootstrap

Если надо изменить меню WordPress (Вордпресс – рус.)

    Указанный код добавьте в файл functions.php и тогда получится использовать классы CSS в меню одной из популярных CMS при использовании стилей Bootstrap.

  • удаление всех классов в тегах li

    add_filter('nav_menu_css_class', '__return_false');
  • добавление стилей меню в контейнерах li

    add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

    function special_nav_class ($classes, $item) {
    $classes[] = 'nav-item';//название класса Bootstrap
    return $classes;
    }

  • добавить классы ссылкам a в пунктах li

    add_filter( 'nav_menu_link_attributes', 'nav_menu_link_attributes', 10, 4 );

    function nav_menu_link_attributes( $atts, $item, $args, $depth ) {
    $atts['class']='nav-link btn btn-outline-primary m-1';//название классов Bootstrap
    if ( $item->current ) {
    $atts['class'] .= ' active';//добавляем класс текущей активной ссылке, нужен пробел впереди!!!
    }
    if( $args->theme_location === 'first' ){// theme_location выбранного меню Вордпресс
    $atts['class'] .= ' bg-warning';//название класса Bootstrap, нужен пробел впереди!!!
    }
    return $atts;
    }

  • добавление классов пунктам li конкретного меню по его theme_location

    add_filter( 'nav_menu_css_class', 'change_menu_item_css_classes', 10, 4 );

    function change_menu_item_css_classes( $classes, $item, $args, $depth ) {
    if( $args->theme_location === 'first' ){
    $classes[] = '';
    }
    return $classes;
    }

Как добавить классы CSS в меню WordPress при использовании Bootstrap

Если надо изменить меню WordPress (Вордпресс – рус.)

    Указанный код добавьте в файл functions.php и тогда получится использовать классы CSS в меню одной из популярных CMS при использовании стилей Bootstrap.

  • удаление всех классов в тегах li

    add_filter('nav_menu_css_class', '__return_false');
  • добавление стилей меню в контейнерах li

    add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

    function special_nav_class ($classes, $item) {
    $classes[] = 'nav-item';//название класса Bootstrap
    return $classes;
    }

  • добавить классы ссылкам a в пунктах li

    add_filter( 'nav_menu_link_attributes', 'nav_menu_link_attributes', 10, 4 );

    function nav_menu_link_attributes( $atts, $item, $args, $depth ) {
    $atts['class']='nav-link btn btn-outline-primary m-1';//название классов Bootstrap
    if ( $item->current ) {
    $atts['class'] .= ' active';//добавляем класс текущей активной ссылке, нужен пробел впереди!!!
    }
    if( $args->theme_location === 'first' ){// theme_location выбранного меню Вордпресс
    $atts['class'] .= ' bg-warning';//название класса Bootstrap, нужен пробел впереди!!!
    }
    return $atts;
    }

  • добавление классов пунктам li конкретного меню по его theme_location

    add_filter( 'nav_menu_css_class', 'change_menu_item_css_classes', 10, 4 );

    function change_menu_item_css_classes( $classes, $item, $args, $depth ) {
    if( $args->theme_location === 'first' ){
    $classes[] = '';
    }
    return $classes;
    }