{"id":406,"date":"2026-08-14T14:01:02","date_gmt":"2026-08-14T12:01:02","guid":{"rendered":"https:\/\/helloblog.io\/hu\/egyedi-svg-ikonok-wordpress-7-1\/"},"modified":"2026-08-14T14:01:02","modified_gmt":"2026-08-14T12:01:02","slug":"egyedi-svg-ikonok-wordpress-7-1","status":"publish","type":"post","link":"https:\/\/helloblog.io\/hu\/egyedi-svg-ikonok-wordpress-7-1\/","title":{"rendered":"Egyedi SVG-ikonok a WordPress 7.1-ben: teljes fejleszt\u0151i \u00fatmutat\u00f3"},"content":{"rendered":"\n

A saj\u00e1t SVG-ikonok eddig jellemz\u0151en JavaScriptet, build folyamatot vagy megb\u00edzhatatlan ker\u00fcl\u0151megold\u00e1st ig\u00e9nyeltek a blokkszerkeszt\u0151ben. A WordPress 7.1 egy publikus API-val z\u00e1rja le ezt a hi\u00e1nyt: b\u0151v\u00edtm\u00e9nyb\u0151l, JavaScript build l\u00e9p\u00e9s n\u00e9lk\u00fcl regisztr\u00e1lhatsz ikonokat, amelyek a core\/icon<\/code> blokkn\u00e1l, PHP-ban \u00e9s a REST API-n kereszt\u00fcl is el\u00e9rhet\u0151k lesznek.<\/p>\n\n\n\n

Az al\u00e1bbi \u00fatmutat\u00f3 egy kis myplugin-custom-icons<\/code> b\u0151v\u00edtm\u00e9nyt \u00e9p\u00edt fel. L\u00e9trehozunk egy ikonkollekci\u00f3t, egy ikont k\u00f6zvetlen SVG-markupb\u00f3l, kett\u0151t f\u00e1jlb\u00f3l, majd automatikus mappafeldolgoz\u00e1ssal sk\u00e1l\u00e1zzuk a megold\u00e1st. Az ikonokat a szerkeszt\u0151ben, PHP-sablonban, shortcode-ban \u00e9s egyedi blokk ikonjak\u00e9nt is haszn\u00e1lni fogod.<\/p>\n\n\n\n

A WordPress 7.1 kiad\u00e1s\u00e1t 2026. augusztus 19-re tervezik. Fejleszt\u00e9shez m\u00e1r a 7.1 RC is haszn\u00e1lhat\u00f3, de \u00e9les oldalon csak a v\u00e9gleges kiad\u00e1ssal dolgozz.<\/p>\n\n\n\n

Mire lesz sz\u00fcks\u00e9ged?<\/h2>\n\n\n\n

A p\u00e9ld\u00e1k k\u00f6vet\u00e9s\u00e9hez k\u00e9sz\u00edts el\u0151 egy helyi WordPress-k\u00f6rnyezetet, p\u00e9ld\u00e1ul LocalWP-t, WordPress Studio-t vagy wp-env<\/code>-et. Kell tov\u00e1bb\u00e1 n\u00e9h\u00e1ny SVG-f\u00e1jl \u00e9s alapvet\u0151 PHP-ismeret.<\/p>\n\n\n\n

Haszn\u00e1ld a WordPress 7.1-et vagy \u00fajabb verzi\u00f3t. A megold\u00e1s egy \u00f6n\u00e1ll\u00f3 b\u0151v\u00edtm\u00e9nyben m\u0171k\u00f6dik, ez\u00e9rt a sablon m\u0171k\u00f6d\u00e9s\u00e9t\u0151l f\u00fcggetlen\u00fcl megmaradnak az ikonok.<\/p>\n\n\n\n

Az \u00faj ikon API h\u00e1rom f\u00fcggv\u00e9nye<\/h2>\n\n\n\n

A WordPress 7.1 egy regiszteren kereszt\u00fcl kezeli az ikonokat. H\u00e1rom f\u00fcggv\u00e9ny \u00e9s az ikonkollekci\u00f3 fogalma adja az API teljes alapj\u00e1t.<\/p>\n\n\n\n

    \n\n
  • wp_register_icon_collection( $name, $args )<\/code>: n\u00e9vvel ell\u00e1tott ikonkollekci\u00f3t regisztr\u00e1l.<\/li>\n\n\n
  • wp_register_icon( $name, $args )<\/code>: egyetlen ikont vesz fel a regiszterbe.<\/li>\n\n\n
  • wp_get_icon( $name, $args )<\/code>: PHP-ban kirendereli az ikont, \u00e9s SVG-sztringet ad vissza.<\/li>\n\n<\/ul>\n\n\n\n

    Minden ikon egy kollekci\u00f3hoz tartozik. A kollekci\u00f3 neve az ikon teljes nev\u00e9nek prefixe, ez\u00e9rt k\u00fcl\u00f6nb\u00f6zik p\u00e9ld\u00e1ul a core\/plus<\/code> a myplugin\/plus<\/code> ikont\u00f3l. A n\u00e9vt\u00e9r megakad\u00e1lyozza, hogy a saj\u00e1t ikonjaid \u00fctk\u00f6zzenek a WordPress core vagy m\u00e1s b\u0151v\u00edtm\u00e9nyek ikonneveivel.<\/p>\n\n\n\n

    Ikon regisztr\u00e1l\u00e1sakor k\u00e9tf\u00e9lek\u00e9ppen adhatod \u00e1t az SVG-t. A content<\/code> k\u00f6zvetlen\u00fcl a PHP-k\u00f3dban t\u00e1rolt SVG-markupot v\u00e1r, a file_path<\/code> pedig egy lemezen l\u00e9v\u0151 .svg<\/code> f\u00e1jl abszol\u00fat \u00fatvonal\u00e1t. Egy ikonn\u00e1l csak az egyik m\u00f3dszert haszn\u00e1ld: egy-k\u00e9t ikonhoz k\u00e9nyelmes a content<\/code>, sok ikonhoz a file_path<\/code> sk\u00e1l\u00e1z\u00f3dik jobban.<\/p>\n\n\n\n

    1. Hozd l\u00e9tre a b\u0151v\u00edtm\u00e9nyt \u00e9s a kollekci\u00f3t<\/h2>\n\n\n\n

    Mindig el\u0151bb regisztr\u00e1ld a kollekci\u00f3t, \u00e9s csak ut\u00e1na vedd fel az ikonokat. Ha nem l\u00e9tez\u0151 kollekci\u00f3hoz pr\u00f3b\u00e1lsz ikont hozz\u00e1adni, az ikon hiba\u00fczenet n\u00e9lk\u00fcl kimarad a v\u00e1laszt\u00f3b\u00f3l.<\/p>\n\n\n\n

    Hozd l\u00e9tre az al\u00e1bbi k\u00f6nyvt\u00e1rstrukt\u00far\u00e1t a wp-content\/plugins\/<\/code> mapp\u00e1ban:<\/p>\n\n\n\n

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