Wie man WordPress-Navigationsmenüs gestaltet

Möchten Sie Ihre WordPress-Navigationsmenüs gestalten, um ihre Farben oder ihr Aussehen zu ändern? Während Ihr WordPress-Theme das Aussehen Ihrer Navigationsmenüs steuert, können Sie es mit CSS leicht an Ihre Anforderungen anpassen. In diesem Artikel zeigen wir Ihnen, wie Sie die WordPress-Navigationsmenüs auf Ihrer Website gestalten können.

Wir werden zwei verschiedene Methoden zeigen.

Die erste Methode ist für Anfänger geeignet, da sie ein Plugin verwendet und keine Code-Kenntnisse erfordert. Die zweite Methode ist für fortgeschrittene Heimwerker, die lieber CSS-Code als ein Plugin verwenden.

Methode 1: WordPress-Navigationsmenüs mit einem Plugin stylen

Ihr WordPress-Theme verwendet CSS, um Navigationsmenüs zu gestalten.

Viele Anfänger fühlen sich nicht wohl dabei, Theme-Dateien zu bearbeiten oder selbst CSS-Code zu schreiben. In diesem Fall ist ein WordPress-Styling-Plugin sehr nützlich. Es erspart Ihnen das Bearbeiten von Theme-Dateien oder das Schreiben von Code. Zuerst müssen Sie das CSS Hero-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins. CSS Hero ist ein Premium-WordPress-Plugin, mit dem Sie Ihr eigenes WordPress-Theme gestalten können, ohne eine einzige Zeile Code zu schreiben (kein HTML oder CSS erforderlich).

Lesen Sie unseren CSS Hero Testbericht, um mehr zu erfahren. Als nächstes müssen Sie auf die CSS Hero-Schaltfläche in Ihrer WordPress-Admin-Symbolleiste klicken.

CSS Hero bietet einen WYSIWYG-Editor (What you see is what you get). Wenn Sie auf die Schaltfläche klicken, gelangen Sie zu Ihrer Website mit einer schwebenden CSS Hero-Symbolleiste, die auf dem Bildschirm sichtbar ist.

Sie müssen auf das blaue Symbol am oberen Rand klicken, um mit der Bearbeitung zu beginnen. Nachdem Sie auf das blaue Symbol geklickt haben, gehen Sie mit der Maus zu Ihrem Navigationsmenü, und CSS Hero hebt es hervor, indem es die Ränder um es herum anzeigt. Wenn Sie auf das hervorgehobene Navigationsmenü klicken, zeigt es Ihnen die Elemente, die Sie bearbeiten können.

Im obigen Screenshot zeigt es uns den oberen Navigationsmenü-Container.

Nehmen wir an, wir möchten die Hintergrundfarbe unseres Navigationsmenüs ändern. In diesem Fall wählen wir die obere Navigation, die unser gesamtes Menü beeinflusst. CSS Hero zeigt Ihnen nun verschiedene Eigenschaften an, die Sie bearbeiten können, wie z.B. Text, Hintergrund, Rahmen, Ränder, Polsterung, usw.

Sie können auf jede Eigenschaft klicken, die Sie ändern möchten. CSS Hero zeigt Ihnen eine einfache Oberfläche, auf der Sie Ihre Änderungen vornehmen können.

Im obigen Screenshot haben wir Hintergrund ausgewählt, und es wurde uns eine schöne Oberfläche angezeigt, um Hintergrundfarbe, Farbverlauf, Bild und mehr auszuwählen. Wenn Sie Änderungen vornehmen, können Sie diese live in der Themenvorschau sehen.

Wenn Sie mit den Änderungen zufrieden sind, klicken Sie auf die Schaltfläche "Speichern" in der Symbolleiste von CSS Hero, um Ihre Änderungen zu speichern. Das Beste an dieser Methode ist, dass Sie alle Änderungen, die Sie vornehmen, leicht rückgängig machen können. CSS Hero speichert einen vollständigen Verlauf aller Ihrer Änderungen, und Sie können zwischen diesen Änderungen hin und her wechseln.

Methode 2: Manuelles Gestalten von WordPress-Navigationsmenüs

Diese Methode erfordert, dass Sie manuell benutzerdefinierte CSS hinzufügen und ist für fortgeschrittene Benutzer gedacht.

WordPress-Navigationsmenüs werden in einer ungeordneten Liste (Aufzählungsliste) angezeigt. Wenn Sie das Standard-WordPress-Menü-Tag verwenden, wird in der Regel eine Liste angezeigt, der keine CSS-Klassen zugeordnet sind.

Ihre ungeordnete Liste würde den Klassennamen "menu" haben, wobei jedes Listenelement seine eigene CSS-Klasse hat.

Dies könnte funktionieren, wenn Sie nur eine Menüposition haben. Die meisten Themen haben jedoch mehrere Stellen, an denen Sie Navigationsmenüs anzeigen können. Die Verwendung nur der Standard-CSS-Klasse kann zu Konflikten mit Menüs an anderen Stellen führen.

