Vakio WordPress-hallintapaneeli näyttää siistiltä, mutta rekisteröi pari mukautettua sisältötyyppiä ja valikko muuttuu sekamelskaksi identtisiä oletuskuvakkeita. "Artikkelit", "Sivut", "Portfolio", "Suosittelut", kaikissa sama nuppineulapiktogrammi. Katse kompastuu, asiakas hämmentyy ja hallinta-alue menettää viimeistelynsä.

Voisit asentaa lisäosan mukautettuja kuvakkeita varten. Voisit ladata Font Awesomen ja tuoda yli 2 000 kuvaketta käyttääksesi vain viittä. Tai voit ohittaa molemmat, sillä WordPress on sisältänyt sisäänrakennetun Dashicons-kuvakefontin versiosta 3.8 lähtien. Ei ylimääräisiä riippuvuuksia, ei lisä-CSS:ää. Kaikki on jo palvelimellasi.

Tässä oppaassa käymme läpi, miten Dashiconeja käytetään mukautetuille sisältötyypeille, teemasi etusivulla ja kätevän shortcoden kautta, toimivien koodiesimerkkien kera, jotka voit kopioida ja liittää heti.

💡 Pikakatsaus:

• Rekisteröi mukautettu sisältötyyppi, aseta menu_icon-argumentti Dashicon-CSS-luokaksi, ja kuvake ilmestyy hallintaan ilman ainuttakaan lisäosaa.
• Lisää wp_enqueue_style('dashicons') etusivulle ja lisää kuvakkeita HTML <span>-tagilla minne tahansa teemassasi.
• Luo shortcode [dashicon icon="..."] ja asiakas lisää kuvakkeita sisältöön koskematta koodiin.

Mitä Dashiconit ovat ja miksi tarvitset niitä

Dashicons on WordPress-hallintapaneelin virallinen kuvakefontti. Se saapui versiossa 3.8 suuren hallintapaneelin uudistuksen yhteydessä, ja sitä on käytetty jokaisessa vasemman valikon kohdassa siitä lähtien: "Artikkelit", "Media", "Lisäosat", "Asetukset", kaikki Dashiconeja.

Fontti sisältää noin 300 kuvaketta, jotka kattavat lähes kaikki tarpeet: sisältötyypit, median, sosiaaliset verkostot, editorin, ilmoitukset, taksonomiat, vimpaimet. Täysi hakutoiminnolla varustettu luettelo on saatavilla Dashicons-sivulla WordPress Developer Resources -sivustolla.

Suurin etu verrattuna esimerkiksi Font Awesomeen on sisällyttämisen nollakustannus. Dashicons on jo ladattu hallintapaneelissa, ja etusivulle lisäät sen yhdellä rivillä functions.php-tiedostossa. Et raahaa yli 2 000 kuvakkeen kirjastoa sivustollesi, kun 90% niistä ei tule koskaan käyttöön. Jos tarvitset räätälöidyn sarjan, tutustu Fontelloon, jossa voit rakentaa tyylitiedoston vain valitsemistasi glyyfeistä.

Yksi tärkeä huomio: Dashicons-projekti lopetti uusien kuvakkeiden pyyntöjen vastaanottamisen kesäkuussa 2023. Olemassa oleva sarja on jäädytetty, mutta tyypillisiin WordPress-tehtäviin se kattaa tarpeesi vielä reilusti.

Tapa 1: Kuvake mukautetulle sisältötyypille

Yleisin skenaario on uuden sisältötyypin rekisteröinti register_post_type-funktiolla ja halu saada sen nimen viereen hallintaan merkityksellinen kuvake oletusarvoisen "nuppineulan" sijaan.

Teet tämän menu_icon-argumentilla:

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-arvo on kuvakkeen CSS-luokka. Mene Dashicons-sivulle, klikkaa haluamaasi kuvaketta ja kopioi sen luokka työkaluvihjeestä. Anna vain dashicons-{slug}, ja WordPress renderöi kuvakkeen vasempaan valikkoon automaattisesti.

Ennen Dashiconeja piti menu_icon-kohdassa määrittää suora kuvan URL-osoite. Sivustolla, jossa on tusina lisäosaa, kuvakkeet hyppivät tyyliltään ja hallinta-alue näytti huolimattomalta. Nyt kaikki sisältötyyppien kuvakkeet perivät WordPressin yhtenäisen käyttöliittymätyylin, siististi ja vaivattomasti.

Sama lähestymistapa toimii add_menu_page-funktiolla lisätyille sivuille:

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
);

Anna Dashicon-luokka viidentenä parametrina callback-funktion jälkeen, niin uusi valikkokohta saa kuvakkeen samasta perheestä kuin kaikki vakio-kuvakkeet.

Tapa 2: Dashiconsit teeman julkisella puolella

Kuvakkeet ovat hyödyllisiä myös hallintanäkymän ulkopuolella. Artikkelin metatiedot (päivämäärä, kategoria, kirjoittaja), hakupainike ylätunnisteessa, ostoskorikuvake: nämä ovat tyypillisiä paikkoja, joissa kuvake selkeyttää käyttöliittymää.

Ota Dashiconsit käyttöön sivuston julkisella puolella lisäämällä functions.php-tiedostoon:

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
} );

Nyt voit lisätä kuvakkeen HTML:llä mihin tahansa teemapohjaan:

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

Vaihda calendar tarvitsemasi kuvakkeen polkutunnukseen, niin se näkyy. Tämä HTML toimii missä tahansa teemassa: header.php, footer.php, single.php ja jopa valikkokohdan "Navigaation otsikko" -kentässä (WordPress sallii HTML:n navigaatio-otsikoissa).

