Kako WordPress poziva sekundarni/višeslojni prilagođeni meni navigacijske trake?

puno网络 营销ljudi birajuWordPressDođiIzgradite stanicu, ali navigacijska traka nekih tema ne podržava sekundarne/višerazinske menije. Ako niste zadovoljni, možete pokušati ručno dodati i izmijeniti stil menija teme.

Modifikacija počinje od header.php Važna funkcija u ovoj datoteci šablona je prikaz menija.

Ako koristite kod za pozivanje kategorije kao menija, to je takođe moguće, ali nije zgodno sortirati stavke menija.

Direktorijumima sa podkategorijama nije lako rukovati, tako da takođe želim da svojoj temi dodam prilagođene funkcije menija kao i druge teme.

Nije teško dodati funkciju prilagođavanja menija novonapravljenoj temi, uglavnom postoje 2 koraka.

Prvi korak, registracija WordPress menija

Da biste koristili meni, prvo se morate registrovati, otvoriti datoteku funkcija pod temom i dodati sljedeći kod ▼

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

• Ako pod temom nema datoteke functions.php, kreirajte novu i kopirajte gornji kod da ga sačuvate.

登录WordPress backend, a zatim idite na Izgled→ Meni.

Ako vidite ekran ispod, to znači da ste se registrovali kao ▼

Gore navedeni registruju 2 menija:

1. Gornji meni Vrhunska traka menija.
2. glavni meni Main traka menija.

Drugi korak, poziv WordPress menija

Nakon što je meni registrovan, može se pozvati u datoteci šablona teme. Stavite sledeći kod u fajl header.php i možete ga pozvati tamo gde želite da prikažete meni.

U datoteci header.php pozovite "gornji meni"▼

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

U datoteci header.php pozovite "glavni meni"▼

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

Pozovite "donji meni" u datoteci footer.php▼

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

Treći korak, meni podešavanja

Nakon što je meni registrovan i pozicija prikaza menija definisana u datoteci teme, možete kreirati novu stavku menija u pozadini WordPress-a.

Zatim dodijelite novokreiranu stavku menija registriranom izborniku i predložite odgovarajući odnos ▼

Napravite wordpress višeslojnu navigacijsku traku menija

Sada razgovarajmo o tome kako napraviti WordPress meni na više nivoa:

Prvo izbrišite originalni kod menija u funkcijskoj datoteci vlastite WordPress teme.

ili direktno dodajte ovaj kod ▼

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

• Napomena: mora biti unutraDodato izvana.

Zatim pronađite PHP kod za temu da pozovete meni, ako je sirov, obično je ovako ▼

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

uklonite ga i zamijenite ga sa ▼

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

• Napomena: Provjerite da ovaj kod ne sadrži druge divove, inače će biti ograničen vanjskim div.

Sljedeći korak je dodavanje padajućeg koda JS funkcije i dodavanje sljedećeg koda u JS datoteku teme ▼

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

CSS stilovi WordPress menija

Konačno, uljepšavanje u CSS stilu.

Kakav efekat treba da bude, dajte punu igru ​​svojoj mašti, CSS to može ▼

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

• Dodajte gornji CSS kod u style.css fajl teme i sačuvajte ga.

Nakon spremanja, osvježite naslovnu stranicu vaše web stranice, možete vidjeti efekat, da li je vrlo jednostavno?