Kuidas kutsub WordPress sekundaarset/mitmetasandilist navigeerimisriba kohandatud menüüd?

palju网络 营销inimesed valivadWordPressTuleehitada veebisait, kuid mõne teema navigeerimisriba ei toeta sekundaarseid/mitmetasandilisi menüüsid.Kui te ei ole rahul, võite proovida teema menüü stiili käsitsi lisada või muuta.

Muudatus algab failist header.php. Selle mallifaili oluline funktsioon on menüü kuvamine.

Kui kasutada koodi menüüna kategooria kutsumiseks, on see ka võimalik, kuid menüüpunkte pole mugav sorteerida.

Alamkategooriatega kataloogi pole lihtne hallata, seega tahan sarnaselt teistele teemadele lisada oma teemale kohandatud menüüfunktsiooni.

Menüü kohandamise funktsiooni vastvalminud teemale pole keeruline lisada, seal on põhiliselt 2 sammu.

Esimene samm, WordPressi menüü registreerimine

Menüü kasutamiseks tuleb esmalt registreeruda, avada teema all olev funktsioonide fail ja lisada järgmine kood ▼

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

• Kui teema all ei ole funktsioonis.php faili, loo uus ja kopeeri ülaltoodud kood selle salvestamiseks.

登录WordPressi taustaprogrammja seejärel valige Välimus → Menüü.

Kui näete allolevat ekraani, tähendab see, et olete registreerunud kui ▼

Ülaltoodud registreerib 2 menüüd:

1. Ülemine menüü Ülemine menüüriba.
2. peamenüü Main menüüriba.

Teine samm, WordPressi menüükõne

Pärast menüü registreerimist saab selle välja kutsuda teemamalli failis.Pane järgnev kood faili header.php ja saad selle kutsuda sinna, kuhu soovid menüüd kuvada.

Avage failis header.php "ülemine menüü"▼

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

Avage failis header.php "peamenüü"▼

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

Kutsuge faili footer.php "alumine menüü".

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

XNUMX. samm: seadete menüü

Pärast menüü registreerimist ja menüü kuvamiskoha määratlemist teemafailis saate WordPressi taustal luua uue menüüelemendi.

Seejärel määrake äsja loodud menüüelement registreeritud menüüsse ja soovitage vastavat seost ▼

Muutke WordPressi mitmetasandiline menüü navigeerimisriba

Räägime nüüd WordPressi mitmetasandilise menüü loomisest:

Kõigepealt kustutage algne menüükood oma WordPressi teema funktsioonide failist.

või lisage see kood otse ▼

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

• Märkus: peab olema seesLisatud väljapoole.

Seejärel leidke menüü kutsumiseks PHP-kood teema jaoks, kui see on toores, siis tavaliselt on see selline ▼

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

eemaldage see ja asendage see ▼-ga

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

• Märkus. Veenduge, et see kood ei sisaldaks teisi dive, vastasel juhul piirab seda välimine div.

Järgmine samm on rippmenüü JS-funktsiooni koodi lisamine ja järgmise koodi lisamine teema JS-faili ▼

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

WordPressi menüü CSS-stiilid

Lõpuks CSS-stiilis kaunistamine.

Milline peaks olema efekt, andke oma kujutlusvõimele täit mängu, CSS saab sellega hakkama ▼

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

• Lisage ülaltoodud CSS-kood teema style.css-faili ja salvestage see.

Pärast salvestamist värskendage oma veebisaidi esilehte, näete efekti, kas see on väga lihtne?