Näin lisäät omat SVG-kuvakkeet WordPress 7.1:ssä

Oman SVG-kuvakkeen lisääminen lohkoeditoriin on tähän asti vaatinut JavaScriptiä, build-vaiheen tai epävarman kiertotavan. WordPress 7.1 tuo julkisen API:n, jolla lisäosa voi rekisteröidä SVG-kuvakkeet PHP:llä, ilman JavaScript-buildiä.

API kokoaa kuvakkeet nimettyihin kokoelmiin. Rekisteröidyt kuvakkeet näkyvät core/icon-lohkon valitsimessa, ne voi tulostaa PHP:ssä ja WordPress tarjoaa ne myös REST API:n kautta. WordPress 7.1 on määrä julkaista 19.8.2026; kehityksessä voit käyttää myös versiota 7.1 RC.

Mitä rakennat

Tässä oppaassa rakennat myplugin-custom-icons-lisäosan. Se rekisteröi myplugin-kokoelman, lisää sydänkuvakkeen suoraan PHP:stä sekä tähti- ja kirjanmerkkikuvakkeet .svg-tiedostoista.

Lisäksi toteutat mallin, joka rekisteröi automaattisesti kansion kaikki SVG-tiedostot, shortcodeen perustuvan tavan lisätä kuvake sisältöön sekä mukautetun lohkokuvakkeen register_block_type()-rekisteröintiin. Koko lisäosa esimerkkikuvakkeineen ja README-tiedostoineen on saatavilla GitHubissa.

Edellytykset

Tarvitset seuraavat asiat ennen kuin aloitat:

WordPress 7.1:n tai uudemman version; myös 7.1 RC sopii kehitykseen.
Muutaman SVG-kuvaketiedoston tai oppaan esimerkkitiedostot.
Paikallisen kehitysympäristön, kuten LocalWP:n, WordPress Studion tai wp-envin.
PHP:n perusteet.

API kolmessa minuutissa

Mukautettujen kuvakkeiden API:ssa on kolme pääfunktiota. wp_register_icon_collection( $name, $args ) luo nimetyn kuvakekokoelman, wp_register_icon( $name, $args ) rekisteröi yksittäisen kuvakkeen ja wp_get_icon( $name, $args ) palauttaa kuvakkeen SVG-merkkijonona PHP:tä varten.

Jokainen kuvake kuuluu kokoelmaan. Kokoelman nimi toimii kuvakkeen etuliitteenä: esimerkiksi core/plus ja myplugin/plus ovat eri kuvakkeita. Nimiavaruus ehkäisee törmäykset WordPressin coren kuvakkeiden ja muiden lisäosien välillä.

Voit antaa SVG:n rekisteröinnissä kahdella tavalla. content sisältää SVG-merkinnän merkkijonona PHP-koodissa, kun taas file_path osoittaa levyllä olevaan .svg-tiedostoon absoluuttisella polulla. Käytä yhdelle kuvakkeelle vain toista tapaa: content sopii yhdelle tai kahdelle kuvakkeelle, file_path kasvaa paremmin laajaksi kuvakekansioksi.

1. Luo lisäosa ja rekisteröi kokoelma

Rekisteröi kokoelma aina ennen sen kuvakkeita. Jos yrität lisätä kuvakkeen kokoelmaan, jota ei vielä ole, kuvake ei näy valitsimessa eikä WordPress ilmoita virheestä.

Luo wp-content/plugins/-hakemistoon seuraava rakenne:

myplugin-custom-icons/
├── myplugin-custom-icons.php
└── icons/
    ├── star.svg
    └── bookmark.svg

myplugin-custom-icons/
├── myplugin-custom-icons.php
└── icons/
    ├── star.svg
    └── bookmark.svg

Luo sitten lisäosan päätiedosto ja rekisteröi myplugin-kokoelma init-hookissa:

