Icoontjes toevoegen in social media navigatiemenu bij standaard WordPress-theme

Als je een WordPress-website hebt met het standaard thema van WordPress (bijvoorbeeld Twenty Fifteen of Twenty Sixteen) dan kun je links in de navigatiebalk een social media menu instellen. Dit doe je door een aangepaste link toe te voegen aan het social menu. WP herkent dan naar welk Social Media-platform gelinkt wordt en toont het juiste icoontje. Als je meer wilt weten over de werking van dit menu en hoe je nieuwe icoontjes in het menu kunt toevoegen, lees dan verder.

Welke Social Media kun je in het menu laten verschijnen?

Als je een link plaatst in het social media menu dat niet herkend wordt door WordPress wordt er een heel neutraal icoontje getoond. Welke social media herkent WordPress eigenlijk wel? Het antwoord op deze vraag kun je terugvinden in de Stylesheet (via Weergave – bewerker/editor). Of zie hieronder wat ik erin vond qua code (het icoontjes/link gedeelte heb ik groen gemaakt):

.social-navigation {
margin: 9.0909% 0;
}

.social-navigation ul {
list-style: none;
margin: 0 0 -1.6em 0;
}

.social-navigation li {
float: left;
}

.social-navigation a {
display: block;
height: 3.2em;
position: relative;
width: 3.2em;
}

.social-navigation a:before {
content: “\f415”;
font-size: 24px;
position: absolute;
top: 0;
left: 0;
}

.social-navigation a[href*=”codepen.io”]:before {
content: “\f216”;
}

.social-navigation a[href*=”digg.com”]:before {
content: “\f221”;
}

.social-navigation a[href*=”dribbble.com”]:before {
content: “\f201”;
}

.social-navigation a[href*=”dropbox.com”]:before {
content: “\f225”;
}

.social-navigation a[href*=”facebook.com”]:before {
content: “\f203”;
}

.social-navigation a[href*=”flickr.com”]:before {
content: “\f211”;
}

.social-navigation a[href*=”foursquare.com”]:before {
content: “\f226”;
}

.social-navigation a[href*=”plus.google.com”]:before {
content: “\f206”;
}

.social-navigation a[href*=”github.com”]:before {
content: “\f200”;
}

.social-navigation a[href*=”instagram.com”]:before {
content: “\f215”;
}

.social-navigation a[href*=”linkedin.com”]:before {
content: “\f208”;
}

.social-navigation a[href*=”pinterest.com”]:before {
content: “\f210”;
}

.social-navigation a[href*=”getpocket.com”]:before {
content: “\f224”;
}

.social-navigation a[href*=”polldaddy.com”]:before {
content: “\f217”;
}

.social-navigation a[href*=”reddit.com”]:before {
content: “\f222”;
}

.social-navigation a[href*=”stumbleupon.com”]:before {
content: “\f223”;
}

.social-navigation a[href*=”tumblr.com”]:before {
content: “\f214”;
}

.social-navigation a[href*=”twitter.com”]:before {
content: “\f202”;
}

.social-navigation a[href*=”vimeo.com”]:before {
content: “\f212”;
}

.social-navigation a[href*=”wordpress.com”]:before,
.social-navigation a[href*=”wordpress.org”]:before {
content: “\f205”;
}

.social-navigation a[href*=”youtube.com”]:before {
content: “\f213”;
}

.social-navigation a[href*=”mailto:”]:before {
content: “\f410”;
}

.social-navigation a[href*=”spotify.com”]:before {
content: “\f515”;
}

.social-navigation a[href*=”twitch.tv”]:before {
content: “\f516”;
}

.social-navigation a[href$=”/feed/”]:before {
content: “\f413”;
}

.social-navigation a[href*=”path.com”]:before {
content: “\f219”;
}

.social-navigation a[href*=”skype.com”]:before {
content: “\f220”;
}

Waar staan de codes ‘fXXX’ eigenlijk voor?

Deze codes, bijvoorbeeld f220, staan voor de icoontjes. Je vindt alle mogelijke icoontjes op https://glyphsearch.com.

Het icoontje dat ik wil staat niet in de Stylesheet van WordPress, wat nu?

