WordPress Menü mit Icons aufpeppen

12 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 man ein WordPress Menü mit Icons aufhübschen kann, 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, sollten Sie zunächst ein Child-Theme anlegen.
Eine ausführliche Anleitung hierzu finden Sie im Beitrag WordPress Child Theme erstellen.
Alternativ können Sie auch ein Plugin wie 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 Sie das WordPress Menü mit Icons einer anderen Font-Bibliothek nutzen möchten, müssen Sie 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. Fügen Sie 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 können Sie 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 muss man zunächst die erweiterten Menüeigenschaften aktivieren.
Gehen Sie im Dashboard auf Design > Menüs
Dort finden Sie die erweiterten Menüeigenschaften etwas versteckt im Panel Optionen ganz oben.

Versteckte Optionen aktivieren

Setzen Sie ein Häkchen bei dem Feld CSS-Klassen. Nun können Sie jedem Navigations-Punkt eine eigene CSS-Klasse zuweisen und ihn somit individuell stylen.

CSS-Klassen aktivieren

Step 2: CSS-Klasse einfügen

Im WordPress Theme Twenty Fifteen ist bereits die Icon-Font Bibliothek Genericons eingebunden. Daher 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 und trage in das neue Feld CSS-Klassen ein: genericon genericon-home

CSS-Klasse dem Menüpunkt zuordnen

Für die weiteren Menü-Punkte können Sie sich auf der Webseite genericons.com die verfügbaren Icons anzeigen lassen.

Klicken Sie einfach auf das gewünschte Icon und anschließend auf Copy HTML. In einem Pop-Up erhalten Sie 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

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.
Fügen Sie folgende CSS Styles in der Datei style.css ein:

.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 können Sie die Farbe der Icons und auch ihre Größe definieren.