<?php
/**
 * Plugin Name: MyPlugin Custom Icons
 * Description: Register custom SVG icons for WordPress 7.1+.
 * Version:     1.0.0
 * Requires at least: 7.1
 * Requires PHP: 7.4
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

define( 'MYPLUGIN_ICONS_PATH', plugin_dir_path( __FILE__ ) );

// Rekisteröi kokoelma ennen siihen kuuluvia kuvakkeita.
add_action( 'init', 'myplugin_register_icon_collection' );

function myplugin_register_icon_collection() {
    wp_register_icon_collection(
        'myplugin',
        array(
            'label' => __( 'MyPlugin', 'myplugin-icons' ),
        )
    );
}

<?php
/**
 * Plugin Name: MyPlugin Custom Icons
 * Description: Register custom SVG icons for WordPress 7.1+.
 * Version:     1.0.0
 * Requires at least: 7.1
 * Requires PHP: 7.4
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

define( 'MYPLUGIN_ICONS_PATH', plugin_dir_path( __FILE__ ) );

// Rekisteröi kokoelma ennen siihen kuuluvia kuvakkeita.
add_action( 'init', 'myplugin_register_icon_collection' );

function myplugin_register_icon_collection() {
    wp_register_icon_collection(
        'myplugin',
        array(
            'label' => __( 'MyPlugin', 'myplugin-icons' ),
        )
    );
}

Kokoelman nimi muodostaa kaikkien seuraavien kuvakkeiden etuliitteen: myplugin/heart, myplugin/star ja niin edelleen. label näkyy kuvakevalitsimen osion otsikkona. Aktivoi lisäosa kohdasta Lisäosat → Asennetut lisäosat; tyhjä kokoelma ei vielä näy käyttöliittymässä.

2. Rekisteröi kuvakkeet kahdella tavalla

Seuraavaksi lisäät sydämen SVG-merkintänä PHP-tiedostoon ja kaksi muuta kuvaketta tiedostoista. Molemmat tavat toimivat samassa kokoelmassa.

2.1 Lisää SVG suoraan content-arvona

Kun tarvitset vain yhden tai kaksi kuvaketta, voit säilyttää SVG:n suoraan PHP:ssä. Kytke rekisteröinti init-hookiin prioriteetilla 20, jotta kokoelman oletusprioriteetilla 10 tehtävä rekisteröinti ehtii ensin.

/**
 * Rekisteröi SVG suoraan PHP:ssä.
 */
add_action( 'init', 'myplugin_register_inline_icons', 20 );

function myplugin_register_inline_icons() {
    wp_register_icon(
        'myplugin/heart',
        array(
            'label'   => __( 'Heart', 'myplugin-icons' ),
            'content' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
        )
    );
}

/**
 * Rekisteröi SVG suoraan PHP:ssä.
 */
add_action( 'init', 'myplugin_register_inline_icons', 20 );

function myplugin_register_inline_icons() {
    wp_register_icon(
        'myplugin/heart',
        array(
            'label'   => __( 'Heart', 'myplugin-icons' ),
            'content' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
        )
    );
}

Nimessä myplugin/heart ensimmäinen osa on kokoelma ja jälkimmäinen kuvakkeen slug. label näkyy valitsimessa. SVG:n stroke="currentColor" perii ympäröivän tekstin värin, joten kuvakkeeseen ei tarvitse kovakoodata täyttöväriä.

2.2 Lue SVG-kuvakkeet tiedostoista

Kun säilytät kuvakkeet levyllä, anna content-arvon sijaan file_path. Tallenna seuraavat tiedostot lisäosan icons/-kansioon.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
</svg>

/**
 * Rekisteröi levyllä olevat SVG-kuvakkeet.
 */
add_action( 'init', 'myplugin_register_file_icons', 20 );

function myplugin_register_file_icons() {
    wp_register_icon(
        'myplugin/star',
        array(
            'label'     => __( 'Star', 'myplugin-icons' ),
            'file_path' => MYPLUGIN_ICONS_PATH . 'icons/star.svg',
        )
    );

    wp_register_icon(
        'myplugin/bookmark',
        array(
            'label'     => __( 'Bookmark', 'myplugin-icons' ),
            'file_path' => MYPLUGIN_ICONS_PATH . 'icons/bookmark.svg',
        )
    );
}

