Theme TwentySeventeen: wie bekomme ich das Socialmenü angezeigt?

Das Social-Menü für TwentySeventeen wird dort angelegt und bearbeitet, wo auch alle anderen Menüs zu finden sind, unter Design > Menüs .

Dort mit erstelle ein neues Menü ein neues Menü anlegen, ihm einen Namen (z.B. Social Links) geben, als Position im Theme Social-Links-Menü anklicken und das Menü speichern.

Im nächsten Schritt aus den verfügbaren Elementen in der linken Spalte Individuelle Links öffnen. Hier weden die ULRs der Socialprofile der Reihe nach angegeben. Entscheidend ist die jeweilige Plattform-URL. Der Linktext kann hingegen beliebig sein.

Zum Beispiel sieht ein Link zu einer Facebookseite so aus:
URL: https://facebook.com/webentwicklerin
Link-Text: Folge uns auf Facebook

Dieser Link wird mit dem Button Zum Menü hinzufügen Bestandteil desselben. Wenn alle eingetragen sind, muss das Menü gespeichert werden. Ist ein Icon für eine Plattform vorhanden, wird dieses dargestellt. Für weniger allgemeine Plattform-Links wird ein Standard-Icon verwendet (Symbol recht, für einen Link zum Xing-Profil).

Eigene SVG-Icons im Childtheme von TwentySeventeen verwenden

Wer allerdings die verfügbaren Icons mit eigenen erweitern möchte, kann auch das tun, oder auch sämtliche Theme-Icons durch eigene ersetzen. Allerdings sollte man sich hierfür ein wenig mit SVG auskennen, und wie man an die Pfade gelangt. Nachfolgendes Beispiel fügt den Parent-Theme-Icons lediglich ein Social Icon (für Xing) hinzu.

Childtheme svg-icons.svg

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
	    <symbol id="icon-xing" viewBox="0 0 16 16">
	        <path class="path0" d="M2.431 3.159c-0.138 0-0.256 0.050-0.316 0.144-0.059 0.1-0.050 0.225 0.013 0.353l1.559 2.7c0.003 0.006 0.003 0.009 0 0.013l-2.45 4.331c-0.063 0.128-0.059 0.256 0 0.353 0.059 0.094 0.163 0.156 0.3 0.156h2.306c0.344 0 0.513-0.234 0.628-0.447 0 0 2.397-4.241 2.491-4.406-0.009-0.016-1.588-2.766-1.588-2.766-0.116-0.203-0.287-0.431-0.644-0.431h-2.3z"></path>
		    <path class="path1" d="M12.125 0c-0.344 0-0.494 0.216-0.619 0.441 0 0-4.972 8.816-5.134 9.106 0.009 0.016 3.278 6.016 3.278 6.016 0.116 0.203 0.291 0.441 0.644 0.441h2.306c0.137 0 0.247-0.053 0.306-0.147 0.063-0.1 0.059-0.228-0.006-0.356l-3.25-5.947c-0.003-0.006-0.003-0.009 0-0.016l5.109-9.034c0.063-0.128 0.066-0.256 0.006-0.356-0.059-0.094-0.169-0.147-0.306-0.147h-2.334z"></path>
		</symbol>
    </defs>

Einbinden der Custom SVG-Daten in der functions.php

/**
 * Add Custom SVG definitions to the footer.
 */
function mychildtheme_include_svg_icons() {
	// Define SVG sprite file.
	$svg_icons = get_stylesheet_directory() . '/assets/images/svg-icons.svg';

	// If it exists, include it.
	if ( file_exists( $svg_icons ) ) {
		require_once( $svg_icons );
	}
}
add_action( 'wp_footer', 'mychildtheme_include_svg_icons', 9999 );

SVG-Liste erweitern

function mychildtheme_social_links_icons( $icons ) {
	// Supported social links icons.
	$icons['xing.com']   = 'xing';
	return $icons;
}
add_filter( 'twentyseventeen_social_links_icons', 'mychildtheme_social_links_icons' );