Kako WordPress pokliče meni po meri sekundarne/večnivojske navigacijske vrstice?

veliko营销ljudje izbirajoWordPressPriditezgraditi spletno stran, vendar navigacijska vrstica nekaterih tem ne podpira sekundarnih/večnivojskih menijev. Če niste zadovoljni, lahko poskusite ročno dodati in spremeniti slog menija teme.

Sprememba se začne pri header.php Pomembna funkcija v tej datoteki predloge je prikaz menija.

Če s kodo prikličete kategorijo kot meni, je prav tako možno, vendar ni priročno razvrščati menijskih elementov.

Z imenikom s podkategorijami ni enostavno ravnati, zato želim svoji temi dodati funkcijo menija po meri, tako kot druge teme.

Novo narejeni temi ni težko dodati funkcije prilagajanja menija, v glavnem sta koraka 2.

Prvi korak, registracija menija WordPress

Za uporabo menija se morate najprej registrirati, odpreti datoteko funkcij pod temo in dodati naslednjo kodo ▼

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

• Če pod temo ni datoteke functions.php, ustvarite novo in kopirajte zgornjo kodo, da jo shranite.

登录WordPress backend, nato pa pojdite na Videz→Meni.

Če vidite spodnji zaslon, to pomeni, da ste se registrirali kot ▼

Zgoraj registrirana 2 menija:

1. Zgornji meni Zgornja menijska vrstica.
2. glavni meni Main menijska vrstica.

Drugi korak, klic menija WordPress

Ko je meni registriran, ga lahko pokličete v datoteki predloge teme. V datoteko header.php vstavite naslednjo kodo in jo lahko pokličete tam, kjer želite prikazati meni.

V datoteki header.php pokličite "zgornji meni"▼

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

V datoteki header.php pokličite "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')); ?>

Pokličite "spodnji meni" v datoteki footer.php▼

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

XNUMX. korak: meni z nastavitvami

Ko je meni registriran in je položaj prikaza menija definiran v datoteki teme, lahko ustvarite nov element menija v ozadju WordPress.

Nato novo ustvarjeni menijski element dodelite registriranemu meniju in predlagajte ustrezno razmerje ▼

Naredi večnivojsko menijsko navigacijsko vrstico za wordpress

Zdaj pa se pogovorimo o tem, kako narediti večnivojski meni WordPress:

Najprej izbrišite izvorno kodo menija v funkcijski datoteki svoje teme WordPress.

ali dodajte to kodo neposredno ▼

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

• Opomba: mora biti vDodano zunaj.

Nato poiščite kodo PHP za temo, da prikličete meni, če je neobdelana, je običajno taka ▼

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

odstranite in zamenjajte s ▼

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

• Opomba: Prepričajte se, da ta koda ne vsebuje drugih elementov div, sicer bo omejena z zunanjim elementom div.

Naslednji korak je dodajanje spustne funkcijske kode JS in dodajanje naslednje kode v datoteko JS teme ▼

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

Slogi CSS menija WordPress

Končno polepšanje v slogu CSS.

Kakšen naj bi bil učinek, dajte polno prosto pot svoji domišljiji, CSS to zmore ▼

#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 zgornjo kodo CSS v datoteko style.css teme in jo shranite.

Ko shranite, osvežite naslovno stran vaše spletne strani, lahko vidite učinek, je zelo preprosto?