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.
Fertiges WordPress Menü mit Icons
Tipp:
Icons kann man natürlich auch per Plugin zu WordPress Menüs hinzufügen! Hier zwei empfehlenswerte Plugins:
- Menu Icons: https://wordpress.org/plugins/menu-icons/
- Font Awesome 4 Menus: https://wordpress.org/plugins/font-awesome-4-menus/