WordPress主题导航菜单制作的几种方法(一)

编程之家收集整理的这篇文章主要介绍了WordPress主题导航菜单制作的几种方法(一)编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

wordpress主题制作中,导航菜单的制作算是一个重点,已经写好导航菜单HTML代码,放在wordpress主题中如何动态调用呢?本文将给你介绍几种编写PHP代码动态实现导航的方法,本文也将只侧重于动态代码的开发,不会教你如何编写HTML、CSS和Javascript来实现华丽的导航菜单

WP 3.0自定义菜单的制作

wordpress 3.0之后的版本开始支持自定义动态菜单,所谓的动态菜单,也就是允许用户自行决定将哪些项目添加到导航菜单中,进入wordpress的管理后台 – 外观 – 菜单栏目,通过拖拉相应的栏目,即可创建自己的菜单。这对于wordpress主题开发者和使用者来说,都是皆大欢喜的事情。要想实现自定义菜单,需要用到的函数是wp_nav_menu(),给这个函数传递一些参数就可以输出自定义菜单菜单,下面简单讲讲如何使用使用这个函数

首先,在主题目录下的functions.PHP的 <?PHP ….. ?> 之间,添加以下菜单注册代码,这样你就可以在主题文件中使用wp_nav_menu函数了:

// This theme uses wp_nav_menu() in one location.
register_nav_menus();

接着我们在主题的导航栏处调用wp_nav_menu(),即可输出导航菜单HTML代码

<?PHP
    // 列出顶部导航菜单菜单名称为mymenu,只列出一级菜单
    wp_nav_menu( array( 'menu' => 'mymenu','depth' => 1) );
?>

以上代码输出HTML代码形式如下:

<div class="menu-menu-container">
    <ul class="menu" id="menu-menu">
        <li class="..." id="menu-item-1"><a href="...">首页</a></li>
        <li class="..." id="menu-item-2"><a href="...">分类A</a></li>
        ...
    </ul>
</div>

这里列出的 li 项为你在后台 – 外观 – 菜单添加的栏目,如果你还没有在后台添加菜单,导航栏将列出所有页面。另外,wp_nav_menu会为每个 li 添加class,不同的class标记这个菜单项的属性,如当前打开的是某个文章页面,分类A 就是这篇文章所属的分类,那么 分类A 所在的 li 将会如下代码所示:

<li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分类A</a></li>

如果是在首页,那么首页菜单项的 li 可能会如下所示:

<li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首页</a></li>

从这些class的名称就知道它们的作用,通过给这些class添加css属性,可以达到如高亮当前导航菜单的目的,如将当前菜单链接定义成红色:

.current-post-ancestor a,.current-menu-parent a,.current-menu-item a,.current_page_item a {
    color: red;
}

好了,wordpress 3.0的自定义菜单调用就是这么简单。wp_nav_menu还有很多参数,如自定义 ul 节点、ul 父节点的id和class的参数等等,详情可以参考文档:官方文档 | 中文文档

使用分类页面作为导航栏

wordpress 3.0 之前,大部分wordpress主题都是拿页面作为导航栏的,导航中只能添加页面,显得不够自由。我刚用wordpress 2.7的时候,就为此问题烦恼,最后翻了文档,查了一些资料,实现了在导航中添加分类,详情请看我之前写的文章wordpress 分类做导航栏,并高亮显示

非常规导航栏的制作

以上提到的两种方式,都是使用wordpress自带函数来实现,他们输入的HTML代码也都是限定好的,就是使用 ul li 的形式来构建菜单列表:如:

<ul>
    <li class="..">...</li>
    <li class="..">...</li>
</ul>

如果主题的前端代码不是你写的,而且导航栏的代码写得很龟毛,这根本不是上面的wordpress标准的 ul 导航栏形式,如下面的代码

<dl>
    <dt><strong>标题</strong></dt>
    <dd><a target="_blank" title="#" href="#">菜单A</a></dd>
    <dd><a target="_blank" title="#" href="#">菜单B</a></dd>
</dl>

重写前端代码?我想谁都不愿意这样做,那怎么办呢?还有,如果导航栏不使用分类页面,也不让使用自定义菜单,那怎么办?在实际的应用中,我们还会遇到各种各样且稀奇古怪的需求,下期内容我们将继续探讨这个问题!

总结

以上是编程之家为你收集整理的WordPress主题导航菜单制作的几种方法(一)全部内容,希望文章能够帮你解决WordPress主题导航菜单制作的几种方法(一)所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群:1065694478(已满)
编程之家官方2群:163560250(已满)
编程之家官方3群:312128206

相关文章

猜你在找的wordpress相关文章

WordPress用户在后台上传附件提示“上级目录没有写权限”的情况一般发生在网站迁移到新站以后,如果用户在WordPress后台上传图片附件,或者在工具导入中导入网站数据时,遇到错误以下提示:
WordPress在升级的过程中,如果你刷新页面或者关闭页面会造成Wordpress升级不成功,下次升级时可能会遇到这样或者那样的问题。例如我前天升级Wordpress 4.5时刷新了页面,再次升级Wordpress时,Wordpress一直提示”另
Wordpress的SEO关键操作技巧之一,进行Wordpress固定链接命名设置,今天分享几个关于Wordpress SEO当中的注意事项以及wordpress固定链接设置技巧:1、不要让日期出现在固定链接里面这基于两个方面的考虑。一是如果数
WordPress是一个强大的开源的Blog系统,可以使用该系统搭建CMS网站、企业网站、个人网站丰富的模板和高度的自定义可以供我们发挥想象。但是有些技巧我们要知道,今天就就说下后台多媒体上传文件自动重命名为日期时间
首先在wordpress下安装wp Super Cache 后台直接搜索安装即可,启用缓存,选择Mod_Rewrite模式。会提示出信息
最近使用七牛CDN加速,发现Wordpress评论会提示报错{“error”:”get from image source failed: E405″},网上找了比较多关于wordpress使用七牛CDN导致ajax评论报错{“error”:”get from image source failed: E40
目前几乎所有的主机商都禁用了默认的25邮件发送端口,所以WordPress网站在没有配置SMTP的时候,都是无法发送邮件的。
WordPress 5.5 的一项主要的新功能就是自带了XML站点地图(XML SiteMap),但是很多网站此前都采用了第三方插件(比如 Google XML Sitemaps、Yoast SEO、All in One SEO Pack)来生成网站地图。这就出现了