Wie ruft WordPress das benutzerdefinierte Menü der sekundären/mehrstufigen Navigationsleiste auf?

viel网络 网络Menschen wählenWordPressKommen Sieeine Webseite bauen, aber die Navigationsleiste einiger Themen unterstützt keine sekundären/mehrstufigen Menüs. Wenn Sie nicht zufrieden sind, können Sie versuchen, den Menüstil des Themas manuell hinzuzufügen und zu ändern.

Die Modifikation geht von der header.php aus Eine wichtige Funktion in dieser Template-Datei ist die Anzeige des Menüs.

Wenn Sie die Kategorie per Code als Menü aufrufen, ist es auch möglich, aber nicht komfortabel, die Menüpunkte zu sortieren.

Verzeichnisse mit Unterkategorien sind nicht einfach zu handhaben, daher möchte ich meinem Theme ebenso wie anderen Themes benutzerdefinierte Menüfunktionen hinzufügen.

Es ist nicht schwierig, dem neu erstellten Thema eine Menüanpassungsfunktion hinzuzufügen, es gibt hauptsächlich 2 Schritte.

Der erste Schritt, die Registrierung des WordPress-Menüs

Um das Menü zu verwenden, müssen Sie sich zuerst registrieren, die Funktionsdatei unter dem Thema öffnen und den folgenden Code ▼ anhängen

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

• Wenn unter dem Design keine Datei functions.php vorhanden ist, erstellen Sie eine neue und kopieren Sie den obigen Code, um sie zu speichern.

登录WordPress-Backend, und gehen Sie dann zu Aussehen→Menü.

Wenn Sie den Bildschirm unten sehen können, bedeutet dies, dass Sie sich als ▼ registriert haben

Die obigen Register 2 Menüs:

1. Ein Top-Menü Top-Menüleiste.
2. ein Hauptmenü Main Menüleiste.

Der zweite Schritt, das WordPress-Menü aufrufen

Nachdem das Menü registriert ist, kann es in der Template-Datei des Themes aufgerufen werden.Fügen Sie den folgenden Code in die Datei header.php ein, und Sie können ihn dort aufrufen, wo Sie das Menü anzeigen möchten.

Rufen Sie in der Datei header.php das „top menu“▼ auf

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

Rufen Sie in der Datei header.php das „Hauptmenü“▼ auf

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

Rufen Sie das „untere Menü“ in der Datei footer.php auf▼

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

Schritt XNUMX: Einstellungsmenü

Nachdem das Menü registriert und die Anzeigeposition des Menüs in der Theme-Datei definiert wurde, können Sie einen neuen Menüpunkt im WordPress-Hintergrund erstellen.

Weisen Sie dann den neu erstellten Menüpunkt dem registrierten Menü zu und schlagen Sie die entsprechende Beziehung vor ▼

Erstellen Sie eine WordPress-Menünavigationsleiste mit mehreren Ebenen

Lassen Sie uns nun darüber sprechen, wie man ein mehrstufiges WordPress-Menü erstellt:

Löschen Sie zunächst den ursprünglichen Menücode in der Funktionsdatei Ihres eigenen WordPress-Themes.

oder fügen Sie diesen Code direkt hinzu ▼

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

• Hinweis: muss drin seinAußen hinzugefügt.

Suchen Sie dann den PHP-Code für das Thema, um das Menü aufzurufen, wenn es roh ist, ist es normalerweise so ▼

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

entfernen Sie es und ersetzen Sie es durch ▼

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

• Hinweis: Stellen Sie sicher, dass dieser Code keine anderen Divs enthält, da er sonst durch das äußere Div begrenzt wird.

Der nächste Schritt besteht darin, den Dropdown-JS-Funktionscode hinzuzufügen und den folgenden Code zur JS-Datei des Designs hinzuzufügen ▼

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

CSS-Stile für das WordPress-Menü

Schließlich CSS-Stilverschönerung.

Was für ein Effekt sein soll, lassen Sie Ihrer Fantasie freien Lauf, CSS kann das ▼

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

• Fügen Sie den obigen CSS-Code zur style.css-Datei des Designs hinzu und speichern Sie ihn.

Aktualisieren Sie nach dem Speichern die Startseite Ihrer Website, Sie können den Effekt sehen, ist es sehr einfach?