Menu for WordPress

от 

 <menu class="navbar-nav m-auto py-0">
                <ul>
                    <li class="nav-item nav-link active">
                        <a href="#home" class="nav-link">Home</a>                    
                    </li>
                    <li class="nav-item nav-link">
                        <a href="#about" class="nav-link">About</a>
                    </li>
                    <li class="nav-item nav-link">
                        <a href="#qualification" class="nav-link">Quality</a>
                    </li>
                    <li class="nav-item nav-link">
                        <a href="#skill" class="nav-link">Skill</a>
                    </li>
                    <li class="nav-item nav-link">
                        <a href="#service" class="nav-link">Service</a>
                    </li>
                    <li class="nav-item nav-link">
                        <a href="#portfolio" class="nav-link">Portfolio</a>
                    </li>
                    <li class="nav-item nav-link">
                        <a href="#testimonial" class="nav-link">Review</a>
                    </li>
                    <li class="nav-item nav-link">
                        <a href="#blog" class="nav-link">Blog</a>
                    </li>
                    <li class="nav-item nav-link">
                        <a href="#contact" class="nav-link">Contact</a>                    
                    </li>

                </ul>
            </menu>

Шаг 1: Регистрация меню в файле functions.php

Откройте файл functions.php вашей темы (или дочерней темы) и добавьте следующий код для регистрации нового меню:

 

function register_my_menus() {
    register_nav_menus(
        array(
            'header-menu' => __( 'Header Menu' )
        )
    );
}
add_action( 'init', 'register_my_menus' );

Этот код регистрирует новое меню под названием «Header Menu», которое можно будет использовать в вашей теме.

 

Шаг 2: Добавление меню через админ-панель

  1. Перейдите в административную панель WordPress.
  2. В левом меню выберите «Внешний вид» → «Меню» .
  3. Нажмите кнопку «Создать новое меню» .
  4. Введите название меню, например, «Header Menu».
  5. Добавьте страницы или ссылки в меню, используя блоки справа.
  6. После добавления всех элементов меню, убедитесь, что выбрано место отображения меню («Header Menu») и нажмите «Сохранить меню» .
 

Шаг 3: Вывод меню в шаблоне

Теперь, когда меню зарегистрировано и создано, вам нужно вывести его в нужном месте вашего шаблона. Например, если вы хотите вывести меню в заголовке сайта, откройте файл header.php вашей темы и добавьте следующий код:

 

 

<nav class="navbar-nav m-auto py-0">
    <?php
    wp_nav_menu( array(
        'theme_location' => 'header-menu',
        'container'      => false,
        'menu_class'     => '',
        'walker'         => new Custom_Walker_Nav_Menu()
    ) );
    ?>
</nav>

Шаг 4: Создание кастомного Walker для стилизации

Для того чтобы меню имело ту же структуру и классы, которые вы указали в исходном HTML, вам нужно создать кастомный Walker. Откройте файл functions.php и добавьте следующий код:

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = null ) {
        // Не выводим ничего для уровней вложенности
    }

    function end_lvl( &$output, $depth = 0, $args = null ) {
        // Не выводим ничего для уровней вложенности
    }

    function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'nav-item';
        $classes[] = 'nav-link';

        if ( in_array( 'current-menu-item', $classes ) ) {
            $classes[] = 'active';
        }

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );

        $output .= '<li class="' . esc_attr( $class_names ) . '">';

        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

    function end_el( &$output, $item, $depth = 0, $args = null ) {
        $output .= "</li>\n";
    }
}

Этот код создает кастомный Walker, который будет генерировать HTML с нужными классами и структурой.

Заключение

Теперь ваше меню должно быть правильно зарегистрировано, создано и выведено на сайте с использованием стилей и структуры, которые вы указали в исходном HTML. Вы можете дополнительно настроить стили CSS для вашего меню, чтобы он выглядел так, как вам нужно.