需要有关添加自定义WordPress菜单和子菜单的帮助

时间：2017-06-04 作者：J.Lee

我已经设置了HTML自定义导航，它可以很好地用于静态模板。我想把它转换成wordpress导航菜单。我是wordpress的新手，我想帮助您将html菜单转换为wordpress。

以下是HTML代码：

<div id="cs-header-menu">
                <div class="cs-container">
                    <!-- Main navigation -->
                    <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>Homepages</span></a>
                                <ul class="sub-menu">
                                    <li><a href="index-1.html">Homepage 1</a></li>
                                    <li><a href="index-2.html">Homepage 2</a></li>
                                    <li><a href="index-3.html">Homepage 3</a></li>
                                    <li><a href="index-4.html">Homepage 4</a></li>
                                </ul>
                            </li>
                            <li><a href="blog_layout_1.html">Lifestyle</a></li>
                            <li><a href="blog_layout_1.html">Beauty</a></li>
                            <li><a href="blog_layout_1.html">Travel</a></li>
                        </ul>
                    </nav>
                    <!-- Search icon show -->
                    <div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
                    <!-- Search icon -->
                    <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="Type and press enter...">
                        </form>
                    </div>
                </div>
            </div>
        </div>
我不知道如何对div、nav、ul和li以及子菜单项使用class和id。谁能帮我一下吗。提前谢谢。

2 个回复
SO网友:Porosh Ahammed

Use this code bellow to dynamic you nav:

                        <?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>
                    <!-- Search icon show -->
                    <div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
                    <!-- Search icon -->
                    <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="Type and press enter...">
                        </form>
                    </div>
                </div>
            </div>
        </div>
有关更多详细信息，请参阅This ..... 希望它能解决你的问题

SO网友:Aishan

<div id="cs-header-menu">
    <div class="cs-container">
        <!-- Main navigation -->
        <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>
            <!-- Search icon show -->
            <div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
            <!-- Search icon -->
            <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="Type and press enter...">
                </form>
            </div>
        </div>
    </div>
</div>
在wordpress中，我们有一个wp_nav_menu 可以获取导航菜单的函数。为此，您必须注册menui。Eregister_nav_menus. 上面的代码获取您在函数上注册的主导航，如下所示。php文件。

// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array(
    \'primary\' => __( \'Primary Menu\', \'twentysixteen\' ),
) );
您可以在外观->菜单上添加/删除/排列/菜单页面，并将其分配给主菜单。希望有帮助！！

结束
标签： theme-development   menus   navigation   小码农  

相关推荐

Odd spacing in Navigation Bar

我正在重新设计my website, 我很难找到是什么导致导航项目之间的间距（我假设是边距）。我一直在钻研chrome开发工具，但我在任何地方都找不到导致它的原因。请注意，当您在项目之间悬停时，项目之间会有一个明显的白色条带。