Hoe te gebruiken en er het meeste uit te halen?

Iconen zijn fascinerend!

Ze hebben de kracht om snel met het publiek te communiceren door een sterke visuele verbinding tot stand te brengen.

Dit is de reden waarom pictogrammen overal veel worden gebruikt, ook op WordPress-websites.

Ook kan het saai zijn om hetzelfde thema meerdere maanden op uw site te gebruiken. Het is gebruikelijk.

En dan zul je op zoek zijn naar iets interessants, dat gebruiken, en je zult je weer vervelen,

En de cyclus gaat maar door en door…

Dus, hoe kun je die cyclus van verveling overslaan?

Dashicons zijn een uitstekende manier!

Het kan de esthetiek van uw site opfleuren en u helpen opvallen. Het zal u ook behoeden voor extra inspanningen en het overspoelen van uw site met onnodige afbeeldingen die de paginasnelheid vertragen.

Laten we dus eens kijken naar Dashicons en hoe u ze effectief kunt gebruiken op uw WordPress-website.

Wat is WordPress Dashicons?

Dashicons zijn de officiële pictogramlettertypen van WordPress die jaren geleden zijn geïntroduceerd met versie 3.8. Deze lettertypen zijn cool en geweldig om naar te kijken als je ze op je website gebruikt. Het zijn SVG-bestanden van topkwaliteit die u eenvoudig kunt schalen naar elk formaat zonder pixelvorming.

Omdat ze native WordPress-ondersteuning hebben omdat ze door hun team zelf zijn gemaakt, kun je ze direct gebruiken zonder extra scripts te laden. Er zijn ongeveer 350 pictogramlettertypen inbegrepen, die u kunt vinden in de officiële Bronnen voor WordPress-ontwikkelaars.

Ze hebben deze iconen gecategoriseerd op basis van het onderwerp, en je zou een dynamisch zoekveld kunnen zien waarmee je beschikbare iconen kunt filteren.

  Lettertypen insluiten in een MS Word-document

U kunt deze pictogrammen gebruiken op:

  • WordPress-dashboard
  • Navigatiemenu’s
  • Pagina’s en berichten
  • Metagegevens
  • Editor-elementen
  • Aangepaste plug-ins en thema’s
  • Beheerpanelen
  • Front-end ontwerp

Merk je dat ik herhaaldelijk “iconen” zeg?

Hier bedoel ik alleen pictogramlettertypen.

Geen afbeeldingen in de vorm van iconen.

Ja, er is een verschil tussen die twee.

Laten we dat ontrafelen.

Verschil tussen afbeeldingspictogrammen en pictogramlettertypen?

Pictogramlettertypen en afbeeldingspictogrammen lijken enigszins op elkaar, maar in plaats van alfabetten zijn er vectorsymbolen in pictogramlettertypen.

Is dat te technisch geworden?

Laat me dat verduidelijken.

In wezen lijken deze pictogramlettertypen op afbeeldingen die u kunt gebruiken om symbolen aan uw website toe te voegen, maar niet op een echte afbeelding.

Ze bieden u veel voordelen.

Hoe?

Ontdek het in het volgende gedeelte.

Waarom zou je ze gebruiken?

  • Schaalbaar zoals teksten die op uw website worden gebruikt, omdat het lettertypen zijn
  • Lichtgewicht dat geen invloed heeft op de laadsnelheid van uw pagina in vergelijking met afbeeldingen
  • In staat om de pictogramkleur in te stellen via CSS en extra eigenschappen toe te voegen, zoals verloopkleur, schaduw, enz.
  • Geweldig in het opslaan van te veel HTTP-verzoeken doordat u lettertypen in één keer kunt laden, die u op al uw pagina’s kunt gebruiken. Als u veel afbeeldingen op de site gebruikt, moet u veel verzoeken indienen om ze op te halen, waardoor de laadtijd van de pagina toeneemt.
  • Eenvoudig te gebruiken en aan te passen dan afbeeldingen. U kunt herkenbare en creatieve symbolen toevoegen zonder dat u ze elke keer opnieuw hoeft te maken als u een pictogram voor een videospeler, e-mail, muziek of iets anders nodig hebt.
  • Grotere toegankelijkheid omdat ze rechtstreeks in WordPress zijn ingebouwd

Hoe ze te gebruiken?

Het gebruik van Dashicons is geen rakettechniek.

