Erstellen Sie ein benutzerdefiniertes Navigationsmenü in WordPress, ohne Plugins zu verwenden
Veröffentlicht: 2020-11-28Unabhängig davon, welches WordPress-Theme Sie verwenden, wird es mit ziemlicher Sicherheit mindestens eine Menüposition bereitstellen, an der Sie Ihr Menü anzeigen können (normalerweise in der Kopfzeile Ihrer Website). Die Menüs können einfach im Admin-Bereich erstellt und schnell zu diesen voreingestellten Speicherorten hinzugefügt werden. Aber was tun Sie, wenn Sie ein anderes Menü benötigen, das an anderer Stelle auf Ihrer Website angezeigt werden soll? In diesem Tutorial sehen wir uns an, wie Sie Ihr eigenes Navigationsmenü erstellen können, das an einem Ort Ihrer Wahl angezeigt werden kann, ohne ein Plugin verwenden zu müssen.
Lasst uns anfangen!
Registrieren Sie Ihren neuen Speicherort für das benutzerdefinierte Menü
Als erstes müssen wir den Speicherort Ihres neuen benutzerdefinierten Menüs registrieren. Öffnen Sie dazu die Datei functions.php Ihres aktiven Designs mit einem Texteditor Ihrer Wahl (wie Sublime) und fügen Sie den folgenden Code hinzu:
function my_custom_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'my_custom_menu' ); In diesem Codestück haben wir den Hook add_action() verwendet, um eine Callback-Funktion my_custom_menu() hinzuzufügen. Das bedeutet, dass die Funktion my_custom_menu() zusammen mit den standardmäßigen Kernfunktionen ausgeführt wird, die bei jedem Aufruf der init -Aktion ausgeführt werden. Die Zeichenfolge „Mein benutzerdefiniertes Menü“ ist die lesbare Version, die Sie auf der Admin-Seite sehen werden.
Innerhalb der Funktion wird die Kernfunktion register_nav_menu verwendet, um eine Navigationsmenüposition für unser Thema zu registrieren. Falls Sie mehrere Menüs registrieren möchten, können Sie register_nav_menus() verwenden und die Menüpositionen in einem Array wie folgt definieren:
function my_custom_menu() { register_nav_menus( array( 'my-custom-menu' => _( 'My Custom Menu' ), 'my-custom-menu-2' =>_('My Second Custom Menu') ) ); } add_action( 'init', 'my_custom_menu' );Um die Ergebnisse zu bestätigen, gehen Sie in Ihren Admin-Bereich unter Darstellung > Menüs. Sie werden feststellen, dass Ihre benutzerdefinierte Menüposition in den Menüeinstellungen enthalten ist.
Hinweis: Wenn wir an dieser Stelle diesen Ort auswählen, zeigt das Menü im Frontend überhaupt nichts an.
So zeigen Sie unser benutzerdefiniertes Menü an
Angenommen, wir möchten, dass die neue Menüposition für ein sekundäres horizontales Menü verwendet wird, das sich unterhalb des „Horizontalen Desktop-Menüs“ befindet, das bereits in unserem Design vorhanden ist.
Um dies zu erreichen, fügen wir etwas Code in die Vorlage des Themas ein, wo das Menü angezeigt werden soll. In diesem Beispiel verwenden wir das Design Twenty Twenty und bearbeiten die Datei header.php, um unser Menü anzuzeigen. Sie finden diese Datei im Ordner des Themas.
Öffnen Sie die Datei header.php mit Ihrem Editor und finden Sie dieses Element im Code um Zeile 33 herum.
<header class="header-footer-group" role="banner">Direkt unter diesem Abschnitt fügen wir unseren Code ein, um unseren neuen Speicherort für das benutzerdefinierte Menü anzuzeigen: „my-custom-menu“.
<header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) ); ?>Der theme_location-Wert muss mit dem Namen identisch sein, den Sie für Ihr Menü im zuvor eingefügten functions.php-Code angegeben haben. In unserem Fall: 'my-custom-menu'.
Lassen Sie uns nun ein Testmenü erstellen, um zu sehen, ob dies funktioniert. Gehen Sie dazu zu Darstellung > Menüs und beginnen Sie mit der Erstellung eines neuen Menüs.
Geben Sie dem Menü den Titel „Sekundäres Menü“, wählen Sie „Mein benutzerdefiniertes Menü“ für einen Ort und klicken Sie dann auf die Schaltfläche „Menü erstellen“.
Fügen Sie schließlich einige Punkte zum Menü hinzu (z. B. Menüpunkt 1, Menüpunkt 2, Menüpunkt 3) und speichern Sie dann das Menü.
Mal sehen, was wir jetzt im Frontend haben.
Wir haben es geschafft, unser neues Menü zu zeigen, aber es ist ziemlich chaotisch, nicht wahr?
Wenn wir unseren Quellcode betrachten, werden wir feststellen, dass die Funktion wp_nav_menu() diesen HTML-Code erstellt hat
<div class="menu-secondary-menu-container"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li> </ul> </div>Wir können also die im Code beschriebenen Klassen verwenden, um unser Menü zu verschönern. Dazu verwenden wir etwas CSS. Suchen Sie style.css (dies befindet sich normalerweise am selben Ort wie die Datei header.php) und öffnen Sie sie dann mit Ihrem Editor, um diesen Code hinzuzufügen:
ul#menu-secondary-menu { text-align: right; padding: 10px 30px; } ul#menu-secondary-menu li { list-style: none; display: inline-block; padding: 1px; } ul#menu-secondary-menu li:hover { border: 1px solid #c00202; padding: 0; border-radius: 3px; } ul#menu-secondary-menu li a { text-decoration: none; padding: 5px; font-size: 14px; }Das Ergebnis wird jetzt viel ordentlicher und viel mehr im Einklang mit dem Stil unserer Demo-Website sein.
Zusätzliche Menüanpassung
Die Funktion wp_nav_menu(), die WordPress zum Anzeigen von Menüs bereitstellt, verfügt über eine Reihe von Optionen, mit denen Sie sie weiter anpassen können.
' theme_location '
Wie oben beschrieben, entspricht dieser Parameter den Schlüsseln, die an die Funktion register_nav_menus() in functions.php übergeben werden
wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) );'Menü_Klasse'
Es gibt die Option „ menu_class “, mit der Sie Ihre eigene Klasse für das Menü angeben können.
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'menu_class' => 'my-custom-menu' ) ); 
Wie Sie vielleicht schon bemerkt haben, ersetzt die Klasse keine andere Klasse, sondern wird stattdessen im ul-Element hinzugefügt.
'menu_id'
Im Gegensatz zur Option class ersetzt die Option menu_id die aktuelle Menü-ID. Der generierte HTML-Code für das <ul>-Element sieht in etwa so aus.
<ul class="menu">Wenn diese Option nicht verwendet wird, ist die ID der Menü-Slug, der bei Verwendung mehrerer Instanzen erhöht wird.
'Container'
Dieser Parameter definiert den Elementtyp, der das Menü umgibt. Der Standardwert ist „div“. Wenn Sie zum Beispiel diesen Code verwenden:
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container' => 'nav', ) );Sie erhalten dieses Ergebnis:
'container_class'
Dies ist eine Klasse, die auf das übergeordnete Menüelement angewendet wird:
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'my-custom-menu-wrapper', ) ); 
Sie können auch Inhalte vor oder nach jedem Menüpunkt-Link einfügen, indem Sie die Parameter „before“ und „after“ verwenden. Dies ist sehr nützlich, wenn Sie einen Bindestrich oder ein Symbol voranstellen oder die Menüelemente in ein span-Tag einschließen möchten. Sie können das folgende Beispiel selbst ausprobieren, um dies in Aktion zu sehen:
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<span class="menulink">', 'after' => '</span>', ) ); wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) ); wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );Sie können den Menüpunkten auch Symbole hinzufügen. Versuchen Sie zum Beispiel, das Font Awesome-Plug-in zu installieren, um seine Symbolbibliothek einzuschließen, und verwenden Sie die Menüoption „Vorher“, um ein Font-Awesome-Symbol auf die Menüelemente anzuwenden.
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<i class="fas fa-caret-right"></i>', ) );Sie finden den Code für jedes Symbol in der Symbolliste des Plugins.
Der Walker-Parameter
Zu guter Letzt stellen wir ein Beispiel dafür bereit, wie der Walker-Parameter beim Anpassen von Menüs hilft. Wenn Sie nicht wissen, was die WordPress Walker-Klasse ist, dann wird das Folgende wahrscheinlich nicht viel Sinn machen. Wir empfehlen, zuerst „Getting Familiar with the WordPress Walker Class“ zu lesen.
wp_nav_menu( array( 'walker' => new Walker_Custom_Menu ) );Um die Walker-Klasse zu demonstrieren, fügen wir unserem Menü einen „Unterpunkt“ hinzu.
Wir überschreiben die standardmäßige Walker-Klasse, die WordPress bereitstellt. Diese befindet sich in der Datei wp-includes/class-walker-nav-menu.php. Um dies zu erreichen, gehen Sie zu Ihrer function.php-Datei und fügen Sie den folgenden Code ein:
if ( !class_exists('My_Nav_Menu_Walker') ) { class My_Nav_Menu_Walker extends Walker { var $tree_type = array( 'post_type', 'taxonomy', 'custom' ); var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent"; $output .= "<i class=\"dropdown icon\"></i>\n"; $output .= "<div class=\"menu\">\n"; } function end_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "$indent</div>\n"; } function start_el(&$output, $item, $depth, $args) { $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array(); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', '', $item, $args ); $id = strlen( $id ) ? '' : ''; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes . $id . $value . $class_names . '>'; $item_output .= '<div class="item">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</div>'; $item_output .= "</a>\n"; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }Ersetzen Sie nun in Ihrer headers.php Ihren Menücode durch diesen (wir geben absichtlich beide Menüversionen aus, nur um die Ergebnisse zu vergleichen):
wp_nav_menu(); // Default 'walker' => new Walker_Nav_Menu() wp_nav_menu( array( 'walker' => new My_Nav_Menu_Walker() ) ); 
Wenn Sie diesen Code mit der ursprünglichen Walker_Nav_Menu-Klasse vergleichen, werden Sie feststellen, dass $tree_type und $db_fields blieben, der Rest jedoch geändert wurde. Nehmen Sie sich Zeit und vergleichen Sie die Code- und HTML-Ausgaben dieser beiden Versionen desselben Menüs und versuchen Sie, selbst zu experimentieren, indem Sie mit der My_Nav_Menu_Walker-Klasse herumspielen.
Fazit
Menüs auf Websites sind eindeutig ziemlich wichtig! Die volle Kontrolle über die Platzierung und Ausgabe von Menüs zu haben, erweitert Ihre Fähigkeiten als Theme-Entwickler und eröffnet eine Reihe aufregender neuer Möglichkeiten bei der Gestaltung von Websites, ohne auf Plugins angewiesen zu sein, was immer großartig ist.