het overkomt iedereen.

u vindt een thema dat u leuk vindt, u installeert het en besteedt een paar maanden genieten van het uiterlijk van uw site. Maar dan, na een paar maanden, begint het thema muf te voelen. Een beetje saai.

het enige probleem is dat u niet een paar uur naar iets nieuws wilt zoeken. Was er maar een manier om een beetje spice toe te voegen aan uw thema, een beetje flare te maken het opvallen.

voordat u uw handen omhoog in wanhoop, laat me u een eenvoudige manier om spice up uw thema zonder al te veel moeite, en zonder het toevoegen van onnodige afbeeldingen die kunnen vertragen uw site.

voer Dashicons in. Dashicons zijn lettertype iconen die werden geïntroduceerd in WordPress 3.8. Ze zijn die geweldige en coole pictogrammen die je ziet wanneer u inlogt op uw dashboard. Zou het niet cool zijn als je ze kon toevoegen aan uw thema ook?

Nou, je kunt en ik ga je laten zien hoe.

Hoe kunt u Dashicons gebruiken in uw navigatiemenu?

laten we beginnen met een eenvoudig voorbeeld. Dashicons zijn al opgenomen in WordPress sinds versie 3.8, maar je moet nog steeds om ze op te nemen om ze goed weer te geven op de voorkant van uw site; dat is, uw thema.

Stap 1: Maak uw thema-Dashicons gereed

om uw thema-Dashicons gereed te maken opent u eerst uw functies.php-bestand (Gevonden in uiterlijk>Editor-standaard zal het CSS-bestand van uw huidige thema openen. Ga je gang en zoek naar functies.php-bestand en klik erop om het te laden in de Editor.)

Stap 2: Enqueue the script

Scroll helemaal naar de onderkant en plak deze regels code aan het einde:

goed! Nu is uw thema klaar om Dashicons te gebruiken.

Stap 3: Dashicons toevoegen aan menu-items

laten we een Dashicon toevoegen voor uw Home link. Ga naar Dashicons website en selecteer het pictogram dat u wilt.

Update: Dashicons waren oorspronkelijk beschikbaar op GitHub.io, maar ze zijn sindsdien beschikbaar gesteld op WordPress.org.

Stap 4:

klik op het gewenste pictogram (in dit geval heb ik het home-pictogram geselecteerd) en klik vervolgens op HTML kopiëren. Het geeft je een pop-up venster met de code die u nodig hebt.

Stap 5:

Ga terug naar uw WordPress dashboard, klik op uiterlijk > menu ‘ s en plak de code waar het staat navigatielabel.

Als u nog steeds wilt dat het woord verschijnt, typt u het na het sluiten van de div-haakje.

klik op uw startpagina opslaan en laden. Uw home link moet nu een mooie, scherpe Dashicon weer te geven.

u kunt dit doen voor alle navigatie menu-items of alleen voor home. Herhaal gewoon de bovenstaande stappen met de bijbehorende pictogrammen. Dat was makkelijk, toch?

Hoe gebruik je Dashicons in post meta?

U kunt een stap verder gaan en Dashicons toevoegen aan uw post-meta, of met andere woorden Dashicons toevoegen voor de naam, datum, categorie of tag van de auteur; afhankelijk van uw thema en de informatie die het weergeeft.

omdat u al Dashicons in uw thema hebt opgevraagd, hoeft u nu alleen nog maar uw stijl te openen.css-bestand (of gebruik Aangepaste CSS-editor die is altijd een betere optie, zodat u niet de wijzigingen te verliezen zodra uw thema updates!), zoek de overeenkomende selector en voeg de CSS-code.

stel dat u een pictogram wilt toevoegen voor uw naam of de naam van uw auteur.

Stap 1:

eerst gaan we een pictogram kiezen dat we willen.

Stap 2:

klik er dan op en selecteer deze keer CSS kopiëren. Nogmaals, het geeft je een pop-up venster met de code die u moet plakken.

Stap 3:

open nu uw stijl.css en vind de bijbehorende selector, in dit geval -.entry-auteur. Door toe te voegen :voor en vervolgens plakken van de CSS-code die u gekopieerd van Dashicons website, de naam van de auteur zal een mooi pictogram voor het. U moet ook opgeven dat u het lettertype Dashicons gebruikt. De gewijzigde code ziet er als volgt uit:

.entry-author:before {font-family: "dashicons";content: "\f110";}

laten we ook een beetje styling toevoegen, en nu ziet de voltooide code er als volgt uit:

het eindresultaat

dus hoe zal dit er uiteindelijk uitzien?

zoiets als dit:

Er zijn zoveel manieren waarop u Dashicons kunt gebruiken – laat uw creativiteit de vrije loop en kijk wat u kunt doen.

het geheel samenvoegen

naast de bovenstaande voorbeelden kunt u Dashicons in uw backend gebruiken om verschillende pictogrammen voor verschillende posttypen op te geven, of u kunt ze gebruiken in uw posttitels, widgettitels, of als u een aangepaste Landingspagina maakt, kunt u onderscheid maken tussen verschillende pagina ‘ s van uw site.

een goed voorbeeld hiervan is de oude WP Superstars home page. Hier kunt u Dashicons zien die in gebruik zijn voor verschillende delen van de website:

Dashicons zijn niet het enige type pictogramlettertype dat u kunt toevoegen. Bekijk onze FontAwesome icons tutorial voor meer.

Bevat updates per e-mail. Op elk moment uitschrijven.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.