/**
 * Rekisteröi levyllä olevat SVG-kuvakkeet.
 */
add_action( 'init', 'myplugin_register_file_icons', 20 );

function myplugin_register_file_icons() {
    wp_register_icon(
        'myplugin/star',
        array(
            'label'     => __( 'Star', 'myplugin-icons' ),
            'file_path' => MYPLUGIN_ICONS_PATH . 'icons/star.svg',
        )
    );

    wp_register_icon(
        'myplugin/bookmark',
        array(
            'label'     => __( 'Bookmark', 'myplugin-icons' ),
            'file_path' => MYPLUGIN_ICONS_PATH . 'icons/bookmark.svg',
        )
    );
}

Rekisteröintifunktio ja kokoelma pysyvät samoina; vain content vaihtuu file_path-arvoksi. WordPress lukee tiedoston tarvittaessa. Avaa tämän jälkeen editorissa core/icon-lohko: valitsimessa näkyy MyPlugin-osio, jossa ovat Heart, Star ja Bookmark.

Mukautettu kuvakekokoelma WordPressin kuvakevalitsimessa — Rekisteröity kokoelma näkyy `core/icon`-lohkon kuvakevalitsimessa. — *Forrás: WPVibes*

Tarkista rekisteröintijärjestys

Jos kuvake puuttuu valitsimesta, rekisteröit sen tavallisesti ennen kokoelman luontia. Rekisteröi kokoelma init-hookin oletusprioriteetilla ja kuvakkeet sitä myöhemmällä prioriteetilla, esimerkiksi 20.

3. Rekisteröi koko SVG-kansio

Yksittäiset wp_register_icon()-kutsut eivät ole käytännöllisiä, kun kuvakekirjastossa on kymmeniä kuvakkeita. Korvaa edellinen myplugin_register_file_icons()-funktio seuraavalla versiolla, joka hakee kaikki kansion SVG-tiedostot jokaisella pyynnöllä.

add_action( 'init', 'myplugin_register_all_file_icons', 20 );

function myplugin_register_all_file_icons() {
    $icons_dir = MYPLUGIN_ICONS_PATH . 'icons/';
    $svg_files = glob( $icons_dir . '*.svg' );

    if ( empty( $svg_files ) ) {
        return;
    }

    foreach ( $svg_files as $file_path ) {
        $slug  = basename( $file_path, '.svg' );
        $label = ucwords( str_replace( '-', ' ', $slug ) );

        wp_register_icon(
            'myplugin/' . $slug,
            array(
                'label'     => $label,
                'file_path' => $file_path,
            )
        );
    }
}

add_action( 'init', 'myplugin_register_all_file_icons', 20 );

function myplugin_register_all_file_icons() {
    $icons_dir = MYPLUGIN_ICONS_PATH . 'icons/';
    $svg_files = glob( $icons_dir . '*.svg' );

    if ( empty( $svg_files ) ) {
        return;
    }

    foreach ( $svg_files as $file_path ) {
        $slug  = basename( $file_path, '.svg' );
        $label = ucwords( str_replace( '-', ' ', $slug ) );

        wp_register_icon(
            'myplugin/' . $slug,
            array(
                'label'     => $label,
                'file_path' => $file_path,
            )
        );
    }
}

glob( $icons_dir . '*.svg' ) palauttaa kansion jokaisen .svg-tiedoston. basename( $file_path, '.svg' ) poistaa tiedostopäätteen, joten esimerkiksi advanced-button.svg muuttuu slugiksi advanced-button.

ucwords( str_replace( '-', ' ', $slug ) ) muuttaa slugista valitsimeen luettavan otsikon, eli advanced-button muuttuu muotoon “Advanced Button”. Silmukka rekisteröi jokaisen tiedoston myplugin/-kokoelmaan. Lisää uusi SVG icons/-kansioon ja päivitä editori: kuvake ilmestyy valitsimeen ilman koodimuutoksia.

