Kumaha WordPress nyauran ménu khusus bar navigasi sekundér / multi-tingkat?

seueurPamasaran Internétjalma milihWordPressHayungawangun ramatloka a, tapi bar navigasi sababaraha téma henteu ngadukung ménu sekundér/multi-level. Upami anjeun teu puas, anjeun tiasa nyobian nambihan atanapi ngarobih gaya ménu téma sacara manual.

Modifikasi dimimitian ti header.php Fungsi penting dina file template ieu nyaéta tampilan menu.

Lamun make kode ka nelepon kategori salaku menu a, eta oge mungkin, tapi teu merenah pikeun nyortir item menu.

Diréktori sareng subkategori henteu gampang diurus, janten kuring ogé hoyong nambihan fungsi ménu khusus kana téma kuring sapertos téma anu sanés.

Henteu sesah pikeun nambihan fungsi kustomisasi ménu kana téma anu nembé dilakukeun, utamina aya 2 léngkah.

Léngkah munggaran, pendaptaran menu WordPress

Pikeun nganggo ménu, anjeun kedah ngadaptar heula, buka file fungsi dina téma, sareng tambahkeun kodeu di handap ieu ▼

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

• Upami teu aya file functions.php dina téma, jieun anu énggal sareng salin kodeu di luhur pikeun nyimpen.

asupbackend WordPress, teras angkat ka Penampilan → Menu.

Upami anjeun tiasa ningali layar di handap, éta hartosna anjeun parantos ngadaptar salaku ▼

Di luhur ngadaptarkeun 2 ménu:

1. A menu luhur Top Menubar.
2. menu utama Main menubar.

Lengkah kadua, nelepon menu WordPress

Saatos menu kadaptar, éta bisa disebut dina file template tema, nempatkeun kodeu handap dina file header.php, sarta anjeun bisa nelepon deui dimana rék mintonkeun menu.

Dina file header.php, nelepon "menu luhur"▼

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

Dina file header.php, nelepon "menu utama"▼

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

Sebutkeun "menu handap" dina file footer.php▼

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

Lengkah katilu, menu setelan

Saatos ménu didaptarkeun sareng posisi tampilan ménu ditetepkeun dina file téma, anjeun tiasa nyiptakeun item ménu énggal dina latar tukang WordPress.

Teras, pasihan item ménu anu énggal didamel kana ménu anu kadaptar, sareng nyarankeun hubungan anu saluyu ▼

Jieun wordpress multi-tingkat menu navigasi bar

Ayeuna hayu urang ngobrol ngeunaan kumaha carana ngadamel menu multi-level WordPress:

Hapus heula kode ménu asli dina file fungsi téma WordPress anjeun nyalira.

atawa tambahkeun kode ieu langsung ▼

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

• Catetan: kudu diDitambahkeun di luar.

Teras milarian kode PHP pikeun téma nelepon ménu, upami atah, biasana sapertos kieu ▼

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

cabut teras ganti ku ▼

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

• Catetan: Pastikeun kode ieu teu ngandung divs séjén, disebutkeun eta bakal bounded ku div luar.

Lengkah saterusna nyaéta nambahkeun kodeu fungsi JS dropdown jeung nambahkeun kodeu handap kana file JS téma ▼

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

gaya CSS menu WordPress

Tungtungna, CSS gaya beautification.

Naon jenis pangaruh kedah, masihan muter pinuh kana imajinasi anjeun, CSS bisa ngalakukeun hal eta ▼

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

• Tambihkeun kode CSS di luhur kana file style.css tema sareng simpen.

Saatos nyimpen, refresh halaman hareup halaman wéb anjeun, anjeun tiasa ningali pangaruhna, naha éta saderhana pisan?