Het overkomt iedereen.

Je vindt een thema dat je bevalt, je installeert het en geniet een paar maanden van het uiterlijk van je site. Maar dan, na een paar maanden, begint het thema afgezaagd aan te voelen. Een beetje saai.

Het enige probleem is dat je geen zin hebt om een paar uur te zoeken naar iets nieuws. Was er maar een manier om een beetje pit aan je thema toe te voegen, een beetje flair om het te laten opvallen.

Voordat je je handen in de lucht gooit, laat me je een eenvoudige manier zien om je thema op te leuken zonder al te veel moeite, en zonder onnodige afbeeldingen toe te voegen die je site zouden kunnen vertragen.

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

Nou, dat kan en ik zal 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 u moet ze nog steeds opnemen om ze goed te kunnen weergeven op de voorkant van uw site; dat wil zeggen, uw thema.

Stap 1: Maak uw thema Dashicons klaar

Om je thema Dashicons klaar te maken open je eerst je functions.php bestand (te vinden in Appearance>Editor - standaard wordt het CSS bestand van je huidige thema geopend. Ga op zoek naar functions.php en klik erop om het te laden in Editor).

Stap 2: Enqueue het script

Scroll helemaal naar beneden en plak deze regels code aan het eind:

 /Enqueue het Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Goed, nu is je thema klaar om Dashicons te gebruiken.

Stap 3: Dashicons toevoegen aan menu-items

Laten we een Dashicon toevoegen voor uw Home link. Ga naar de Dashicons website en selecteer het icoon dat u bevalt.

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

Stap 4:

Klik op het gewenste pictogram (in dit geval heb ik het home-pictogram geselecteerd) en klik dan op Copy HTML. Je krijgt dan een pop-up venster met de code die je nodig hebt.

Stap 5:

Ga terug naar je WordPress dashboard, klik op Appearance> Menus en plak de code precies daar waar staat Navigation Label.

Als u toch wilt dat het woord verschijnt, typ het dan na de afsluitende beugel.

Klik op opslaan en laad je startpagina. Je startlink zou nu een mooi, helder Dashicon moeten tonen.

U kunt dit doen voor alle onderdelen van het navigatiemenu of alleen voor home. Herhaal 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, oftewel Dashicons toevoegen voor de naam van de auteur, datum, categorie of tag; afhankelijk van uw thema en de informatie die het weergeeft.

Omdat je Dashicons al in je thema hebt ingeschakeld, hoef je nu alleen nog maar je style.css bestand te openen (of de Custom CSS editor te gebruiken, wat altijd een betere optie is zodat je de wijzigingen niet kwijtraakt als je thema wordt bijgewerkt!), de bijbehorende selector te vinden en de CSS code toe te voegen.

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

Stap 1:

Eerst kiezen we een icoontje dat we willen.

Stap 2:

Klik er dan op, en selecteer deze keer Kopieer CSS. Opnieuw krijg je een pop-up venster met de code die je moet plakken.

Stap 3:

Open nu je style.css en zoek de bijbehorende selector, in dit geval - .entry-author. Door :before toe te voegen en dan de CSS code te plakken die je gekopieerd hebt van de Dashicons website, krijgt de naam van de auteur een mooi icoontje ervoor. Je moet ook aangeven dat je het Dashicons lettertype 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 zo uit:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

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.

Alles samenvoegen

Naast de bovenstaande voorbeelden kunt u Dashicons in uw backend gebruiken om verschillende pictogrammen te specificeren voor verschillende berichttypes, of u kunt ze gebruiken in uw berichttitels, widgettitels, of als u een aangepaste landingspagina maakt, kunt u onderscheid maken tussen verschillende pagina's van uw site.

Hier is een basisvoorbeeld van wat je ermee zou kunnen maken: