Gestern kam es tatsächlich vor, dass die Social-Icon-Auswahl in den WordPress-Social Icons eines missen ließ, das kundenseitig erwünscht war. Vielleicht ist Wikipedia, was „Sociallinks“ angeht, ein Grenzfall und gehört nicht unbedingt in die Sammlung. Doch wir wollten es nahtlos integrieren, und zur Veranschaulichung ist es allemal gut. Auf der Suche nach einer Lösung stellte sich heraus, dass die aktuelle WordPress Version 6.9 für das Hinzufügen eigener Icons gerüstet ist.
Man könnte das über ein Plugin lösen, aber auch mit seinem (Child-)Theme, wenn man ein eigenes hat. In unserem Fall war es so, dass es ein eigenes Theme für das Projekt gibt, daher erweiterten wir das.
Du brauchst für ein oder mehrere eigene Social-Icons in WordPress genau zwei Registrierungen:
- Editor-Registrierung (JavaScript), damit das Icon im Inserter erscheint
- Frontend-Registrierung (PHP-Filter), damit es auf der Website korrekt ausgegeben wird
Ohne JS: Icon wäre nicht im Inserter sichtbar.
Ohne PHP-Filter: Im Editor wäre das Icon zwar sichtbar, aber das Frontend fällt auf Default/leer zurueck.
Voraussetzung ist, dass man mit dem Block-Editor arbeitet. Sicher geht das mit einem Block-Theme. Es dürfte mittlerweile auch Classic Themes geben, in denen man zum Editieren von Header und Footer Blöcke verwenden kann.
Editor: der Icon-Code (assets/js/social-icons.js)
(function (blocks, element) {
if (!blocks || !element || !blocks.registerBlockVariation) {
return;
}
const el = element.createElement;
blocks.registerBlockVariation('core/social-link', {
name: 'wikipedia',
title: 'Wikipedia',
icon: el(
'svg',
{
role: 'img',
viewBox: '0 0 24 24',
xmlns: 'http://www.w3.org/2000/svg',
},
el('path', {
d: 'm15.562 19.478-3.07-7.238q-.258.51-1.652 3.182t-2.068 4.057c-.051.006-.11.009-.17.009-.041 0-.082-.002-.122-.005h.005c-.019.001-.04.001-.062.001-.075 0-.15-.006-.222-.018l.008.001q-.854-2.01-2.662-6.114t-2.704-6.209c-.193-.428-.425-.796-.699-1.128l.007.008c-.315-.396-.669-.741-1.063-1.035l-.015-.011c-.287-.248-.653-.411-1.055-.447l-.007-.001q0-.052-.005-.25t-.005-.282h6.073v.521c-.301.018-.582.077-.846.173l.021-.007c-.275.092-.508.246-.692.447l-.001.001c-.104.103-.168.246-.168.403 0 .096.024.187.066.266l-.002-.003q.271.614 2.255 5.2t2.453 5.626q.32-.635 1.458-2.776t1.364-2.578q-.198-.406-1.313-2.926t-1.416-3.073q-.396-.72-2.094-.74v-.523l5.343.01v.49c-.012 0-.026 0-.04 0-.345 0-.667.096-.942.263l.008-.005q-.349.24-.13.72.344.73.906 1.974t.895 1.953q1.146-2.229 1.802-3.781.25-.573-.103-.826c-.34-.178-.742-.282-1.169-.282-.061 0-.121.002-.181.006h.008c.007-.065.011-.14.011-.216 0-.015 0-.03 0-.045v.002-.25q.666 0 1.776-.005l2.834-.015v.51c-.457.016-.882.142-1.253.351l.014-.007c-.382.203-.697.486-.931.828l-.006.009-2.219 4.604q.135.344 1.328 3.021t1.266 2.854l4.594-10.593c-.103-.271-.282-.494-.511-.648l-.005-.003c-.193-.143-.419-.256-.663-.324l-.015-.004c-.17-.043-.369-.071-.572-.08h-.006v-.524l4.792.042.01.021-.01.458c-.965.014-1.782.633-2.089 1.495l-.005.016q-5.482 12.666-5.824 13.447z',
})
),
attributes: {
service: 'wikipedia',
},
isActive: ['service'],
});
})(window.wp && window.wp.blocks, window.wp && window.wp.element);Script im Editor laden (functions.php)
add_action('enqueue_block_editor_assets', function () {
wp_enqueue_script(
'lunayoga-social-icons',
get_theme_file_uri('assets/js/social-icons.js'),
array('wp-blocks', 'wp-element'),
THEME_VERSION,
true
);
});Frontend-Service registrieren (functions.php)
add_filter('block_core_social_link_get_services', function (array $services_data) {
$services_data['wikipedia'] = array(
'name' => 'Wikipedia',
'icon' => '<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.562 19.478-3.07-7.238q-.258.51-1.652 3.182t-2.068 4.057c-.051.006-.11.009-.17.009-.041 0-.082-.002-.122-.005h.005c-.019.001-.04.001-.062.001-.075 0-.15-.006-.222-.018l.008.001q-.854-2.01-2.662-6.114t-2.704-6.209c-.193-.428-.425-.796-.699-1.128l.007.008c-.315-.396-.669-.741-1.063-1.035l-.015-.011c-.287-.248-.653-.411-1.055-.447l-.007-.001q0-.052-.005-.25t-.005-.282h6.073v.521c-.301.018-.582.077-.846.173l.021-.007c-.275.092-.508.246-.692.447l-.001.001c-.104.103-.168.246-.168.403 0 .096.024.187.066.266l-.002-.003q.271.614 2.255 5.2t2.453 5.626q.32-.635 1.458-2.776t1.364-2.578q-.198-.406-1.313-2.926t-1.416-3.073q-.396-.72-2.094-.74v-.523l5.343.01v.49c-.012 0-.026 0-.04 0-.345 0-.667.096-.942.263l.008-.005q-.349.24-.13.72.344.73.906 1.974t.895 1.953q1.146-2.229 1.802-3.781.25-.573-.103-.826c-.34-.178-.742-.282-1.169-.282-.061 0-.121.002-.181.006h.008c.007-.065.011-.14.011-.216 0-.015 0-.03 0-.045v.002-.25q.666 0 1.776-.005l2.834-.015v.51c-.457.016-.882.142-1.253.351l.014-.007c-.382.203-.697.486-.931.828l-.006.009-2.219 4.604q.135.344 1.328 3.021t1.266 2.854l4.594-10.593c-.103-.271-.282-.494-.511-.648l-.005-.003c-.193-.143-.419-.256-.663-.324l-.015-.004c-.17-.043-.369-.071-.572-.08h-.006v-.524l4.792.042.01.021-.01.458c-.965.014-1.782.633-2.089 1.495l-.005.016q-5.482 12.666-5.824 13.447z"/></svg>',
);
return $services_data;
});
Schreibe einen Kommentar