Customize WordPress Theme

Nu jullie meer weten over WordPress thema’s, gaan we de standaard WordPress thema opties aanpassen. Dit doen we via de Customize WordPress Theme. Om de customizer te open, gaan we naar Dashboard > Weergave > Customizer. Nu opent de website met aan de linker de standaard thema opties.

Of we kunnen het openen via de ‘Thema’s’ scherm. Via de Dashboard > Weergave > Thema’s kunnen we naar het ‘Thema’s’ scherm navigeren. Hier zie je welk thema geactiveerd is. Klik vervolgens op ‘Customizer.

We hebben nu de Customize WordPress Theme geopend van de thema Twenty Twenty.

Aan de linkerkant kunnen de thema opties vinden.

Bovenaan staat wat je aan het aanpassen bent, wij passen nu de website aan, om dit aan te geven gebruiken ze de sitetitel. De sitetitel kun je aanpassen via de ‘Site-identiteit’ tab. Daaronder bevindt zich de actieve thema van de website. Als je op de knop ernaast ‘Veranderen’ klikt kun je de thema veranderen. Na het klikken van de knop kun je alle geïnstalleerde thema’s zien. Ook kun je nieuwe thema’s installeren. Om dit te kunnen doen moet je het vinkje van WordPress.org-thema’s aanvinken.

Verander de thema niet, zodra je thema veranderd zullen de opties van de customizer ook veranderen. Elk thema heeft zijn eigen standaard opties.

Nu gaan we starten aan de thema opties. De thema opties beginnen vanaf de ‘Site-identiteit’. Open nu het tab ‘Site-identiteit’.. De naam zegt het al. Hier bevinden zich alle identiteit onderdelen, zoals naam van de website, de logo en het favicon.

Bovenaan kun je je eigen logo toevoegen. Dit heeft geen speciale grootte nodig. Na het toevoegen van de logo moet je niet vergeet om op ‘Publiceren’ te klikken, als je dit niet goed zal het niet gepubliceerd, dus niet opgeslagen worden. Bovenaan de website kun je de logo dan terug vinden.

Als je de logo toch niet zo mooi vindt kunnen we deze ook veranderen via de knop ‘Logo veranderen’. Ook kunnen we de logo verwijderen van de website door op het knopje ‘Verwijderen’ te klikken.

Na de logo zien we de ‘Sitetitel’ en ‘Ondertitel’, de sitetitel en ondertitel worden bovenaan de browser, pagina tab getoond.

Zodra we de sitetitel of ondertitel aanpassen zal dit ook gelijk aangepast worden in de pagina tab. In de browser pagina tab zien we ook een WordPress logo, dit willen wij natuurlijk niet. Wij willen hier ons eigen logo zetten, dit doen wij via de ‘Favicon’ optie. Let er wel op dat deze logo vierkant moet zijn en minimaal 512 x 512 pixels moet zijn. Voeg een favicon toe. Resultaat:

Wordt –>

We hebben de website geïdentificeerd. Nu kunnen we verder naar de volgende thema optie. Ga terug via het pijltje links boven.

Nu gaan we verder met het volgende tab, ‘Kleuren’. Klik op kleuren. We zien hier 3 instellingen:

Met deze opties kun je de kleuren bewerken.

Header achtergrondkleur
Footer achtergrondkleur
Primaire kleuren

Hierboven kunnen we zien welke opties waarvoor nodig zijn. Nu gaan we alle kleuren veranderen naar wens. Begin bij het veranderen van de ‘Achtergrondkleur’. Dit is een erg handige en slimme optie. Zet de achtergrondkleur bijvoorbeeld eerst op wit en dan op zwart.

Je ziet dat alle titels en teksten vanzelf van kleur veranderen. Dit is heel handig en slim in de thema gebouwd. Geef de achtergrond jouw gewenste kleur. 

Nu gaan we verder met de ‘Header & footer achtergrondkleur’. Geef jouw header en footer jouw gewenste kleur.

Nu we de header en footer kleuren veranderd hebben gaan we naar de laatste onderdeel van de ‘Kleuren’ tab. Nu gaan we de primaire kleur aanpassen. We moeten daarvoor de ‘Aangepast’ bolletje aanzetten. Nu kan je de gewenste kleur kiezen door te slepen naar jouw gewenste kleur.

Nu hebben we alle opties van kleuren geleerd en veranderd. Vergeet niet om op ‘Publiceren’ te klikken als je iets aangepast hebt.

