{"id":237,"date":"2026-08-14T14:01:29","date_gmt":"2026-08-14T12:01:29","guid":{"rendered":"https:\/\/helloblog.io\/fi\/mukautetut-svg-kuvakkeet-wordpress-7-1\/"},"modified":"2026-08-14T14:01:29","modified_gmt":"2026-08-14T12:01:29","slug":"mukautetut-svg-kuvakkeet-wordpress-7-1","status":"publish","type":"post","link":"https:\/\/helloblog.io\/fi\/mukautetut-svg-kuvakkeet-wordpress-7-1\/","title":{"rendered":"N\u00e4in lis\u00e4\u00e4t omat SVG-kuvakkeet WordPress 7.1:ss\u00e4"},"content":{"rendered":"\n

Oman SVG-kuvakkeen lis\u00e4\u00e4minen lohkoeditoriin on t\u00e4h\u00e4n asti vaatinut JavaScripti\u00e4, build-vaiheen tai ep\u00e4varman kiertotavan. WordPress 7.1 tuo julkisen API:n, jolla lis\u00e4osa voi rekister\u00f6id\u00e4 SVG-kuvakkeet PHP:ll\u00e4, ilman JavaScript-buildi\u00e4.<\/p>\n\n\n\n

API kokoaa kuvakkeet nimettyihin kokoelmiin. Rekister\u00f6idyt kuvakkeet n\u00e4kyv\u00e4t core\/icon<\/code>-lohkon valitsimessa, ne voi tulostaa PHP:ss\u00e4 ja WordPress tarjoaa ne my\u00f6s REST API:n kautta. WordPress 7.1 on m\u00e4\u00e4r\u00e4 julkaista 19.8.2026; kehityksess\u00e4 voit k\u00e4ytt\u00e4\u00e4 my\u00f6s versiota 7.1 RC.<\/p>\n\n\n\n

Mit\u00e4 rakennat<\/h2>\n\n\n\n

T\u00e4ss\u00e4 oppaassa rakennat myplugin-custom-icons<\/code>-lis\u00e4osan. Se rekister\u00f6i myplugin<\/code>-kokoelman, lis\u00e4\u00e4 syd\u00e4nkuvakkeen suoraan PHP:st\u00e4 sek\u00e4 t\u00e4hti- ja kirjanmerkkikuvakkeet .svg<\/code>-tiedostoista.<\/p>\n\n\n\n

Lis\u00e4ksi toteutat mallin, joka rekister\u00f6i automaattisesti kansion kaikki SVG-tiedostot, shortcodeen perustuvan tavan lis\u00e4t\u00e4 kuvake sis\u00e4lt\u00f6\u00f6n sek\u00e4 mukautetun lohkokuvakkeen register_block_type()<\/code>-rekister\u00f6intiin. Koko lis\u00e4osa esimerkkikuvakkeineen ja README-tiedostoineen on saatavilla GitHubissa<\/a>.<\/p>\n\n\n\n

Edellytykset<\/h2>\n\n\n\n

Tarvitset seuraavat asiat ennen kuin aloitat:<\/p>\n\n\n\n

    \n\n
  • WordPress 7.1:n tai uudemman version; my\u00f6s 7.1 RC sopii kehitykseen.<\/li>\n\n\n
  • Muutaman SVG-kuvaketiedoston tai oppaan esimerkkitiedostot.<\/li>\n\n\n
  • Paikallisen kehitysymp\u00e4rist\u00f6n, kuten LocalWP:n, WordPress Studion tai wp-env<\/code>in.<\/li>\n\n\n
  • PHP:n perusteet.<\/li>\n\n<\/ul>\n\n\n\n

    API kolmessa minuutissa<\/h2>\n\n\n\n

    Mukautettujen kuvakkeiden API:ssa on kolme p\u00e4\u00e4funktiota. wp_register_icon_collection( $name, $args )<\/code> luo nimetyn kuvakekokoelman, wp_register_icon( $name, $args )<\/code> rekister\u00f6i yksitt\u00e4isen kuvakkeen ja wp_get_icon( $name, $args )<\/code> palauttaa kuvakkeen SVG-merkkijonona PHP:t\u00e4 varten.<\/p>\n\n\n\n

    Jokainen kuvake kuuluu kokoelmaan. Kokoelman nimi toimii kuvakkeen etuliitteen\u00e4: esimerkiksi core\/plus<\/code> ja myplugin\/plus<\/code> ovat eri kuvakkeita. Nimiavaruus ehk\u00e4isee t\u00f6rm\u00e4ykset WordPressin coren kuvakkeiden ja muiden lis\u00e4osien v\u00e4lill\u00e4.<\/p>\n\n\n\n

    Voit antaa SVG:n rekister\u00f6inniss\u00e4 kahdella tavalla. content<\/code> sis\u00e4lt\u00e4\u00e4 SVG-merkinn\u00e4n merkkijonona PHP-koodissa, kun taas file_path<\/code> osoittaa levyll\u00e4 olevaan .svg<\/code>-tiedostoon absoluuttisella polulla. K\u00e4yt\u00e4 yhdelle kuvakkeelle vain toista tapaa: content<\/code> sopii yhdelle tai kahdelle kuvakkeelle, file_path<\/code> kasvaa paremmin laajaksi kuvakekansioksi.<\/p>\n\n\n\n

    1. Luo lis\u00e4osa ja rekister\u00f6i kokoelma<\/h2>\n\n\n\n

    Rekister\u00f6i kokoelma aina ennen sen kuvakkeita. Jos yrit\u00e4t lis\u00e4t\u00e4 kuvakkeen kokoelmaan, jota ei viel\u00e4 ole, kuvake ei n\u00e4y valitsimessa eik\u00e4 WordPress ilmoita virheest\u00e4.<\/p>\n\n\n\n

    Luo wp-content\/plugins\/<\/code>-hakemistoon seuraava rakenne:<\/p>\n\n\n\n

    <\/circle><\/circle><\/circle><\/g><\/svg><\/span>