Tavaline WordPressi juhtpaneel näeb korralik välja, kuid registreeri paar kohandatud postitüüpi ja menüü muutub ühesuguste vaikeikoonide segadikuks. „Postitused", „Lehed", sinu „Portfoolio", „Iseloomustused", kõik sama nööpnõela piktogrammiga. Pilk komistab, klient satub segadusse ja juhtpaneel kaotab oma viimistletud ilme.

Võid paigaldada pluginat kohandatud ikoonide jaoks. Võid laadida Font Awesome'i ja tõmmata sisse üle 2000 ikooni, et kasutada vaid viit. Või võid mõlemad vahele jätta, sest WordPressil on alates versioonist 3.8 kaasas sisseehitatud Dashiconsi ikoonifont. Ei mingeid lisasõltuvusi ega täiendavat CSS-i. Kõik on juba sinu serveris olemas.

Selles juhendis käsitleme, kuidas kasutada Dashiconseid kohandatud postitüüpide jaoks, oma teema esiküljel ja mugava lühikoodi kaudu, koos töötavate koodinäidetega, mida saad kohe kopeerida ja kleepida.

💡 Kiirülevaade:

• Registreeri kohandatud postitüüp, määra argumendiks menu_icon Dashiconsi CSS-klass ja ikoon ilmub juhtpaneeli ilma ühegi pluginata.
• Lisa esiküljel järjekorda wp_enqueue_style('dashicons') ja paigalda ikoonid HTML-i <span> sildi abil ükskõik kuhu oma teemas.
• Loo lühikood [dashicon icon="..."] ja klient lisab ikoone sisule koodi puutumata.

Mis Dashicons on ja miks sul seda vaja on

Dashicons on WordPressi juhtpaneeli ametlik ikoonifont. See saabus versioonis 3.8 koos suure juhtpaneeli disainiuuendusega ja sellest ajast on seda kasutatud iga vasakpoolse menüüelemendi juures: „Postitused", „Meedia", „Pluginad", „Seaded", kõik Dashiconsid.

Font sisaldab ligikaudu 300 ikooni, mis katavad peaaegu kõik vajadused: postitüübid, meedia, sotsiaalvõrgustikud, redaktor, teavitused, taksonoomiad, vidinad. Täielik otsitav kataloog on saadaval WordPressi arendaja ressursside Dashiconsi lehel.

Peamine eelis millegi nagu Font Awesome'i ees on kaasamise nullkulu. Dashicons on juhtpaneelil juba laaditud ja esikülje jaoks lisad selle ühe reaga failis functions.php. Sa ei lohista oma saidile 2000+ ikooniga teeki, kui 90% neist ei kasutata kunagi. Kui sul on siiski vaja kohandatud komplekti, vaata Fontellot, kus saad koostada stiililehe ainult enda valitud glüüfidest.

Üks oluline märkus: Dashiconsi projekt lõpetas uute ikoonide taotluste vastuvõtmise 2023. aasta juunis. Olemasolev komplekt on külmutatud, kuid tüüpiliste WordPressi ülesannete jaoks katab see sinu vajadused piisava varuga.

1. Meetod: ikoon kohandatud postitüübile

Kõige tavalisem stsenaarium on uue postitüübi registreerimine funktsiooni register_post_type kaudu ja soov näha selle nime kõrval juhtpaneelil tähenduslikku ikooni, mitte vaikimisi „nööpnõela".

Seda teed argumendiga menu_icon:

1
/**
2
 * Registers a custom post type "Portfolio" with a Dashicons icon.
3
 * Code goes into the theme's or child theme's functions.php.
4
 */
5
function sd_register_portfolio_post_type() {
6
    register_post_type( 'portfolio', array(
7
        'public'      => true,
8
        'label'       => __( 'Portfolio', 'textdomain' ),
9
        'menu_icon'   => 'dashicons-portfolio',
10
        'has_archive' => true,
11
        'supports'    => array( 'title', 'editor', 'thumbnail' ),
12
    ) );
13
}
14
add_action( 'init', 'sd_register_portfolio_post_type', 0 );

