Theme TwentySeventeen: wie bekomme ich das Socialmenü angezeigt?

ice 552531 1920
neues menu sociallinks

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).

twentyseventeen svg icons ohne xing

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' );
twentyseventeen svg icons erweitert

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable