WordPress Dashicons: Wie verwendet man sie und holt das Beste aus ihnen heraus?

Icons sind faszinierend!

Sie haben die Macht, schnell mit dem Publikum zu kommunizieren, indem sie eine starke visuelle Verbindung herstellen

Aus diesem Grund werden Icons überall verwendet, auch auf WordPress-Websites

Außerdem kann es langweilig sein, mehrere Monate lang dasselbe Thema auf Ihrer Website zu verwenden. Es ist alltäglich

Und dann sind Sie auf der Suche nach etwas Interessanterem, verwenden das und langweilen sich wieder,

Und so geht der Kreislauf weiter und weiter..

Wie können Sie also diesen Kreislauf der Langeweile überspringen?

Dashicons sind eine hervorragende Möglichkeit!

Sie können die Ästhetik Ihrer Website aufpeppen und Ihnen helfen, sich abzuheben. Außerdem ersparen Sie sich damit zusätzlichen Aufwand und überfrachten Ihre Website mit unnötigen Bildern, die die Seitengeschwindigkeit verlangsamen

Sehen wir uns also die Dashicons an und wie Sie sie auf Ihrer WordPress-Website effektiv einsetzen können

Was sind WordPress Dashicons?

Dashicons sind die offiziellen Icon-Schriften von WordPress, die vor Jahren mit der Version 3.8 eingeführt wurden. Diese Schriftarten sind cool und beeindruckend, wenn Sie sie auf Ihrer Website verwenden. Es handelt sich um hochwertige SVG-Dateien, die Sie problemlos auf jede Größe skalieren können, ohne dass sie verpixelt werden

Da sie über eine native WordPress-Unterstützung verfügen, weil sie von ihrem Team selbst erstellt wurden, können Sie sie direkt verwenden, ohne zusätzliche Skripte zu laden. Es sind rund 350 Icon-Schriftarten enthalten, die Sie in den offiziellen WordPress-Entwicklerressourcen finden

Die Icons sind nach Themen kategorisiert, und Sie können ein dynamisches Suchfeld sehen, mit dem Sie die verfügbaren Icons filtern können

Sie können diese Icons verwenden auf

• WordPress Dashboard
• Navigationsmenüs
• Seiten und Beiträge
• Metadaten
• Editor-Elemente
• Benutzerdefinierte Plugins und Themen
• Verwaltungsbereiche
• Front-End-Design

Haben Sie bemerkt, dass ich wiederholt “Icons” sage?

Hier meine ich nur Icon-Schriften

Nicht Bilder in Form von Symbolen

Ja, es gibt einen Unterschied zwischen diesen beiden

Lassen Sie uns das aufklären

Unterschied zwischen Bildsymbolen und Icon-Schriftarten?

Icon-Schriftarten und Bildsymbole sind sich in gewisser Weise ähnlich, aber anstelle von Alphabeten gibt es in Icon-Schriftarten Vektorsymbole

Ist das zu technisch geworden?

Lassen Sie mich das klarstellen

Im Grunde genommen ähneln diese Icon-Fonts Bildern, die Sie zum Einfügen von Symbolen auf Ihrer Website verwenden können, aber nicht einem echten Bild

Sie bieten Ihnen eine Reihe von Vorteilen

Aber wie?

Das erfahren Sie im nächsten Abschnitt

Warum sollten Sie sie verwenden?

• Skalierbar wie die auf Ihrer Website verwendeten Texte, da es sich um Schriftarten handelt
• Geringes Gewicht, das sich im Vergleich zu Bildern nicht auf die Ladegeschwindigkeit Ihrer Seite auswirkt
• Sie können die Farbe des Symbols über CSS einstellen und zusätzliche Eigenschaften wie Farbverläufe, Schatten usw. hinzufügen.
• Spart viele HTTP-Anfragen, da Sie alle Schriften auf einmal laden und auf allen Seiten verwenden können. Wenn Sie viele Bilder auf Ihrer Website verwenden, müssen Sie viele Anfragen stellen, um sie abzurufen, was die Ladezeit der Seite erhöht.
• Einfacher zu verwenden und anzupassen als Bilder. Sie können wiedererkennbare 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 irgendetwas anderes benötigen.
• Bessere Zugänglichkeit, da sie direkt in WordPress integriert sind

Wie verwendet man sie?

Die Verwendung von Dashicons ist keine Raketentechnik

Glauben Sie mir, ich bin mit beidem vertraut :0

