Πώς καλεί το WordPress το δευτερεύον/πολυεπίπεδο προσαρμοσμένο μενού της γραμμής πλοήγησης;

πολλά απο网络 营销οι άνθρωποι επιλέγουνWordPressΕλαφτιάξτε μια ιστοσελίδα, αλλά η γραμμή πλοήγησης ορισμένων θεμάτων δεν υποστηρίζει δευτερεύοντα μενού/μενού πολλαπλών επιπέδων. Εάν δεν είστε ικανοποιημένοι, μπορείτε να δοκιμάσετε να προσθέσετε και να τροποποιήσετε με μη αυτόματο τρόπο το στυλ μενού του θέματος.

Η τροποποίηση ξεκινά από το header.php Μια σημαντική λειτουργία σε αυτό το αρχείο προτύπου είναι η εμφάνιση του μενού.

Εάν χρησιμοποιείτε τον κωδικό για να καλέσετε την κατηγορία ως μενού, είναι επίσης δυνατό, αλλά δεν είναι βολικό να ταξινομήσετε τα στοιχεία μενού.

Ο κατάλογος με τις υποκατηγορίες δεν είναι εύκολος στον χειρισμό, επομένως θέλω επίσης να προσθέσω μια προσαρμοσμένη λειτουργία μενού στο θέμα μου όπως και άλλα θέματα.

Δεν είναι δύσκολο να προσθέσετε τη λειτουργία προσαρμογής μενού στο νέο θέμα, υπάρχουν κυρίως 2 βήματα.

Το πρώτο βήμα, εγγραφή στο μενού WordPress

Για να χρησιμοποιήσετε το μενού, πρέπει πρώτα να εγγραφείτε, να ανοίξετε το αρχείο συναρτήσεων κάτω από το θέμα και να προσθέσετε τον ακόλουθο κωδικό ▼

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

• Εάν δεν υπάρχει αρχείο functions.php κάτω από το θέμα, δημιουργήστε ένα νέο και αντιγράψτε τον παραπάνω κώδικα για να το αποθηκεύσετε.

συνδεθείτεWordPress backend, και μετά μεταβείτε στο Εμφάνιση→ Μενού.

Εάν μπορείτε να δείτε την παρακάτω οθόνη, σημαίνει ότι έχετε εγγραφεί ως ▼

Το παραπάνω καταχωρεί 2 μενού:

1. Ένα κορυφαίο μενού Top Menubar.
2. ένα κύριο μενού Μain γραμμή μενού.

Το δεύτερο βήμα, η κλήση μενού του WordPress

Αφού καταχωρηθεί το μενού, μπορεί να κληθεί στο αρχείο προτύπου θέματος. Βάλτε τον παρακάτω κώδικα στο αρχείο header.php και μπορείτε να τον καλέσετε όπου θέλετε να εμφανιστεί το μενού.

Στο αρχείο header.php, καλέστε το "επάνω μενού" ▼

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

Στο αρχείο header.php, καλέστε το "κύριο μενού" ▼

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

Καλέστε το "κάτω μενού" στο αρχείο footer.php▼

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

Βήμα XNUMX: Μενού ρυθμίσεων

Αφού καταχωρηθεί το μενού και οριστεί η θέση εμφάνισης του μενού στο αρχείο θέματος, μπορείτε να δημιουργήσετε ένα νέο στοιχείο μενού στο φόντο του WordPress.

Στη συνέχεια, αντιστοιχίστε το στοιχείο μενού που δημιουργήθηκε πρόσφατα στο καταχωρημένο μενού και προτείνετε την αντίστοιχη σχέση ▼

Δημιουργήστε τη γραμμή πλοήγησης μενού πολλαπλών επιπέδων wordpress

Τώρα ας μιλήσουμε για το πώς να δημιουργήσετε ένα μενού πολλαπλών επιπέδων WordPress:

Πρώτα διαγράψτε τον αρχικό κώδικα μενού στο αρχείο λειτουργιών του δικού σας θέματος WordPress.

ή προσθέστε αυτόν τον κωδικό απευθείας ▼

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

• Σημείωση: πρέπει να είναι μέσαΠροστέθηκε εκτός.

Στη συνέχεια, βρείτε τον κώδικα PHP για το θέμα για να καλέσετε το μενού, αν είναι ακατέργαστο, συνήθως είναι κάπως έτσι ▼

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

αφαιρέστε το και αντικαταστήστε το με ▼

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

• Σημείωση: Βεβαιωθείτε ότι αυτός ο κωδικός δεν περιέχει άλλα div, διαφορετικά θα περιορίζεται από το εξωτερικό div.

Το επόμενο βήμα είναι να προσθέσετε τον αναπτυσσόμενο κωδικό λειτουργίας JS και να προσθέσετε τον ακόλουθο κώδικα στο αρχείο JS του θέματος ▼

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

Στυλ CSS μενού WordPress

Τέλος, καλλωπισμός στυλ CSS.

Τι είδους εφέ πρέπει να είναι, δώστε πλήρη λειτουργία στη φαντασία σας, το CSS μπορεί να το κάνει ▼

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

• Προσθέστε τον παραπάνω κώδικα CSS στο αρχείο style.css του θέματος και αποθηκεύστε τον.

Μετά την αποθήκευση, ανανεώστε την πρώτη σελίδα του ιστότοπού σας, μπορείτε να δείτε το αποτέλεσμα, είναι πολύ απλό;