Bagaimanakah WordPress memanggil menu tersuai bar navigasi menengah/berbilang peringkat?

banyakPasaran internetorang pilihWordPressDatangmembina laman web, tetapi bar navigasi beberapa tema tidak menyokong menu menengah/berbilang peringkat. Jika anda tidak berpuas hati, anda boleh cuba menambah atau mengubah suai gaya menu tema secara manual.

Pengubahsuaian bermula dari header.php Fungsi penting dalam fail template ini ialah paparan menu.

Jika anda menggunakan kod untuk memanggil kategori sebagai menu, ia juga boleh dilakukan, tetapi tidak mudah untuk mengisih item menu.

Direktori dengan subkategori tidak mudah dikendalikan, jadi saya juga ingin menambah fungsi menu tersuai pada tema saya seperti tema lain.

Tidak sukar untuk menambah fungsi penyesuaian menu pada tema yang baru dibuat, terdapat terutamanya 2 langkah.

Langkah pertama, pendaftaran menu WordPress

Untuk menggunakan menu, anda mesti mendaftar dahulu, buka fail fungsi di bawah tema, dan tambahkan kod berikut ▼

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

• Jika tiada fail functions.php di bawah tema, buat yang baharu dan salin kod di atas untuk menyimpannya.

log masukBahagian belakang WordPress, dan kemudian pergi ke Penampilan→Menu.

Jika anda dapat melihat skrin di bawah, bermakna anda telah mendaftar sebagai ▼

Di atas mendaftarkan 2 menu:

1. Menu atas Bar Menu Atas.
2. Menu utama Main bar menu.

Langkah kedua, panggilan menu WordPress

Selepas menu didaftarkan, ia boleh dipanggil dalam fail template tema. Letakkan kod berikut dalam fail header.php, dan anda boleh memanggilnya di mana anda ingin memaparkan menu.

Dalam fail header.php, panggil "menu atas"▼

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

Dalam fail header.php, panggil "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')); ?>

Panggil "menu bawah" dalam fail footer.php▼

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

Langkah XNUMX: Menu tetapan

Selepas menu didaftarkan dan kedudukan paparan menu ditakrifkan dalam fail tema, anda boleh mencipta item menu baharu dalam latar belakang WordPress.

Kemudian, tetapkan item menu yang baru dibuat ke menu berdaftar, dan cadangkan hubungan yang sepadan ▼

Buat bar navigasi menu berbilang peringkat wordpress

Sekarang mari kita bincangkan tentang cara membuat menu berbilang peringkat WordPress:

Mula-mula padam kod menu asal dalam fail fungsi tema WordPress anda sendiri.

atau tambah kod ini terus ▼

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

• Nota: mesti masukDitambah di luar.

Kemudian cari kod PHP untuk tema untuk memanggil menu, jika mentah, selalunya begini ▼

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

keluarkannya dan gantikan dengan ▼

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

• Nota: Pastikan kod ini tidak mengandungi div lain, jika tidak ia akan dihadkan oleh div luar.

Langkah seterusnya ialah menambah kod fungsi JS lungsur turun dan tambah kod berikut pada fail JS tema ▼

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

Gaya CSS menu WordPress

Akhir sekali, pengindahan gaya CSS.

Apakah jenis kesan yang sepatutnya, berikan permainan penuh kepada imaginasi anda, CSS boleh melakukannya ▼

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

• Tambahkan kod CSS di atas pada fail style.css tema dan simpannya.

Selepas menyimpan, segarkan muka depan laman web anda, anda boleh melihat kesannya, adakah ia sangat mudah?