Ki jan WordPress rele meni koutim ba navigasyon segondè / milti-nivo?

anpilMaketing Entènètmoun chwaziWordPressVini nonbati yon sit entènèt, men ba navigasyon kèk tèm pa sipòte meni segondè / milti-nivo. Si ou pa satisfè, ou ka eseye manyèlman ajoute oswa modifye style meni tèm nan.

Modifikasyon an kòmanse nan header.php.Yon fonksyon enpòtan nan fichye modèl sa a se ekspozisyon meni an.

Si w itilize kòd la pou rele kategori a kòm yon meni, li posib tou, men li pa pratik pou klase atik meni yo.

Anyè a ak sou-kategori pa fasil pou okipe, kidonk mwen vle tou ajoute yon fonksyon meni koutim nan tèm mwen an tankou lòt tèm.

Li pa difisil pou ajoute fonksyon personnalisation meni nan tèm ki fèk fè a, gen sitou 2 etap.

Premye etap la, enskripsyon meni WordPress

Pou itilize meni an, ou dwe premye enskri, louvri dosye fonksyon an anba tèm nan, epi mete kòd sa a ▼

<?php
//自定义菜单
if (function_exists('register_nav_menus')) {
register_nav_menus( array( 'top_navi' => __('顶部菜单') ) );
register_nav_menus( array( 'menu_navi' => __('站点导航') ) );
register_nav_menus( array( 'foot_navi' => __('底部菜单') ) );
}
?>

• Si pa gen okenn fichye functions.php anba tèm nan, kreye yon nouvo epi kopye kòd ki anwo a pou konsève pou li.

登录WordPress backend, epi ale nan Aparans→Meni.

Si ou ka wè ekran ki anba a, sa vle di ou anrejistre kòm ▼

Pi wo a anrejistre 2 meni:

1. Yon meni anlè Top Menubar.
2. yon meni prensipal Main ba meni.

Dezyèm etap la, rele nan meni WordPress

Apre meni an anrejistre, li ka rele nan dosye modèl tèm.Mete kòd sa a nan dosye header.php la, epi ou ka rele li kote ou vle montre meni an.

Nan fichye header.php, rele "meni anlè" ▼

//顶部菜单调用
<?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>

Nan fichye header.php, rele "meni prensipal la"▼

//主菜单调用
<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'menu_navi','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

'menu_navi')); ?>

Rele "meni anba a" nan fichye footer.php ▼

//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>

Twazyèm etap la, meni an anviwònman

Apre yo fin anrejistre meni a epi yo defini pozisyon ekspozisyon meni an nan dosye tèm nan, ou ka kreye yon nouvo atik meni nan background nan WordPress.

Lè sa a, bay atik meni ki fèk kreye a nan meni ki anrejistre a, epi sijere relasyon ki koresponn lan ▼

Fè wordpress bar navigasyon meni milti-nivo

Koulye a, ann pale sou fason pou fè yon meni WordPress milti-nivo:

Premye efase kòd meni orijinal la nan dosye fonksyon pwòp tèm WordPress ou a.

oswa ajoute kòd sa a dirèkteman ▼

<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>

• Remak: dwe nanTe ajoute deyò.

Lè sa a, jwenn kòd PHP pou tèm nan pou rele meni an, si li anvan tout koreksyon, li anjeneral tankou sa a ▼

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

retire li epi ranplase li ak ▼

<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

• Remak: Asire w ke kòd sa a pa genyen lòt div, otreman li pral limite pa div la deyò.

Pwochen etap la se ajoute kòd fonksyon JS dropdown epi ajoute kòd sa a nan dosye JS tèm nan ▼

jQuery(document).ready(function($) {
$('#nav li').hover(function() {
$('ul', this).slideDown(200)},
function() {$('ul', this).slideUp(300)});});

WordPress meni CSS estil

Finalman, CSS style anbelisman.

Ki kalite efè yo ta dwe, bay imajinasyon ou jwe konplè, CSS ka fè li ▼

#menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");}
#menu li{border-right:0px #ace solid;}
#nav{margin-left:30px;width:900px;height:36px;}
#nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid}
#nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;}
#nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;}
.sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;}
.sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px; text-align:center; padding:0 20px; display:block; _width:48px;}

• Ajoute kòd CSS ki anwo a nan dosye style.css tèm nan epi sove li.

Apre ekonomize, rafrechi paj la devan sit entènèt ou a, ou ka wè efè a, èske li trè senp?