Geloof me; Ik ken beide :0

Volg gewoon enkele onderstaande stappen om aan de slag te gaan met WordPress Dashicons.

  Hoe toetsregistratie door HP audiostuurprogramma's op Elitebooks te blokkeren

Stap 1: Schakel Dashicons in op uw WordPress-site

Voordat je begint, schakel je Dashicons in waar je bijvoorbeeld een thema nodig hebt. Hiervoor moet je een paar codes toevoegen aan het bestand function.php.

Om het te doen:

  • Ga eerst naar de Thema-/Uiterlijk-editor vanuit uw WordPress-dashboard.
  • Open het bestand function.php.
  • Scroll naar het einde van het bestand en voeg een paar regels code toe om scripts in de wachtrij te zetten
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Het bovenstaande voorbeeld is om Dashicons op de frontend in te schakelen.

Zorg ervoor dat u een kindthema maakt voordat u het bestand functions.php bewerkt. Het is omdat als u het themabestand rechtstreeks bewerkt en er komt een update voor dat thema, alle wijzigingen die u in het bestand aanbrengt, worden overschreven.

Stap 2: Vind Dashicon HTML- en CSS-codes

WordPress.org biedt een bibliotheek met Dashicons, waarmee je CSS- en HTML-codes kunt vinden die bij elk pictogram horen. Ga hier naar Resources voor ontwikkelaars om de Dashicons te vinden die je wilt gebruiken en dan:

  • Klik op het icoontje van je wens.
  • Kies tussen “Copy CSS” of “Copy HTML” door erop te klikken.
  • Nu ziet u een pop-upvenster. Kopieer gewoon de code naar het klembord.
  • Bepaal waar u het pictogram wilt gebruiken, zoals thema’s, metagegevens, navigatiemenu, enz.
  • Plak de gekopieerde code in de tekstwidget of teksteditor van de gekozen plaats.
  • Pas het uiterlijk van pictogrammen aan met behulp van aangepaste CSS

Dat is het.

Bovendien hebben alle pictogrammen standaard een grootte van 20 pixels. U kunt het wijzigen met behulp van de CSS-elementen van opties zoals Inspect Element van Google Chrome of FireBug van Firefox.

Hoe haal je het meeste uit WordPress Dashicons?

U hebt gezien hoe u Dashicons op uw site kunt gebruiken en nu gaan we kijken hoe het voor specifieke doeleinden kan worden gebruikt.

1. Het navigatiemenu gebruiken

Volg de onderstaande stappen om pictogrammen aan het menu toe te voegen:

  • Ga naar Menu’s/Uiterlijk vanaf het dashboard
  • Kopieer HTML-codes die zijn ontworpen voor het menupictogram van WordPress.org
  • Plak het op het “Navigatielabel” op het dashboard
  • Klik op de knop “opslaan” en laad de startpagina. Het zou het coole en scherpe pictogram moeten weergeven.
  Hoe Lyft Ride te annuleren

2. Gebruik op post-meta

U kunt Dashicons vlak voor een datum, auteursnaam, tag of categorie gebruiken op basis van het thema plus de weergegeven gegevens.

Aangezien u Dashicons al in de wachtrij heeft geplaatst, opent u het bestand style.css. Anders kunt u ook kiezen voor een aangepaste CSS-editor, waarmee u uw wijzigingen niet kwijtraakt na thema-updates. Voeg vervolgens uw CSS-code toe nadat u een overeenkomende selector hebt gevonden.

3. Op de WordPress-backend

Als u verschillende pictogrammen wilt opnemen voor verschillende aangepaste berichttitels, berichttypen of widgets, is dat eenvoudig te doen.

Een snelle tip: maak een shortcode aan

Om Dashicons gemakkelijk te gebruiken, kunt u er een shortcode voor maken. Het is handig, vooral wanneer u een website maakt voor uw klanten die het gemakkelijk zouden vinden om Dashicons in te voegen zonder met de codes te rommelen.

Conclusie

Ik hoop dat het aan jouw kant vrij duidelijk is met betrekking tot WordPress Dashicons. Ze dekken niet alleen de esthetiek van uw website, maar zijn ook gebruiksvriendelijk en verbeteren de laadsnelheid van de pagina.

En weet je, ‘beauty and brains’ is een zeldzame combinatie.

Dus haast je, gebruik die opvallende Dashicons op je WordPress-site!

gerelateerde berichten