Das passiert jedem.

Sie finden ein Theme, das Ihnen gefällt, installieren es und erfreuen sich ein paar Monate lang am Aussehen Ihrer Website. Aber dann, nach ein paar Monaten, wird das Theme altbacken, ein bisschen langweilig.

Das Problem ist nur, dass Sie nicht stundenlang nach etwas Neuem suchen wollen. Wenn es doch nur eine Möglichkeit gäbe, Ihr Thema ein wenig aufzupeppen, ein wenig aufzufrischen, damit es heraussticht.

Bevor Sie verzweifelt die Hände in den Schoß legen, möchte ich Ihnen eine einfache Möglichkeit zeigen, wie Sie Ihr Thema ohne großen Aufwand aufpeppen können, ohne unnötige Bilder hinzuzufügen, die Ihre Website verlangsamen könnten.

Dashicons wurden mit WordPress 3.8 eingeführt. Das sind diese tollen und coolen Icons, die Sie sehen, wenn Sie sich in Ihr Dashboard einloggen. Wäre es nicht cool, wenn Sie sie auch in Ihr Theme einbauen könnten?

Das können Sie, und ich werde Ihnen zeigen, wie.

Wie können Sie Dashicons in Ihrem Navigationsmenü verwenden?

Beginnen wir mit einem einfachen Beispiel: Dashicons sind in WordPress bereits seit Version 3.8 enthalten, aber Sie müssen sie noch einbinden, damit sie im Frontend Ihrer Website, d.h. in Ihrem Theme, richtig angezeigt werden.

Schritt 1: Bereiten Sie Ihr Theme Dashicons vor

Um Ihr Theme Dashicons bereit zu machen, öffnen Sie zunächst Ihre functions.php-Datei (zu finden im Appearance>Editor - standardmäßig wird die CSS-Datei Ihres aktuellen Themes geöffnet. Suchen Sie die functions.php-Datei und klicken Sie darauf, um sie im Editor zu laden).

Schritt 2: Das Skript in die Warteschlange stellen

Scrollen Sie ganz nach unten und fügen Sie diese Codezeilen am Ende ein:

 //Das Dashicons-Skript einreihen add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Jetzt ist Ihr Theme bereit für die Verwendung von Dashicons.

Schritt 3: Hinzufügen von Dashicons zu Menüpunkten

Fügen Sie ein Dashicon für Ihren Home-Link hinzu. Gehen Sie auf die Dashicons-Website und wählen Sie das gewünschte Symbol aus.

Update: Dashicons waren ursprünglich auf GitHub.io verfügbar, wurden aber inzwischen auf WordPress.org zur Verfügung gestellt.

Schritt 4:

Klicken Sie auf das gewünschte Symbol (in diesem Fall habe ich das Home-Symbol ausgewählt) und dann auf HTML kopieren. Es öffnet sich ein Pop-up-Fenster mit dem benötigten Code.

Schritt 5:

Gehen Sie zurück zu Ihrem WordPress-Dashboard, klicken Sie auf Erscheinungsbild> Menüs und fügen Sie den Code genau dort ein, wo Navigation Label steht.

Wenn das Wort trotzdem angezeigt werden soll, geben Sie es nach der schließenden div-Klammer ein.

Klicken Sie auf "Speichern" und laden Sie Ihre Homepage. Ihr Home-Link sollte nun ein schönes, klares Dashicon anzeigen.

Sie können dies für alle Navigationsmenüpunkte oder nur für die Startseite tun. Wiederholen Sie einfach die obigen Schritte mit den entsprechenden Symbolen. Das war einfach, oder?

Wie verwendet man Dashicons in Post-Meta?

Sie können noch einen Schritt weiter gehen und Dashicons zu den Metadaten Ihres Beitrags hinzufügen, d. h. Sie können Dashicons vor dem Namen des Autors, dem Datum, der Kategorie oder dem Tag einfügen, je nach Ihrem Thema und den angezeigten Informationen.

Da Sie Dashicons in Ihrem Theme bereits in die Warteschlange gestellt haben, müssen Sie jetzt nur noch Ihre style.css-Datei öffnen (oder den Custom CSS-Editor verwenden, was immer eine bessere Option ist, damit Sie die Änderungen nicht verlieren, wenn Ihr Theme aktualisiert wird!), den passenden Selektor finden und den CSS-Code hinzufügen.

Angenommen, Sie möchten ein Symbol vor Ihrem Namen oder dem Namen Ihres Autors hinzufügen.

Schritt 1:

Zuerst wählen wir ein Symbol aus, das uns gefällt.

Schritt 2:

Klicken Sie dann darauf und wählen Sie diesmal CSS kopieren. Auch hier öffnet sich ein Pop-up-Fenster mit dem Code, den Sie einfügen müssen.

Schritt 3:

Öffnen Sie nun Ihre style.css und suchen Sie den entsprechenden Selektor, in diesem Fall .entry-author. Durch Hinzufügen von :before und Einfügen des CSS-Codes, den Sie von der Dashicons-Website kopiert haben, wird der Name des Autors mit einem hübschen Symbol versehen. Außerdem müssen Sie angeben, dass Sie die Schriftart Dashicons verwenden. Der geänderte Code sieht folgendermaßen aus:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; } 

Fügen wir noch ein wenig Styling hinzu, und schon sieht der fertige Code wie folgt aus:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

Das Endergebnis

Wie wird das also am Ende aussehen?

Etwa so:

Es gibt so viele Möglichkeiten, Dashicons zu verwenden - lassen Sie Ihrer Kreativität freien Lauf und sehen Sie, was Sie tun können.

Alles zusammenfügen

Abgesehen von den oben genannten Beispielen können Sie Dashicons in Ihrem Backend verwenden, um verschiedene Icons für verschiedene Beitragstypen festzulegen, oder Sie können sie in Ihren Beitragstiteln, Widget-Titeln oder, wenn Sie eine benutzerdefinierte Landing Page erstellen, zur Unterscheidung zwischen verschiedenen Seiten Ihrer Website verwenden.

Hier ist ein einfaches Beispiel dafür, was man damit machen könnte: