Hvordan kalder WordPress sekundær/multi-level navigation bar tilpasset menu?

meget网络 营销folk vælgerWordPressKommebygge en hjemmeside, men navigationslinjen i nogle temaer understøtter ikke sekundære/multi-level menuer. Hvis du ikke er tilfreds, kan du prøve manuelt at tilføje og ændre temaets menustil.

Ændringen starter fra header.php En vigtig funktion i denne skabelonfil er visningen af ​​menuen.

Hvis du bruger koden til at kalde kategorien som en menu, er det også muligt, men det er ikke praktisk at sortere menupunkterne.

Mapper med underkategorier er ikke lette at håndtere, så jeg vil også tilføje brugerdefinerede menufunktioner til mit tema ligesom andre temaer.

Det er ikke svært at tilføje menutilpasningsfunktion til det nylavede tema, der er hovedsageligt 2 trin.

Det første trin, WordPress menuregistrering

For at bruge menuen skal du først registrere dig, åbne funktionsfilen under temaet og tilføje følgende kode ▼

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

• Hvis der ikke er nogen functions.php-fil under temaet, skal du oprette en ny og kopiere ovenstående kode for at gemme den.

登录WordPress backend, og gå derefter til Udseende→ Menu.

Hvis du kan se skærmen nedenfor, betyder det, at du har registreret dig som ▼

Ovenstående registrerer 2 menuer:

1. En topmenu Topmenulinje.
2. en hovedmenu Main menulinje.

Det andet trin, WordPress-menukaldet

Efter at menuen er registreret, kan den kaldes i temaskabelonfilen Læg følgende kode i header.php filen, og du kan kalde den, hvor du vil vise menuen.

I header.php-filen skal du kalde "topmenuen"▼

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

I header.php-filen skal du kalde "hovedmenuen"▼

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

Kald "bundmenuen" i footer.php-filen▼

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

Trin XNUMX: Indstillingsmenu

Efter at menuen er registreret, og menuens visningsposition er defineret i temafilen, kan du oprette et nyt menupunkt i WordPress-baggrunden.

Tildel derefter det nyoprettede menupunkt til den registrerede menu, og foreslå det tilsvarende forhold ▼

Lav wordpress menunavigationslinje på flere niveauer

Lad os nu tale om, hvordan man laver en WordPress multi-level menu:

Slet først den originale menukode i funktionsfilen til dit eget WordPress-tema.

eller tilføj denne kode direkte ▼

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

• Bemærk: skal være medTilføjet udenfor.

Find derefter PHP-koden til temaet for at kalde menuen, hvis den er rå, er den normalt sådan ▼

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

fjern den og udskift den med ▼

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

• Bemærk: Sørg for, at denne kode ikke indeholder andre div'er, ellers vil den være afgrænset af den ydre div.

Det næste trin er at tilføje rullemenuen JS-funktionskode og tilføje følgende kode til temaets JS-fil ▼

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

WordPress menu CSS stilarter

Endelig forskønnelse i CSS-stil.

Hvilken slags effekt skal være, giv fuld spil til din fantasi, CSS kan gøre det ▼

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

• Tilføj ovenstående CSS-kode til temaets style.css-fil og gem den.

Når du har gemt, skal du opdatere forsiden af ​​din hjemmeside, du kan se effekten, er det meget enkelt?