Hvordan kaller WordPress en tilpasset meny for sekundær/flernivå navigasjonslinje?

mye avInternettmarkedsføringfolk velgerWordPressKommebygge en nettside, men navigasjonslinjen til enkelte temaer støtter ikke sekundære/flernivåmenyer. Hvis du ikke er fornøyd, kan du prøve å manuelt legge til og endre menystilen til temaet.

Endringen starter fra header.php En viktig funksjon i denne malfilen er visningen av menyen.

Hvis du bruker koden til å kalle kategorien som en meny, er det også mulig, men det er ikke praktisk å sortere menyelementene.

Kataloger med underkategorier er ikke enkle å håndtere, så jeg vil også legge til egendefinerte menyfunksjoner til temaet mitt akkurat som andre temaer.

Det er ikke vanskelig å legge til menytilpasningsfunksjon til det nylagde temaet, det er hovedsakelig 2 trinn.

Det første trinnet, registrering av WordPress-meny

For å bruke menyen må du først registrere deg, åpne funksjonsfilen under temaet og legge til 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 det ikke er noen functions.php-fil under temaet, lag en ny og kopier koden ovenfor for å lagre den.

登录WordPress-backend, og gå deretter til Utseende→ Meny.

Hvis du kan se skjermen nedenfor, betyr det at du har registrert deg som ▼

Ovennevnte registrerer 2 menyer:

1. En toppmeny Toppmenylinje.
2. en hovedmeny Main menylinje.

Det andre trinnet, WordPress-menykallet

Etter at menyen er registrert kan den kalles opp i temamalfilen Legg inn følgende kode i header.php-filen, så kan du kalle den hvor du vil vise menyen.

I header.php-filen kaller du opp "toppmenyen"▼

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

I header.php-filen kaller du "hovedmenyen"▼

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

Kall opp "bunnmenyen" i footer.php-filen▼

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

Trinn XNUMX: Innstillingsmeny

Etter at menyen er registrert og visningsposisjonen til menyen er definert i temafilen, kan du opprette et nytt menyelement i WordPress-bakgrunnen.

Deretter tilordner du det nyopprettede menyelementet til den registrerte menyen, og foreslår det tilsvarende forholdet ▼

Lag wordpress multi-level meny navigasjonslinje

La oss nå snakke om hvordan du lager en WordPress flernivåmeny:

Slett først den originale menykoden i funksjonsfilen til ditt eget WordPress-tema.

eller legg til denne koden direkte ▼

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

• Merk: må være inneLagt til utenfor.

Finn så PHP-koden for temaet å kalle menyen, hvis den er rå, er den vanligvis slik ▼

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

fjern den og erstatt 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>

• Merk: Pass på at denne koden ikke inneholder andre div, ellers vil den være avgrenset av den ytre div.

Det neste trinnet er å legge til rullegardinmenyen JS-funksjonskode og legge til følgende kode i temaets JS-fil ▼

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

WordPress-meny CSS-stiler

Til slutt, forskjønning i CSS-stil.

Hva slags effekt skal være, gi full spill til fantasien din, CSS kan gjø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;}

• Legg til CSS-koden ovenfor i temaets style.css-fil og lagre den.

Etter å ha lagret, oppdater forsiden på nettstedet ditt, du kan se effekten, er det veldig enkelt?