Das passiert jedem.
Sie finden ein Design, das Ihnen gefällt, installieren es und erfreuen sich ein paar Monate lang am Aussehen Ihrer Site. Doch nach ein paar Monaten wirkt das Design abgestanden. Ein bisschen langweilig.
Das einzige Problem ist, dass Sie nicht mehrere Stunden damit verbringen möchten, nach etwas Neuem zu suchen. Wenn es doch nur eine Möglichkeit gäbe, Ihrem Thema etwas Würze zu verleihen, ein wenig Flair, um es hervorzuheben.
Bevor Sie verzweifelt die Hände über dem Kopf zusammenschlagen, möchte ich Ihnen eine einfache Möglichkeit zeigen, Ihr Design ohne allzu großen Aufwand aufzupeppen, und ohne unnötige Bilder hinzuzufügen, die Ihre Site verlangsamen könnten.
Hier kommen Dashicons ins Spiel. Dashicons sind Schriftsymbole, die in WordPress 3.8 eingeführt wurden. Das sind diese tollen und coolen Symbole, die Sie sehen, wenn Sie sich bei Ihrem Dashboard anmelden. Wäre es nicht cool, wenn Sie sie auch zu Ihrem Design hinzufügen könnten?
Das können Sie, und ich zeige Ihnen, wie.
Wie können Sie Dashicons in Ihrem Navigationsmenü verwenden?
Beginnen wir mit einem einfachen Beispiel. Dashicons sind bereits seit Version 3.8 in WordPress enthalten, Sie müssen sie jedoch noch einbinden, damit sie im Frontend Ihrer Site, also in Ihrem Design, richtig angezeigt werden.
Schritt 1: Machen Sie Ihr Design Dashicons-bereit
Um Ihr Design für Dashicons vorzubereiten, öffnen Sie zunächst Ihre Datei functions.php (zu finden unter „Darstellung“ > „Editor“ – standardmäßig wird die CSS-Datei Ihres aktuellen Designs geöffnet. Suchen Sie nach der Datei functions.php und klicken Sie darauf, um sie im Editor zu laden.)
Schritt 2: Skript in die Warteschlange stellen
Scrollen Sie ganz nach unten und fügen Sie am Ende diese Codezeilen ein:
//Enqueue the Dashicons script
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
Alles klar! Jetzt ist Ihr Design bereit, Dashicons zu verwenden.
Schritt 3: Dashicons zu Menüelementen hinzufügen
Fügen wir ein Dashicon für Ihren Home-Link hinzu. Gehen Sie zur Dashicons-Website und wählen Sie das gewünschte Symbol aus.
Update: Dashicons waren ursprünglich auf GitHub.io verfügbar, wurden inzwischen aber auf WordPress.org bereitgestellt.
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 wird ein Popup-Fenster mit dem benötigten Code angezeigt.
Schritt 5:
Gehen Sie zurück zu Ihrem WordPress-Dashboard, klicken Sie auf „Darstellung“ > „Menüs“ und fügen Sie den Code genau dort ein, wo „Navigationsbezeichnung“ steht.
Wenn das Wort dennoch 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 jetzt ein schönes, klares Dashicon anzeigen.
Sie können dies für alle Navigationsmenüelemente oder nur für die Startseite tun. Wiederholen Sie einfach die obigen Schritte mit den entsprechenden Symbolen. Das war doch ganz einfach, oder?
Wie verwenden Sie Dashicons in Post-Metadaten?
Sie können noch einen Schritt weitergehen und Ihren Post-Metadaten Dashicons hinzufügen, d. h. Dashicons vor dem Namen des Autors, dem Datum, der Kategorie oder dem Tag hinzufügen; je nach Ihrem Thema und den angezeigten Informationen.
Da Sie Dashicons bereits in die Warteschlange Ihres Designs eingereiht haben, müssen Sie jetzt nur noch Ihre Datei style.css öffnen (oder einen benutzerdefinierten CSS-Editor verwenden, was immer die bessere Option ist, damit Sie die Änderungen nicht verlieren, wenn Ihr Design aktualisiert wird!), den passenden Selektor finden und den CSS-Code hinzufügen.
Angenommen, Sie möchten vor Ihrem Namen oder dem Namen Ihres Autors ein Symbol 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 dieses Mal CSS kopieren. Auch hier wird ein Popup-Fenster mit dem Code angezeigt, 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. Wenn Sie :before hinzufügen und dann den CSS-Code einfügen, den Sie von der Dashicons-Website kopiert haben, wird vor dem Namen des Autors ein schönes Symbol angezeigt. Sie müssen auch 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 auch ein wenig Styling hinzu, und jetzt sieht der vollständige Code folgendermaßen 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?
Etwas wie das:
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 obigen Beispielen können Sie Dashicons in Ihrem Backend verwenden, um unterschiedliche Symbole für unterschiedliche Beitragstypen festzulegen. Sie können sie auch in Ihren Beitragstiteln oder Widget-Titeln verwenden. Wenn Sie eine benutzerdefinierte Zielseite erstellen, können Sie damit zwischen den verschiedenen Seiten Ihrer Site unterscheiden.
Hier ist ein einfaches Beispiel dafür, was Sie damit erstellen könnten:
