Создание пользовательской HTML-структуры меню WordPress

Question

Я читал много статей и страниц WordPress Codex, но до сих пор не могу их понять. Я хочу создать меню с очень простой HTML-структуры, как это:

<nav class="nav"> 
    <ul class="list"> 
     <li class="item"><a class="link--active" href="#">Link 1</a></li> 
     <li class="item"><a class="link" href="#">Link 2</a></li> 
     <li class="item"><a class="link" href="#">Link 3</a></li> 
    </ul> 
</nav> 

Самое главное для меня это возможность назначать свои собственные классы для каждого элемента. Я видел очень сложные примеры, используя WP Walker класс и попытался упростить их, но он не сработал. Я уверен, что это очень легко для человека, который хорошо знает WordPress, поэтому, пожалуйста, помогите мне.

P.S. Извините за мой английский, это не мой родной язык.

Answer 1

Вам нужно будет использовать функцию wp_nav_menu.

Для вывода HTML вы перечислили выше, вы должны передать его следующим образом:

<?php wp_nav_menu(array(
    'menu' => 'Your Name for Menu', 
    'container' => 'nav', 
    'container_class' => 'nav', 
    'menu_class' => 'list' 
)); ?> 

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

Что касается добавления активного класса по ссылке, попробуйте следующий код:

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

function add_active_class($classes, $item) { 

    if(in_array('current-menu-item', $classes) || 
    in_array('current-menu-ancestor', $classes) || 
    in_array('current-menu-parent', $classes) || 
    in_array('current_page_parent', $classes) || 
    in_array('current_page_ancestor', $classes) 
) { 
    $classes[] = "active"; 
    } 
    return $classes; 
} 

Обратите внимание, что это не мой код, а фрагмент я спасен от https://wordpress.stackexchange.com/questions/112955/add-class-to-active-element-and-its-parent-in-nav-menu что я закладки при поиске то же самое без использования JavaScript.