menu_icon väärtus on ikooni CSS-klass. Mine Dashiconsi lehele, klõpsa soovitud ikoonil ja kopeeri selle klass kohtspikrist. Sisesta lihtsalt dashicons-{slug} ja WordPress kuvab ikooni vasakpoolses menüüs automaatselt.

Enne Dashiconseid pidid määrama menu_icon jaoks otsese pildi URL-i. Kümmekonna pluginaga saidil hüppasid ikoonid stiililt ja juhtpaneel nägi lohakas välja. Nüüd pärivad kõik postitüübi ikoonid WordPressi ühtse liidese stiili, korralik ja vaevatu.

Sama lähenemine töötab ka lehtede puhul, mis on lisatud funktsiooni add_menu_page kaudu:

1
add_menu_page(
2
    __( 'My Reports', 'textdomain' ),
3
    __( 'Reports', 'textdomain' ),
4
    'manage_options',
5
    'my-reports',
6
    'sd_render_reports_page',
7
    'dashicons-chart-area',
8
    25
9
);

Anda Dashiconi klass viienda parameetrina pärast callback-funktsiooni ja uus menüüelement saab ikooni samast perest, kust pärinevad kõik standardsed ikoonid.

Meetod 2: Dashiconid sinu teema esiküljel

Ikoonid on kasulikud ka väljaspool administraatoriliidest. Postituse metaandmed (kuupäev, kategooria, autor), otsingunupp päises, ostukorvi ikoon: need on tüüpilised kohad, kus ikoon muudab liidese selgemaks.

Dashiconide lubamiseks saidi avalikul poolel lisa faili functions.php:

1
/**
2
 * Enqueues the Dashicons stylesheet on the frontend.
3
 * Code goes into the child theme's functions.php.
4
 */
5
add_action( 'wp_enqueue_scripts', function() {
6
    wp_enqueue_style( 'dashicons' );
7
} );

Nüüd saad ikooni lisada HTML-i abil ükskõik millises teema mallis:

1
<span class="dashicons dashicons-calendar"></span>

Asenda calendar vajaliku ikooni nimetusega ja see kuvatakse. See HTML töötab kõikjal teemas: header.php, footer.php, single.php, isegi otse menüüelemendi väljal „Navigatsiooni silt" (WordPress lubab navigatsioonisiltides HTML-i).

Ikooni tekstiga grupeerimiseks kasuta abiklassi dashicons-before; see lisab ikooni enne elemendi sisu ilma lisamärgendita:

1
<h2 class="dashicons-before dashicons-smiley">Welcome Heading</h2>

Meetod 3: otsetee ikoonide sisusse lisamiseks

Kui ehitad saiti kliendile, kes HTML-iga ei tööta, anna talle otsetee (shortcode). Lisad koodi ühe korra faili functions.php ja klient saab igasse postitusse lisada ikooni käsuga [dashicon icon="..."].

1
/**
2
 * Registers the shortcode [dashicon icon="..."] to insert Dashicons into content.
3
 * Requires prior enqueuing of dashicons via wp_enqueue_style (Method 2).
4
 * Code goes into the theme's functions.php or a separate included file.
5
 */
6
add_shortcode( 'dashicon', function( $atts ) {
7
    $atts = shortcode_atts( array(
8
        'icon' => 'menu',
9
    ), $atts, 'dashicon' );
10
 
11
    if ( ! empty( $atts['icon'] ) ) {
12
        return sprintf(
13
            '<span class="dashicons dashicons-%s"></span>',
14
            esc_attr( $atts['icon'] )
15
        );
16
    }
17
 
18
    return '';
19
} );

Kasutamine redaktoris:

1
[dashicon icon="chart-pie"]

Otsetee eeldab, et oled Dashiconide stiili esiküljel juba laadinud (Meetod 2). Kui ei ole, siis ikooni ei kuvata. Alternatiivina võid wp_enqueue_style paigutada otse otsetee sisusse, nii et stiil laaditakse ainult siis, kui ikooni tegelikult kasutatakse. Kuid sellel lähenemisel on varjukülg: stiilileht laaditakse lehe jaluses, mistõttu ikoonid „vilguvad" pärast renderdamist. Globaalne kaasamine on usaldusväärsem.

Boonus: Dashiconid Gutenbergi plokkides

