Es passiert jedem.

Sie finden ein Thema, das Ihnen gefällt, installieren es und verbringen ein paar Monate damit, das Aussehen Ihrer Website zu genießen. Aber dann, nach ein paar Monaten, fühlt sich das Thema abgestanden an. Ein bisschen langweilig.

Das einzige Problem ist, dass Sie nicht ein paar Stunden damit verbringen möchten, nach etwas Neuem zu suchen. Wenn es nur eine Möglichkeit gäbe, Ihrem Thema ein wenig Würze zu verleihen, ein wenig Aufflackern, um es hervorzuheben.

Bevor Sie Ihre Hände in Verzweiflung werfen, lassen Sie mich Ihnen eine einfache Möglichkeit zeigen, Ihr Thema ohne zu viel Aufwand aufzupeppen und ohne unnötige Bilder hinzuzufügen, die Ihre Website verlangsamen könnten.

Geben Sie Dashicons ein. Dashicons sind Schriftsymbole, die in WordPress 3.8 eingeführt wurden. Dies sind die fantastischen und coolen Symbole, die Sie sehen, wenn Sie sich in Ihrem Dashboard anmelden. Wäre es nicht cool, wenn Sie sie auch zu Ihrem Thema hinzufügen könnten?

Nun, Sie können und ich werde Ihnen zeigen, 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, aber Sie müssen sie dennoch einschließen, damit sie im Frontend Ihrer Website ordnungsgemäß angezeigt werden. das heißt, dein Thema.

Schritt 1: Machen Sie Ihr Thema Dashicons bereit

Um Ihr Thema Dashicons bereit Öffnen Sie zuerst Ihre Funktionen.php-Datei (gefunden in)>Editor – standardmäßig wird die CSS-Datei Ihres aktuellen Themas geöffnet. Gehen Sie weiter und suchen Sie nach Funktionen.PHP-Datei und klicken Sie darauf, um sie in den Editor zu laden.)

Schritt 2: Stellen Sie das Skript in die Warteschlange

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

In Ordnung! Jetzt ist Ihr Thema bereit, Dashicons zu verwenden.

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

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 , aber sie sind seitdem auf zur Verfügung gestellt worden WordPress.org .

Schritt 4:

Klicken Sie auf das gewünschte Symbol (in diesem Fall habe ich das Home-Symbol ausgewählt) und klicken Sie dann auf HTML kopieren. Sie erhalten ein Popup-Fenster mit dem Code, den Sie benötigen.

Schritt 5:

Gehen Sie zurück zu Ihrem WordPress-Dashboard, klicken Sie auf „>“ und fügen Sie den Code genau dort ein, wo Navigation Etikett.

Wenn das Wort weiterhin 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üpunkte oder nur für zu Hause tun. Wiederholen Sie einfach die obigen Schritte mit den passenden Symbolen. Das war einfach, oder?

Wie benutzt man Dashicons in Post Meta?

Sie können noch einen Schritt weiter gehen und Dashicons zu Ihrem Post-Meta hinzufügen, oder mit anderen Worten Dashicons vor dem Namen, Datum, der Kategorie oder dem Tag des Autors hinzufügen. abhängig von Ihrem Thema und den angezeigten Informationen.

Da Sie bereits Dashicons in Ihrem Thema eingereiht haben, müssen Sie jetzt nur noch Ihren Stil öffnen.CSS-Datei (oder verwenden Sie einen benutzerdefinierten CSS-Editor, der immer eine bessere Option ist, damit Sie die Änderungen nicht verlieren, sobald Ihr Thema aktualisiert wird!), suchen Sie den passenden Selektor und fügen Sie den CSS-Code hinzu.

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 wir möchten.

Schritt 2:

Klicken Sie dann darauf und wählen Sie diesmal CSS kopieren. Auch hier erhalten Sie ein Popup-Fenster mit dem Code, den Sie einfügen müssen.

Schritt 3:

Öffnen Sie nun Ihren Stil.css und finden Sie den entsprechenden Selektor, in diesem Fall – .eintrag-Autor. Durch Hinzufügen von : Vor dem Einfügen des CSS-Codes, den Sie von der Dashicons-Website kopiert haben, wird der Name des Autors mit einem schönen Symbol versehen. 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 bisschen Styling hinzu, und jetzt sieht der fertige Code so aus:

Das Endergebnis

Wie wird das 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 zusammenfassen

Abgesehen von den obigen Beispielen können Sie Dashicons in Ihrem Backend verwenden, um verschiedene Symbole für verschiedene Beitragstypen anzugeben, oder Sie können sie in Ihren Beitragstiteln, Widget-Titeln oder wenn Sie eine benutzerdefinierte Zielseite erstellen, können Sie zwischen verschiedenen Seiten Ihrer Website unterscheiden.

Ein gutes Beispiel dafür ist die alte WP Superstars Homepage. Hier sehen Sie Dashicons in verschiedenen Bereichen der Website:

Dashicons sind nicht die einzigen Arten von Symbolschriften, die Sie hinzufügen können. Schauen Sie sich unsere FontAwesome Icons Tutorial für mehr.

Enthält E-Mail-Updates. Abmelden jederzeit.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.