Deshalb müssen Sie sowohl die CSS-Klasse als auch den Speicherort des Menüs definieren.

Die Chancen stehen gut, dass Ihr WordPress-Theme dies bereits tut, indem es die Navigationsmenüs mit einem Code wie diesem hinzufügt:

 'primary', 'menu_class' => 'primary-menu', ) ); ?> 

Dieser Code teilt WordPress mit, dass das Theme an dieser Stelle das primäre Menü anzeigt.

Er fügt auch eine CSS-Klasse primary-menu zum Navigationsmenü hinzu. Jetzt können Sie Ihr Navigationsmenü mit dieser CSS-Struktur gestalten.

// container class #header .primary-menu{} // Containerklasse erste ungeordnete Liste #header .primary-menu ul {} //unsortierte Liste innerhalb einer unsortierten Liste #header .primary-menu ul ul {} // jeder Navigationspunkt #header .primary-menu li {} // jeder Navigationspunkt Anker #header .primary-menu li a {} // ungeordnete Liste, wenn es Dropdown-Elemente gibt #header .primary-menu li ul {} // jedes Dropdown-Navigationselement #header .primary-menu li li {} // jedes Dropdown-Navigations-Element Anker #header .primary-menu li li a {} 

Sie müssen #header durch die von Ihrem Navigationsmenü verwendete Container-CSS-Klasse ersetzen.

Mit dieser Struktur können Sie das Aussehen Ihres Navigationsmenüs komplett verändern. Es gibt jedoch noch weitere von WordPress generierte CSS-Klassen, die automatisch zu jedem Menü und Menüelement hinzugefügt werden. Mit diesen Klassen können Sie Ihr Navigationsmenü noch weiter anpassen.

// Klasse für aktuelle Seite .current_page_item{} // Klasse für aktuelle Kategorie .current-cat{} // Klasse für einen beliebigen anderen aktuellen Menüpunkt .current-menu-item{} // Klasse für eine Kategorie .menu-item-type-taxonomy{} // Klasse für Beitragstypen .menu-item-type-post_type{} // Klasse für beliebige benutzerdefinierte Links .menu-item-type-custom{} // Klasse für den Home-Link .menu-item-home{} 

WordPress erlaubt es Ihnen auch, eigene benutzerdefinierte CSS-Klassen zu einzelnen Menüpunkten hinzuzufügen.

Sie können diese Funktion verwenden, um Menüelemente zu gestalten, z. B. indem Sie Bildsymbole mit Ihren Menüs hinzufügen oder indem Sie einfach die Farben ändern, um ein Menüelement hervorzuheben. Gehen Sie in Ihrem WordPress-Admin auf die Seite Darstellung " Menüs und klicken Sie auf die Schaltfläche Bildschirmoptionen

Sobald Sie das Kontrollkästchen aktiviert haben, werden Sie sehen, dass ein zusätzliches Feld hinzugefügt wird, wenn Sie jeden einzelnen Menüpunkt bearbeiten möchten. Nun können Sie diese CSS-Klasse in Ihrem Stylesheet verwenden, um Ihr eigenes CSS hinzuzufügen. Es wirkt sich nur auf den Menüpunkt mit der von Ihnen hinzugefügten CSS-Klasse aus.

Beispiele für die Gestaltung von Navigationsmenüs in WordPress

Verschiedene WordPress-Themes können unterschiedliche Styling-Optionen, CSS-Klassen und sogar JavaScript verwenden, um Navigationsmenüs zu erstellen.

Dies gibt Ihnen viele Möglichkeiten, diese Stile zu ändern und Ihre Navigationsmenüs an Ihre eigenen Anforderungen anzupassen. Das Inspektionstool in Ihrem Webbrowser wird Ihr bester Freund sein, wenn es darum geht, herauszufinden, welche CSS-Klassen Sie ändern müssen. Wenn Sie es noch nicht verwendet haben, dann werfen Sie einen Blick auf unsere Anleitung, wie man das Inspektor-Tool verwendet, um WordPress-Themes anzupassen.Grundsätzlich müssen Sie nur mit dem Cursor auf das Element zeigen, das Sie ändern möchten, mit der rechten Maustaste klicken und dann "Inspect tool" aus dem Menü des Browsers auswählen.

Schauen wir uns nun einige praktische Beispiele für die Gestaltung von Navigationsmenüs in WordPress an.

1.So ändern Sie die Schriftfarbe in WordPress-Navigationsmenüs

Hier ist ein Beispiel für benutzerdefiniertes CSS, das Sie zu Ihrem Theme hinzufügen können, um die Schriftfarbe von Navigationsmenüs zu ändern

#top-menu li.menu-item a { color:#ff0000; } 

In diesem Beispiel ist #top-menu die ID, die der ungeordneten Liste zugewiesen ist, die unser Navigationsmenü anzeigt.

Sie müssen das Inspektionswerkzeug verwenden, um die von Ihrem Thema verwendete ID herauszufinden.