Nu we kleuren gehad hebben, klikken we ook op de terug knop. Vervolgens gaan we verder met de volgende tab. Dit is de tab ‘Thema opties’. Hier zien we dus de optie om de zoek functie aan en uit te zetten. Door ‘Toon zoeken in de header’ uit te vinken, zal de zoek icon verdwijnen en zal je niks meer kunnen opzoeken.

Verder zien we een instelling over de archiefpagina’s, berichten overzicht pagina.

Zoals je nu ziet, ze je de gehele bericht als je op de voorpagina bent. Je ziet de lees meer knop en daarna niks meer. Dit komt omdat wij dit ingesteld hebben. Zodra je op de ‘LEES MEER’ knop klikt zal er meer informatie getoond worden. Echter kunnen we het via deze instelling ook korter maken. Door ‘Samenvatting’ aan te vinken in de instelling zullen alle berichten die een bepaalde lengte hebben samengevat worden. Dit betekend dat het bericht ingekort zal worden. Klik op ‘Samenvatting’ en bekijk de voorpagina/blog overzicht.

Nu we thema opties ook gehad hebben kunnen we verder met een nieuw onderdeel. Voor nu slaan we de ‘Cover template’ even over. Hier keren wij als laatste op terug.

We gaan nu door met de tab ‘Achtergrondafbeelding’. Hier kunnen we in plaats van een kleur een afbeelding op de achtergrond plaatsen. Selecteer eerst een afbeelding uit de mediabibliotheek of upload een nieuwe afbeelding.

Nu verdwijnt de achtergrondkleur en komt de achtergrondafbeelding daarvoor in de plaats.

Nu we een achtergrondafbeelding hebben toegevoegd zijn er meer opties tevoorschijn gekomen. Nu gaan wij kennis maken met deze opties. Uiteraard kun je de afbeelding wijzigen en verwijderen via de knoppen.

De volgende optie is de ‘Vooraf gemaakte instelling’ optie.

Hier kun je de afbeelding vooraf aanpassen hoe jij de afbeelding wilt hebben. Je kunt het aanpassen naar standaard, schermvullend, passend op scherm, herhalen en aangepast.
Bij de optie ‘Standaard’ bepaald het thema zelf hoe de afbeelding getoond wordt.
Bij de optie ‘Schermvullend’ vult de afbeelding het gehele schermbreedte. Zelf kun je dan nog de positie aanpassen, dit kun je bepalen doormiddel van de pijltjes.

Bij de optie ‘Passend op scherm’ laat je de gehele afbeelding op het scherm passen. Ook hier kun je de positie aanpassen. In het gedeelte waar de afbeelding niet komt, zal de achtergrondkleur getoond worden. Daarnaast kun je ook de grootte van de afbeelding aanpassen, zo kun je de afbeelding laten herhalen, hierdoor zul je achtergrondkleur niet meer zien. Ook kun je zorgen dat de afbeelding vast staat wanneer er gescrold wordt.

Bij de optie ‘Herhalen’ kun zorgen dat de afbeelding herhaalt wordt. Ook hier kun je de positie aanpassen en zorgen dat de afbeelding vast staat tijdens het scrollen.
Bij de optie ‘Aangepast’ alles aanpassen naar keuze. Zo kun je ook hier de positie aanpassen en de grootte van de afbeelding. Daarnaast kun je ook de achtergrondafbeelding laten herhalen en de afbeelding vastzetten.
Ik heb alle opties geprobeerd maar ik vind het met een achtergrondkleur toch mooier dus ik verwijder de achtergrondafbeelding.

De volgende tab is de Menu’s tab. Hier kunnen we onze gemaakte menu’s zien. Ook kunnen we een nieuwe menu aanmaken via ‘Nieuw menu aanmaken’.

Klik op een menu zoals “main_menu”. Nu kun je de menu aanpassen of het menu verwijderen via ‘Menu verwijderen’. Ga nu terug naar de ‘Menu’s’ optie. Nu gaan we over naar ‘Menulocaties’. Klik nu op ‘Alle locaties tonen’. Nu zie je alle menulocaties. Dit kunnen wij dus ook gemakkelijk via hier aanpassen.

Hiermee kun je dus heel gemakkelijk de locaties van elk menu aanpassen. Ook is heel fijn dat je de veranderingen gelijk kunt zien. Je hoeft het niet eerst op te slaan. Als je de

Klik bijvoorbeeld op ‘Desktop Uitgebreid Menu’ en klik ‘SocialMedia’ menu aan.

Nu kun je al gelijk de aanpassing zien. Rechts boven zie je nu drie bolletjes met de naam Menu.

Klik op het menu met de drie bolletjes.

Zodra het menu met de drie bolletjes worden ingedrukt verschijnt een uitgebreid menu aan de rechterkant. Dit is dus de ‘Desktop Uitgebreid Menu’ locatie. Nu we het menu ook gehad hebben, klikken we terug en gaan we naar het volgende tab, de ‘Widgets’.

