Cum apelează WordPress meniul personalizat al barei de navigare secundare/multi-nivel?

multInternet Marketingoamenii alegWordPressHaideconstrui un site web, dar bara de navigare a unor teme nu acceptă meniuri secundare/cu mai multe niveluri.Dacă nu sunteți mulțumit, puteți încerca să adăugați și să modificați manual stilul de meniu al temei.

Modificarea începe de la header.php O funcție importantă în acest fișier șablon este afișarea meniului.

Dacă utilizați codul pentru a apela categoria ca meniu, este și posibil, dar nu este convenabil să sortați elementele din meniu.

Directoarele cu subcategorii nu sunt ușor de manevrat, așa că vreau să adaug, de asemenea, funcții de meniu personalizate la tema mea, la fel ca și alte teme.

Nu este dificil să adăugați funcția de personalizare a meniului la tema nou creată, există în principal 2 pași.

Primul pas, înregistrarea meniului WordPress

Pentru a utiliza meniul, trebuie mai întâi să vă înregistrați, să deschideți fișierul cu funcții de sub temă și să adăugați următorul cod ▼

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

• Dacă nu există niciun fișier functions.php sub temă, creați unul nou și copiați codul de mai sus pentru a-l salva.

Conectați-văBackend WordPress, apoi accesați Aspect→Meniu.

Dacă puteți vedea ecranul de mai jos, înseamnă că v-ați înregistrat ca ▼

Cele de mai sus înregistrează 2 meniuri:

1. Un meniu de sus Top Menubar.
2. un meniu principal Main bara de meniu.

Al doilea pas, apelul meniului WordPress

După ce meniul este înregistrat, acesta poate fi apelat în fișierul șablon de temă.Pune următorul cod în fișierul header.php și îl poți apela acolo unde vrei să afișezi meniul.

În fișierul header.php, apelați „meniul de sus”▼

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

În fișierul header.php, apelați „meniul principal”▼

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

Apelați „meniul de jos” din fișierul footer.php▼

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

Pasul XNUMX: meniul Setări

După ce meniul este înregistrat și poziția de afișare a meniului este definită în fișierul temă, puteți crea un nou element de meniu în fundalul WordPress.

Apoi, atribuiți elementul de meniu nou creat meniului înregistrat și sugerați relația corespunzătoare ▼

Faceți bara de navigare a meniului wordpress pe mai multe niveluri

Acum haideți să vorbim despre cum să faceți un meniu WordPress pe mai multe niveluri:

Mai întâi ștergeți codul de meniu original din fișierul de funcții al propriei teme WordPress.

sau adăugați acest cod direct ▼

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

• Notă: trebuie să fie înAdăugat afară.

Apoi găsiți codul PHP pentru tema pentru a apela meniul, dacă este brut, de obicei este așa ▼

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

scoateți-l și înlocuiți-l cu ▼

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

• Notă: Asigurați-vă că acest cod nu conține alte div-uri, altfel va fi delimitat de div-ul exterior.

Următorul pas este să adăugați codul de funcție JS derulant și să adăugați următorul cod în fișierul JS al temei ▼

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

Stiluri CSS din meniul WordPress

În sfârșit, înfrumusețarea în stil CSS.

Ce fel de efect ar trebui să fie, dă-ți joc complet imaginației, CSS o poate face ▼

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

• Adăugați codul CSS de mai sus în fișierul style.css al temei și salvați-l.

După salvare, reîmprospătați prima pagină a site-ului dvs., puteți vedea efectul, este foarte simplu?