Befolgen Sie einfach einige der unten aufgeführten Schritte, um mit WordPress Dashicons zu arbeiten

Schritt 1: Aktivieren Sie Dashicons auf Ihrer WordPress-Website

Bevor Sie beginnen, aktivieren Sie die Dashicons dort, wo Sie sie benötigen, z.B. in einem Theme. Dazu müssen Sie ein paar Codes in die Datei function.php einfügen

Wie Sie das tun

• Gehen Sie zunächst von Ihrem WordPress-Dashboard aus zum Theme/Erscheinungsbild-Editor.
• Öffnen Sie die Datei function.php.
• Scrollen Sie bis zum Ende der Datei und fügen Sie ein paar Codezeilen hinzu, um Skripte einzureihen

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {

wp_enqueue_style

( 'dashicons' );

}
Mit dem obigen Beispiel können Sie Dashicons im Frontend aktivieren

Stellen Sie sicher, dass Sie ein Child-Theme erstellen, bevor Sie die Datei functions.php bearbeiten. Denn wenn Sie die Theme-Datei direkt bearbeiten und dann ein Update für dieses Theme kommt, werden alle Änderungen, die Sie an der Datei vornehmen, überschrieben

Schritt 2: Finden Sie die Dashicon HTML- und CSS-Codes

Wordpress.org bietet eine Bibliothek von Dashicons, die Ihnen hilft, die CSS- und HTML-Codes zu finden, die zu jedem Symbol gehören. Gehen Sie hier zu Entwickler-Ressourcen, um die Dashicons zu finden, die Sie verwenden möchten, und dann

• Klicken Sie auf das Symbol Ihrer Wahl.
• 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 verwenden möchten, z.B. in Themen, Metadaten, Navigationsmenü, usw.
• Fügen Sie den kopierten Code in das Textwidget oder den Texteditor der gewünschten Stelle ein.
• Ändern Sie das Aussehen des Symbols mit benutzerdefiniertem CSS

Das war’s schon

Außerdem sind alle Icons standardmäßig 20 Pixel groß. Sie können sie mit den CSS-Elementen von Optionen wie Google Chrome’s Inspect Element oder Firefox’s FireBug ändern

Wie holen Sie das Beste aus den WordPress Dashicons heraus?

Sie haben gesehen, wie Sie Dashicons auf Ihrer Website verwenden können, und jetzt werden wir uns ihre Verwendung für bestimmte Zwecke ansehen

1. Verwendung des Navigationsmenüs

Um dem Menü Icons hinzuzufügen, folgen Sie den unten stehenden Schritten

• Gehen Sie im Dashboard zu Menüs/Auftritt
• Kopieren Sie den HTML-Code für das Menüsymbol von Wordpress.org
• Fügen Sie ihn in das “Navigationslabel” auf dem Dashboard ein
• Klicken Sie auf die Schaltfläche “Speichern” und laden Sie dann die Startseite. Es sollte das kühle und scharfe Symbol angezeigt werden.

2. Verwendung in den Meta-Einträgen

Sie können Dashicons nur vor einem Datum, dem Namen des Autors, einem Tag oder einer Kategorie verwenden, je nach Thema und den angezeigten Daten

Da Sie Dashicons bereits eingefügt haben, öffnen Sie die Datei style.css. Andernfalls können Sie auch einen benutzerdefinierten CSS-Editor verwenden, mit dem Sie Ihre Änderungen nach Aktualisierungen des Themas nicht verlieren. Als nächstes fügen Sie Ihren CSS-Code ein, nachdem Sie einen passenden Selektor gefunden haben

3. Im WordPress-Backend

Wenn Sie für verschiedene benutzerdefinierte Beitragstitel, Beitragstypen oder Widgets unterschiedliche Symbole einfügen möchten, ist das ganz einfach

Ein schneller Tipp: Erstellen Sie einen Shortcode

Um Dashicons einfach zu verwenden, können Sie einen Shortcode dafür erstellen. Das ist vor allem dann nützlich, wenn Sie eine Website für Ihre Kunden erstellen, die Dashicons einfach einfügen können, ohne sich mit den Codes herumschlagen zu müssen

Fazit

Ich hoffe, Sie haben jetzt eine klare Vorstellung von WordPress Dashicons. Sie dienen nicht nur der Ästhetik Ihrer Website, 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, beeilen Sie sich, nutzen Sie diese auffälligen Dashicons auf Ihrer WordPress-Website!