2、点击新建分类目录,注意目录下面的别名我们要改一下!
3、再找到页面下面的新建页面按钮,这时,我们要新建一个页面!
4、页面建好之后,我们找到外观下面有个菜单,我们选择它!
5、这时我们选择刚才我们新建的页面和分类目录,把他们都添加到菜单!
6、添加完成后,我们会发现重复了,这时我们要把其中的一个给移除掉,留下分类目录的那个!
7、全部添加完成后,点击保存菜单即可,我们在前台刷新一下即可查看我们新添加之后的效果!
一、 分类目录设置好直接添加法。
这种方法是先在分类目录里设置后别名,然后直接添加即可。如鼠标指针移到wordpress后台中的“文章”处,选择“分类目录”:
在分类目录中,需要把“名称”和“别名”分别填写好,名称就是显示在导航栏里的名字,而另外是在URL里的,所以最好是英文字母,方便简洁。
其他的随便填写不填写都没什么关系,然后添加到新分类目录中。如果已经在分类目录的,那么直接点击“编辑”,即可更改名称别名等信息。
然后看到左侧的“外观”,鼠标放上去后会显示一些选项,点击“菜单”:
在编辑菜单里,左侧有个“分类目录”方框,点击后会显示出来分类目录的导航,可以选择需要添加到导航里的目录,然后点击“添加至菜单”,就会出现在右侧的菜单结构中了,接着点击右上角的“保存菜单”即可。
这样的不用去设置导航链接,会默认为前缀是主网站,后缀为别名,很方便。
二、 菜单中自定义链接
这样就直接看到外观里的“菜单”上,有个“自定义链接”框:
然后填写链接URL及导航菜单名称即可,记得要“添加至菜单”,并最后全部添加完后要保存菜单。
这种方法也很简单,全部自定义,如果导航与分类不一样的,这里可设置,不然建议还是第一种方法更好。
第一步、添加多导航菜单功能。这时,我们要用到一个自定义菜单函数register_nav_menus()函数。打开主题的function.php文件,把下面的代码添加进去:
register_nav_menus( array(
'primary' =>'第一导航菜单', //这里的primary 你可以自己设置,你也可以写成top-menu ;但是要在调用菜单时也用同样的名字。
'secondary' =>'第二导航菜单',
) )
我这里只用了2个菜单,你还可以多设置几个,根据自己的需求。
第二步、调用多导航菜单。
1、在需要导航菜单的地方,放置调用代码。
比如:顶部header.php文件、footer.php文件等。把下面的代码放到这些文件里:
顶部导航:
<?php wp_nav_menu( array( 'theme_location' =>'primary','container'=>'<ul>','menu_id'=>'menu','menu_class'=>'menu','link_before' =>'<span>','link_after' =>'</span>',))?>//这里就用到了前面设置的primary.
左侧边导航:
<div id="floatMenu"><!-- 左侧菜单导航 -->
<ul class="menu2">
<li><a href="/" style="color:#fffbackground-color:#6994c9" title="wordpress主题首页">网站首页 </a></li>
<?php wp_nav_menu( array( 'theme_location' =>'secondary','container' =>'','items_wrap' =>'%3$s','fallback_cb'=>'' ) )?>//这里就用到了前面设置的secondary.
</ul>
</div>
2、在后台设置菜单。
后台——>外观——>菜单,先创建菜单,然后从左侧添加菜单内容,如添加分类和页面到菜单,如何添加菜单,你可以参考wordpress怎样添加导航菜单?,这里就不多说了。菜单添加好之后,还要设置在哪里显示这个菜单,如下图:
是我们添加的菜单内容。这里,我们要设置 2 处,选择你要显示的位置,这里是高时银博客的选择,选的是“第二导航菜单”,是在左侧显示。
第三步、设置CSS样式。
如果是顶部菜单,这里就不需要设置了,因为,主题一般都有这个。如果是像高时银博客这样的新添加的左侧菜单,那就要添加CSS样式了,样式如下:
/* 浮动菜单*/
#floatMenu { display:blockwidth:110pxmargin-left:-605pxposition:fixedleft:50%top:152px_margin-left:-605px_width:120px_position:absolute_margin-top:0px}//这里的_margin-left前面的 _ 表示兼容IE6 。
#floatMenu ul { margin-bottom:2px}
#floatMenu ul.menu2 li a { display:blockfont-size:14pxfont-weight:800color:#6994c9border-left:1px solid #dadcddborder-right:1px solid #dadcddborder-bottom:1px solid #dadcddbackground-color:#fffffftext-decoration:nonepadding:2px 0px 2px 0text-align:center}
#floatMenu ul li a:hover { color:#fffbackground-color:#6994c9}
就这样,我们就给自己的网站实现了多导航菜单功能。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)