Keep on going, never give up.

WordPress导航条及边栏菜单定制方法

天缘最近也在烟酒烟酒WordPress,结合新发布的WordPress 3.0正式版,跟大家一同学习WordPress新功能,由于之前接触WordPress也不多,本文算是现学现卖,如有错误欢迎指出。还是从最基础的导航栏及边栏定制开始吧,这个东西在WordPress 3.0中非常智能,使用起来也非常简单,不需要再像早期版本那样,动不动就修改代码,方便是方便了,但WordPress却越来复杂了,感觉WordPress 3.0又向专业的CMS迈了一大步,让很多追求简约、专心写作一族越发后怕,也许这就是趋势吧。

一、创建菜单项目

WordPress刚安装完成后,是没有菜单导航的,所以需要手动创建,点击外观Appearance->Menus菜单,显示如下:

在右侧文本框中,输入并创建一个新的菜单名,注意这个菜单名只是用来标识菜单,而不是实际的显示菜单列表,一般起个容易理解的名称即可,比如Menu1、 MyMenu、我的菜单等都可以。输入后点击Save Menu(保存菜单)。即可开始进一步定制菜单。

二、添加显示菜单列表

下图是创建菜单名之后的控制界面说明,包括菜单效果显示区域、设置首要导航栏、创建新的菜单列表、添加页面到菜单列表、添加分类到菜单列表,一看就明白不再解释。

可以把所有的菜单全部一次性添加到菜单中,然后参照下文方法再调整显示次序,比如这里添加了五个菜单列表:

  • Windows 7
  • Windows 7 installation
  • Windows 7 Update
  • Windows XP
  • About

三、调整二三级菜单显示顺序

上述菜单添加完成后,只需用鼠标拉动已添加的菜单项目,上下左右移动到合适的位置,向右即表示缩进一级菜单,最后一定要记得点击保存菜单(Save Menu),再回到首页即可看到效果。如果你没看到也很正常,可能你的主题不支持首要菜单调用,需要参照下面的方面进行修改,要么就是等主题升级。

四、把导航菜单显示到网页边栏

如希望把菜单显示到边栏去,依次点击Appearance->Widgets,把Custom Menu拖拉到右侧的生效区域,然后输入标题名称,选择显示的菜单项目名称。

如果存在多个菜单,可以使用同样的方式进行,如下图:

五、最终导航条显示效果

看一下最终效果图,左侧是顶部的导航条栏目,右侧显示列表是边栏部分。

六、常见问题

可能部分老主题不支持WordPress最新的菜单导航编辑功能,或支持的有问题时,可以通过以下方法:

1、使用Widgets设置,部分主题可以通过设置Widgets放置位置,达到类似效果。以前也有很多WordPress插件可以达到类似。

2、在主题header.php中添加<?php wp_nav_menu($args); ?>,参数说明请参考:WordPress官方文档,如果只有一个导航菜单,只需使用<?php wp_nav_menu(); ?>即可,WordPress会自动调用首要菜单显示。

下面是上文菜单的输出典型代码,不同的主题可能有所不同,要么调整程序及CSS要么就是参照上文标准代码对应修改头文件和CSS样式表:

<ul id="menu-mymenu" class="menu">       
    <li id="menu-item-26" class="menu-item menu-item-type-custom"><a href="http://www.metsky.com">Windows 7</a>
        <ul class="sub-menu">
        <li id="menu-item-24" class="menu-item menu-item-type-custom"><a href="http://www.metsky.com">Windows 7 installation</a></li>
        <li id="menu-item-25" class="menu-item menu-item-type-custom"><a href="http://www.metsky.com">Windows 7 update</a></li>
        </ul>
    </li>
    <li id="menu-item-27" class="menu-item menu-item-type-custom"><a href="http://www.metsky.com">Windows XP</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-custom"><a href="http://www.metsky.com">About</a></li>
</ul>

 3、还有其他修改方式,不过还是本着越简单越好的原则,否则WordPress主程序及主题以后升级会很麻烦。

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.