Symbole üben eine unwiderstehliche Anziehungskraft aus!
Sie besitzen die Fähigkeit, augenblicklich mit dem Betrachter in Kontakt zu treten und eine starke visuelle Verbindung herzustellen.
Aus diesem Grund werden Symbole überall häufig eingesetzt, auch auf WordPress-Webseiten.
Zudem kann es mit der Zeit eintönig werden, wenn man über Monate hinweg dasselbe Design auf seiner Seite verwendet. Das ist ganz natürlich.
Und dann begibt man sich auf die Suche nach etwas Ansprechenderem, nur um sich erneut zu langweilen.
Und dieser Kreislauf wiederholt sich endlos…
Wie kann man diesem Kreislauf der Monotonie entkommen?
Dashicons sind hierfür eine ausgezeichnete Option!
Sie können das Erscheinungsbild Ihrer Webseite aufwerten und Ihnen helfen, sich von der Masse abzuheben. Zudem bewahren sie Sie vor dem unnötigen Aufwand, Ihre Seite mit überflüssigen Bildern zu überladen, die die Ladegeschwindigkeit beeinträchtigen.
Lassen Sie uns also Dashicons näher betrachten und erfahren, wie Sie sie effektiv auf Ihrer WordPress-Seite einsetzen können.
Was sind WordPress Dashicons?
Dashicons sind die offiziellen Icon-Schriftarten von WordPress, die vor einigen Jahren mit Version 3.8 eingeführt wurden. Diese Schriftarten sind nicht nur praktisch, sondern auch optisch sehr ansprechend, wenn sie auf Ihrer Webseite verwendet werden. Es handelt sich um hochwertige SVG-Dateien, die Sie problemlos und ohne Qualitätsverlust auf jede beliebige Größe skalieren können.
Da sie nativen WordPress-Support genießen, da sie vom WordPress-Team selbst entwickelt wurden, können Sie sie direkt verwenden, ohne zusätzliche Skripte einbinden zu müssen. Es gibt ungefähr 350 Schriftarten mit Symbolen, die Sie in den offiziellen WordPress-Entwicklerressourcen finden können.
Diese Symbole sind nach Themen kategorisiert, und es gibt ein dynamisches Suchfeld, mit dem Sie die verfügbaren Symbole filtern können.
Sie können diese Symbole verwenden für:
- WordPress-Dashboard
- Navigationsmenüs
- Seiten und Beiträge
- Metadaten
- Editor-Elemente
- Benutzerdefinierte Plugins und Designs
- Admin-Bereiche
- Frontend-Gestaltung
Ist Ihnen aufgefallen, dass ich immer wieder von „Symbolen“ spreche?
Damit meine ich lediglich Symbolschriften.
Keine Bilder in Form von Icons.
Ja, es gibt einen Unterschied zwischen den beiden.
Lassen Sie uns das aufklären.
Der Unterschied zwischen Bildsymbolen und Symbolschriften
Icon-Schriften und Bild-Icons ähneln sich in gewisser Weise, aber anstelle von Buchstaben enthalten Icon-Schriften Vektorsymbole.
War das zu technisch?
Ich werde es präzisieren.
Im Grunde ähneln diese Symbolschriften Bildern, die Sie verwenden können, um Symbole auf Ihrer Webseite hinzuzufügen, sind aber eben keine tatsächlichen Bilder.
Sie bieten Ihnen zahlreiche Vorteile.
Wie?
Finden Sie es im nächsten Abschnitt heraus.
Warum sollten Sie sie verwenden?
- Sie sind skalierbar wie Texte, die auf Ihrer Webseite verwendet werden, da es sich um Schriftarten handelt.
- Sie sind leichtgewichtig, was die Ladegeschwindigkeit Ihrer Seite im Vergleich zu Bildern nicht beeinträchtigt.
- Sie können die Symbolfarbe über CSS bestimmen und zusätzliche Eigenschaften wie Farbverläufe, Schatten usw. hinzufügen.
- Sie sind ideal, um zu viele HTTP-Anfragen zu vermeiden, da Sie Schriftarten auf einmal laden können, die Sie auf Ihren Seiten verwenden möchten. Wenn Sie viele Bilder auf der Webseite einsetzen, müssen Sie zahlreiche Anfragen senden, um sie abzurufen, was die Ladezeit der Seite verlängert.
- Sie sind einfacher zu verwenden und anzupassen als Bilder. Sie können markante und kreative Symbole hinzufügen, ohne sie jedes Mal neu erstellen zu müssen, wenn Sie ein Symbol für einen Videoplayer, eine E-Mail, Musik oder etwas Anderes benötigen.
- Sie bieten eine bessere Zugänglichkeit, da sie direkt in WordPress integriert sind.
Wie verwendet man sie?
Die Verwendung von Dashicons ist kein Hexenwerk.
Vertrauen Sie mir; ich kenne mich mit beidem aus :0
Befolgen Sie einfach die unten aufgeführten Schritte, um mit WordPress Dashicons zu starten.
Schritt 1: Aktivieren Sie Dashicons auf Ihrer WordPress-Seite
Bevor Sie beginnen, müssen Sie Dashicons dort aktivieren, wo Sie sie einsetzen möchten, beispielsweise in einem Design. Hierzu müssen Sie der Datei functions.php einige Codezeilen hinzufügen.
So geht’s:
- Gehen Sie zunächst in Ihrem WordPress-Dashboard zum Design-/Theme-Editor.
- Öffnen Sie die Datei functions.php.
- Scrollen Sie bis zum Ende der Datei und fügen Sie einige Codezeilen hinzu, um Skripte in die Warteschlange einzureihen.
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
Das obige Beispiel dient dazu, Dashicons im Frontend zu aktivieren.
Stellen Sie sicher, dass Sie ein Child-Theme erstellen, bevor Sie die Datei functions.php bearbeiten. Denn wenn Sie die Design-Datei direkt bearbeiten und dann ein Update für dieses Design erfolgt, werden alle Änderungen, die Sie an der Datei vornehmen, überschrieben.
Schritt 2: Finden Sie Dashicon HTML- und CSS-Codes
WordPress.org stellt eine Bibliothek von Dashicons zur Verfügung, die Ihnen dabei hilft, die CSS- und HTML-Codes zu finden, die zu jedem Symbol gehören. Gehen Sie zu den Entwicklerressourcen, um die Dashicons zu finden, die Sie verwenden möchten, und dann:
- Klicken Sie auf das gewünschte Symbol.
- Wählen Sie zwischen „CSS kopieren“ oder „HTML kopieren“, indem Sie darauf klicken.
- Nun wird ein Popup-Fenster angezeigt. Kopieren Sie den Code einfach in die Zwischenablage.
- Entscheiden Sie, wo Sie das Symbol einsetzen möchten, beispielsweise in Themes, Metadaten, Navigationsmenüs usw.
- Fügen Sie den kopierten Code in das Text-Widget oder den Texteditor des gewählten Bereichs ein.
- Passen Sie das Erscheinungsbild der Symbole mit benutzerdefiniertem CSS an.
Das ist alles.
Darüber hinaus haben alle Symbole standardmäßig eine Größe von 20 Pixel. Sie können diese mit den CSS-Elementen von Browser-Optionen wie Google Chromes „Element untersuchen“ oder Firefox‘ „FireBug“ verändern.
Wie holt man das Beste aus WordPress Dashicons heraus?
Sie haben gesehen, wie Sie Dashicons auf Ihrer Webseite verwenden können, und nun betrachten wir die Verwendung für bestimmte Anwendungsfälle.
1. Über das Navigationsmenü
Gehen Sie folgendermaßen vor, um dem Menü Symbole hinzuzufügen:
- Gehen Sie im Dashboard zu „Design“ / „Menüs“.
- Kopieren Sie die HTML-Codes für das Menüsymbol von WordPress.org.
- Fügen Sie sie unter „Navigation Label“ im Dashboard ein.
- Klicken Sie auf die Schaltfläche „Speichern“ und laden Sie dann die Startseite. Nun sollte das ansprechende und klare Symbol angezeigt werden.
2. Verwendung in Post-Metadaten
Sie können Dashicons direkt vor einem Datum, dem Namen des Autors, einem Tag oder einer Kategorie verwenden, je nach Theme und den angezeigten Daten.
Da Sie Dashicons bereits in die Warteschlange gestellt haben, öffnen Sie die Datei style.css. Alternativ können Sie sich auch für einen benutzerdefinierten CSS-Editor entscheiden, damit Ihre Änderungen nach Design-Updates nicht verloren gehen. Fügen Sie dann Ihren CSS-Code hinzu, nachdem Sie einen geeigneten Selektor gefunden haben.
3. Im WordPress-Backend
Wenn Sie verschiedene Symbole für verschiedene benutzerdefinierte Beitragstitel, Beitragstypen oder Widgets verwenden möchten, ist das ganz einfach.
Ein kurzer Tipp: Erstellen Sie einen Shortcode
Um Dashicons einfacher zu verwenden, können Sie einen Shortcode dafür erstellen. Das ist besonders hilfreich, wenn Sie eine Webseite für Ihre Kunden erstellen, die Dashicons dann einfacher einfügen können, ohne mit Codes herumspielen zu müssen.
Fazit
Ich hoffe, die Verwendung von WordPress Dashicons ist Ihnen nun klarer geworden. Sie verbessern nicht nur die Ästhetik Ihrer Webseite, sondern sind auch einfach zu verwenden und verbessern die Ladegeschwindigkeit der Seite.
Und Sie wissen ja, „Schönheit und Verstand“ ist eine seltene Kombination.
Also, worauf warten Sie? Verwenden Sie diese auffälligen Dashicons auf Ihrer WordPress-Seite!