Wil je je WordPress-navigatiemenu stylen met wat unieke iconen?
Wat als ik je vertel dat jeu dat helemaal gratis kan doen, zonder een plug-in te gebruiken en het is nog een eens heel moeilijk!
Wat gaan we doen?
In deze post zullen we een paar iconen downloaden om toe te voegen aan ons WordPress navigatiemenu. We zullen deze pictogrammen uploaden naar de WordPress Media Library en tot slot zullen we de pictogrammen gebruiken voor onze WordPress-menukoppelingen door middel van een paar regels CSS.
Geen plug-ins?
Ik weet dat een populaire en gemakkelijke manier om iconen aan je WordPress-menu toe te voegen, is door het installeren van de Better FontAwesome-plug-in.
Dit is zeker een goede manier om dit te doen, maar... soms is het icoon dat je zoekt niet beschikbaar in de Font Awesome-bibliotheek, of heb je zojuist een heel cool icoon online gevonden dat je graag wilt laten zien op je website, maar weet je gewoon niet hoe.
Als je deze tutorial volgt, zal je geen probleem hebben om je eigen iconen toe te voegen.
Voordat we beginnen
Voor deze tutorial heb je een child-thema nodig. De eenvoudigste manier om een child-thema te maken, is met een plug-in, zoals Child Theme Generator. Nadat je klaar bent met het maken van je child-thema, kan je deze plug-in direct verwijderen.
Zoek de iconen
Met alle bronnen die online beschikbaar zijn voor gratis iconen, is deze stap een makkie.
Sommige goede websites voor gratis iconen zijn Flaticon, Freepik en Icons8.
Voor dit voorbeeld gebruik ik Flaticon. Ga naar flaticon.com en zoek een aantal iconen op die je wilt gebruiken.
Voor een goede gebruikerservaring kies je een icoon dat de link vertegenwoordigt, dus doe niet te gek, anders kunt breng je misschien je bezoekers in verwarring.
Kies een klein formaat dat past bij de lettergrootte van je menu. De grootte van mijn icoon is 32px.
Download de iconen en sla ze op. Het is misschien handig om de bestandsnaam kort en eenvoudig te houden voor later.
Upload de iconen naar WordPress
In de linkerzijbalk van je WordPress-dashboard, plaats de muis op Media en kies Nieuwe toevoegen.
Blader naar de bestanden om ze te uploaden of sleep ze naar de rechthoek.
Nu zijn de iconen te gebruiken in WordPress.
Aan de rechterzijde zie je de bestands-URL ( bijv. http://example.com/wp-content/uploads/2021/04/house.png )
Kopieer en plak de link in bijvoorbeeld Kladblok, want we zullen dit later gebruiken om naar het bestand te verwijzen in CSS .
Voeg een CSS-klasse toe aan de menulinks
Nu moeten we een klasse toevoegen aan de menu links, waaraan we een icoon willen toevoegen.
Kies aan de linkerkant van het WordPress-dashboard Uiterlijk -> Menu's. Helemaal bovenaan aan de rechterkant is een knop waar staat Schermopties. Klik erop en selecteer het selectievakje CSS-klassen.
Dit schakelt de optie in om een CSS klasse toe te voegen.
Open hieronder het menu, klik op een link, voor mij is dat "Home" en je ziet een veld waar je een CSS klasse toe kunt voegen.. Mijn .png-bestand heet house.png en ik wil het gebruiken voor de Home-link, dus ik gebruik ik de klasse house. Sla het menu op..
Voeg de CSS toe
Dit is het moeilijkste deel, de CSS. Ik probeer het zo eenvoudig mogelijk te houden, daarom zullen we voor dit voorbeeld alles stapsgewijs uitvoeren vanuit het WordPress Dashboard.
Kies in de linkerzijbalk Uiterlijk en dan Thema-editor. In styles.css zullen we CSS toevoegen aan de menu klasse. In het voorbeeld gebruik ik de class house.
Deze code voegt een icoon toe aan de linkerkant van de menu link. Hier een voorbeeld voor mijn house.png en menu link klasse house.
background-image: url() Plak hier de URL die je eerder uit de mediabibliotheek hebt gekopieerd.
background-size Dit bepaalt de grootte van je icoon. Houd het onder de werkelijke grootte om het icoon scherp te houden.
background-repeat Hierdoor wordt het icoon slechts één keer weergegeven.
background-position Met "Left" wordt het icoon aan de linkerkant van de menulink geplaatst.
padding-left Creëert een marge tussen het icoon en de menukoppeling. Speel ermee voor de juiste resultaten.
Herhaal de bovenstaande stappen voor de andere links totdat alle menukoppelingen een icoon hebben.
Finito!
En hier het resultaat, je eigen unieke WordPress-menu met je zelfgekozen iconen!
Ik hoop dat je veel plezier beleeft aan het volgen van deze tutorial en dat je menu er fantastisch uitziet!
Reageer hieronder als je vragen hebt en check het blog voor meer tutorials.