Useita mukautettuja SVG-kuvakkeita WordPressin kuvakevalitsimessa — Kansiosta haettu rekisteröinti tuo kaikki SVG-tiedostot samaan kokoelmaan. — *Forrás: WPVibes*

4. Käytä kuvakkeita editorissa, PHP:ssä ja lohkoissa

Core/icon-lohko ja REST API

core/icon-lohkon valitsin näyttää automaattisesti kaikki rekisteröidyt kokoelmat. Sisällöntuottaja voi valita MyPlugin-kuvakkeen, ja WordPress renderöi sen frontendiin ilman lisäkoodia.

Kuvakkeet ovat myös REST endpointissa /wp-json/wp/v2/icons. Kokoelmat löytyvät endpointista /wp-json/wp/v2/icon-collections, joten WordPressin dataa lukevat ulkoiset työkalut, myös AI-agentit, voivat löytää ne.

Tulosta SVG PHP:ssä

wp_get_icon() palauttaa SVG:n merkkijonona. Voit tulostaa sen suoraan:

echo wp_get_icon( 'myplugin/heart' );

echo wp_get_icon( 'myplugin/heart' );

Anna toisena argumenttina asetustaulukko, kun haluat hallita kokoa, CSS-luokkaa ja saavutettavuutta:

echo wp_get_icon(
    'myplugin/star',
    array(
        'size'  => 32,
        'class' => 'featured-icon',
        'label' => __( 'Featured', 'myplugin-icons' ),
    )
);

echo wp_get_icon(
    'myplugin/star',
    array(
        'size'  => 32,
        'class' => 'featured-icon',
        'label' => __( 'Featured', 'myplugin-icons' ),
    )
);

size asettaa SVG:n width– ja height-arvot pikseleinä.
class lisää CSS-luokan SVG-elementtiin.
label asettaa ruudunlukijoita varten aria-label-attribuutin.

Lisää kuvake sisältöön shortcodella

Seuraava [myplugin_icon]-shortcode antaa kirjoittajan lisätä rekisteröidyn kuvakkeen artikkeliin, sivulle tai vimpaimeen. Se puhdistaa kuvakkeen nimen, koon ja CSS-luokan ennen SVG:n hakua.

add_shortcode( 'myplugin_icon', 'myplugin_icon_shortcode' );

function myplugin_icon_shortcode( $atts ) {
    $atts = shortcode_atts(
        array(
            'name'  => 'heart',
            'text'  => '',
            'size'  => 24,
            'class' => '',
        ),
        $atts
    );

    $icon = wp_get_icon(
        'myplugin/' . sanitize_key( $atts['name'] ),
        array(
            'size'  => absint( $atts['size'] ),
            'class' => sanitize_html_class( $atts['class'] ),
        )
    );

    if ( ! $icon ) {
        return '';
    }

    return sprintf(
        '<span>%s %s</span>',
        $icon,
        esc_html( $atts['text'] )
    );
}

add_shortcode( 'myplugin_icon', 'myplugin_icon_shortcode' );

function myplugin_icon_shortcode( $atts ) {
    $atts = shortcode_atts(
        array(
            'name'  => 'heart',
            'text'  => '',
            'size'  => 24,
            'class' => '',
        ),
        $atts
    );

    $icon = wp_get_icon(
        'myplugin/' . sanitize_key( $atts['name'] ),
        array(
            'size'  => absint( $atts['size'] ),
            'class' => sanitize_html_class( $atts['class'] ),
        )
    );

    if ( ! $icon ) {
        return '';
    }

    return sprintf(
        '<span>%s %s</span>',
        $icon,
        esc_html( $atts['text'] )
    );
}

[myplugin_icon name="heart" text="Hello World"]

[myplugin_icon name="star" text="Featured post" size="32"]

[myplugin_icon name="bookmark" text="Save for later" size="20"]

