Je WordPress Website pimpen – Daar is geen Webdesigner voor nodig!

Verfraai je website in simpele stappen

Allereerst moet mij iets van het hart: Ik heb lang nagedacht voor ik besloot de titel van dit artikel te gaan gebruiken. Ik ben nog van een generatie waar ‘pimpen’ vooral de betekenis had van het uitbuiten van anderen. Tegenwoordig kun je echter alles pimpen: Je auto, je huis, je telefoon… en het maakt het alleen maar fraaier. Dus waarom zouden we onze website ook niet durven ‘pimpen’.

Tekst met een icoontje

Met WordPress is veel mogelijk. Een aantal onderdelen van WordPress is echter nogal ‘standaard’ en standaard kan vaak de bijbetekenis van ‘saai’ krijgen. Twee belangrijke onderdelen voor de navigatie in jouw WordPress site lijken de afgelopen jaren nauwelijks ‘meegegroeid’ te zijn en bieden nog steeds dezelfde saaie aanblik als een aantal jaar geleden. De widgets en de menu’s.

Welke software je ook opstart op je computer, je bent gewend aan menu’s en ’toolvensters’ (vergelijkbaar met widgets) met een icoon bij de tekst. Het verfraait niet alleen de aanblik, maar onze hersenen herkennen eenvoudige pictogrammen sneller dan woorden. Een huisje zal al snel worden herkend als ‘Home’. Ongeacht de omschrijving die hier achter staat.

Menu Icons

Wat zou het toch mooi zijn als je in WordPress ook gebruik zou kunnen maken van icoontjes voor de menuteksten… en natuurlijk raad je het al. Ik zou geen heel artikel aan dit onderwerp wijden, als er niet al een oplossing voorhanden zou zijn. Een plug-in met de eenvoudige naam ‘Menu Icons‘. De werking van deze plugin is al een eenvoudig. Na installatie komt er in de ‘menu editor’ van WordPress een extra linkje bij ieder menu item. ‘Select Icon’. Klik je daarop dan krijg je een indrukwekkend scherm te zien met een overvloed aan iconen en een aantal termen, waardoor je wellicht even door de bomen het bos niet meer ziet.

Icon Fonts

Menu Icons maakt namelijk gebruik van zogenaamde ‘Icon font libraries’. Je bent natuurlijk bekend met fonts als lettertype, maar waarschijnlijk is het je ook al heel lang geleden opgevallen, dat sommige fonts geen lettertypes maar plaatjes zijn. WinDings, WinBats en WebDings zijn bijvoorbeeld een paar bekende voorbeelden.

Iconen zijn vaak onmogelijke ‘dingen’ om in een webpagina te verwerken. Wanneer er veel kleine bestandjes geladen moeten worden, vertraagd dat de laadtijd van de pagina enorm. Vandaar dat al snel het idee ontstond om veel gebruikte pictogrammen niet (alleen) als losse plaatjes te gebruiken, maar deze te verwerken in font-bestanden. Je laadt dus slechts 1 bestand om honderden afbeeldingen (in elk gewenst formaat en iedere denkbare kleur) tot je beschikking te hebben. Een aantal van deze icon-font libraries is heel populair geworden. DashIcons (de WordPress ‘eigen’ plaatjes), Elusive Icons, FontAwesome (mijn persoonlijke favoriet), Foundation, Genericons en Fontello.

Menu Icons geeft je de mogelijkheid om binnen deze Icon libaries makkelijk te selecteren. Wil je bijvoorbeeld alle Social Media icons van FontAwesome zien, kies je links het font en boven in de ‘selectie’ voor Social Media. Uiteindelijk klik je het icon wat je aan je menu gekoppeld wilt hebben.

Of afbeeldingen

Bieden de fonts geen uitkomst, kun je nog altijd een afbeelding uploaden.