Als voorbeeld heb ik het over de website van een vriendin die fotograaf is. Zij wilde in haar social media menu een link naar haar profiel op Lensculture. Je kunt nu op glyphsearch.com zoeken naar een icoontje dat je mooi vindt. Selecteer hiervoor links in de navigatiebalk bij ‘copy’ voor ‘hex’ (van hexadecimal). Klik op het icoontje van je wens en de f-code is gekopieerd. Plak hem nu in bijvoorbeeld het kladblok. Nu zie je het f-nummer van het icoontje van je wens.

In de stylesheet plakken

Nu moet je in de stylesheet bij het rijtje met icoontjes van het social navigatiemenu (zie hierboven) bijvoorbeeld de code (onder de disclaimer-alinea) plakken op de juiste plek. Wat is de juiste plek? Bijvoorbeeld ergens middenin de opsomming met icoontjes. Na het plakken natuurlijk (let op: lees eerst onderstaande disclaimer) de stylesheet (style.css) opslaan.

Disclaimer

Let op: als je zelf de stylesheet gaat aanpassen is dit nooit helemaal zonder risico’s. Wat ik zelf doe is een kopie maken van de bestaande stylesheet en deze plakken in een Word-bestand. Verder weet ik dat ik tegen betaling bij mijn hostingprovider een backup kan terugzetten. Daarom neem ik af en toe het risico om zelf in bijvoorbeeld style.css of Functions.php aanpassingen te doen. Als je geen risico’s wilt lopen, roep dan de hulp in van een specialist. Het is je eigen verantwoordelijkheid als je style.css aanpast.

Code voor in de stylesheet bij bijvoorbeeld het icon van Instagram:

.social-navigation a[href*=lensculture.com’]::before {
content: “\f215”;
}

Het kan dan zijn dat er wat ruimte zit tussen het icoontje of dat je het icoontje groter of kleiner wilt hebben. Hier kun je mee spelen. Zie bijvoorbeeld onderstaande code:

.social-navigation a[href*=’lensculture.com’]::before {
content: “\f473”;
font-size:34px;
top:-5px;
left:-5px;
}

Mijn vriendin wilde uiteindelijk geen icoontje, maar gewoon de tekst LensCulture hebben in het social media menu. Hiervoor was onderstaande code nodig in de stylesheet. Er zit binnen deze code nu trouwens ook wat html-code bij voor de juiste lettergrootte en lettertype.

.social-navigation a[href*=’lensculture.com’]:before {
content: ‘LensCulture’;
font-size:15px;
font-family: “Noto Serif”,serif;
}

Et voila, als het goed is heb je met bovenstaande handleiding je social media navigatiemenu in het standaard WordPress-theme (bijvoorbeeld Twenty Fifteen of Twenty Sixteen) aangepast.

Suggestie: maak een childtheme aan

Let op: als je een update van WordPress uitvoert, gaat het icoontje dat je zo mooi hebt toegevoegd in de stylesheet verloren. Hij wordt overschreven door het stylesheet van het thema. Denk erom dat je dus na elke update elke keer het stukje code toevoegt. Nog gemakkelijker: een childtheme maken van het standaard WordPress theme dat je gebruikt. Dit doe je eenvoudig met een plugin zoals Orbisius Child Theme. De plugin-maker legt heel helder uit hoe je een childtheme maakt. Heb je hem aangemaakt en bij weergave geactiveerd, dan kun je bij weergave – editor/bewerker het childtheme rechtsboven selecteren. Nu kun je in het stylesheet van the child het stukje code voor het social media navigatiemenu kopiëren. The child overerft de templates van het hoofdthema. Alleen de Stylesheet wordt wel gerespecteerd na de update. Na een update van Wordpress blijft hierdoor je social media menu gewoon in tact.

Dankbetuigingen

Ik had mijn vriendin nooit zo goed kunnen helpen zonder de hulp van Klaas van der Linden. Man, wat is die man handig met WordPress. Een selfmade-developper in php/wordpress. Hij is erg slim en kan ook apps bouwen. Kijk maar eens op zijn website Klaasmaakt.nl.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.