WordPress Menü mit Icons aufpeppen

15 Shares

Die Navigation ist ein sehr wichtiger Bestandteil einer Webseite und kann in WordPress ganz einfach angepasst werden. Für die Gestaltung der einzelnen Menüpunkte kann man neben der Schrift oder der Farbe auch Icons verwenden. Wie du ein WordPress Menü mit Icons aufhübschen kannst, erkläre ich Step by Step am Beispiel des Themes Twenty Fifteen.

1. Child Theme anlegen

Damit die Änderungen im Stylesheet bei einem Theme-Update nicht verloren gehen, solltest du zuerst ein Child-Theme anlegen.
Eine ausführliche Anleitung dazu findest du in meinem Beitrag WordPress Child Theme erstellen.
Alternativ kannst du natürlich auch ein Plugin wie z.B. Simple Custom CSS nutzen.

2. Icons zum Menü hinzufügen

Das Theme Twenty Fifteen beinhaltet standardmäßig die Icon Font Genericons, die ich in dieser Anleitung verwenden werde. Falls du das WordPress Menü mit Icons einer anderen Font-Bibliothek nutzen möchtest, musst du diese gegebenenfalls vorher noch einbinden.

Hier ein kurzes Snippet zum Einbinden von Font Awesome. Diese Icon-Font ist mit über 500 Icons deutlich umfangreicher und schnell in WordPress eingebaut. Dazu fügst du einfach den folgenden Code-Schnipsel in die Datei functions.php ein:

function add_font_awesome (){
    wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); 
}
add_action('wp_enqueue_scripts','add_font_awesome');

Die Icons von Font Awesome kannst du dann ebenfalls für die Menü-Punkte nutzen. Lediglich die CSS-Styles müssen dann noch abweichend von dieser Anleitung angepasst werden.

Step 1: Erweiterte Menü Optionen aktivieren

In WordPress kann man jedem Menü-Punkt eine eigene CSS-Klasse zuweisen. Dazu musst du zunächst die erweiterten Menüeigenschaften aktivieren.
Dazu gehst du zunächst im Dashboard auf Design > Menüs.
Dort findest du die erweiterten Menüeigenschaften etwas versteckt im Panel Optionen ganz oben.

WordPress Menü mit Icon erstellen — Versteckte Optionen aktivieren

Nun setzt du ein Häkchen bei dem Feld CSS-Klassen. Anschließend kannst du jedem Navigations-Punkt eine eigene CSS-Klasse zuweisen. Und dadurch kannst du ihn auch ganz individuell stylen.

Wordpress Menü mit Icons CSS-Klassen — CSS-Klassen aktivieren

Step 2: CSS-Klasse einfügen

Im WordPress Theme Twenty Fifteen ist bereits die Icon-Font Bibliothek Genericons eingebunden. Darum nutze ich in diese Icons für die Hervorhebung der Menüpunkte.
Für den Menüpunkt Home wähle ich das Icon genericon-home. Also trage ich in das neue Feld CSS-Klassen ein: genericon genericon-home

Für die weiteren Menü-Punkte kannst du dir auf der Webseite genericons.com die verfügbaren Icons anzeigen lassen.

Klicke einfach auf das gewünschte Icon und anschließend auf Copy HTML. In einem Pop-Up erhältst du dann den Code für das Icon.
Für mein Beispiel-Menü habe ich folgende Icons ausgewählt:

Home: genericon genericon-home
Kontakt: genericon genericon-mail
Blog: genericon genericon-image

Lesetipp Webfonts lokal in WordPress nutzen

Step 3: Stylesheet anpassen

Damit die Icons auch richtig vor den Menü-Punkten positioniert werden, müssen noch ein paar CSS-Anweisungen eingefügt werden.
Die folgenden CSS Styles kommen nun in die Datei style.css.

.main-navigation ul li {
width: 100%;
} 
.main-navigation a {
float:left;
}
.nav-menu >.genericon::before {
color:#FFA500;
font-size:28px;
float:left;
margin:5px 10px 0 0;
}

Je nach Geschmack kannst du auch die Farbe der Icons und auch ihre Größe festlegen.