Html到WordPress菜单转换

时间:2017-12-16 作者:Mohammad Shahnewaz Sarker

我面临一个问题。我想将html转换为wordpress菜单。它的多级菜单。但我不想更改和class/id/any div。

是否可以从当前结构创建菜单?

结构如下:

<div class="collapse navbar-collapse" id="navbarNavDropdown">
                  <ul class="navbar-nav">
                     <li class="nav-item active">
                        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                     </li>
                     <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="http://abcnews.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Todays News
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                           <a class="dropdown-item" href="#">USA</a>
                           <a class="dropdown-item" href="#">International</a>
                           <a class="dropdown-item" href="#">Economics</a>
                        </div>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">National</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">Comments</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">Sports</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">Entertainment</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">Cartoon</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">Science</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">Lifestyle</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">Education</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">Culture</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">We\'re</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">Others</a>
                     </li>


                  </ul>
               </div>

1 个回复
SO网友:Feyt

你可以看看结构是如何看待这个链接的-https://developer.wordpress.org/reference/functions/wp_nav_menu/

您可以将类添加到这些参数中,它应该可以工作。看看WordPress标准的主题等示例,并使用Chrome上的Inspect工具查看添加的类。

基本上,您必须使用类和其他参数才能使其动态工作。有关示例,请参见此链接-http://www.yogihosting.com/integrate-bootstrap-menu-wordpress-website/

如果需要下拉列表,则需要阅读如何实现nav walker 到代码。它将允许您从WordPress后端创建的菜单中进行动态下拉。您只需设置下拉列表的样式以适合您的菜单即可。您可以在此处下载导航助行器代码-https://github.com/wp-bootstrap/wp-bootstrap-navwalker

结束

相关推荐

Use menus with anchors

我有一个CPT归档页面,我想创建一个导航菜单,该菜单将跳转到表单中的锚定<a name=\"post-slug\" http=\"{the permalink goes here}>The CPT Title</a>我已经能够在模板文件中创建锚定,所以这不是问题对于页面顶部的链接本身,我可以手动创建它们,也可以使用WordPress菜单系统中的自定义链接。。。。但是有很多,所以我宁愿尝试在WordPress菜单系统中创建一个常规菜单。问题是,我需要以某种方式调整它的输出,以更改常规