WordPressin uusi oletusteema Twenty Twenty on hieno, ihastuin heti. Värkkään Lautapelioppaalle uutta teemaa ensi vuoden 20-vuotisjuhlien kunniaksi, joten tuntui jokseenkin luontevalta vaihtaa vanha Twenty Fourteen -pohjainen teema Twenty Twentyyn.
Värkätessä tuli vastaan pieni pulma: halusin lisätä teemaan omia SVG-ikoneita, koska olemassaolevasta valikoimista puuttui jokunen tarpeellinen ikoni. Vaan kuinkas se tehdään elegantisti ja mahdollisimman vähällä olemassaolevan koodin ylikirjoittamisella?
Plugattava funktio
Twenty Twentyn ikonimekanismi perustuu Twenty Nineteenin vastaavaan, joten voi olla, että nämä ohjeet toimivat pienellä säädöllä sielläkin. Ikonit on varastoitu tiedostoon classes/class-twentytwenty-svg-icons.php. Sitä ei minun nähdäkseni kannata mennä muokkaamaan.
Ikoneita hakee varastosta tiedostosta inc/svg-icons.php löytyvä pluggable-funktio twentytwenty_get_theme_svg(). Nyt ollaan oikeilla jäljillä – se, että funktiosta on tehty pluggable, vihjaa että sen voi joku haluta jyrätä. Ja niin me teemme!
Funktio on aika yksinkertainen. Se hakee TwentyTwenty_SVG_Icons::get_svg() -funktiolla parametrin mukaisen ikonin kirjastosta ja palauttaa sen SVG-koodin. Jos ikonia ei löydy, palautetaan false. Me teemme funktiosta oman version, joka toteuttaa tämän toiminnallisuuden, mutta jos ikonia ei ikonikirjastosta löydy, kurkataan myös oman ikonikirjaston puolelle.
Oma ikonikirjasto käyttöön
Lapsiteeman functions.php:ssa määritellään siis funktiosta uusi versio, joka näyttää tältä:
function twentytwenty_get_theme_svg( $svg_name, $group = 'ui', $color = '' ) {
// Oma ikonikirjasto, eli taulukko SVG-ikoneita.
$custom_svg = array(
'gear' => '<svg height="1792" viewBox="0 0 1792 1792" width="1792" xmlns="http://www.w3.org/2000/svg"><path d="M832 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm768 512q0-52-38-90t-90-38-90 38-38 90q0 53 37.5 90.5t90.5 37.5 90.5-37.5 37.5-90.5zm0-1024q0-52-38-90t-90-38-90 38-38 90q0 53 37.5 90.5t90.5 37.5 90.5-37.5 37.5-90.5zm-384 421v185q0 10-7 19.5t-16 10.5l-155 24q-11 35-32 76 34 48 90 115 7 10 7 20 0 12-7 19-23 30-82.5 89.5t-78.5 59.5q-11 0-21-7l-115-90q-37 19-77 31-11 108-23 155-7 24-30 24h-186q-11 0-20-7.5t-10-17.5l-23-153q-34-10-75-31l-118 89q-7 7-20 7-11 0-21-8-144-133-144-160 0-9 7-19 10-14 41-53t47-61q-23-44-35-82l-152-24q-10-1-17-9.5t-7-19.5v-185q0-10 7-19.5t16-10.5l155-24q11-35 32-76-34-48-90-115-7-11-7-20 0-12 7-20 22-30 82-89t79-59q11 0 21 7l115 90q34-18 77-32 11-108 23-154 7-24 30-24h186q11 0 20 7.5t10 17.5l23 153q34 10 75 31l118-89q8-7 20-7 11 0 21 8 144 133 144 160 0 9-7 19-12 16-42 54t-45 60q23 48 34 82l152 23q10 2 17 10.5t7 19.5zm640 533v140q0 16-149 31-12 27-30 52 51 113 51 138 0 4-4 7-122 71-124 71-8 0-46-47t-52-68q-20 2-30 2t-30-2q-14 21-52 68t-46 47q-2 0-124-71-4-3-4-7 0-25 51-138-18-25-30-52-149-15-149-31v-140q0-16 149-31 13-29 30-52-51-113-51-138 0-4 4-7 4-2 35-20t59-34 30-16q8 0 46 46.5t52 67.5q20-2 30-2t30 2q51-71 92-112l6-2q4 0 124 70 4 3 4 7 0 25-51 138 17 23 30 52 149 15 149 31zm0-1024v140q0 16-149 31-12 27-30 52 51 113 51 138 0 4-4 7-122 71-124 71-8 0-46-47t-52-68q-20 2-30 2t-30-2q-14 21-52 68t-46 47q-2 0-124-71-4-3-4-7 0-25 51-138-18-25-30-52-149-15-149-31v-140q0-16 149-31 13-29 30-52-51-113-51-138 0-4 4-7 4-2 35-20t59-34 30-16q8 0 46 46.5t52 67.5q20-2 30-2t30 2q51-71 92-112l6-2q4 0 124 70 4 3 4 7 0 25-51 138 17 23 30 52 149 15 149 31z"/></svg>',
'script' => '<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><g id="Layer_1"><path d="M39,7c0-3.309-2.691-6-6-6H7C3.691,1,1,3.691,1,7c0,2.967,2.167,5.431,5,5.91V43c0,3.309,2.691,6,6,6h31 c3.309,0,6-2.691,6-6v-1H39V7z M3,7c0-2.206,1.794-4,4-4h21.54C27.586,4.063,27,5.462,27,7s0.586,2.937,1.54,4H7 C4.794,11,3,9.206,3,7z M8,43V13h25v-2c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4v35v1c0,1.538,0.586,2.937,1.54,4H12 C9.794,47,8,45.206,8,43z M46.873,44c-0.444,1.723-2.013,3-3.873,3s-3.429-1.277-3.873-3H46.873z"/><rect height="2" width="4" x="12" y="17"/><rect height="2" width="14" x="19" y="17"/><rect height="2" width="4" x="12" y="22"/><rect height="2" width="14" x="19" y="22"/><rect height="2" width="4" x="12" y="27"/><rect height="2" width="14" x="19" y="27"/><rect height="2" width="4" x="12" y="32"/><rect height="2" width="14" x="19" y="32"/><rect height="2" width="4" x="12" y="37"/><rect height="2" width="14" x="19" y="37"/><rect height="2" width="4" x="12" y="42"/><rect height="2" width="14" x="19" y="42"/></g><g/></svg>'
);
// Make sure that only our allowed tags and attributes are included.
$svg = wp_kses(
TwentyTwenty_SVG_Icons::get_svg( $svg_name, $group, $color ),
array(
'svg' => array(
'class' => true,
'xmlns' => true,
'width' => true,
'height' => true,
'viewbox' => true,
'aria-hidden' => true,
'role' => true,
'focusable' => true,
),
'path' => array(
'fill' => true,
'fill-rule' => true,
'd' => true,
'transform' => true,
),
'polygon' => array(
'fill' => true,
'fill-rule' => true,
'points' => true,
'transform' => true,
'focusable' => true,
),
)
);
if ( ! $svg ) {
// Jos ikonia ei löydy, tarkistetaan oma ikonikirjasto.
if ( isset( $custom_svg[ $svg_name ] ) ) {
return $custom_svg[ $svg_name ];
}
return false;
}
return $svg;
}Muuta ei tarvita. Nyt on mahdollista käyttää omia ikoneita, esimerkiksi näin:
<?php twentytwenty_the_theme_svg( 'gear' ); ?>
Terve,
Tähän näyttää tulleen päivityksessä uusi tapa lisätä ikoneita. Lisätty filtteri jolla voidaan muuttaa olemassa oleva ikoni tai lisätä omia ikoneita. https://make.wordpress.org/core/2020/07/30/themes-field-guide-wordpress-5-5/
Joo, minäkin itse asiassa tein pull requestin, joka toteutti vastaavan filtterin. Tuo helpottaa kummasti ikonien lisäämistä. Tuo oli kai pääasiassa noille some-ikoneille, mutta kaipa sitä voi käyttää muidenkin ikonien lisäämiseen.