[myplugin_icon name="heart" text="Hello World"]

[myplugin_icon name="star" text="Featured post" size="32"]

[myplugin_icon name="bookmark" text="Save for later" size="20"]

Shortcode näyttää kuvakkeen tekstin vieressä, ja size määrittää sen koon. Koska esimerkkien SVG:t käyttävät currentColor-arvoa, kuvake perii automaattisesti ympäröivän tekstin värin.

Aseta kuvake lohkon ikoniksi

Mukautettu SVG voi korvata lohkon oletusarvoisen Dashiconin. Jos lohkosi rekisteröinti käyttää nyt esimerkiksi tätä:

'icon' => 'warning', // Käyttää Dashiconia

'icon' => 'warning', // Käyttää Dashiconia

Vaihda icon-avaimen arvoksi rekisteröidyn kuvakkeen koko nimi:

'icon' => 'myplugin/star', // Käyttää rekisteröityä SVG-kuvaketta

'icon' => 'myplugin/star', // Käyttää rekisteröityä SVG-kuvaketta

Lohkovalitsin näyttää silloin oman SVG-kuvakkeesi yleisen Dashiconin sijaan. Tämä toimii sekä JavaScriptillä rekisteröidyissä lohkoissa että pelkällä PHP:llä toteutetuissa lohkoissa.

Sama rekisteröinti palvelee siis editoria, PHP-templateja ja REST API:a. Tämä noudattaa myös Abilities API:n mallia: rekisteröi kerran, ja rajapinnan eri kuluttajat voivat löytää saman tiedon.

5. Tyylittele kuvakkeet CSS:llä

Kuvakkeet mukautuvat käyttöliittymään luontevasti, kun ne perivät tekstin värin, skaalautuvat fontin mukana ja reagoivat hover-tilaan. wp_get_icon()-funktion class-argumentti lisää SVG:hen CSS-hookin; editorin kuvakevalitsimessa sama argumentti ei kuitenkaan ole käytössä, joten tarvitset tarvittaessa myös yleisempiä tyylejä.

Käytä currentColor-arvoa

SVG-suunnittelun tärkein sääntö on käyttää stroke="currentColor"– tai fill="currentColor"-arvoa kiinteän värikoodin sijaan. Kiinteä väri tekee kuvakkeesta aina samanvärisen:

<!-- Kiinteä väri: kuvake on aina punainen -->
<svg viewBox="0 0 24 24" stroke="#dc2626" stroke-width="2">
    <path d="..."/>
</svg>

<!-- Kiinteä väri: kuvake on aina punainen -->
<svg viewBox="0 0 24 24" stroke="#dc2626" stroke-width="2">
    <path d="..."/>
</svg>

currentColor tekee SVG:stä tekstin tavoin käyttäytyvän elementin. Punaisen tekstin sisällä kuvake on punainen, tummassa teemassa tumma ja linkissä linkin värinen. Siksi kuvakkeista kannattaa poistaa kovakoodatut värit.

Pakota väri tarvittaessa

Jos brändimerkki tai tilaindikaattori tarvitsee aina tietyn värin, aseta color SVG:lle CSS-luokan kautta. currentColor siirtyy tällöin kuvakkeen stroke– tai fill-arvoon.

.featured-icon {
    color: #f59e0b; /* Meripihka ympäröivästä tekstistä riippumatta */
}

.featured-icon {
    color: #f59e0b; /* Meripihka ympäröivästä tekstistä riippumatta */
}

Koko ja hover-tila

Shortcoden ja wp_get_icon()-funktion tapauksissa size sopii yksittäiseen tarkasti mitoitettuun kuvakkeeseen. Kun haluat hallita kokoa CSS:llä tai lisätä hover-tilan, tyylittele SVG:tä esimerkiksi sen ympäröivän elementin kautta:

.myplugin-icon-inline svg {
    transition: transform 0.15s ease-in-out;
}

.myplugin-icon-inline:hover svg {
    transform: scale(1.1);
}

