Directory articoli
MoltiMarketing su Internetle persone scelgonoWordPressVenirecostruire un sito web, ma la barra di navigazione di alcuni temi non supporta i menu secondari/multilivello. Se non sei soddisfatto, puoi provare ad aggiungere o modificare manualmente lo stile del menu del tema.
La modifica parte da header.php Una funzione importante in questo file template è la visualizzazione del menu.
Se si utilizza il codice per chiamare la categoria come menu, è anche possibile, ma non è conveniente ordinare le voci di menu.
La directory con le sottocategorie non è facile da gestire, quindi voglio anche aggiungere una funzione di menu personalizzata al mio tema come altri temi.
Non è difficile aggiungere la funzione di personalizzazione del menu al tema appena realizzato, ci sono principalmente 2 passaggi.
Il primo passo, la registrazione del menu di WordPress
Per utilizzare il menu, devi prima registrarti, aprire il file delle funzioni sotto il tema e aggiungere il seguente codice ▼
<?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' => __('底部菜单') ) ); } ?>
- Se non c'è un file functions.php sotto il tema, creane uno nuovo e copia il codice sopra per salvarlo.
登录Backend di WordPress, quindi vai su Aspetto→Menu.
Se puoi vedere la schermata qui sotto, significa che ti sei registrato come ▼
Quanto sopra registra 2 menu:
- Un menu in alto Barra dei menu in alto.
- un menu principale Main barra dei menu.
Il secondo passaggio, la chiamata al menu di WordPress
Dopo che il menu è stato registrato, può essere richiamato nel file del modello del tema Inserisci il codice seguente nel file header.php e puoi chiamarlo dove vuoi visualizzare il menu.
Nel file header.php, chiama il "menu principale"▼
//顶部菜单调用 <?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>
Nel file header.php, chiama il "menu principale"▼
//主菜单调用 <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')); ?>
Chiama il "menu in basso" nel file footer.php▼
//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>
Passaggio XNUMX: menu Impostazioni
Dopo che il menu è stato registrato e la posizione di visualizzazione del menu è stata definita nel file del tema, puoi creare una nuova voce di menu sullo sfondo di WordPress.
Quindi, assegnare la voce di menu appena creata al menu registrato e suggerire la relazione corrispondente ▼
Crea la barra di navigazione del menu multilivello di wordpress
Ora parliamo di come creare un menu multilivello di WordPress:
Per prima cosa elimina il codice del menu originale nel file delle funzioni del tuo tema WordPress.
oppure aggiungi questo codice direttamente ▼
<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>
- Nota: deve essere presenteAggiunto all'esterno.
Quindi trova il codice PHP per il tema per chiamare il menu, se è grezzo, di solito è così ▼
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
rimuoverlo e sostituirlo con ▼
<div id="menu"><?php if(function_exists('wp_nav_menu')) { wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul')); } ?> </div>
- Nota: assicurati che questo codice non contenga altri div, altrimenti sarà delimitato dal div esterno.
Il passaggio successivo consiste nell'aggiungere il codice della funzione JS a discesa e aggiungere il codice seguente al file JS del tema ▼
jQuery(document).ready(function($) { $('#nav li').hover(function() { $('ul', this).slideDown(200)}, function() {$('ul', this).slideUp(300)});});
Menu WordPress stili CSS
Infine, abbellimento dello stile CSS.
Che tipo di effetto dovrebbe essere, dai pieno gioco alla tua immaginazione, CSS può farlo ▼
#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;}
- Aggiungi il codice CSS sopra al file style.css del tema e salvalo.
Dopo aver salvato, aggiorna la prima pagina del tuo sito web, puoi vedere l'effetto, è molto semplice?
Speranza Chen Weiliang Blog ( https://www.chenweiliang.com/ ) condiviso "In che modo WordPress chiama il menu personalizzato della barra di navigazione secondaria/multilivello? , per aiutarti.
Benvenuti a condividere il link di questo articolo:https://www.chenweiliang.com/cwl-1521.html
Benvenuto nel canale Telegram del blog di Chen Weiliang per ricevere gli ultimi aggiornamenti!
📚 Questa guida contiene un valore enorme, 🌟Questa è un'opportunità rara, non perderla! ⏰⌛💨
Condividi e metti mi piace se ti va!
La tua condivisione e i tuoi like sono la nostra continua motivazione!