Dashicons sind ein integrierter Kernsatz von Schriftsymbolen in WordPress, die bereits in WordPress 3.8 eingeführt wurden, als sie die massive Neugestaltung der Backend-Benutzeroberfläche durchführten und standardmäßig für die verschiedenen Links in der linken Admin-Leiste verwendet werden. Obwohl diese Symbole für den Kern entwickelt wurden, können sie in Ihren eigenen benutzerdefinierten Plugins und Themen verwendet werden, nicht nur beim Definieren benutzerdefinierter Beitragstypen oder beim Erstellen benutzerdefinierter Admin-Panels, sondern auch im Front-End-Design, wenn Sie es wünschen. Das Beste ist, es ist ganz einfach!
Dashicons für benutzerdefinierte Beitragstypen verwenden
Wenn Sie einen neuen benutzerdefinierten Beitragstyp in WordPress registrieren, müssen Sie nur die menu_icon Argument gleich dem CSS-Klassennamen des Dashicons, das Sie verwenden möchten, und dieses Symbol wird als das Symbol definiert, das auf der linken Seite Ihres benutzerdefinierten Beitragstypnamens im WordPress-Administrationsbereich angezeigt wird. Besuchen Sie einfach die Dashicons-Landingpage und klicken Sie auf ein beliebiges Symbol, das Sie verwenden möchten. Der Klassenname wird oben neben dem Symbol angezeigt, damit Sie ihn kopieren und einfügen können.
Beispiel:
// Register a new custom post type named Portfolio
register_post_type( 'portfolio', array(
'public' => true,
'menu_icon' => 'dashicons-portfolio',
'label' => __( 'Portfolio', 'local' ),
);
Bildschirmfoto:
Unten ist ein Screenshot, der zeigt, wie das Dashicon-Symbol für den Portfolio-Beitragstyp aussehen würde. Ich weiß nicht, ob Sie sich erinnern, aber vor Dashicons mussten Sie eine benutzerdefinierte Bild-URL für Ihr Beitragstyp-Symbol festlegen, und wenn Sie viele Plugins auf der Website verwendeten, stimmten die Symbole oft nicht überein und der Admin sah ziemlich schlecht aus. Jetzt stimmen Ihre Posttyp-Symbole mit der Standard-WP-Benutzeroberfläche überein und sehen gut aus.
Verwenden von Dashicons im Front-End-Theme-Design
Viele Themes verwenden heutzutage Icons für das Frontend für Dinge wie Post-Meta (Datum, Kategorie, Tag, Autor) sowie Header-Icons wie Benutzer-, Such- und Shop-Icons. Das am häufigsten verwendete und beliebteste Schriftsymbol ist zwar SchriftartAwesome und es funktioniert hervorragend für die meisten Projekte. Es ist auch ein sehr großer Icon-Set mit vielen Icons, die Sie wahrscheinlich nie verwenden würden; Sie könnten eine Schriftart-Generator-Website wie z Fontello um ein Stylesheet nur mit den benötigten Symbolen zu erstellen, aber eine andere Alternative ist die Verwendung von Dashicons, das bereits in Ihrer WordPress-Installation enthalten ist. Sie müssen lediglich die Skripte auf das Frontend laden.
Fügen Sie einfach Folgendes zu der functions.php Ihres Themes hinzu, um Dashicons im Frontend zu laden (über ein Child-Theme einfügen, wenn Sie ein vorhandenes Theme anpassen und kein eigenes erstellen).
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'dashicons' );
} );
Nun kann man per HTML ein Icon als solches einfügen:
<span class="dashicons dashicons-menu"></span>
Ändern Sie einfach dort, wo „Menü“ steht, auf das Symbol, das Sie verwenden möchten. Dieser HTML-Code kann überall im Design eingefügt werden, wo ein Symbol angezeigt werden soll. Sie können den HTML-Code sogar in Ihre Menüeinträge einfügen, indem Sie den HTML-Code direkt in das Feld „Label“ Ihres Menüeintrags einfügen.
So erstellen Sie einen Dashicons-Shortcode
Eine andere Lösung für die Verwendung von Dashicons im Frontend wäre die Erstellung eines Shortcodes, den Sie überall auf der Site verwenden können. Dies ist eine gute Option, wenn Sie eine Site für einen Kunden erstellen und ihm das Einfügen von Symbolen auf der Site erleichtern möchten, damit er nicht mit HTML herumspielen muss. Unten finden Sie ein Beispiel dafür, wie dieser Code aussehen könnte. Fügen Sie den Code einfach zu Ihrer Datei functions.php (oder einer anderen Nicht-Vorlagendatei, die vonfunctions.php geladen wird) hinzu.
add_shortcode( 'dashicon', function( $atts ) {
$atts = shortcode_atts( array(
'icon' => 'menu',
), $atts, 'bartag' );
if ( ! empty( $atts[ 'icon' ] ) ) {
return '<span class="dashicons dashicons-' . esc_attr( $atts[ 'icon' ] ) . '"></span>';
}
} );
Verwendung von Shortcodes:
[dashicon icon="chart-pie"]
Notiz: Der obige Shortcode geht davon aus, dass Sie den vorherigen Schritt bereits befolgt und das Dashicons-Stylesheet in Ihr Frontend geladen haben. Wenn Sie das nicht getan haben, können Sie einfach die Funktion „wp_enqueue_style“ aus dem Snippet oben rechts in den Shortcode einfügen und das Stylesheet wird nur geladen, wenn ein Symbol verwendet wird. Es wird jedoch empfohlen, das Skript global zu laden, da sonst das Dashicons-Stylesheet in der Fußzeile Ihrer Site geladen wird, sodass die Symbole nach dem Rendern Ihrer Site gerendert werden und ein leichtes „Flashen“ verursachen.