Miten WordPress kutsuu toissijaista/monitasoista navigointipalkin mukautettua valikkoa?

paljon网络 营销ihmiset valitsevatWordPressTulerakentaa verkkosivusto, mutta joidenkin teemojen navigointipalkki ei tue toissijaisia/monitasoisia valikoita. Jos et ole tyytyväinen, voit yrittää manuaalisesti lisätä ja muokata teeman valikkotyyliä.

Muokkaus alkaa osoitteesta header.php Tärkeä toiminto tässä mallitiedostossa on valikon näyttäminen.

Jos käytät koodia kutsumaan kategoriaa valikona, se on myös mahdollista, mutta valikon kohtien lajittelu ei ole kätevää.

Alakategorioita sisältäviä hakemistoja ei ole helppo käsitellä, joten haluan myös lisätä teemaani mukautettuja valikkotoimintoja muiden teemojen tapaan.

Valikon mukautustoiminnon lisääminen äskettäin tehtyyn teemaan ei ole vaikeaa, siinä on pääasiassa 2 vaihetta.

Ensimmäinen vaihe, rekisteröinti WordPress-valikkoon

Valikkoa käyttääksesi sinun on ensin rekisteröidyttävä, avattava teeman alla oleva funktiotiedosto ja liitettävä seuraava koodi ▼

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

• Jos teeman alla ei ole functions.php-tiedostoa, luo uusi ja tallenna se kopioimalla yllä oleva koodi.

登录WordPress-taustaohjelmaja valitse sitten Ulkoasu → Valikko.

Jos näet alla olevan näytön, se tarkoittaa, että olet rekisteröitynyt nimellä ▼

Yllä oleva rekisteröi 2 valikkoa:

1. Ylävalikko Ylävalikkopalkki.
2. päävalikko Main valikkopalkki.

Toinen vaihe, WordPress-valikkokutsu

Kun valikko on rekisteröity, se voidaan kutsua teemamallitiedostossa.. Laita seuraava koodi header.php tiedostoon, niin voit kutsua sitä kohtaan, jossa haluat valikon näkyvän.

Avaa header.php-tiedoston "ylävalikko"▼

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

Avaa header.php-tiedostossa "päävalikko"▼

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

Kutsu "alavalikko" footer.php-tiedostossa▼

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

Vaihe XNUMX: Asetukset-valikko

Kun valikko on rekisteröity ja valikon näyttöpaikka on määritetty teematiedostossa, voit luoda uuden valikkokohdan WordPressin taustalle.

Määritä sitten uusi valikkokohta rekisteröityyn valikkoon ja ehdota vastaavaa suhdetta ▼

Tee Wordpressistä monitasoinen valikon navigointipalkki

Puhutaanpa nyt WordPressin monitasoisen valikon tekemisestä:

Poista ensin alkuperäinen valikkokoodi oman WordPress-teemasi funktiotiedostosta.

tai lisää tämä koodi suoraan ▼

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

• Huomautus: täytyy olla sisälläLisätty ulkopuolelle.

Etsi sitten PHP-koodi teemalle, jolla valikkoa kutsutaan, jos se on raaka, se on yleensä näin ▼

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

poista se ja vaihda se painikkeella ▼

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

• Huomautus: Varmista, että tämä koodi ei sisällä muita div-merkkejä, muuten se rajautuu ulompaan div-koodiin.

Seuraava vaihe on lisätä pudotusvalikon JS-toimintokoodi ja lisätä seuraava koodi teeman JS-tiedostoon ▼

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

WordPress-valikon CSS-tyylit

Lopuksi CSS-tyylinen kaunistaminen.

Millainen tehosteen pitäisi olla, anna mielikuvituksellesi täysi peli, CSS voi tehdä sen ▼

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

• Lisää yllä oleva CSS-koodi teeman style.css-tiedostoon ja tallenna se.

Päivitä tallennuksen jälkeen verkkosivustosi etusivu, näet vaikutuksen, onko se hyvin yksinkertaista?