Nun, da wir wissen, wie man ein grundlegendes WordPress-Theme von Grund auf erstellt, lassen Sie uns einen Blick darauf werfen, wie man ein benutzerdefiniertes Navigationsmenü für unser Thema erstellt. Dieses Menü sollte über das WordPress-Dashboard gesteuert werden können. Mit anderen Worten: Sie sollten in der Lage sein, im Dashboard Links zu beliebigen Seiten, Beiträgen oder Kategorien hinzuzufügen oder zu entfernen. Am Ende dieses Tutorials werden wir genau das haben. Schauen wir uns an, wie wir dieses Ziel erreichen können.
Öffne header.php
Gehen Sie weiter und öffnen Sie die Datei header.php des Themes, an dem wir gearbeitet haben. Unser Ziel ist es, ein Menü hinzuzufügen, das sich oberhalb des Hauptinhalts der Website befindet, aber unterhalb des Website-Namens und des Tagline-Bereichs. Dazu können wir den folgenden Code einfügen:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>Beachten Sie, dass wir eine spezielle Funktion verwenden, die uns von WordPress zur Verfügung gestellt wird: wp_nav_menu(). Diese Funktion nimmt Ihnen die ganze Arbeit ab, um ein benutzerdefiniertes Menü zu erstellen. Sie müssen nicht alle HTML-Eingaben selbst vornehmen, was sehr hilfreich ist. Jetzt haben wir noch nicht viele Seiten, aber wenn wir unsere Testseite besuchen, gibt die Funktion bereits einen Link zu der Beispielseite aus, die auf unserer Installation existiert.
Übergabe von Argumenten an die Funktion wp_nav_menu()
Wie bei den meisten Funktionen in WordPress können Sie optionale Argumente an die Funktion wp_nav_menu() übergeben. Hier werden wir ein Array einrichten und nur eine Option konfigurieren. Wir verwenden ein Array für den Fall, dass wir in Zukunft mehrere Optionen übergeben wollen. So könnten wir dieses Stück Code hinzufügen.
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>Diese Option gibt uns die Möglichkeit, bestimmte Menüs in unserem Thema zu benennen. Es kann sein, dass wir mehr als ein Menü haben wollen, und dies ist die Methode, mit der wir zwischen mehreren Menüs unterscheiden können.
Menüstandort in functions.php registrieren
Um das Menü, das wir gerade in unserer Datei header.php erstellt haben, vom WordPress-Admin-Dashboard aus nutzen zu können, müssen wir den Menüstandort in der Datei functions.php des Themes registrieren. Wie können wir also unser neues Menü bei WordPress registrieren? Wir können dies mit der in WordPress eingebauten Funktion register_nav_menus() tun. Wir registrieren unser Menü wie folgt.
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Konfigurieren Sie unser benutzerdefiniertes Menü im WordPress-Dashboard
Unser neues Menü sollte nun beim WordPress-Kern registriert sein. WordPress kennt nun unser Menü und seine Position im Thema. Wir können nun in das Dashboard gehen, ein neues Menü erstellen und die Position des Menüs verwalten. Insbesondere möchten wir, dass es dort erscheint, wo wir die Funktion wp_nav_menu() verwendet haben. Wir gehen zu Erscheinungsbild->Menüs und klicken dann auf „Neues Menü erstellen“.
Wir können dieses Menü benennen, wie wir wollen. Der Einfachheit halber wählen wir einfach „Hauptmenü“ und klicken dann auf „Menü erstellen“.
In diesem nächsten Schritt werden wir alle unsere Kategorien verlinken. Also wählen wir Kategorien, wählen alle aus, aktualisieren den Anzeigeort auf „Primäres Menü“ und klicken dann auf „Menü speichern“. Probieren wir es aus.
Bei einem Besuch unserer Website sehen wir, dass wir jetzt einen Link zu jeder Kategorie in dem neuen Menü erhalten, das wir erstellt haben. Im Moment ist es nur eine ungeordnete Liste und noch nicht die schönste – aber sie funktioniert!
Was bringt es, ein eigenes Menü zu registrieren?
Ich weiß, ich weiß. Sie werden denken, dass es keinen Sinn macht, sich diesen ganzen Aufwand zu machen, nur um ein paar Hyperlinks zu einigen Kategorien auf Ihrer Website anzuzeigen. In gewisser Weise haben Sie recht. Warum nicht einfach einige dieser Dinge selbst manuell erstellen? Sicher, das ist möglich, aber wenn wir unser Menü so aufbauen, wie wir es hier getan haben, haben wir jetzt die Macht des WordPress-Dashboards, um den Code zu kontrollieren, den wir in unser Theme eingebaut haben. Wir können die Linkreihenfolge jetzt ganz einfach per Drag & Drop direkt vom Dashboard aus ändern. Ändern wir die Reihenfolge von WordPress, PHP, JavaScript zu JavaScript, WordPress und dann PHP. Ganz einfach!
Wenn Sie nun die Website besuchen, wird die Reihenfolge der Links im Menü aktualisiert. Bei diesem Ansatz ist kein Eingriff in den zugrundeliegenden Code erforderlich.
Das benutzerdefinierte Menü gestalten
Diese ungeordnete Liste reicht einfach nicht aus! Wir müssen die Dinge ein wenig eleganter gestalten. Nehmen wir uns ein wenig Zeit, um das Menü mit Hilfe von CSS ein wenig aufzuhübschen. Zunächst einmal wollen wir die vertikal ausgerichtete ungeordnete Liste in ein horizontal ausgerichtetes Menü umwandeln. Außerdem möchten wir die Aufzählungspunkte der einzelnen Listenelemente entfernen, etwas Polsterung und Rand hinzufügen sowie die Unterstreichung der Links entfernen. Hier ist ein Versuch, diesen Effekt in unserer style.css-Datei zu erzeugen.
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;}In der oben aufgeführten CSS-Datei passiert eine ganze Menge. Gehen wir es mal durch. Im ersten Selektor .navigation-menu ul entfernen wir alle Polsterungen und Ränder aus der ungeordneten Liste. Als Nächstes stellen wir sicher, dass die ungeordnete Liste die Floats der untergeordneten Listenelemente löscht. Im Selektor .navigation-menu ul li werden die Aufzählungszeichen aus der Liste entfernt, die Listenelemente werden nach links verschoben, und rechts wird ein kleiner Rand hinzugefügt. Zum Schluss richten wir die Links aus. Zuerst verwandeln wir sie in Elemente auf Blockebene mit einem Padding von 12px vertikal und 17px horizontal. Wir fügen einen schönen Randeffekt hinzu und entfernen die Unterstreichung der Links. Schauen wir es uns jetzt im Browser an.
Schön! Das Menü sieht schon viel besser aus als am Anfang.
Wie man dem Menü eine benutzerdefinierte Farbe beim Hovern hinzufügt
Das grundlegende Styling ist vorhanden. Es wäre schön, einen kleinen Hover-Effekt zu haben, wenn man mit der Maus über die einzelnen Links fährt. Dies ist sehr einfach zu konfigurieren, indem man das folgende Snippet verwendet:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
Das sieht ziemlich gut aus!
Wie man den aktiven Status eines Menüpunkts anvisiert
Eine weitere Sache, die wir gerne hinzufügen würden, ist die Möglichkeit, die Farbe eines aktiven Links anzupassen. Dies ist etwas anderes als der einfache Hover-Effekt. In diesem Fall möchten wir, dass WordPress beim Aufrufen eines bestimmten Links aus dem Menü erkennt, dass es sich um die aktive Seite handelt, und dass die visuelle Darstellung aktualisiert wird, um den aktiven Link widerzuspiegeln. Um dies zu erreichen, können wir eine spezielle Klasse verwenden, die in WordPress eingebaut ist, um genau dies zu tun. Dies ist die Klasse current-menu-item. So können wir sie in unser benutzerdefiniertes Menü einbauen.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Wenn wir jetzt unsere Website besuchen und die verschiedenen Links im benutzerdefinierten Menü ausprobieren, können wir sehen, dass es sehr schön aussieht. Wir haben jetzt ein bestimmtes Aussehen für den Schwebezustand und ein anderes Aussehen für den aktiven Zustand der Links in unserem Menü. Auf diese Weise können Sie sicherstellen, dass Ihre Website-Besucher wissen, wo sie sich gerade befinden, indem Sie das aktive Menü sozusagen leuchten lassen.
Wie man ein benutzerdefiniertes Menü in WordPress erstellt Zusammenfassung
In diesem Tutorial haben wir uns genau angesehen, wie man ein benutzerdefiniertes Menü zu unserem benutzerdefinierten Thema in WordPress hinzufügt. Dabei haben wir uns einiger WordPress-Funktionen bedient, um uns zu helfen. Die erste Funktion, die wir verwendet haben, war wp_nav_menu(). Diese Funktion kann automatisch eine ungeordnete Liste und Kinderelemente erstellen, um die Struktur für ein schönes Menü zu schaffen, auf das man ein Styling anwenden kann. Es gibt viele Argumente, die Sie dieser Funktion übergeben können, aber wir haben uns hier nur auf die Grundlagen konzentriert. Die nächste Funktion, die wir nutzten, war die Funktion register_nav_menus(). Mit dieser Funktion können wir WordPress über unser neues Menü informieren und es im WordPress-Dashboard einbinden. Sobald unser neues Menü bei WordPress registriert war, war es ein Leichtes, beliebige Elemente aus diesem Menü hinzuzufügen oder zu entfernen, und zwar direkt vom WordPress-Dashboard aus und ohne dass wir irgendeinen Code in unseren Themadateien bearbeiten mussten. Schließlich haben wir uns noch etwas Zeit genommen, um das Aussehen unseres Menüs mit Hilfe von benutzerdefiniertem CSS-Styling zu verbessern.