Нужна помощь с добавлением пользовательского меню и подменю в WordPress.

Я настроил свое HTML-пользовательское меню, и оно отлично работает для статического шаблона. Я хочу преобразовать его в меню навигации WordPress. Я совершенно нов в WordPress и хочу помощи, чтобы преобразовать HTML-меню в WordPress.

Вот HTML-код:

<div id="cs-header-menu">
                <div class="cs-container">
                    <!-- Основная навигация -->
                    <div class="cs-toggle-main-navigation"><i class="fa fa-bars"></i></div>
                    <nav id="cs-main-navigation" class="cs-clearfix">
                        <ul class="cs-main-navigation cs-clearfix">
                            <li class="current-menu-item"><a href="#"><span>Главные страницы</span></a>
                                <ul class="sub-menu">
                                    <li><a href="index-1.html">Главная страница 1</a></li>
                                    <li><a href="index-2.html">Главная страница 2</a></li>
                                    <li><a href="index-3.html">Главная страница 3</a></li>
                                    <li><a href="index-4.html">Главная страница 4</a></li>
                                </ul>
                            </li>
                            <li><a href="blog_layout_1.html">Образ жизни</a></li>
                            <li><a href="blog_layout_1.html">Красота</a></li>
                            <li><a href="blog_layout_1.html">Путешествия</a></li>
                        </ul>
                    </nav>
                    <!-- Иконка поиска -->
                    <div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
                    <!-- Форма поиска -->
                    <div id="cs-header-menu-search-form">
                        <div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
                        <form>
                            <input type="text" placeholder="Введите и нажмите Enter...">
                        </form>
                    </div>
                </div>
            </div>
        </div>

Я не знаю, как использовать классы и идентификаторы для div, nav, ul и li, а также для элементов подменю. Поделитесь работой, пожалуйста. Заранее спасибо.

Используйте этот код ниже для динамического меню:

                        <?php
                            $args = array(
                            'theme_location'    => '',
                            'menu'              => 'Main',
                            'container'         => 'false',
                            'container_class'   => '',
                            'container_id'      => '',
                            'menu_class'        => 'cs-main-navigation cs-clearfix',
                            'menu_id'           => '',
                            'echo'              => true,
                            'fallback_cb'       => 'wp_page_menu',
                            'before'            => '',
                            'after'             => '',
                            'link_before'       => '',
                            'link_after'        => '',
                            'items_wrap'        => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                            'depth'             => 0,
                            //'walker'            => new my_custom_walker_nav_menu()
                            );

                        wp_nav_menu ($args);
                                  ?>
                    </nav>
                    <!-- Иконка поиска -->
                    <div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
                    <!-- Форма поиска -->
                    <div id="cs-header-menu-search-form">
                        <div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
                        <form>
                            <input type="text" placeholder="Введите и нажмите Enter...">
                        </form>
                    </div>
                </div>
            </div>
        </div>

Для получения дополнительной информации, пожалуйста, смотрите Это ….. Надеюсь, это решит вашу проблему

<div id="cs-header-menu">
    <div class="cs-container">
        <!-- Основная навигация -->
        <div class="cs-toggle-main-navigation"><i class="fa fa-bars"></i></div>
            <nav id="cs-main-navigation" class="cs-clearfix">
                    <?php
                        wp_nav_menu( array(
                            'theme_location' => 'primary',
                            'container'     => '',
                            'menu_class'     => 'cs-main-navigation cs-clearfix"',
                         ) );
                    ?>
            </nav>
            <!-- Иконка поиска -->
            <div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
            <!-- Форма поиска -->
            <div id="cs-header-menu-search-form">
                <div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
                <form>
                    <input type="text" placeholder="Введите и нажмите Enter...">
                </form>
            </div>
        </div>
    </div>
</div>

В WordPress есть функция wp_nav_menu, которая позволяет получить меню навигации. Для этого нужно зарегистрировать меню, то есть register_nav_menus. Приведенный код получает основную навигацию, которую вы зарегистрировали, как показано ниже в файле function.php.

// Эта тема использует wp_nav_menu() в двух местах.
register_nav_menus( array(
    'primary' => __( 'Основное меню', 'twentysixteen' ),
) );

Вы можете добавлять/удалять/распределять страницы меню во вкладке Внешний вид->Меню и назначать это Основному меню.
Надеюсь, это поможет!!