Kategorien
Code-Snippets WordPress

So kannst du die WordPress Dashicons in Beiträgen und Seiten im WordPress Frontend verwenden

WordPress Dashicons ist eine Symbolschrift (Icon Font ähnlich wie z. B. FontAwesome), die standardgemäß im WordPress-Backend ab der Version 3.8 implementiert ist. Die Symbolschrift Dashicons ist ein absolutes Leichtgewicht und kommt mit Symbolen/Icons für nahezu jeden Anwendungsfall oder Bedarf daher.

Mit den Dashicons von WordPress machst du deine Website schlanker

Warum solltest du also eine zusätzliche, schwergewichtige 3rd-Party-Icon-Bibliothek auf deiner WordPress-Seite installieren, wenn das ohnehin schon implementierte Icon-Set vollkommen ausreichend is?

Standardgemäß sind die Dashicons nur im Backend bzw. im Admin-Bereich deiner WordPress-Installation verfügbar. Damit du sie auch für die Darstellung im Frontend nutzen kannst, muss die functions.php deines WordPress-Themes um ein paar Zeilen Code ergänzt werden.

Es bedarf nur einiger Zeilen Code, um die Dashicons für den Einsatz im Frontend zu aktivieren

Damit die Dashicons in deinen Frontend-Posts und -Seiten zum Einsatz kommen können, musst du zunächst das nachfolgende Script für die Frontend-Darstellung der Dashicons einbetten.

/* 
widilo®CodeSnippet // WordPress Dashicons im Frontend aktivieren
@link https://shop.widilo.de/so-kannst-du-die-wordpress-dashicons-in-beitragen-und-seiten-im-wordpress-frontend-verwenden/
*/

add_action( 'wp_enqueue_scripts', 'widilo_activate_dashicons_frontend' );

function widilo_activate_dashicons_frontend() {

   wp_enqueue_style( 'dashicons' );

}

Wo wird das PHP Code-Snippet eingefügt?

Du kannst das PHP Code-Snippet entweder in die Datei functions.php in deinem WordPress-Theme einfügen oder ein kostenfreies WordPress Plugin für Code-Snippets dafür verwenden.

Beachte bitte folgendes, wenn du Änderungen an deiner functions.php vornimmst:

Wenn du kein selbst erstelltes, sondern ein gekauftes oder ein WordPress Theme aus dem WordPress-Repository verwendest, werden deine Änderungen in der functions.php bei einem Update des Themes überschrieben. Für die dauerhafte Einbindung von Code in deinem WordPress Theme, kannst du ein Plugin, wie z.B. Code Snippets verwenden.

Code Snippets ist eine einfache Möglichkeit, um deiner Website PHP Code Snippets hinzuzufügen, ohne dass eine Änderung und Anpassung der functions.php deines Theme erforderlich ist.

So fügst du ein Code-Snippet zur functions.php hinzu

  • Gehe im WordPress-Backend zu (1) Design > (2) Theme-Editor
  • Wähle dein Theme aus dem (3) Dropdown-Menü aus
  • Klicke auf (4) functions.php
  • Füge den Code (5) ein und vergiß anschließend nicht, deine Änderungen zu speichern ; )

Voilà, du hast es geschafft! Du kannst die WordPress Dashicon jetzt in deinen WordPress-Beiträgen und auf deinen WordPress-Seiten verwenden.

So bindest du die Dashicons in deinen WordPress-Beiträgen bzw. auf deinen Seiten ein

Verschaffe dir zunächst einen Überblick über die Dashicons auf der offiziellen WordPress-Dashicons-Website.

Dashicon als HTML <SPAN>-Tag einbinden

  1. Wähle ein Icon aus, das du auf einer Seite oder in einem Beitrag verwenden möchtest:

2. Klicke auf Copy HTML und kopiere z. B. mit der Tastenkombination STRG + C den im Popup angezeigten HTML-Code in deine Zwischenablage.

3. Füge nun den kopierten HTML-Code im Gutenberg-Editor auf der Seite oder im Beitrag in einen HTML-Code-Block „Individuelles HTML“ ein. Das von dir gewählte Icon erscheint nun auf deiner Seite oder in deinem Beitrag.

Dashicon als CSS-Klasse einbinden

  1. Wähle ein Icon auf der WordPress Dashicons-Seite aus.
  2. Klicke auf Copy CSS und kopiere den CSS-Code in deine Zwischenablage.
  3. Füge das kopierte CSS content: "\f109"; des ausgewählten Icons einer CSS-Klasse z. B. im Inline-Style-Editor unter Design > Customizer > Zusätzliches CSS hinzu. Im nachfolgenden Beispiel ändern wir das List-Style-Icon in der Seiten- oder Beitrags-Sidebar von einem Punkt in einen Dashicon-Pin:

#sidebar ul li:before {
  content: "\f109";
  font-family: 'Dashicons';
  color: #424242;
  padding-right: 5px;
  font-size: 14px;     
}

#sidebar ul {
  list-style: none;
}

Übrigens: Du kannst die Dashicons auch mit Hilfe eines HTML-Widgets, z. B. in Header-, Footer- oder Sidebar-Widgets verwenden.

Jetzt bist du gefragt! Gefällt dir dieser Beitrag oder hast du Fragen dazu? Dann hinterlasse uns einen Kommentar. Wir freuen uns auf deine Rückmeldung, deine Anregungen und auf deine Fragen : )

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.