Jos haluat ryhmittää kuvakkeen tekstin kanssa, käytä apuluokkaa dashicons-before; se lisää kuvakkeen ennen elementin sisältöä ilman ylimääräistä merkkausta:

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

Tapa 3: Shortcode kuvakkeiden lisäämiseen sisältöön

Jos rakennat sivustoa asiakkaalle, joka ei työskentele HTML:n kanssa, anna hänelle shortcode. Lisäät koodin functions.php-tiedostoon kerran, ja asiakas lisää kuvakkeen mihin tahansa artikkeliin kirjoittamalla [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
} );

Käyttö editorissa:

1
[dashicon icon="chart-pie"]

Shortcode olettaa, että olet jo ottanut Dashicons-tyylit käyttöön julkisella puolella (tapa 2). Jos et ole, kuvake ei näy. Vaihtoehtoisesti voit upottaa wp_enqueue_style-kutsun suoraan shortcoden runkoon, jolloin tyyli latautuu vain silloin, kun kuvaketta todella käytetään. Tässä lähestymistavassa on kuitenkin varjopuolensa: tyylitiedosto latautuu sivun alatunnisteessa, jolloin kuvakkeet "välähtävät" renderöinnin jälkeen. Globaali sisällytys on luotettavampi.

Bonus: Dashiconsit Gutenberg-lohkoissa

Jos kehität mukautettuja lohkoja, Dashiconsit toimivat sielläkin. Kun rekisteröit lohkon registerBlockType-funktiolla, aseta icon-parametriksi Dashicon-nimi:

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-komponenteille hallintanäkymässä on saatavilla valmis Dashicon-komponentti @wordpress/components-paketista:

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
);

Tämä toimii vain hallintanäkymässä (lohkoeditori, asetussivut). Julkisella puolella Dashicon-komponentti ei lataa tyylejä; tarvitset siellä edelleen wp_enqueue_style('dashicons')-kutsun.

⁉️🤔 Usein kysytyt kysymykset

Tarvitseeko minun asentaa lisäosa käyttääkseni Dashiconseja?

Ei. Dashicons on ollut sisäänrakennettuna WordPress-ytimessä versiosta 3.8 lähtien. Hallintanäkymässä se latautuu oletuksena. Julkiselle puolelle riittää yksi rivi (wp_enqueue_style('dashicons')) functions.php-tiedostossa.

Miksi Dashiconsit ovat parempia kuin Font Awesome?

Koko ja ulkoisten riippuvuuksien puute. Font Awesome sisältää yli 2 000 kuvaketta, joista useimpia et tule koskaan tarvitsemaan. Dashiconseissa on noin 300, kaikki WordPressiin räätälöityjä, ja tyylitiedosto on jo palvelimellasi. Jos kuvake löytyy Dashicons-valikoimasta, käytä sitä ja vältä turhaa kuormaa.

Mitä kuvakkeita Dashiconseissa on saatavilla?

Noin 300: artikkelityypit, media, sosiaaliset verkostot, editori, ilmoitukset, taksonomiat, widgetit ja WordPress-spesifit symbolit (Tuotteet, Buddicons). Täydellinen haettava lista löytyy osoitteesta developer.wordpress.org/resource/dashicons.

Voinko lisätä oman kuvakkeeni Dashiconseihin?

Et. Kesäkuusta 2023 lähtien projekti ei enää ota vastaan pyyntöjä uusista kuvakkeista. Jos tarvitsemaasi symbolia ei ole valikoimassa, käytä Font Awesomea, Fontelloa tai lataa mukautettu SVG.

Miksi kuvakkeet eivät näy julkisella puolella?

Todennäköisesti unohdit kutsua wp_enqueue_style('dashicons'). Tarkista functions.php-tiedostosi: kutsun tulee olla kytketty wp_enqueue_scripts-koukkuun. Toinen mahdollinen syy on, että teema tai lisäosa poistaa Dashiconsit wp_dequeue_style-funktiolla.

Kannattaako Dashiconseja käyttää vuonna 2026

Lyhyt vastaus: kyllä, hallintanäkymään ja yksinkertaisiin julkisen puolen tarpeisiin. Dashicons tarkoittaa nollakuormaa, ennustettavaa renderöintiä ja täyttä integraatiota WordPress-käyttöliittymän kanssa. Mukautetuille artikkelityypeille ja hallintavalikon kohdille se on edelleen de facto -standardi.

Ymmärrä rajoitukset etukäteen: kuvakevalikoima on jäädytetty, eikä uusia kuvakkeita lisätä. Jos rakennat sivustoa, jossa on rikas visuaalinen ilme, Font Awesome tai mukautettu SVG-sprite antaa enemmän joustavuutta. Mutta useimpiin tyypillisiin WordPress-tehtäviin sisäänrakennettu fontti on enemmän kuin riittävä, eikä yli 2 000 symbolin kirjaston raahaaminen kolmea kuvaketta varten ole järkevää.

Nopein tapa lisätä kuvake mukautetulle artikkelityypille on kopioida luokka Dashicons-valikoimasta ja pudottaa se menu_icon-kohtaan. Se vie 30 sekuntia eikä vaadi lisäosia.

Jos tämä materiaali oli hyödyllistä, katso video-opas Dashiconsien käytöstä navigointivalikoissa: se on englanniksi, mutta jokainen vaihe näytetään ruudulla, joten voit seurata mukana ilman käännöstä.