WordPress 7.1 introducerar ett offentligt API f\u00f6r egna SVG-ikoner. Du kan registrera ikonsamlingar fr\u00e5n ett till\u00e4gg utan JavaScript eller buildsteg och sedan anv\u00e4nda samma ikoner i blockredigeraren, PHP och REST API:t.<\/p>\n\n\n\n
I den h\u00e4r guiden bygger du ett litet till\u00e4gg som registrerar ikoner b\u00e5de som inline-SVG och fr\u00e5n filer. Du f\u00e5r ocks\u00e5 ett m\u00f6nster f\u00f6r att automatiskt l\u00e4sa in en hel ikonmapp, en shortcode och ett exempel p\u00e5 hur en registrerad ikon ers\u00e4tter en Dashicon i ett eget block.<\/p>\n\n\n\n
myplugin-custom-icons<\/code> och en registrerad ikonsamling som heter myplugin<\/code>.<\/li>\n\n\n- Tre f\u00e4rdiga ikoner: ett hj\u00e4rta som registreras inline samt en stj\u00e4rna och ett bokm\u00e4rke som l\u00e4ses fr\u00e5n
.svg<\/code>-filer.<\/li>\n\n\n- Ett m\u00f6nster f\u00f6r massregistrering som automatiskt registrerar varje SVG-fil i en mapp.<\/li>\n\n\n
- En shortcode som l\u00e4gger in valfri registrerad ikon i inneh\u00e5llet.<\/li>\n\n\n
- En blockikon som anv\u00e4nder en egen SVG-ikon i
register_block_type()<\/code>.<\/li>\n\n<\/ul>\n\n\n\nF\u00f6ruts\u00e4ttningar<\/h2>\n\n\n\n\n\n- WordPress 7.1 eller senare. Du kan anv\u00e4nda 7.1 RC under utvecklingen.<\/li>\n\n\n
- N\u00e5gra SVG-ikonfiler, eller filerna i exemplen nedan.<\/li>\n\n\n
- En lokal utvecklingsmilj\u00f6, exempelvis LocalWP, WordPress Studio eller wp-env.<\/li>\n\n\n
- Grundl\u00e4ggande PHP-kunskaper.<\/li>\n\n<\/ul>\n\n\n\n
S\u00e5 fungerar API:t<\/h2>\n\n\n\n
API:t f\u00f6r egna ikoner har tre centrala funktioner och bygger p\u00e5 ikonsamlingar. En samling grupperar ikoner och ger dem ett namnrymdsprefix, s\u00e5 att core\/plus<\/code> och myplugin\/plus<\/code> inte krockar med varandra eller med ikoner fr\u00e5n andra till\u00e4gg.<\/p>\n\n\n\n\n\nwp_register_icon_collection( $name, $args )<\/code> registrerar en namngiven ikonsamling.<\/li>\n\n\nwp_register_icon( $name, $args )<\/code> registrerar en enskild ikon.<\/li>\n\n\nwp_get_icon( $name, $args )<\/code> renderar en ikon i PHP och returnerar SVG:n som en str\u00e4ng.<\/li>\n\n<\/ul>\n\n\n\nN\u00e4r du registrerar en ikon v\u00e4ljer du antingen content<\/code>, allts\u00e5 SVG-markup som en PHP-str\u00e4ng, eller file_path<\/code>, en absolut s\u00f6kv\u00e4g till en .svg<\/code>-fil. Anv\u00e4nd bara ett av alternativen f\u00f6r varje ikon. content<\/code> passar f\u00f6r en eller tv\u00e5 ikoner, medan file_path<\/code> \u00e4r smidigare f\u00f6r st\u00f6rre ikonbibliotek.<\/p>\n\n\n\nSkapa till\u00e4gget och registrera samlingen<\/h2>\n\n\n\n
Registrera alltid samlingen f\u00f6re ikonerna. Om du f\u00f6rs\u00f6ker l\u00e4gga till en ikon i en samling som inte redan finns visas ikonen inte i v\u00e4ljaren, utan n\u00e5got tydligt felmeddelande.<\/p>\n\n\n\n
Skapa f\u00f6ljande mappstruktur i wp-content\/plugins\/<\/code>:<\/p>\n\n\n\n