是實現(xiàn)wordpress導(dǎo)航下拉菜單,總共需要修改3個文件:header.php、functions.php和style.css。
成都創(chuàng)新互聯(lián)公司堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的漯河網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
1、修改header.php。
加入如下代碼:
div id="topnav"
?php wp_nav_menu( array( 'theme_location' = 'primary' ) ); ?
/div
2、修改functions.php函數(shù)
加入如下代碼:
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調(diào)用二級導(dǎo)航的方法:
1、新建 functions.php 函數(shù)文件并添加以下代碼:
__( ‘導(dǎo)航自定義菜單’ ), ) );?
2、把導(dǎo)航位置的li標(biāo)簽都刪除掉,換上調(diào)用代碼:
地,’menu_class’ = ‘navigation’,’menu_id’ = ‘nav_sgBhgn’) ); ?
3、添加一個jquery庫,放在body開始和結(jié)束的適合的位置即可:
4、使用jquery庫文件加載,大家可以測試一下模板打開的速度,哪個快用那個:
谷歌加載:
百度加載:
新郎加載:
5、添加CSS樣式:
/* 二級菜單 */
.sub-menu{
display:none;/初始狀態(tài)下隱藏子目錄/
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()函數(shù)放到一個自定義函數(shù)當(dāng)中
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’ = ‘’
‘a(chǎn)fter’ = ‘’
‘link_before’ = ‘’
‘link_after’ = ‘’
‘depth’ =
‘walker’ = new Walker_Nav_Menu()
‘theme_location’ = ‘’
‘show_home’ = true
)
);
endif;
}
首先呢 看下是不是 需要這樣的這樣的一個下拉菜單如果是的話 那么往下看如何一個操作步驟(如果想看我的wp博客菜單具體效果呢 可以百度“李飛seo博客”)
操作步驟
添加分類目錄(添加你所需要的所有目錄,下面有步驟具體調(diào)整哪個是哪個的上一級目錄)
找到博客主題菜單(選擇分類目錄全選添加到菜單)
鼠標(biāo)進行拖放下拉菜單順序效果可以查看圖片
菜單設(shè)置,根據(jù)自己的要求設(shè)置?導(dǎo)航菜單,主導(dǎo)航 ,頂部導(dǎo)航
保存菜單進行查看那么 ?wp博客的一個下拉菜單就做好了
當(dāng)然如果還有看不懂的話 不會操作的可以 百度 李飛seo博客 進行學(xué)習(xí)