2. Wie man die Hintergrundfarbe der Navigationsmenüleiste ändert

Zuerst müssen Sie die CSS-ID oder Klasse herausfinden, die von Ihrem Design für den Container um das Navigationsmenü herum verwendet wird Danach können Sie das folgende benutzerdefinierte CSS verwenden, um die Hintergrundfarbe der Navigationsmenüleiste zu ändern.

.navigation-oben { background-color:#000 } 

So sah es auf unserer Demo-Website aus. 3.

Wie man die Hintergrundfarbe eines einzelnen Menüpunkts ändert

Sie haben vielleicht schon bemerkt, dass viele Websites eine andere Hintergrundfarbe für die wichtigsten Links in ihrem Navigationsmenü verwenden

Dieser Link könnte ein Login-, Anmelde-, Kontakt- oder Kauf-Button sein. Indem Sie ihm eine andere Farbe geben, macht es den Link auffälliger. Um dies zu erreichen, fügen wir eine benutzerdefinierte CSS-Klasse zu dem Menüelement hinzu, das wir mit einer anderen Hintergrundfarbe hervorheben möchten.Gehen Sie zu Erscheinungsbild " Menüs und klicken Sie auf die Schaltfläche Bildschirmoptionen in der oberen rechten Ecke des Bildschirms Daraufhin wird ein Aufklappmenü angezeigt, in dem Sie das Kontrollkästchen neben der Option "CSS-Klassen" aktivieren müssen.

Danach müssen Sie nach unten zu dem Menüpunkt scrollen, den Sie ändern möchten, und ihn durch Klicken erweitern.

Sie werden eine neue Option zum Hinzufügen Ihrer benutzerdefinierten CSS-Klasse sehen.

Jetzt können Sie diese CSS-Klasse verwenden, um diesen bestimmten Menüpunkt anders zu gestalten.

.kontakt-uns { background-color: #ff0099; border-radius:5px; } 

So sah es auf unserer Testseite aus. 4.

Hinzufügen von Hover-Effekten zu WordPress-Navigationsmenüs

Möchten Sie, dass Ihre Menüpunkte beim Überfahren mit der Maus die Farbe wechseln

Dieser spezielle CSS-Trick lässt Ihre Navigationsmenüs interaktiver aussehen. Fügen Sie einfach das folgende benutzerdefinierte CSS zu Ihrem Theme hinzu.

#top-menu li.menu-item a:hover { background-color:#fff; color:#666; border-radius:5px; } 

In diesem Beispiel ist #top-menu die CSS-ID, die von Ihrem Thema für die ungeordnete Navigationsmenüliste verwendet wird.

Hier sehen Sie, wie dies auf unserer Testseite aussah.

5.

Sticky Floating Navigationsmenüs in WordPress erstellen

Normalerweise erscheinen Navigationsmenüs oben und verschwinden, wenn der Benutzer nach unten scrollt

Sticky Floating-Navigationsmenüs bleiben oben, wenn der Benutzer nach unten scrollt. Sie können den folgenden CSS-Code zu Ihrem Theme hinzufügen, um Ihre Navigationsmenüs "sticky" zu machen.

#top-menu { background:#2194af; höhe:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; breite:100%; position:fixed; top:0; left:0; rechts:0; text-align: rechts; padding-right:30px } 

Ersetzen Sie einfach #top-menu durch die CSS-ID Ihres Navigationsmenüs. So sah es in unserer Demo aus: Ausführlichere Anweisungen und eine alternative Methode finden Sie in unserer Anleitung zum Erstellen eines schwebenden Navigationsmenüs in WordPress.

Transparente Navigationsmenüs in WordPress erstellen

Viele Websites verwenden große oder bildschirmfüllende Hintergrundbilder mit ihren Call-to-Action-Buttons

Wenn Sie transparente Menüs verwenden, verschmilzt Ihre Navigation mit dem Bild. Dies macht es wahrscheinlicher, dass sich die Benutzer auf Ihre Handlungsaufforderung konzentrieren. Fügen Sie einfach das folgende CSS-Beispiel zu Ihrem Theme hinzu, um Ihre Navigationsmenüs transparent zu machen.

#site-navigation { background-color:transparent } 

So sah es auf unserer Demo-Site aus. Abhängig von Ihrem Theme müssen Sie eventuell die Position des Header-Bildes anpassen, damit es den Bereich hinter Ihren transparenten Menüs abdeckt.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man WordPress-Navigationsmenüs gestaltet.

Verwandte Artikel:

• So fügen Sie benutzerdefinierte Navigationsmenüs in WordPress-Themes hinzu
• Wie man ein schwebendes Navigationsmenü in WordPress erstellt
• Wie Sie jeden WordPress-Beitrag unterschiedlich gestalten
• So fügen Sie die Klasse "Ungerade/Gerade" zu Ihrem Beitrag in WordPress-Themes hinzu
• Wie man ein Menü Mobile in WordPress ausblendet (Anleitung für Anfänger)