WordPress (FSE) Social Navigation – eigene Icons verwenden

So ganz leuchtet mir nicht ein, warum die in WordPress vorhandenen Social Icons so genommen werden müssen wie sie sind, und es keinen Filter gibt, das eine oder andere zu überschreiben. Bekommt man sein Layout vom Designer, hat der oft andere Vorstellungen davon, wie die Icons beschaffen sein sollen. Doch wie damit umgehen? – Ein Plugin für eigene Icons installieren? Oder ein Plugin für ein weiteres Social Menü installieren? Lässt einen das dann überhaupt eigene Icons verwenden?

Um auf eine möglichst nahe-liegende Lösung zu kommen, untersuchte ich die Datei social-link.php, unter wp-includes/blocks. Dort werden in der Funktion block_core_social_link_services() in einem array die SVGs angelegt. Mit der Funktion block_core_social_link_get_icon( $service ) erhält man das Inline-SVG-Markup des Icons für einen bestimmten Dienst, z.B. Instagram.

Nun kann man sich in der function.php des Childthemes eine Funktion mit eigenen Inline-Icons anlegen (müssen ja nicht alle sein, resp. nur die überschrieben werden, die man verwenden möchte).

function custom_social_link_services() {
	$services_data = array(
		'instagram' => array(
			'name' => 'Instagram',
			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M6.94026..."></path></svg>',
		),
		'flickr'  => array(
			'name' => 'flickr',
			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M13.582..."></path></svg>',
		),
		'youtube'  => array(
			'name' => 'YouTube',
			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M15.27..."></path></svg>',
		),
		'behance'  => array(
			'name' => 'Behance',
			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M7.799..."></path></svg>',
		),
...
	);

	return $services_data;
}

Über den render_block-Filter betroffene Icons dann durch die eigenen ersetzen (nur für den Fall, dass überhaupt eines vorhanden ist).

add_filter( 'render_block', 'custom_replace_social_icons', 10, 2 );
function custom_replace_social_icons( $block_content, $block ) {
	if ( 'core/social-link' !== $block['blockName'] ) {
		return $block_content;
	}
	$service = strtolower($block['attrs']['service']);
	$newicons = custom_social_link_services();
	if ( !array_key_exists( $service, $newicons ) ) return $block_content;
	$default = block_core_social_link_get_icon( $service );
	$newicon = $newicons[$service]['icon];
	return str_replace( $default, $newicon, $block_content );
}

Das originale SVG-Inline-Icon kann auch durch Text oder eine Bilddatei ersetzt werden (SVG oder PNG) – es muss nicht zwingend auch Inline-SVG sein. So geht es allerdings am einfachsten.