Via de ‘Widgets’ tab kun je de plaatsen van de widgets veranderen, widgets verwijderen uit de lijst en nieuwe widgets toevoegen in de lijst.
Klik op ‘Footer #1’.

Door één keer op de widget te klikken kun je het aanpassen. 
Door één keer op de widget te klikken en rechts onder op Verwijderen te klikken kun je de widget verwijderen.
Door de widget te selecteren en te slepen kun je het verplaatsen.

Door rechtsonder op ‘sorteren’ te klikken kun je ook de lijst aanpassen.
Ook hierbij kun je alle veranderingen direct zien.

Vervolgens gan we verder met de ‘Homepage-instellingen’. Dus klik maar terug naar de hoofdmenu van de customizer. Klik vervolgens op de ‘Homepage-instellingen’ tab.
Via hier kun je de homepage oftewel de voorpagina pagina veranderen.

Je ziet nu dat ‘Je laatste berichten’ bolletje is aangevinkt. Dit gaan wij nu veranderen naar ‘Een statische pagina’. Hierdoor kunnen we de voorpagina veranderen naar een pagina die wij eerder zelf gemaakt hebben.

Selecteer bij de ‘Homepagina’ dropdown jouw eerste pagina. Doe dit ook bij de ‘Berichtenpagina’ dropdown.

Je ziet al gauw dat dit niet mogelijk is. Het is niet mogelijk om de homepagina en berichtenpagina naar pagina te verwijzen.
Zet de homepagina op ‘— Selecteren —’:

Klik nu via het menu op de pagina die je in de ‘Berichtenpagina’ hebt ingesteld. In dit geval de ‘Dit is mijn eerste pagina’ pagina. Nu zie je dat de inhoud van deze pagin verdwenen is en dat het een berichtenoverzicht gewoden is. Via hier kun je navigeren naar alle gepubliceerde berichten.
Zet nu bij ‘Berichtenpagina’ ‘— Selecteren —’ en bij de ‘Homepagina’ jouw pagina, in dit geval dus de ‘Dit is mijn eerste pagina’ pagina. 

Nu zien we de inhoud van de pagina wel. Klik nu op jouw logo in de website, als je geen logo op de website hebt, klik dan op ‘Home’ via het menu. Nu kunnen we zien dat deze pagina nu de homepagina/voorpagina geworden is.

Bekijk het menu. We zien dat de ‘Home’ en ‘Dit is mijn eerste pagina’ onderstreept is. Weet jij hoe dit komt?

Dit komt doordat wij op dit moment op deze pagina bevinden. De homepagina en ‘Dit is mijn eerste pagina’ zijn nu één pagina.
We hebben we geen berichten overzicht pagina meer. Daarom gaan wij nu een nieuwe pagina aanmaken en deze pagina vervolgens selecteren als ‘Berichtenpagina’.
Klik nu op ‘+ Nieuwe pagina toevoegen’. Nu opent er een nieuwe optie, hier kun je de pagina titel invullen. Bedenk zelf een titel en vul dit in.

Klik nu op ‘Toevoegen’. Nu is jouw pagina aangemaakt. Klik op de dropdown van ‘Berichtenpagina’ en klik dan jouw nieuwe pagina aan. Nu zie je dat alle berichten op deze pagina getoond worden. Echter zien we deze pagina nog niet in de menu. Dat gaan wij nu doen. Ga terug naar de customizer menu. Ga nu naar de ‘Menu’s’ tab. Klik de ‘main_menu’ aan, het menu dat bovenaan getoond wordt.

Klik nu op ‘+Items toevoegen’. Nu openen er nieuwe opties. Klik op de ‘Pagina’s’ tab.

Voeg nu de ‘Berichten overzicht’ toe, door er op te klikken. Sleep het vervolgens naar de gewenste locatie. Bekijk nu jouw menu.

Nu hebben we de ‘Homepage-instellingen’ gehad. Ook hebben we weer een stukje menu behandeld. Nu hebben we bijna alle thema opties gehad.

Het enige wat we nog moeten leren is de ‘Cover template’ en de ‘Extra CSS’. CSS is een programmeertaal dat staat voor ‘Cascading Style Sheets’. Deze programmeertaal zorgt voor de opmaak van een website of pagina. 

Een thema bestaat ook uit CSS bestanden. De kleurtjes van de thema worden opgehaald uit een CSS bestand. Door de thema optie ‘Extra CSS’ kun je dus zelf eigen CSS toevoegen, hierdoor wordt het de extra CSS genoemd. Het is niet noodzakelijk om CSS te leren om een mooie website te maken. Wij maken een basis website dus daar is het niet voor nodig. 