Kui arendad kohandatud plokke, töötavad Dashiconid ka seal. Ploki registreerimisel registerBlockType kaudu määra parameeter icon Dashiconi nimele:

1
registerBlockType( 'my-plugin/my-block', {
2
    apiVersion: 2,
3
    title:    'My Block',
4
    icon:     'dashicons-admin-site',
5
    category: 'design',
6
    edit()   {},
7
    save()   {},
8
} );

React komponentide jaoks administraatoriliideses on paketist @wordpress/components saadaval valmis Dashicon komponent:

1
import { Dashicon } from '@wordpress/components';
2
 
3
const MyComponent = () => (
4
    <div>
5
        <Dashicon icon="admin-home" />
6
        <Dashicon icon="products" />
7
        <Dashicon icon="wordpress" />
8
    </div>
9
);

See töötab ainult administraatoriliideses (plokiredaktor, seadete lehed). Esiküljel Dashicon komponent stiile kaasa ei tõmba; seal on endiselt vaja wp_enqueue_style('dashicons').

⁉️🤔 Korduma kippuvad küsimused

Kas Dashiconide kasutamiseks on vaja pluginat paigaldada?

Ei. Dashiconid on WordPressi tuuma sisse ehitatud alates versioonist 3.8. Administraatoriliideses laaditakse need vaikimisi. Esikülje jaoks piisab ühest reast (wp_enqueue_style('dashicons')) failis functions.php.

Miks on Dashiconid paremad kui Font Awesome?

Maht ja null välist sõltuvust. Font Awesome sisaldab üle 2000 ikooni, millest enamikku sul kunagi vaja ei lähe. Dashiconidel on umbes 300 ikooni, kõik WordPressi jaoks kohandatud, ja stiilileht on juba sinu serveris. Kui ikoon on Dashiconide kataloogis olemas, kasuta seda ja väldi üleliigset koormust.

Millised ikoonid on Dashiconides saadaval?

Umbes 300: postitüübid, meedia, suhtlusvõrgustikud, redaktor, teavitused, taksonoomiad, vidinad ja WordPressi-spetsiifilised sümbolid (tooted, Buddiconid). Täielik otsitav nimekiri asub aadressil developer.wordpress.org/resource/dashicons.

Kas ma saan Dashiconidele lisada oma ikooni?

Ei. Alates 2023. aasta juunist projekt uute ikoonide taotlusi enam vastu ei võta. Kui vajalikku sümbolit kataloogis pole, kasuta Font Awesome'i, Fontellot või laadi üles kohandatud SVG.

Miks ikoonid esiküljel ei kuvata?

Tõenäoliselt unustasid välja kutsuda wp_enqueue_style('dashicons'). Kontrolli oma functions.php faili: see väljakutse peaks olema haagitud wp_enqueue_scripts külge. Teine võimalik põhjus on teema või plugin, mis eemaldab Dashiconid wp_dequeue_style kaudu.

Kas Dashicone tasub 2026. aastal kasutada

Lühike vastus: jah, administraatoriliidese ja lihtsate esikülje vajaduste jaoks. Dashiconid tähendavad null üldkulu, prognoositavat renderdamist ja täielikku integratsiooni WordPressi liidesega. Kohandatud postitüüpide ja administraatorimenüü elementide jaoks jääb see de facto standardiks.

Mõista piiranguid kohe alguses: ikoonide komplekt on külmutatud ja uusi ikoone ei lisata. Kui ehitad rikkaliku visuaalse disainiga saiti, annavad Font Awesome või kohandatud SVG-sprait sulle rohkem paindlikkust. Kuid enamiku tüüpiliste WordPressi ülesannete jaoks on sisseehitatud fond enam kui piisav ja üle 2000 sümboliga teegi kolme ikooni pärast sissetirimine ei ole mõistlik.

Kiireim viis kohandatud postitüübile ikooni lisamiseks on kopeerida klass Dashiconide kataloogist ja panna see menu_icon väärtuseks. See võtab 30 sekundit ega vaja ühtegi pluginat.

Kui see materjal oli abiks, vaata videoõpetust Dashiconide kasutamise kohta navigatsioonimenüüdes: see on inglise keeles, kuid iga samm on ekraanil näha, nii et saad tõlketa jälgida.