Share
Ik weet zeker dat veel van jullie die WordPress-thema's maken, pictogrammen nodig hebben. Pictogrammen zijn een geweldige manier om betekenis toe te voegen aan een knop of berichten gerelateerd aan tags of permalinks. Een pictogramlettertype is een geweldige manier om eenvoudig een pictogram toe te voegen aan uw thema in plaats van ze zelf te maken.
Er zijn nogal wat geweldige pictogramlettertypen die er zijn. Als u Bootstrap gebruikt voor uw thema, is het pictogram van het Glyphicons-pictogram ingebouwd. Voor deze post ga ik me concentreren op een van de meest populaire: Font Awesome.
Natuurlijk zijn er andere manieren om pictogrammen aan uw thema toe te voegen, maar ik wil het hebben over enkele van de voordelen van het gebruik van een pictogramlettertype in plaats van afbeeldingen, sprites, enz..
Het eerste (en ik denk het beste) voordeel is dat het een lettertype is. Dit betekent dat u alle voordelen van styling krijgt die u krijgt met normale tekst. U kunt de kleur en de grootte van een pictogram eenvoudig wijzigen met een beetje CSS. Het wordt ook zo scherp weergegeven als je apparaat toestaat. Dat wil zeggen, je hoeft je geen zorgen te maken over het maken van netvlies-ready graphics.
Omdat alle pictogrammen in één lettertypebestand zijn opgenomen, betekent dit dat er maar één HTTP-aanvraag is om te laden. Dit kan u behoorlijk wat pagina-laadprestaties opleveren als u een aantal pictogrammen gebruikt. U kunt ook de CSS opnemen die nodig is om de pictogrammen met de andere te renderen .css bestanden die u laadt voor uw thema.
Er zijn een aantal manieren om Font Awesome aan uw thema toe te voegen. Ze hebben op verschillende manieren manieren beschreven om aan uw website toe te voegen op hun startpagina.
Waarschijnlijk de gemakkelijkste manier om Font Awesome toe te voegen aan je thema is om BootstrapCDN te gebruiken. Het enige wat u hoeft te doen is het volgende toevoegen aan de in je thema's header.php het dossier:
Of, beter nog, gebruik de wp_enqueue_style functie.
Een andere manier om toe te voegen aan je thema zou zijn om het Font Awesome GitHub Project naar beneden te halen en toe te voegen aan de root van je thema. U zou dan het lettertype in de wachtrij moeten plaatsen met behulp van de wp_enqueue_style functie.
Een geavanceerde manier is om Sass of LESS te gebruiken, afhankelijk van wat u gebruikt in het project van uw thema. Je zou het willen toevoegen font-awesome map in de hoofdmap van uw project, dan zult u enkele bewerkingen moeten uitvoeren.
Open je project font-awesome / minder / variables.less of font-awesome / SCSS / _variables.scss en bewerk de @ Fa-font-path of $ Fa-font-pad variabele om naar uw lettertypemap te verwijzen zoals:
$ fa-font-path: "fonts";
U moet de door u gekozen CSS-preprocessor van het project opnieuw compileren om de wijzigingen op te halen.
Als u bekend bent met het gebruik van Bower, is er nog een andere geavanceerde manier. Je zou de bestanden in de bower_components / font-awesome map tijdens uw build-taken in plaats van ze aan uw project toe te voegen.
U moet Font Awesome installeren door te starten bower installeert font-awesome --save en dat zou het toevoegen aan je project bower.json het dossier. U zou dan de Sass- of LESS-bestanden van uw thema naar de juiste bestanden moeten verwijzen om uw te bouwen .css het dossier. Wellicht wilt u ook de functie grunt-contrib-copy gebruiken om de lettertypen naar uw eigen map in uw project te kopiëren.
In mijn voorbeeldproject kunt u zien hoe u dit doet.
Zodra je Font Awesome aan je thema hebt toegevoegd, kun je ze gaan gebruiken in je thema. Elk thema is duidelijk anders, maar ik zal enkele voorbeelden laten zien van dingen die voor de meeste thema's relatief universeel kunnen zijn.
Font Awesome wordt geleverd met een aantal van de populaire sociale netwerk- en merkpictogrammen. Meestal is een sociaal pictogram een link, dus we kunnen de pictogramklasse als zodanig aan de ankertag toevoegen,
U kunt een voorbeeld zien van het toevoegen van meerdere pictogrammen in de footer.php bestand in mijn voorbeeldproject hier.
Een andere geweldige plek om pictogrammen te gebruiken is in de metagegevens van je berichten, zoals ik eerder al zei. De drie die ik in het voorbeeldproject heb toegevoegd, zijn de reactiekoppeling, tags en permalink.
Hier zijn voorbeelden voor elk:
Nieuw toevoegen ',' standaard '), __ (' 1 ',' standaard '), __ (' % ',' standaard '), ","); ?>
Accentsconagua
'. __ ('% 1 $ s', 'tuts-font-awesome'). '', $ tag_list); ?> ">
Je kunt al deze voorbeelden in mijn voorbeeldprojecten bekijken loop.php bestand hier.
Het laatste voorbeeld zijn de post paginatielinks. Ik voeg graag chevrons toe voor 'Ouder' en vóór 'Nieuwer'. Als u de next_posts_link en previous_post_links in je project, wil je een span toevoegen met de juiste klasse, zoals:
Oudere ',' tuts-font-awesome ')); ?>',' tuts-font-awesome ')); ?>Je kunt al deze voorbeelden in mijn voorbeeldprojecten bekijken pagination.php bestand hier.
U zou nu alles moeten hebben om met Font Awesome aan de slag te gaan in uw WordPress-thema. Ik heb een paar voorbeelden gegeven waarbij ik regelmatig iconen gebruikte. Er is nog veel meer geweldig om Font Awesome dat je zou kunnen uitproberen, zoals het stapelen, draaien en geanimeerde iconen. Ik zou willen voorstellen om de Font Awesome Examples-pagina te bekijken voor alle extra awesomeness.
