Ikonen 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 das gleiche Theme auf Ihrer Website zu verwenden. Das ist ganz normal.

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 überladen Ihre Website mit unnötigen Bildern, die die Geschwindigkeit der Seite verlangsamen.

Sehen wir uns also die Dashicons an und wie Sie sie effektiv auf Ihrer WordPress-Website 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 toll anzusehen, 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-Schriften 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 auf verwenden:

  • 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?

Ich meine hier 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 Symbolschriftarten?

Icon-Fonts und Bild-Icons sind sich in gewisser Weise ähnlich, aber anstelle von Alphabeten gibt es in Icon-Fonts Vektorsymbole.

Ist das zu technisch geworden?

Lassen Sie mich das klarstellen.

Im Grunde genommen ähneln diese Icon-Schriften Bildern, die Sie zum Hinzufü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
  • Leichtgewichtig, was 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 beiden 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 Dashicons dort, wo Sie sie benötigen, zum Beispiel in einem Theme. Dazu müssen Sie ein paar Codes in die Datei function.php einfügen.

So machen Sie es:

  • 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 Entwicklerressourcen, 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.

Übrigens haben alle Symbole standardmäßig eine Größe von 20 Pixeln. 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 nachstehenden Schritten:

  • Gehen Sie im Dashboard zu Menüs/Erscheinungsbild
  • 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 der Post-Meta

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 unterschiedliche Symbole für verschiedene benutzerdefinierte Beitragstitel, Beitragstypen oder Widgets haben möchten, ist das ganz einfach zu bewerkstelligen.

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!