Dashicons im WordPress Frontend aktivieren

Verschönere Deine WordPress Seite durch die Aktivierung der Dashicons im Frontend. Ich zeige Dir, wie Du sie aktivierst und in den Metadaten oder an beliebigen Stellen Deiner Seite platzierst.

Was sind Dashicons?

Seit der WordPressversion 3.8 sind Dashicons die offizielle Symbolschriftart im Adminbreich jeder WordPressinstallation. Die kleinen Icons sind Dir sicher schon aufgefallen. Du findest Sie beispieweise vor den Menüeinträgen.

Dashicons im Frontend aktivieren

Um Dashicons im Frontend zu aktivieren, muss ein Eintrag in der Datei functions.php Deines Themes erfolgen. Du findest diese Datei im Administrationsbereich Deiner WordPressinstallation unter:

Design  Editor

unter

Theme-Dateien  Theme Funktionen

Beachte, dass Du mit einem Fehler in der functions.php einen White Screen of Death verursachen kannst. Daher empfehle ich Dir, Deine functions.php auf Dateiebene zu ändern. Du findest sie unter:

wp-content/themes/DeinTheme/functions.php

Es versteht sich von selbst, dass “DeinTheme” durch den Namen des von Dir verwendeten Themes ersetzt werden muss.

An das Ende Deiner functions.php kopierst Du folgenden Quellcode:

function load_dashicons_front_end(){
     wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts','load_dashicons_front_end');

Der erste Teil ist eine Funktion. In Ihr wird die Symbolschriftart registriert. In der darauf folgenden Action-Anweisung wird dem Hook wp_enqueue_scripts die Symbolschriftart (Style) übergeben. wp_enqueue_scripts ist der Hook zur Anzeige im Frontend Deiner Seite. Ähnlich kann beispielsweise auch die style.css Deines Themes zur Verwendung im Frontend mitgeteilt werden.

Nach dem Einfügen und Speichern ist kannst Du Dashicons in Deinem Frontend verwenden.

Welche Dashicons gibt es?

Die Anzahl der Dashicons wird kontinuierlich erweitert. Unter GitHub kannst Du selber Vorschläge für künftige Dashicons einbringen. Eine Liste der derzeit verfügbaren Dashicons findest Du unter: Liste der verfügbaren Dashicons.

Dashicons in Blogartikeln oder Seiten verwenden

In Deinen Seiten und Beiträgen kannst Du Dashicons ganz einfach verwenden. Du stellst Deinen Editor auf Textmode und kopierst sie in Deinen Beitrag. Dafür kannst Du verschiedene HTML-Tags nutzen. Wichtig ist lediglich die Angabe der Klasse Dashicon, gefolgt vom korrekten Namen des Dashicons.

<i class="dashicons dashicons-name"></i>
<span class="dashicons dashicons-name"></span>

Beispiel Dashicon Laptop:

<i class="dashicons dashicons-laptop"></i>  
<span class="dashicons dashicons-laptop"></span> 

Wie Du siehst, ist die Ausgabe identisch. Es bleibt Dir überlassen, welche HTML-Tags Du verwendest.

Du kannst Deine Dashicons beliebig weiter anpassen. So könntest Du den Laptop blau färben und vergrößern:

<i class="dashicons dashicons-laptop"
   style="color:darkblue;font-size:4em;"></i>   

Dashicons in den Metadaten verwenden

Unter Metadaten sind hier die Informationen zu verstehen, die kurz vor Deinen Beiträgen stehen. Also Datum, Autor und Kommentar. Du kannst Dashicons auch in diesen Metadaten verwenden. Beispielsweise als Icon vor dem Datum und dem Autor eines Artikels. Wie Du die Metadaten Deiner Beiträge ändern kannst, erfährst Du in eigenen Artikeln.

WordPress Genesis: Post Meta bearbeiten oder entfernen

WordPress: Datum und Autor bearbeiten oder löschen