Dashicons sind ein integrierter Kernsatz von Schriftartsymbolen in WordPress, die in WordPress 3.8 eingeführt wurden, als sie die umfassende Neugestaltung der Backend-Benutzeroberfläche durchführten, und standardmäßig für die verschiedenen Links in der Admin-Leiste der App verwendet werden. links. Obwohl diese Symbole für Core erstellt wurden, können sie in Ihren eigenen benutzerdefinierten Plugins und Themes verwendet werden, nicht nur beim Definieren benutzerdefinierter Beitragstypen oder beim Erstellen benutzerdefinierter Admin-Panels, sondern auf Wunsch auch im Front-End-Theme-Design. . Und das Beste: Es ist so einfach!
Verwendung von Dashicons für benutzerdefinierte Beitragstypen
Wenn Sie einen neuen benutzerdefinierten Beitragstyp in WordPress registrieren, müssen Sie lediglich den festlegen 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 Homepage von Dashicons und klicken Sie auf ein beliebiges Symbol, das Sie verwenden möchten. Oben neben dem Symbol wird dann der Klassenname angezeigt, sodass 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 sehen Sie einen 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 einrichten, und wenn Sie viele Plugins auf der Website verwendeten, stimmten die Symbole oft nicht überein und der Administrator schaute nach ziemlich schlecht. Jetzt stimmen die Beitragstypsymbole mit der Standard-WP-Benutzeroberfläche überein und sehen gut aus.
Verwendung von Dashicons im Front-End-Theme-Design
Viele Themes verwenden heutzutage Frontend-Symbole für Dinge wie Post-Meta (Datum, Kategorie, Tag, Autor) sowie Header-Symbole wie Benutzer-, Such- und Shop-Symbole. Während das am häufigsten verwendete und beliebteste Schriftartensymbol FontAwesome ist und für die meisten Projekte hervorragend funktioniert, handelt es sich auch um einen sehr großen Symbolsatz, der viele Symbole enthält, die Sie wahrscheinlich nie verwenden würden; Sie können eine Schriftarten-Generator-Website wie Fontello verwenden, um ein Stylesheet mit genau den Symbolen zu erstellen, die Sie benötigen. Eine andere Alternative ist die Verwendung von Dashicons, das bereits in Ihrer WordPress-Installation enthalten ist. Sie müssen lediglich die Skripte auf der Vorderseite hochladen. Ende.
Fügen Sie einfach Folgendes zur Datei „functions.php“ Ihres Themes hinzu, um Dashicons im Frontend zu laden (fügen Sie es über ein untergeordnetes Theme ein, wenn Sie ein vorhandenes Theme anpassen und kein eigenes erstellen).
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'dashicons' );
} );
Sie können jetzt ein Symbol über HTML einfügen, etwa so:
Ändern Sie einfach die Stelle, an der „Menü“ steht, in das Symbol, das Sie verwenden möchten. Dieser HTML-Code kann an einer beliebigen Stelle im Design eingefügt werden, an der ein Symbol angezeigt werden soll. Sie können den HTML-Code sogar in Ihre Menüelemente einfügen, indem Sie den HTML-Code direkt in das Feld „Beschriftung“ Ihres Menüelements 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 Website verwenden können. Dies ist eine gute Option, wenn Sie eine Website für einen Kunden erstellen und ihm das Einfügen von Symbolen in die Website erleichtern möchten, damit er sich nicht mit HTML herumschlagen muss. Unten sehen Sie ein Beispiel dafür, wie dieser Code aussehen könnte. Fügen Sie den Code einfach Ihrer Datei „functions.php“ (oder einer anderen Nicht-Vorlagendatei, die „functions.php“ lädt) hinzu.
add_shortcode( 'dashicon', function( $atts ) {
$atts = shortcode_atts( array(
'icon' => 'menu',
), $atts, 'bartag' );
if ( ! empty( $atts[ 'icon' ] ) ) {
return '';
}
} );
Shortcode-Nutzung:
[dashicon icon="chart-pie"]
Notiz: Der obige Shortcode geht davon aus, dass Sie den vorherigen Schritt bereits befolgt und das Dashicons-Stylesheet in Ihre Benutzeroberfläche geladen haben. Wenn Sie es noch nicht getan haben, können Sie einfach die Funktion „wp_enqueue_style“ aus dem Snippet oben direkt 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 Symbol-Stylesheet in der Fußzeile Ihrer Website geladen wird, sodass die Symbole nach dem Rendern Ihrer Website angezeigt werden und ein leichtes „Flackern“ verursachen.
