WordPress çawa menuya xwerû ya barika navîgasyonê ya duyemîn / pir-asta gazî dike?

zêdeKirrûbirra Înternetêmirov hildibijêreWordPressHatinmalperek ava bikin, lê barika navîgasyonê ya hin mijaran pêşekên duyemîn/pir-astî piştgirî nake. Heke hûn razî nebin, hûn dikarin bi destan şêwaza menuya mijarê lê zêde bikin an biguhezînin.

Guhertin ji header.php dest pê dike.Fonksiyonek girîng di vê pelê şablonê de pêşandana menuyê ye.

Ger hûn kodê bikar bînin da ku kategoriyê wekî pêşek bang bikin, ew jî mimkun e, lê ne hêsan e ku meriv hêmanên menuyê bicivîne.

Rêvekirina pelrêça bi binkategoriyan ne hêsan e, ji ber vê yekê ez jî dixwazim wekî mijarên din fonksiyonek menuya xwerû li mijara xwe zêde bikim.

Zêdekirina fonksiyona xwerû ya menuyê li mijara nû hatî çêkirin ne dijwar e, bi gelemperî 2 gav hene.

Gava yekem, qeydkirina menuya WordPress

Ji bo ku pêşek bikar bînin, divê hûn pêşî qeyd bikin, pelê fonksiyonan di binê mijarê de vekin, û koda jêrîn ▼ lê zêde bikin

<?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' => __('底部菜单') ) );
}
?>

• Ger di binê mijarê de pelek fonksiyonên.php tune be, yek nû biafirînin û koda jorîn kopî bikin da ku wê hilînin.

Log inPiştgiriya WordPress, û paşê biçin Xuyabûn → Pêşek.

Heke hûn dikarin dîmendera jêrîn bibînin, ev tê vê wateyê ku we wekî ▼ tomar kiriye

Li jor 2 menu tomar dike:

1. A menu top Menubar Top.
2. menuya sereke Main menubar.

Pêngava duyemîn, banga menuya WordPress

Piştî ku pêşek hat qeyd kirin, dikare di pelê şablonê mijarê de were gazî kirin, koda jêrîn têxe pelê header.php, û hûn dikarin li cihê ku hûn dixwazin menuyê nîşan bidin bang bikin.

Di pelê header.php de, "menuya jorîn" ▼ bang bikin

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

Di pelê header.php de, "menuya sereke" ▼ bang bikin

//主菜单调用
<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')); ?>

Di pelê footer.php ▼ de gazî "menuya jêrîn" bikin

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

Gav XNUMX: Menuya Mîhengan

Piştî ku pêşek hate tomar kirin û pozîsyona pêşandanê di pelê mijarê de hate destnîşankirin, hûn dikarin di paşxaneya WordPress de hêmanek menuya nû biafirînin.

Dûv re, menuya nû hatî afirandin li menuya qeydkirî veqetînin, û pêwendiya têkildar ▼ pêşniyar bikin

Barê navîgasyonê ya menuya pir-asta wordpress çêbikin

Naha em biaxivin ka meriv çawa menuyek pir-asta WordPress-ê çêdike:

Pêşîn koda menuya orîjînal di pelê fonksiyonên mijara xweya WordPress de jêbirin.

an jî vê kodê rasterast ▼ lê zêde bike

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

• Nîşe: divê tê de beLi derve hat zêdekirin.

Dûv re koda PHP-ê ji bo mijarê bibînin ku meriv bangî menuyê bike, heke ew xav be, bi gelemperî wusa ye ▼

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

jê rakin û li şûna wê ▼ bikin

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

• Nîşe: Piştrast bikin ku ev kod divên din nahewîne, wekî din ew ê ji hêla div-ya derve ve were sînorkirin.

Pêngava paşîn ev e ku hûn koda fonksiyona JS-ê ya daketî lê zêde bikin û koda jêrîn li pelê JS-ya mijarê zêde bikin ▼

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

Menûya WordPress şêwazên CSS

Di dawiyê de, bedewkirina şêwaza CSS.

Divê bandorek çawa be, bi tevahî lîstin bide xeyala xwe, CSS dikare wê bike ▼

#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;}

• Koda CSS ya jorîn li pelê style.css ya mijarê zêde bikin û wê hilînin.

Piştî tomarkirinê, rûpela pêşîn a malpera xwe nûve bikin, hûn dikarin bandorê bibînin, gelo ew pir hêsan e?