.myplugin-icon-inline svg {
    transition: transform 0.15s ease-in-out;
}

.myplugin-icon-inline:hover svg {
    transform: scale(1.1);
}

Käytä wp_get_icon()-funktion size-argumenttia kertaluonteisiin tilanteisiin, joissa tarvitset tarkan pikselikoon etkä tarvitse omaa CSS:ää.
Käytä CSS-luokkaa tai wrapper-elementtiä, kun kuvake toistuu useassa paikassa, tyylin pitää säilyä yhtenäisenä tai ulkoasu riippuu tilasta, kuten hover-, focus- tai active-tilasta, tai asiayhteydestä, kuten linkistä tai otsikosta.
Shortcodessa voit tehdä pienet muutokset size-attribuutilla. Sivustonlaajuisen yhdenmukaisuuden saat CSS:llä, joka kohdistuu esimerkiksi .myplugin-icon-inline svg-elementtiin.

6. Poista kuvakkeita ja kokoelmia

WordPress 7.1 sisältää myös toiminnot yksittäisen kuvakkeen ja kokonaisen kokoelman poistamiseen. Niitä tarvitset esimerkiksi kehityksen aikana, lisäosapäivityksessä tai lisäosan poistuessa käytöstä.

Poista yksi kuvake

wp_unregister_icon( 'myplugin/bookmark' );

wp_unregister_icon( 'myplugin/bookmark' );

Kuvake katoaa valitsimesta seuraavalla pyynnöllä. Jos aiemmin julkaistu core/icon-lohko käyttää poistettua kuvaketta, se renderöityy tyhjänä: WordPress ei kirjoita olemassa olevaa sisältöä uudelleen.

Poista kokoelma lisäosan deaktivoinnissa

Kun lisäosa deaktivoidaan, poista kokoelma yhdellä kutsulla. WordPress poistaa samalla kaikki sen kuvakkeet, joten yksittäisiä kuvakkeita ei tarvitse käydä silmukassa läpi.

register_deactivation_hook( __FILE__, 'myplugin_unregister_icons' );

function myplugin_unregister_icons() {
    wp_unregister_icon_collection( 'myplugin' );
}

register_deactivation_hook( __FILE__, 'myplugin_unregister_icons' );

function myplugin_unregister_icons() {
    wp_unregister_icon_collection( 'myplugin' );
}

Usein kysytyt kysymykset

Pitääkö kokoelma rekisteröidä ennen kuvakkeita?

Kyllä. Kuvake tarvitsee olemassa olevan kokoelman, muuten se ei näy valitsimessa ilman virheilmoitusta. Rekisteröi kokoelma init-hookin oletusprioriteetilla ja kuvakkeet suuremmalla prioriteetilla, kuten 20.

Voiko samassa kokoelmassa käyttää sekä content- että file_path-kuvakkeita?

Voi. Jokainen wp_register_icon()-kutsu on itsenäinen. Käytä content-arvoa yhdelle tai kahdelle kuvakkeelle ja file_path-arvoa muille; WordPress käsittelee niitä rekisteröinnin jälkeen samalla tavalla.

Toimivatko mukautetut kuvakkeet register_block_type()-funktion lohkokuvakkeina?

Toimivat. Anna register_block_type()-funktion icon-avaimelle rekisteröidyn kuvakkeen nimi, kuten 'myplugin/star'. Lohkovalitsin näyttää SVG:n Dashiconin sijaan sekä JavaScriptillä rekisteröidyissä että vain PHP:tä käyttävissä lohkoissa.

Palauttaako wp_get_icon() HTML:ää vai merkkijonon?

wp_get_icon() palauttaa SVG:n merkkijonona. Voit tulostaa sen echo-komennolla tai kääriä omaan HTML:ääsi. Toinen $args-taulukko hyväksyy size-, class-, label– ja title-arvot; label luo aria-label-attribuutin.

Mitä SVG-attribuutteja kannattaa poistaa ennen rekisteröintiä?