Wil je niet alleen icoontjes bij je menu opties, maar ook bij de titels van je widgets kan dit ook. Je kunt terecht de makers van Menu Icons verwijten, dat ze niet erg origineel waren bij het bedenken van de naam… Gelukkig had de maker van Widget Icon… eigenlijk hetzelfde probleem.

Ook Widget Icon is kinderlijk eenvoudig in de bediening. Er is wat minder keus uit icon libraries, maar dat kan ook als voordeel gelden. In het ‘Weergave – Widgets’ scherm staan onder aan de widget een aantal velden met betrekking tot het te kiezen icoon die eigenlijk voor zichzelf spreken. Er is geen optie eigen plaatjes te gebruiken.

Het toevoegen van iconen aan onderdelen van je website geeft een subtiel, maar merkbaar effect. Het nadeel van subtiele dingen is echter, dat ze nauwelijks aandacht vragen.

Uitgelichte menu items

Soms moet iets in het oog springen. Je wilt, dat bij het eerste bezoek aan je website de bezoeker een bepaald menu item meteen duidelijk ziet! Je wilt het menu item knalrood, vurig oranje of helwit (afhankelijk van de kleur van je menubalk) af laten steken tegen de rest van het menu. Helaas heeft WordPress hier geen ‘standaard’ plugin voor, maar met een beetje knutselwerk kun je dit toch voor elkaar krijgen. Omdat niet ieder thema dezelfde benamingen voor menu-onderdelen gebruikt, gaat mijn voorbeeld alleen op voor mensen die een op ‘Genesis’ gebaseerd thema gebruiken.

En houd je vast, want we gaan nu even heel enge dingen doen. We gaan namelijk code typen in CSS. Om dat mogelijk te maken hebben we een speciale plugin nodig die ‘My Custom CSS‘ heet, of een thema wat het ingeven van CSS toestaat. We gaan uit van de plugin. Na het installeren is er een optie in het Dashboard menu bijgekomen. My Custom CSS. Klik je daar op, krijg je een box waarin je jouw CSS code in kunt geven.

Een voorbeeld

Stel, we willen de achtergrondkleur voor het uitgelichte menuitem knalrood hebben. Omdat we een oranje font gebruiken in het menu, zal de tekst op rood niet uitkomen, dus die willen we spierwit. Wat gegoogle op het Internet leert ons dat knalrood een rgb waarde van 255,0,0 heeft en wit een waarde van 255,255,255. Of een hex waarde van #FF0000 en #FFFFFF. Wil je kleuren hebben die beter bij je website passen, biedt Kuler goede mogelijkheden om een passende kleur te vinden. We besluiten de speciale instellingen mnu-highlighter te noemen. Voor een Genesis gerelateerd thema geef je onderstaande code in bij het My Custom CSS tekstvlak:

.mnu-highlighter {
    background-color: #ff0000;
}

.mnu-highlighter a {
    color: #ffffff;
}

Dit vertelt dat we alles met deze ‘class’ een rode achtergrondkleur en witte tekst willen geven.

De volgende stap is het toekennen van die class aan het menu. Maar… Wat een grote schrik: Je kunt aan het menu geen class toewijzen. Deze functie is namelijk verstopt. Klik je echter op ‘Scherminstellingen’ rechts boven in het scherm van de menu editor, zie je daar een aantal handige ‘aankruisvakjes’. Vink ‘CSS Classes’ aan en in je menu-editor komt er een veld bij om de CSS Class in te voeren. Hier geef je ‘mnu-highligher’ (zonder de punt er voor en zonder de quotes!) in bij het menu item waar het betrekking op heeft, je slaat het op en Presto! Je hebt een opvallend menuitem.

Dit artikel is inmiddels wat ouder. En WordPress is door geëvalueerd… gelukkig. Wil je weten, wat er ondertussen allemaal mogelijk is met vormgeving in WordPress, zou ik als ik jou was zeker de blogartikelen over Elementor eens lezen!