wordpress小白教程之——为不支持导航菜单的主题加上导航栏

分类 折腾WP 标签: , ,

一直以来没有给这个问题写教程一是觉得现在不支持导航的主题不多,二是如果主题本不支持的话硬加上去往往会破坏主题的美感,因此上觉得写这样一个教程没什么用,不过答疑的时候还是不少人问,就把猫猫折腾出来的偷懒改法放上来吧~

此法的基本方针就是……从默认主题上往下扒!之前放安装教程的时候就说过,默认主题不要删,这样当我们需要一些功能的时候就有比较标准的代码可以搬上来,闲话少说下面是方法,因为是从默认主题上扒下来的,所以仅适用于像本博这种横向导航,需要纵向或者隐藏滑动导航的请自行去研究CSS

1.修改支持函数functions.php,在function中添加以下代码

[codesyntax lang="php"]

register_nav_menus( array(
 'primary' => __( 'Primary Navigation'),
 ));

[/codesyntax]

具体添加在什么位置呢,比较保险的方法是放在文件开始那个<?php后面,当然有的主题这个后面会有段/*    */夹着的注释,注释后面才是代码的正文,贴在那就可以了

2.修改主题模板,这个具体改哪个文件取决于你要把导航的位置和主题本身的结构,现在市面上的主题多数在header.php里就有相对完整的结构,比如头部的图片和整个主页面的div分布,这样只要把导航调用代码插到相应位置就行,比如header和wrap之间(不同主题对div命名不同,不必生搬,只要能找对位置就行),导航调用代码如下

[codesyntax lang="php"]

<div id="access">

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

</div>

[/codesyntax]

有一些主题在header.php里只有必要的调用而没有div结构,比如rainbow主题的原身YOYOCICI,就需要在每个需要调用导航的页面添加了,至于为什么 id="access"……这纯粹是为了方便,不过注意,如果你原主题中有access这个id,那么就需要换掉,同样下一步里的access也要同样替换掉

3.修改CSS,编辑你的CSS,添加以下代码

[codesyntax lang="css"]

#access {
 background: #000;
 display: block;
 float: left;
 margin: 0 auto;
 width: 940px;
 }
 #access .menu-header,
 div.menu {
 font-size: 13px;
 margin-left: 12px;
 width: 928px;
 }
 #access .menu-header ul,
 div.menu ul {
 list-style: none;
 margin: 0;
 }
 #access .menu-header li,
 div.menu li {
 float: left;
 position: relative;
 }
 #access a {
 color: #aaa;
 display: block;
 line-height: 38px;
 padding: 0 10px;
 text-decoration: none;
 }
 #access ul ul {
 box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 display: none;
 position: absolute;
 top: 38px;
 left: 0;
 float: left;
 width: 180px;
 z-index: 99999;
 }
 #access ul ul li {
 min-width: 180px;
 }
 #access ul ul ul {
 left: 100%;
 top: 0;
 }
 #access ul ul a {
 background: #333;
 line-height: 1em;
 padding: 10px;
 width: 160px;
 height: auto;
 }
 #access li:hover > a,
 #access ul ul :hover > a {
 background: #333;
 color: #fff;
 }
 #access ul li:hover > ul {
 display: block;
 }
 #access ul li.current_page_item > a,
 #access ul li.current-menu-ancestor > a,
 #access ul li.current-menu-item > a,
 #access ul li.current-menu-parent > a {
 color: #fff;
 }
 * html #access ul li.current_page_item a,
 * html #access ul li.current-menu-ancestor a,
 * html #access ul li.current-menu-item a,
 * html #access ul li.current-menu-parent a,
 * html #access ul li a:hover {
 color: #fff;
 }

[/codesyntax]

这段是直接从twentyten的CSS里扒下来的,上面调用时的access就是为了这里不用那么多改动,不过同样这里显示出来的样式也是配合默认主题的,所以背景、宽高或者项目距离之类的修改需要根据自己的主题风格自行调节,具体写法自己去查CSS教程

4.建立菜单,以上内容是使主题支持菜单,然后就是让菜单显示出来,打开你的控制板——外观——菜单,新建一个菜单,然后在左面把你想显示的项目拖进去,保存

 

[caption id="attachment_851" align="alignnone" width="300" caption="菜单设置"]菜单设置[/caption]

这样就可以在主页显示了,不过注意如果分类下没有文章那么拖进去也不会显示的,直到分类下出现第一篇文章为止

 

 

OK教程完毕~~键盘故障配合软键盘写教程的某喵桑不起啊桑不起~~~~~~~



Enjoy this article?

Consider subscribing to our RSS feed!


上一篇:
下一篇:

你可以在下面 留言 , 或者 引用 你自己的观点.

6 个回复聊聊呗 ?

  1. 说道:

    很不错的主题!留个脚印!

  2. eachsha说道:

    做个友情链接吧。

  3. BB霜排行说道:

    哈哈 是这样的。。。

  4. zi~说道:

    不错,很管用,留个猫脚印吧

有话要说

"

无觅相关文章插件,快速提升流量