Kako WordPress poziva sekundarni/višerazinski prilagođeni izbornik navigacijske trake?

Puno网络 营销ljudi birajuWordPressdoćiizraditi web stranicu, ali navigacijska traka nekih tema ne podržava sekundarne/višerazinske izbornike. Ako niste zadovoljni, možete pokušati ručno dodati ili izmijeniti stil izbornika teme.

Izmjena počinje od header.php Važna funkcija u ovoj datoteci predloška je prikaz izbornika.

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

Direktorij s potkategorijama nije jednostavan za rukovanje, pa želim dodati prilagođenu funkciju izbornika svojoj temi kao i drugim temama.

Nije teško novonapravljenoj temi dodati funkciju prilagodbe izbornika, postoje uglavnom 2 koraka.

Prvi korak, registracija izbornika WordPress

Za korištenje izbornika prvo se morate registrirati, 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 ispod teme nema datoteke functions.php, stvorite novu i kopirajte gornji kod da biste je spremili.

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

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

Gore navedeno registrira 2 izbornika:

1. Glavni izbornik Gornja traka izbornika.
2. glavni izbornik Main traka izbornika.

Drugi korak, poziv izbornika WordPress-a

Nakon što je izbornik registriran, može se pozvati u datoteci predloška teme. Stavite sljedeći kod u datoteku header.php i možete ga pozvati tamo gdje želite prikazati izbornik.

U datoteci header.php pozovite "gornji izbornik"▼

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

U datoteci header.php pozovite "glavni izbornik"▼

//主菜单调用
<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 izbornik" u podnožju.php datoteke▼

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

Korak XNUMX: Izbornik postavki

Nakon što je izbornik registriran i položaj prikaza izbornika definiran u datoteci teme, možete stvoriti novu stavku izbornika u pozadini WordPressa.

Zatim dodijelite novostvorenu stavku izbornika registriranom izborniku i predložite odgovarajući odnos ▼

Napravite wordpress višerazinsku navigacijsku traku izbornika

Sada razgovarajmo o tome kako napraviti WordPress višerazinski izbornik:

Najprije izbrišite izvorni kod izbornika u funkcijskoj datoteci vaše vlastite WordPress teme.

ili izravno dodajte ovaj kod ▼

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

• Napomena: mora biti unutraDodano izvana.

Zatim pronađite PHP kod za temu za pozivanje izbornika, ako je neobrađen, obično je ovakav ▼

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

uklonite ga i zamijenite s ▼

<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 omeđen vanjskim divovima.

Sljedeći korak je dodavanje padajućeg JS funkcijskog koda 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)});});

WordPress izbornik CSS stilovi

Konačno, uljepšavanje u CSS stilu.

Kakav bi učinak trebao biti, dajte mašti na volju, 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 datoteku style.css teme i spremite je.

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