Kepiye WordPress nelpon menu khusus bar navigasi sekunder / multi-level?

KutaInternet Marketingwong milihWordPressAyombangun situs web, nanging pandhu arah sawetara tema ora ndhukung menu secondary/multi-level Yen sampeyan ora wareg, sampeyan bisa nyoba kanggo manual nambah lan ngowahi gaya menu tema.

Modifikasi diwiwiti saka header.php Fungsi penting ing file template iki yaiku tampilan menu.

Yen sampeyan nggunakake kode kanggo nelpon kategori minangka menu, iku uga bisa, nanging ora trep kanggo ngurutake item menu.

Direktori kanthi subkategori ora gampang ditangani, mula aku uga pengin nambah fungsi menu khusus menyang temaku kaya tema liyane.

Ora angel nambah fungsi kustomisasi menu menyang tema sing mentas digawe, utamane ana 2 langkah.

Langkah pisanan, registrasi menu WordPress

Kanggo nggunakake menu kasebut, sampeyan kudu ndhaptar dhisik, bukak file fungsi ing sangisore tema, banjur tambahake kode ing ngisor iki ▼

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

• Yen ora ana file functions.php ing tema kasebut, gawe anyar lan salin kode ing ndhuwur kanggo nyimpen.

Mlebubackend WordPress, banjur pindhah menyang Appearance→Menu.

Yen sampeyan bisa ndeleng layar ing ngisor iki, tegese sampeyan wis ndhaptar minangka ▼

Ing ndhuwur ndhaptar 2 menu:

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

Langkah kapindho, nelpon menu WordPress

Sawise menu wis kadhaptar, iku bisa disebut ing file template tema.

Ing file header.php, nelpon "menu ndhuwur"▼

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

Ing file header.php, nelpon "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')); ?>

Telpon "menu ngisor" ing file footer.php▼

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

Langkah katelu, menu setelan

Sawise menu wis didaftar lan posisi tampilan menu ditetepake ing file tema, sampeyan bisa nggawe item menu anyar ing latar mburi WordPress.

Banjur, wenehake item menu sing mentas digawe menyang menu sing wis kadhaptar, lan saranake hubungan sing cocog ▼

Nggawe bar navigasi menu multi-level wordpress

Saiki ayo ngomong babagan carane nggawe menu multi-level WordPress:

Mbusak dhisik kode menu asli ing file fungsi tema WordPress sampeyan dhewe.

utawa tambahake kode iki langsung ▼

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

• Cathetan: kudu ingDitambahake ing njaba.

Banjur golek kode PHP kanggo tema nelpon menu, yen mentah, biasane kaya iki ▼

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

copot banjur ganti nganggo ▼

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

• Cathetan: Priksa manawa kode iki ora ngemot div liyane, yen ora bakal diwatesi dening div njaba.

Langkah sabanjure yaiku nambah kode fungsi JS gulung mudhun lan tambahake kode ing ngisor iki menyang file JS tema ▼

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

Gaya CSS Menu WordPress

Pungkasan, kaendahan gaya CSS.

Apa jenis efek kudu, menehi muter lengkap kanggo bayangan, CSS bisa nindakake iku ▼

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

• Tambah kode CSS ing ndhuwur menyang file style.css tema lan simpen.

Sawise nyimpen, refresh kaca ngarep situs web sampeyan, sampeyan bisa ndeleng efek, apa gampang banget?