十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
是实现wordpress导航下拉菜单,总共需要修改3个文件:header.php、functions.php和style.css。
成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的漯河网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
1、修改header.php。
加入如下代码:
div id="topnav"
?php wp_nav_menu( array( 'theme_location' = 'primary' ) ); ?
/div
2、修改functions.php函数
加入如下代码:
if ( function_exists('register_nav_menus')) {register_nav_menus(array('primary'='b style="font-style:normal; color:#F00;"自定义顶部菜单/b'));}
3、添加css:
#topnav{clear:both;width:900px;margin:auto;height:34px;background:url(images/menu_bg.gif) repeat-x;}
.home {
float: left;
width:117px;
height:35px;
}
.home a:hover {
width:117px;
height:36px;
background: url(images/index_meun.gif) 0 -38px;
}
#topnav.current_page_item , #topnav .current-menu-item {
background: url(images/menu_bg.gif) repeat-x 0 -110px;
}
#topnav .current-menu-item a,#topnav .current_page_item a {
color: #fff !important;
text-shadow: 0px 1px 0px #000 !important;
}
#topnav .current-menu-item li a,#topnav .sub-menu a ,#topnav .current_page_item li a {
color: #F30505;
}
.sub-menu a:hover {
color: #F6F7F8 !important;
}
#topnav li {
height:36px;
border-right:1px solid #D4CDCD;
float: left;
font-weight:bold;
}
#topnav li a, #topnav li a:link, #topnav li a:visited {
display: block;
padding: 0 25px 0 25px;
line-height:36px;
color: #ffffff;
text-shadow: 0px 1px 0px #d1d1d1;
}
#topnav li a:hover, #topnav li a:active {
background: url(images/bg.png) repeat-x 0 -74px;
color: #fff;
display: block;
text-decoration: none;
line-height:36px;
padding: 0 25px 0 25px;
text-shadow: 0px 1px 0px #000 !important;
}
#topnav li li {
height:30px;
float: left;
}
#topnav li li a {
line-height:30px !important;
}
#topnav li ul {
position: absolute;
left: -999em;
width: 150px;
margin: 0;
border-width: 1px 1px 0px;
z-index: 999;
}
#topnav li ul li {
border-top: 1px solid #989898;
border-bottom: 1px solid #343434;
border-right: none;
border-left: none;
}
#topnav li ul li a {
background: #1F5A91;
width: 100px;
height:30px;
color: #fff !important;
font-weight: normal;
opacity: .80;
filter: alpha(opacity=80);
text-shadow: 0px 1px 0px #000 !important;
}
#topnav li ul li a:hover {
text-shadow: 0px 1px 0px #fff !important;
}
#topnav .sf-sub-indicator {
display: none;
}
#topnav li ul li a.sf-with-ul {
padding: 7px 12px;
}
#topnav li ul li a:hover {
background: #000;
color: #fff !important;
text-shadow: 0px 1px 0px #000 !important;
text-decoration: none;
}
#topnav li ul ul {
margin: -31px 0px 0px 150px;
}
#topnav li ul ul li a {}
#topnav li ul li ul li a {}
#topnav li:hover,#topnav li.hover {
position: static;
}
#topnav li:hover ul ul, #topnav li.sfhover ul ul,
#topnav li:hover ul ul ul, #topnav li.sfhover ul ul ul,
#topnav li:hover ul ul ul ul, #topnav li.sfhover ul ul ul ul {
left: -999em;
}
#topnav li:hover ul, #topnav li.sfhover ul,
#topnav li li:hover ul, #topnav li li.sfhover ul,
#topnav li li li:hover ul, #topnav li li li.sfhover ul,
#topnav li li li li:hover ul, #topnav li li li li.sfhover ul {
left: auto;
}
这可能是插件或主题冲突。请尝试禁用所有插件,并切换到默认主题,然后一个个添加插件,排查问题。
Wordpress调用二级导航的方法:
1、新建 functions.php 函数文件并添加以下代码:
__( ‘导航自定义菜单’ ), ) );?
2、把导航位置的li标签都删除掉,换上调用代码:
地,’menu_class’ = ‘navigation’,’menu_id’ = ‘nav_sgBhgn’) ); ?
3、添加一个jquery库,放在body开始和结束的适合的位置即可:
4、使用jquery库文件加载,大家可以测试一下模板打开的速度,哪个快用那个:
谷歌加载:
百度加载:
新郎加载:
5、添加CSS样式:
/* 二级菜单 */
.sub-menu{
display:none;/初始状态下隐藏子目录/
position:absolute;/显示最顶层/
}
.sub-menu li{
width:100%;/*显示子目录宽度/针对IE6/
clear:both;/垂直显示/
background:#000;/子目录背景颜色/
}
Step — 在functionsphp中添加以下代码使我们的主题支持自定义菜单功能
add_theme_support(‘navmenus’);
Step — 添加一个顶部菜单
if ( function_exists( ‘register_nav_menus’ ) ) {
register_nav_menus(
array(
‘header_menu’ = ‘Header Navigation’
)
);
}
Step — 把wp_nav_menu()函数放到一个自定义函数当中
function wper_so_menu(){
if(function_exists(‘wp_nav_menu’) has_nav_menu(‘header_menu’))
wp_nav_menu(
array(
‘menu’ = ‘Header Navigation’
‘container’ = ‘div’
‘container_class’ = ‘warp’
‘container_id’ = ‘’
‘menu_class’ = ‘ddsmoothmenu’
‘menu_id’ = ‘nav’
‘echo’ = true
‘fallback_cb’ = ‘fallback_no_menu’
‘before’ = ‘’
‘after’ = ‘’
‘link_before’ = ‘’
‘link_after’ = ‘’
‘depth’ =
‘walker’ = new Walker_Nav_Menu()
‘theme_location’ = ‘’
‘show_home’ = true
)
);
endif;
}
首先呢 看下是不是 需要这样的这样的一个下拉菜单如果是的话 那么往下看如何一个操作步骤(如果想看我的wp博客菜单具体效果呢 可以百度“李飞seo博客”)
操作步骤
添加分类目录(添加你所需要的所有目录,下面有步骤具体调整哪个是哪个的上一级目录)
找到博客主题菜单(选择分类目录全选添加到菜单)
鼠标进行拖放下拉菜单顺序效果可以查看图片
菜单设置,根据自己的要求设置 导航菜单,主导航 ,顶部导航
保存菜单进行查看那么 wp博客的一个下拉菜单就做好了
当然如果还有看不懂的话 不会操作的可以 百度 李飞seo博客 进行学习