![](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/Como-usar-Dashicons-en-WordPress.jpg\")
<\/p>\n\n<\/p>\n
Dashicons sind ein integrierter Kernsatz von Schriftartsymbolen in WordPress, die in WordPress 3.8 eingef\u00fchrt wurden, als sie die umfassende Neugestaltung der Backend-Benutzeroberfl\u00e4che durchf\u00fchrten, und standardm\u00e4\u00dfig f\u00fcr die verschiedenen Links in der Admin-Leiste der App verwendet werden. links. Obwohl diese Symbole f\u00fcr Core erstellt wurden, k\u00f6nnen 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!<\/p>\n
Wenn Sie einen neuen benutzerdefinierten Beitragstyp in WordPress registrieren, m\u00fcssen Sie lediglich den festlegen menu_icon<\/strong> Argument gleich dem CSS-Klassennamen des Dashicons, das Sie verwenden m\u00f6chten, 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\u00f6chten. Oben neben dem Symbol wird dann der Klassenname angezeigt, sodass Sie ihn kopieren und einf\u00fcgen k\u00f6nnen.<\/p>\n Beispiel:<\/strong><\/p>\n Bildschirmfoto:<\/strong><\/p>\n Unten sehen Sie einen Screenshot, der zeigt, wie das Dashicon-Symbol f\u00fcr den Portfolio-Beitragstyp aussehen w\u00fcrde. Ich wei\u00df nicht, ob Sie sich erinnern, aber vor Dashicons mussten Sie eine benutzerdefinierte Bild-URL f\u00fcr Ihr Beitragstyp-Symbol einrichten, und wenn Sie viele Plugins auf der Website verwendeten, stimmten die Symbole oft nicht \u00fcberein und der Administrator schaute nach ziemlich schlecht. Jetzt stimmen die Beitragstypsymbole mit der Standard-WP-Benutzeroberfl\u00e4che \u00fcberein und sehen gut aus.<\/p>\n Viele Themes verwenden heutzutage Frontend-Symbole f\u00fcr Dinge wie Post-Meta (Datum, Kategorie, Tag, Autor) sowie Header-Symbole wie Benutzer-, Such- und Shop-Symbole. W\u00e4hrend das am h\u00e4ufigsten verwendete und beliebteste Schriftartensymbol FontAwesome ist und f\u00fcr die meisten Projekte hervorragend funktioniert, handelt es sich auch um einen sehr gro\u00dfen Symbolsatz, der viele Symbole enth\u00e4lt, die Sie wahrscheinlich nie verwenden w\u00fcrden; Sie k\u00f6nnen eine Schriftarten-Generator-Website wie Fontello verwenden, um ein Stylesheet mit genau den Symbolen zu erstellen, die Sie ben\u00f6tigen. Eine andere Alternative ist die Verwendung von Dashicons, das bereits in Ihrer WordPress-Installation enthalten ist. Sie m\u00fcssen lediglich die Skripte auf der Vorderseite hochladen. Ende.<\/p>\n F\u00fcgen Sie einfach Folgendes zur Datei \u201efunctions.php\u201c Ihres Themes hinzu, um Dashicons im Frontend zu laden (f\u00fcgen Sie es \u00fcber ein untergeordnetes Theme ein, wenn Sie ein vorhandenes Theme anpassen und kein eigenes erstellen).<\/p>\n Sie k\u00f6nnen jetzt ein Symbol \u00fcber HTML einf\u00fcgen, etwa so:<\/p>\n \u00c4ndern Sie einfach die Stelle, an der \u201eMen\u00fc\u201c steht, in das Symbol, das Sie verwenden m\u00f6chten. Dieser HTML-Code kann an einer beliebigen Stelle im Design eingef\u00fcgt werden, an der ein Symbol angezeigt werden soll. Sie k\u00f6nnen den HTML-Code sogar in Ihre Men\u00fcelemente einf\u00fcgen, indem Sie den HTML-Code direkt in das Feld \u201eBeschriftung\u201c Ihres Men\u00fcelements einf\u00fcgen.<\/p>\n Eine andere L\u00f6sung f\u00fcr die Verwendung von Dashicons im Frontend w\u00e4re die Erstellung eines Shortcodes, den Sie \u00fcberall auf der Website verwenden k\u00f6nnen. Dies ist eine gute Option, wenn Sie eine Website f\u00fcr einen Kunden erstellen und ihm das Einf\u00fcgen von Symbolen in die Website erleichtern m\u00f6chten, damit er sich nicht mit HTML herumschlagen muss. Unten sehen Sie ein Beispiel daf\u00fcr, wie dieser Code aussehen k\u00f6nnte. F\u00fcgen Sie den Code einfach Ihrer Datei \u201efunctions.php\u201c (oder einer anderen Nicht-Vorlagendatei, die \u201efunctions.php\u201c l\u00e4dt) hinzu.<\/p>\n Shortcode-Nutzung:<\/p>\n Notiz<\/strong>: Der obige Shortcode geht davon aus, dass Sie den vorherigen Schritt bereits befolgt und das Dashicons-Stylesheet in Ihre Benutzeroberfl\u00e4che geladen haben. Wenn Sie es noch nicht getan haben, k\u00f6nnen Sie einfach die Funktion \u201ewp_enqueue_style\u201c aus dem Snippet oben direkt in den Shortcode einf\u00fcgen 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\u00dfzeile Ihrer Website geladen wird, sodass die Symbole nach dem Rendern Ihrer Website angezeigt werden und ein leichtes \u201eFlackern\u201c verursachen.<\/p>\n ","protected":false},"excerpt":{"rendered":" Dashicons sind ein integrierter Kernsatz von Schriftartsymbolen in WordPress, die in WordPress 3.8 eingef\u00fchrt wurden, als sie die umfassende Neugestaltung der Backend-Benutzeroberfl\u00e4che durchf\u00fchrten, und standardm\u00e4\u00dfig f\u00fcr die verschiedenen Links in der Admin-Leiste der App verwendet werden. links. Obwohl diese Symbole f\u00fcr Core erstellt wurden, k\u00f6nnen sie in Ihren eigenen benutzerdefinierten Plugins und Themes verwendet werden, […]<\/p>\n","protected":false},"author":1,"featured_media":859149,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/15.jpg","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/859148"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=859148"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/859148\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/859149"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=859148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=859148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=859148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\/\/ Register a new custom post type named Portfolio\r\nregister_post_type( 'portfolio', array(\r\n\t'public' => true,\r\n\t'menu_icon' => 'dashicons-portfolio',\r\n\t'label' => __( 'Portfolio', 'local' ),\r\n);<\/pre>\n
![\"WordPress-Dashicons-Screenshot\"](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/Como-usar-Dashicons-en-WordPress.png\")
<\/p>\nVerwendung von Dashicons im Front-End-Theme-Design<\/h2>\n
add_action( 'wp_enqueue_scripts', function() {\r\n wp_enqueue_style( 'dashicons' );\r\n} );<\/pre>\n<\/pre>\n
So erstellen Sie einen Dashicons-Shortcode<\/h2>\n
add_shortcode( 'dashicon', function( $atts ) {\r\n\t$atts = shortcode_atts( array(\r\n\t\t'icon' => 'menu',\r\n\t), $atts, 'bartag' );\r\n\tif ( ! empty( $atts[ 'icon' ] ) ) {\r\n\t\treturn '';\r\n\t}\r\n} );<\/pre>\n[dashicon icon=\"chart-pie\"]<\/pre>\n