Poista kovakoodatut fill– ja stroke-värit, juurielementin <svg>-tagin width– ja height-attribuutit sekä kaikki <style>-lohkot ja skriptit. Säilytä viewBox ja rakenteelliset attribuutit, ja käytä väreille currentColor-arvoa.

Voiko kuvakkeet rekisteröidä teemasta lisäosan sijaan?

Voi. Sama wp_register_icon()-kutsu toimii teeman functions.php-tiedostossa, kun muodostat tiedostopolun get_stylesheet_directory()-funktiolla. Teemasta rekisteröidyt kuvakkeet kuitenkin katoavat, jos käyttäjä vaihtaa teemaa.

Mitä jos kahdessa kokoelmassa on samanniminen kuvake?

Kokoelmat nimeävät kuvakkeet omiin nimiavaruuksiinsa. myplugin/heart ja toisen lisäosan otherplugin/heart voivat olla rinnakkain ilman ristiriitaa, koska kokoelman etuliite tekee täydestä nimestä yksilöllisen.

Puhdistaako WordPress SVG:t rekisteröinnin yhteydessä?

Ei. WordPress ei muuta rekisteröitävää SVG-sisältöä, vaan tarjoaa täsmälleen sen merkkijonon tai tiedoston sisällön, jonka annat. Puhdista SVG:t itse ennen julkaisua: poista skriptit, ulkoiset viittaukset ja kaikki tarpeeton.

Ota API käyttöön lisäosassasi

Aloita rekisteröimällä kokoelma, lisää siihen muutama currentColor-arvoa käyttävä SVG ja varmista, että kuvakkeiden hook suoritetaan kokoelman jälkeen. Kun kuvakkeita kertyy enemmän, vaihda yksittäiset file_path-kutsut glob()-malliin.

Tämän jälkeen voit käyttää samaa rekisteriä editorissa, PHP-templateissa, REST API:ssa ja lohkojen icon-asetuksessa. Saat brändätyn editorikokemuksen ilman JavaScript-build-vaihetta, ja sama rakenne skaalautuu kolmesta kuvakkeesta satoihin.

Näin lisäät omat SVG-kuvakkeet WordPress 7.1:ssä

Mitä rakennat

Edellytykset

API kolmessa minuutissa

1. Luo lisäosa ja rekisteröi kokoelma

2. Rekisteröi kuvakkeet kahdella tavalla

2.1 Lisää SVG suoraan content-arvona

2.2 Lue SVG-kuvakkeet tiedostoista

Tarkista rekisteröintijärjestys

3. Rekisteröi koko SVG-kansio

4. Käytä kuvakkeita editorissa, PHP:ssä ja lohkoissa

Core/icon-lohko ja REST API

Tulosta SVG PHP:ssä

Lisää kuvake sisältöön shortcodella

Aseta kuvake lohkon ikoniksi

5. Tyylittele kuvakkeet CSS:llä

Käytä currentColor-arvoa

Pakota väri tarvittaessa

Koko ja hover-tila

6. Poista kuvakkeita ja kokoelmia

Poista yksi kuvake

Poista kokoelma lisäosan deaktivoinnissa

Usein kysytyt kysymykset

Pitääkö kokoelma rekisteröidä ennen kuvakkeita?

Voiko samassa kokoelmassa käyttää sekä content- että file_path-kuvakkeita?

Toimivatko mukautetut kuvakkeet register_block_type()-funktion lohkokuvakkeina?

Palauttaako wp_get_icon() HTML:ää vai merkkijonon?

Mitä SVG-attribuutteja kannattaa poistaa ennen rekisteröintiä?

Voiko kuvakkeet rekisteröidä teemasta lisäosan sijaan?

Mitä jos kahdessa kokoelmassa on samanniminen kuvake?

Puhdistaako WordPress SVG:t rekisteröinnin yhteydessä?

Ota API käyttöön lisäosassasi

Viitteet / Lähteet

Mikko Virtanen

Lisää käyttäjältä Mikko Virtanen

Liity HelloWP-yhteisöön!