Het is enige tab wat wij nog moeten behandelen is de ‘Cover template’ tab. Om deze optie te gebruiken gaan wij eerst een afbeelding toevoegen aan een pagina of bericht. Publiceer daarom eerst alles wat we aangepast hebben customizer. Na het publiceren klikken we op het kruisje links boven. Ga vervolgens naar het dashboard. Open een bericht en voeg een ‘Uitgelichte afbeelding’ toe. De ‘Uitgelichte afbeelding’ kun je vinden via de bericht opties rechts. 

Klik op het ‘Uitgelichte afbeelding kiezen’ vlak.

Kies een afbeeldinge en sla her bericht op door op ‘Bijwerken’ te klikken.

Bekijk nu jouw bericht. Als het goed is zie je nu jouw geüploade afbeelding bovenaan het bericht in het groot. Dit is de uitgelichte afbeelding van het bericht. Dit kun je ook bij een pagina toevoegen.

Keer nu terug naar jouw bericht en open nu de ‘Berichtattributen’ tab.

Open het dropdown. Kies nu de ‘Cover template’ optie. Bewerk en bekijk het bericht opnieuw.

Nu zien we dat het door de optie ‘Cover template’ de uitgelicht afbeelding geheel veranderd is. De afbeelding heeft de gehele breedte bedekt. Daarnaast heeft het ook nog een kleur over de afbeelding gekregen. Dit kunnen wij ook aanpassen via de customizer.

Open nu de customizer. Het is niet alleen mogelijk om de customizer via het dashboard te openen. De customizer kun je ook openen via de customizer knop, links boven.

Open nu het bericht met de uitgelichte afbeelding via het menu, terwijl de customizer open staat.
Wij gaan nu de blauwe laag op de afbeelding aanpassen naar onze eigen wensen. Wij gaan nu naar de customizer optie tab ‘Cover template’.

De optie ‘Vaste achtergrondafbeelding’ zorgt ervoor dat de afbeelding vast staat. Dit kun je aan of uitzetten.

Nu gaan we naar de overlay opties. Met de overlay wordt de laag over de afbeelding bedoelt. Pas de ‘Overlay achtergrondkleur’ aan naar wens. Vervolgens gaan we de ‘Overlay tekstkleur’ aanpassen. Daarmee worden deze teksten bedoelt. 

Kies een gewenste kleur voor deze teksten. Vervolgens gaan we verder met ‘Overlay Opacity’. Hiermee kunnen we de dekking meten. Moet het 100% bedekt zijn? Of moet het 10% bedenkt zijn. Je kunt de balk heen en weer slepen om het te bepalen. Publiceer nu alle aanpassingen.

Bekijk goed of de afbeelding mooi te zien is en alle teksten goed leesbaar zijn.

Hier kun je al zien dat niet alles even goed leesbaar is. Daarom zal ik de ‘Overlay tekstkleur’ nu aanpassen.

Nu is alles goed leesbaar. 

We hebben nu alle Customize WordPress Theme opties langs gelopen. Bekijk alle aanpassingen goed en pas de elementen aan waar jij niet te vrede over bent. Zo heb ik bijvoorbeeld het logo ‘nisatutucu.nl’ met daarnaast ‘nisatutucu’ als tekst. Dit is heel dubbel op dus niet mooi. Dus één zal er weg moeten. Een logo is mooier dan alleen tekst. Daardoor kies ik er voor om de tekst weg te halen. De ‘nisatutucu’ tekst is een titel van de website, de onder titel. Deze ga ik nu aanpassen.

Van:

Naar:

Dit is een hele kleine aanpassing maar dit zouden veel bezoekers kunnen hinderen. De website wordt gemaakt voor de bezoekers van de website. Daarom moeten wij het voor de bezoekers maken en niet naar onze eigen mening. Wij moeten de bezoekers niet hinderen of veel moeite laten doen.

Bekijk nu kritisch jouw website. Zijn er elementen die de bezoeker kan hinderen? Zijn er elementen die de bezoeker veel onnodige moeite laat doen? 

In het menu staat de pagina ‘Dit is mijn eerste pagina’ twee keer. De ‘Home’ en de ‘Dit is mijn eerste pagina’ knop is navigeert naar de zelfde pagina. Ook dit kan verwarring opwekken. Verander het menu op een overzichtelijke manier zodat het geen verwarring opwekt.

Als je alle hinderende en onnodige elementen heeft verwijderd kunnen we door naar het volgende hoofdstuk.

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *