Eine WordPress-Website wäre nicht viel ohne ihre Menüs und Untermenüs. Diese Menüs kannst du in WordPress ganz einfach nach deinen Wünschen anpassen. So ist dein WordPress-Menü ein wichtiges Instrument, um ein hohes Suchranking zu erreichen und Besucher auf deiner Website zu halten.
Die speziellen Bildschirme in WordPress täuschen darüber hinweg, wie komplex deine Menüs sein können. Außerdem kannst du Menüs an verschiedenen Stellen auf deiner Website anzeigen. Wenn du über die nötigen Programmierkenntnisse verfügst, kannst du dein WordPress-Menü mit fast unbegrenzten Möglichkeiten anpassen.
In diesem Beitrag geben wir dir eine ausführliche Anleitung zum Erstellen eines WordPress-Menüs. Außerdem zeigen wir dir, wie du die Funktionalität auf verschiedene Weise erweitern kannst.
Die Anatomie eines WordPress-Menüs
Für Uneingeweihte ist ein WordPress-Menü oft eine Sammlung von Links (einschließlich Dropdowns). Es ist eine einfache Funktion, die nur ein „Wirbel“ im Rückgrat deiner Website ist.
Wo du die Menüs auf einer Website sehen kannst, wird im nächsten Abschnitt genauer erklärt. Bis dahin solltest du wissen, dass sie überall dort Platz finden können, wo du sie anzeigen möchtest. Möglicherweise hast du nur ein paar vorausgewählte Optionen (basierend auf den Widgetbereichen). Technisch gesehen, kann ein Menü jedoch überall platziert werden.
Natürlich ist ein WordPress-Menü das A und O für die Navigation auf einer Webseite. Ein klares und definiertes Navigationsmenü hilft den Nutzern, sich auf deiner Website zurechtzufinden, und senkt die Absprungrate.
Sie erfüllen noch einen weiteren Zweck: Deine Menüs helfen bei der Suchmaschinenoptimierung (SEO). Bei der SEO-Optimierung eines WordPress-Menüs kommt es mehr darauf an, was du weglässt als was du einfügst. Zunächst einmal kannst du auf Elemente wie Tag-Clouds verzichten und die Anzahl der Links, die du einfügst, gering halten.
Google lässt zwar bis zu 250 Links auf einer Seite zu, aber es ist wichtig, dass du deinen „Linkwert“ hoch hältst. Wenn du also die Anzahl der externen Links reduzierst, wird dir das auf lange Sicht helfen.
Die verschiedenen Arten von WordPress-Menüstrukturen
Wie du vielleicht schon weißt, kannst du dich je nach den Bedürfnissen deiner Anwendung für verschiedene WordPress-Menüstrukturen entscheiden.
Header-Menüs zum Beispiel sind am weitesten verbreitet, da sie die Hauptnavigation der Website darstellen. Oft siehst du auch kleinere Menüs oberhalb der Hauptnavigation, da dies ein hervorragender Platz für Social Media Icons, Suchleisten und mehr ist.
Die Website des Kinsta-Partners SAU/CAL hat ein „Fly-in“-Menü, das die Navigation und soziale Links enthält:
Dieses Menü zeigt, dass es mehr Anwendungsfälle für ein WordPress-Menü gibt als die Navigation auf einer Website. Mit den integrierten Funktionen von WordPress (mehr dazu später) kannst du ein Menü für fast alles erstellen, was du brauchst.
Genauso beliebt wie die Header-Navigation ist der Footer. Du wirst diesen Bereich oft nutzen, um deine Hauptnavigation für Nutzer zu wiederholen, die nach unten scrollen. Außerdem ist er ein hervorragender Ort, um kontextbezogene Links für deine Produkte und Dienstleistungen anzubieten:
Du wirst auch Menüs in einer Seitenleiste sehen, wenn die Website diese verwendet:
Obwohl du hier in den meisten Fällen keine Hauptnavigation sehen wirst, ist es ein traditioneller Platz für soziale Links, Blogpost-Archive und vieles mehr.
Wie du ein eigenes WordPress-Menü erstellst (3 Methoden)
Die Erstellung eines WordPress-Menüs ist ein einfacher Prozess, unabhängig von deinem Kenntnisstand. Es gibt drei Möglichkeiten: Nutze die eingebauten Funktionen von WordPress, installiere ein passendes Plugin oder mach dir die Hände mit Code schmutzig.
Im Folgenden zeigen wir dir, wie du mit allen drei Methoden ein WordPress-Menü erstellen kannst.
1. Verwende die in WordPress integrierten Funktionen, um dein Menü zu erstellen
WordPress verfügt über integrierte Tools, die dir beim Erstellen eines Menüs helfen. Ein spezieller Bildschirm in der WordPress-Verwaltung wird nur den wenigsten Nutzern bekannt sein.
Natürlich hat es zahlreiche Vorteile, wenn du die nativen Funktionen für dein WordPress-Menü verwendest. Zunächst einmal ist die Kompatibilität mit deiner Website gewährleistet. Außerdem kannst du deine Menüs mit einer vertrauten Oberfläche und nativen Tools erstellen.
Gehe dazu in WordPress auf die Seite Erscheinungsbild > Menüs:
Dieser Bildschirm ist in verschiedene Bereiche unterteilt. Ganz oben findest du die Option, ein aktuelles Menü auszuwählen oder ein neues zu erstellen:
Wenn du dich entscheidest, ein neues Menü zu erstellen, gib ihm einen Namen und sieh dir den Abschnitt Menüeinstellungen an:
Hier gibt es eine Menge Kästchen, aber du musst vor allem zwei Entscheidungen treffen:
- Füge automatisch Seiten der obersten Ebene zum Menü hinzu. Mit „oberster Ebene“ sind hier Seiten gemeint, die du in WordPress erstellst und die keine Unterseiten von anderen Seiten sind. Ein Blogbeitrag ist zum Beispiel keine Seite der obersten Ebene, weil er in vielen Fällen eine übergeordnete Archivseite hat (z. B. /blog). Andererseits ist eine Kontaktseite oft eine Toplevel-Seite, weil sie normalerweise keine übergeordnete Seite hat.
- Die Position des Menüs. Jedes Theme hat seine eigenen Menüpunkte. Wenn du die Kerndateien deines Themes nicht änderst, haben die Theme-Entwickler diese Menüpunkte fest programmiert. Bei einigen Themes kannst du sie in den Einstellungen anpassen.
Wenn du bereit bist, klicke auf die Schaltfläche Menü erstellen. Der Bildschirm wird aktualisiert und zeigt an, dass du dich in deinem neuen Menü befindest. Als Nächstes wirf einen Blick auf die linke Seite des Bildschirms:
Dieser Bildschirm listet alle Beiträge, Seiten, Taxonomien und andere verlinkbare Elemente auf deiner Website auf. Du erstellst dein Menü, indem du die Kästchen auf der linken Seite markierst und dann auf die Schaltfläche Zum Menü hinzufügen klickst.
Dadurch werden sie in den mittleren Bereich des Menüs verschoben:
Hier kannst du Menüpunkte per Drag & Drop an ihren Platz ziehen. Wenn du auf den Erweiterungspfeil neben jedem Eintrag klickst, kannst du auch eine Beschriftung für deinen Menüeintrag festlegen oder ihn entfernen:
Wenn du auf Menü speichern klickst, kannst du loslegen. Wenn du das Menü Bildschirmoptionen am oberen Rand des Bildschirms erweiterst, kannst du noch mehr mit deinem WordPress-Menü machen:
Mit der Gruppe Bildschirmelemente kannst du Menü-Metakästen in der linken Seitenleiste anzeigen. Im Gegensatz dazu zeigt die Gruppe Erweiterte Menüeigenschaften anzeigen Linkziele, Beschreibungen und CSS-Klassen für Listenelemente an.
Ein weiterer Aspekt des Menüs ist erwähnenswert. Mit dem Feld Benutzerdefinierte Links kannst du einen Link deiner Wahl setzen, anstatt eine vordefinierte Seite auf deiner Website:
Mit dieser Option kannst du Links zu sozialen Medien in dein WordPress-Menü einfügen. Die Plattform zieht das richtige Symbol für dich, je nachdem, welche Seite du auswählst. So hast du die Möglichkeit, die Logos für die von dir ausgewählten Seiten gut darzustellen.
2. Verwende ein Plugin, um dein eigenes WordPress-Menü zu erstellen
Die unmittelbare Lösung für das Hinzufügen von Funktionen zu WordPress sind Plugins. Im vorigen Abschnitt wurde erläutert, warum die native Option von WordPress fast alles ist, was du brauchst, aber Plugins können diese Funktionalität erweitern.
Es stellt sich die Frage, ob du ein spezielles (und zusätzliches) Plugin brauchst, um ein WordPress-Menü zu erstellen, obwohl es viele gute Gründe dafür gibt. Zunächst einmal wirst du oft ein Menü erstellen, das auf einem Stil basiert, auf den du mit den Standardeinstellungen nicht zugreifen kannst. Spezielle responsive Designs, „Mega-Menüs“ und vieles mehr stehen dir über Plugins zur Verfügung.
Außerdem kannst du Menüs mit einem speziellen Editor erstellen und in vielen Fällen aus voreingestellten Vorlagen wählen. Zusammen mit den umfangreichen Anpassungsmöglichkeiten hast du eine „No-Code“-Lösung, mit der du ein WordPress-Menü erstellen kannst, das zu deiner Website passt.
Das Max Mega Menu Plugin zum Beispiel bietet keine Überraschungen, was du erreichen kannst:
Sobald es installiert und aktiviert ist, findest du ein neues Mega-Menü-Panel in WordPress:
Wenn du dir den Bildschirm „Menüpunkte“ ansiehst, wirst du feststellen, dass dir mehr Anpassungen zur Verfügung stehen:
Du kannst auch Menüthemen anwenden und sie in einem ähnlichen Umfang bearbeiten wie einige der besten Page Builder auf dem Markt:
Es gibt noch viel mehr, worauf wir hier eingehen könnten, aber wir würden uns nur wiederholen. Wir empfehlen dir, einen Blick in unseren vorherigen Beitrag über WordPress-Menü-Plugins zu werfen. Dort gehen wir im Detail darauf ein, wie du das richtige Plugin für dich auswählst und wie du es verwendest.
3. Code schreiben, um dein eigenes WordPress-Menü zu erstellen
Dein eigenes WordPress-Menü zu codieren ist ein zuverlässiger Weg, um dein Ziel für Mutige zu erreichen (oder wenn du ein Entwickler bist, der ein neues WordPress-Theme erstellt). Natürlich wirst du nicht jeden Tag einen Code-Editor öffnen, um ein Menü hinzuzufügen. Dafür wirst du die WordPress-eigenen Tools (oder vielleicht ein Plugin) verwenden.
Trotzdem ist das Erlernen des WordPress-Menü-Codes eine wichtige Voraussetzung, wenn du Themes entwickeln willst. Es gibt vier Teile, die zum Erfolg führen:
- Registriere dein Menü.
- Zeige das WordPress-Menü auf dem Frontend an.
- Zeige zusätzliche Inhalte innerhalb deines Menüs oder seiner Elemente an.
- Definiere einen Callback.
Wir gehen davon aus, dass du dich mit einem Code-Editor auskennst, eine Entwicklungsumgebung zur Verfügung hast und über gute Kenntnisse verfügst. Wenn du noch kein Theme hast, mit dem du arbeiten kannst, kannst du die Standardoptionen von WordPress verwenden oder eines aus unserer Liste der schnellsten WordPress-Themes auswählen.
Wenn du bereit bist, musst du die Datei functions.php des Themes öffnen. Diese unterscheidet sich von der allgemeinen WordPress-Datei gleichen Namens. Hier musst du dein Menü registrieren. Mit anderen Worten: Du musst WordPress mitteilen, was auf der Seite Erscheinungsbild > Menüs angezeigt werden soll. Hierfür verwendest du die Funktion register_nav_menus():
function register_my_menus() {
register_nav_menus(
array(
'header' => __( 'Header Menu' ),
'other' => __( 'Other Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
Dieser Code weist die Registerkarte Standorte verwalten in WordPress an, zwei Menüs anzuzeigen: Kopfmenü und Sonstiges Menü:
Als nächstes musst du dein Menü mit der Funktion wp_nav_menu() anzeigen. Du fügst sie in die Vorlagendatei ein, in der du das Menü anzeigen möchtest. In unserem Fall nehmen wir den Header, also fügen wir den folgenden Code in die Datei header.php unseres Themes ein:
wp_nav_menu( array( 'theme_location' => 'header' ) );
Es könnte sein, dass dieser Code in eine if-Anweisung verpackt ist, genau wie einige deiner anderen Menüs, also solltest du dich an die Konventionen halten, die du findest.
An diesem Punkt kannst du mit dem Menü in WordPress wie mit jedem anderen arbeiten. Du kannst aber auch überlegen, ob du zusätzliche Inhalte zu deinen Menüpunkten hinzufügen willst. Zum Beispiel kannst du das definierte Array um HTML-Tags erweitern, die bei der Ausgabe dargestellt werden:
wp_nav_menu(
array(
'menu' => 'primary',
'link_before' => '',
'link_after' => '',
)
);
Deine letzte Aufgabe hier ist es, einen Callback zu definieren. Standardmäßig zeigt WordPress ein ausgefülltes Menü an, wenn das angegebene Menü nicht gefunden wird. Alternativ zeigt WordPress ein Menü mit Seiten an, wenn kein benutzerdefiniertes Menü ausgewählt wurde. Wenn das nicht die gewünschte Aktion ist, kannst du einen anderen Parameter für das Argument theme-location festlegen und ein Argument fallback_cb einfügen:
wp_nav_menu(
array(
'menu' => 'primary',
// do not fall back to first non-empty menu
'theme_location' => '__no_such_location',
// do not fall back to wp_page_menu()
'fallback_cb' => false
)
);
Sobald du weißt, wie du ein WordPress-Menü erstellst, kannst du damit beginnen, die Funktionalität zu erweitern. In unserem letzten Abschnitt werden wir uns ansehen, wie du ein benutzerdefiniertes Menü-Metafeld für WordPress erstellst.
So verbesserst du dein WordPress-Menü
Da es sich hier um einen fortgeschrittenen Abschnitt handelt, müssen wir einige Annahmen treffen, bevor wir fortfahren:
- Du weißt, wie man ein WordPress-Menü mit PHP erstellt.
- Deine PHP-Kenntnisse sind gut genug, um bei einigen fortgeschrittenen Themen mitzumachen.
- Du weißt, wie du ein WordPress-Plugin registrierst und initialisierst.
Es würde den Rahmen dieses Artikels sprengen, aber du kannst den WordPress Plugin Boilerplate Generator verwenden, um eine neue, standardisierte Plugin-Vorlage zu erstellen.
Wenn du bereit bist, erstelle dein Plugin und lade es in WordPress hoch:
Als Nächstes navigierst du zum Ordner des Plugins und öffnest die Hauptdatei. Füge hier den folgenden Code ein:
/**
* Add menu meta box
*
* @param object $object The meta box object
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*/
function custom_add_menu_meta_box( $object ) {
add_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );
return $object;
}
add_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);
Mit der WordPress-Funktion add_meta_box() kannst du eine Meta-Box im WordPress-Admin registrieren. Es gibt ein paar Argumente, die du in der offiziellen Dokumentation nachschlagen solltest. Wir verwenden auch den Filter nav_menu_meta_box_object(), weil es in der Datei nav-menus.php keine Aktion gibt, die wir einbinden können. Diese Anweisung legt fest, ob die Funktion das Metakästchen eines Menüpunkts für einen Objekttyp hinzufügt. Wenn der Filter ausgeführt wird, registriert add_meta_box das benutzerdefinierte Metakästchen.
Definieren einer Callback-Funktion
Als Nächstes können wir eine Callback-Funktion definieren, die den HTML-Inhalt für das Metakästchen erzeugt:
/**
* Displays a metabox for an author menu item.
*
* @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu
*/
function custom_menu_meta_box(){
global $nav_menu_selected_id;
$walker = new Walker_Nav_Menu_Checklist();
...
}
Die globale Variable merkt sich die aktuelle Menü-ID, während $walker eine neue Instanz des Walker_Nav_Menu_Checklist-Objekts speichert. Damit wird die HTML-Liste der Menüpunkte erstellt.
Von hier aus müssen wir die aktive Registerkarte in der benutzerdefinierten Metabox bestimmen. Dazu setzen wir den Wert von $current_tab innerhalb der im vorherigen Codeblock gesetzten Ellipse.
Wir verwenden hier zwei Tabs, aber du kannst so viele hinzufügen, wie du brauchst:
$current_tab = 'all';
if ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'admins';
} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'all';
}
Die folgende Zeile ermittelt alle Benutzer mit Schreibrechten und fügt dem $authors-Objekt viele Eigenschaften hinzu:
$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) );
$admins = array();
/* set values to required item properties */
foreach ( $authors as &$author ) {
$author->classes = array();
$author->type = 'custom';
$author->object_id = $author->nickname;
$author->title = $author->nickname . ' - ' . implode(', ', $author->roles);
$author->object = 'custom';
$author->url = get_author_posts_url( $author->ID );
$author->attr_title = $author->displayname;
if( $author->has_cap( 'edit_users' ) ){
$admins[] = $author;
}
}
$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' );
?>
Hier gibt get_users ein Array von $user-Objekten zurück, die anhand der angegebenen Parameter ausgewählt wurden. Der Parameter who zwingt WordPress, die Datenbank nach Benutzern mit Schreibrechten abzufragen.
Außerdem speichert das Array $admins ein Array mit den Autoren, während $removed_args eine Liste der Abfragevariablen enthält, die entfernt werden sollen.
Jetzt kannst du das Meta-Box-Markup ausdrucken. Dazu bauen wir die Tab-Labels und Links auf.
<div id="authorarchive" class="categorydiv">
<ul id="authorarchive-tabs" class="authorarchive-tabs add-menu-item-tabs">
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-authorarchive-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'all', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-all">
<?php _e( 'View All' ); ?>
</a>
</li>
<li <?php echo ( 'admins' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-authorarchive-admins" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'admins', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-admins">
<?php _e( 'Admins' ); ?>
</a>
</li>
</ul>Denke daran, den Meta-Box-Elementen die richtigen Klassennamen, IDs und Datenattribute zuzuweisen; andernfalls wird das Menü nicht wie erwartet funktionieren.
Die beiden Funktionen add_query_arg und remove_query_arg setzen tab-spezifische Werte für die Variable authorarchive-tabs und entfernen unnötige Variablen.
Jetzt haben wir einen Metakasten mit definierten Registerkarten:
Im nächsten Schritt erstellen wir den HTML-Inhalt der Registerkarten.
Erstellung des HTML-Inhalts für die Meta-Box-Registerkarten
In der Funktion custom_menu_meta_box() musst du den Code aus dem vorherigen Abschnitt übernehmen. Um den Inhalt zu erstellen, fügst du den folgenden Code in das <div>-Tag ein, das du im letzten Abschnitt geschrieben hast:
<div id="tabs-panel-authorarchive-all" class="tabs-panel tabs-panel-view-all <?php echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-all" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $authors), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>
<div id="tabs-panel-authorarchive-admins" class="tabs-panel tabs-panel-view-admins <?php echo ( 'admins' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-admins" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $admins), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>Kurz gesagt, jede Registerkarte enthält eine Liste von Kontrollkästchen. Die Funktion walk_nav_menu_tree() gibt die Liste mit drei Argumenten aus: $items, $depth und $r – alle erforderlich.
Das Array $items speichert ein Array mit den Admin-Nutzern. Die Funktion array_map() wendet die Funktion wp_setup_nav_menu_item() auf $admins an und fügt den Array-Elementen Eigenschaften der Menüpunkte hinzu.
Von hier aus können wir den letzten Schliff hinzufügen.
Hinzufügen einer Schaltfläche „Absenden
Der größte Teil der benutzerdefinierten Metabox ist fertig, aber wir müssen noch einen Submit-Button und ein „Spinner“-Symbol hinzufügen.
Hier ist ein kurzes Stück Code, das du direkt nach dem vorherigen Block einfügen kannst:
<p class="button-controls wp-clearfix">
<span class="list-controls">
<a href="<?php echo esc_url( add_query_arg( array( 'authorarchive-tab' => 'all', 'selectall' => 1, ), remove_query_arg( $removed_args ) )); ?>#authorarchive" class="select-all"><?php _e('Select All'); ?></a>
</span>
<span class="add-to-menu">
<input type="submit"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e('Add to Menu'); ?>" name="add-authorarchive-menu-item" id="submit-authorarchive" />
<span class="spinner"></span>
</span>
</p>
</div>
<?php
}
Mit diesem Wissen kannst du fast jede Funktion zu deinen Menüs hinzufügen! Beachte, dass es auch eine öffentliche Gist des Plugins auf GitHub gibt, die du kostenlos herunterladen kannst.
Zusammenfassung
Ein WordPress-Menü ist ein wichtiger Aspekt deiner Website. Aus diesem Grund bietet die Plattform ein natives und leistungsstarkes Panel, mit dem du jedes Menü auf deiner Seite anpassen kannst. Allerdings bietet es nicht alles, was du standardmäßig brauchst.
Mehrere Bildschirmoptionen helfen dir, CSS-Tags und mehr hinzuzufügen. Wenn du ein Plugin installierst, kannst du deine nativen Menüs in Megamenüs verwandeln und mit erweiterten Funktionen arbeiten, um deine Menüs unter anderem responsiver zu machen. Auch das Programmieren ist eine Möglichkeit, und obwohl es für einen Anfänger eine Herausforderung ist, kannst du es innerhalb eines Nachmittags schaffen.
Willst du dein WordPress-Menü anpassen und wenn ja, welchen Ansatz wählst du? Teile deine Gedanken und Meinungen in den Kommentaren unten mit!
Schreibe einen Kommentar