WordPress – Deel 5: themebestanden aanpassen

Als het goed is heb je nu een mooie theme gevonden voor je WordPress website. En als het nog beter is, heb je je nieuwe theme nu geinstalleerd. In deze les lopen we door een aantal van de belangrijke theme-bestanden heen. In principe zijn deze bestanden in de meeste themes aanwezig. Het kan echter zijn – als je een heel bijzonder theme hebt gekozen – dat sommige bestanden een andere functie hebben of dat er veel meer bestanden aanwezig zijn. Ik ga uit van de standaardtheme die al bij je WordPress installatie zit: Kubrick. Om te oefenen en een idee te krijgen wat je kunt doen is de standaardtheme een prima startpunt.

Je standaard WordPressinstallatie bestaat uit een hele rits aan bestanden. Je kunt al deze bestanden terugvinden via je admin-panel onder Appearance –> Editor.

In deze les loop ik een aantal aanpassingen door. Ik heb wat simpele zaken uitgekozen zodat je niet meteen gillend wegrent. Je kunt in principe alles aanpassen. Heb je specifieke vragen, stel die dan in de comments. Daarnaast kun je voor bijna elke aanpassing een tutorial vinden op internet. In een van de laatste lessen zet ik er een aantal voor je op een rijtje. Maar nu eerst les 5.

Tips
Om er zeker van te zijn dat je niks “kapot” maakt, raad ik je 2 dingen aan:

1. Maak een kopie van je themebestanden voordat je ze gaat aanpassen.

2. Pas je bestanden niet via de admin-panel aan, maar doe dat lokaal op je pc met een tekstverwerkingsprogramma en zet ze daarna in de juiste map op je server via ftp (wp-content –> themes –> naam.van.de.theme).

Lettertype veranderen in WordPress

Laten we starten met het lettertype van je site. Althans, daar begin ik meestal mee. Sommige themes hebben een vreselijk of onleesbaar of juist te groot lettertype. Het is dus handig om te weten hoe je dat aanpast. De gebruikte fonts worden gedefinieerd in je style.css. CSS staat voor cascading style sheets. Je kunt hierin opmaak aanpassen (kleuren, fonts, hoe een plaatje moet worden getoond) zodat het door de hele site hetzelfde is en je het maar op 1 plek hoeft aan te passen. Wil je meer over .css weten, surf dan hierheen. Voor nu is het voldoende om te weten dat je hier de gebruikte fonts aan kunt passen. Zoek in je style.css naar de selector Body.

Achter de property font-family vind je de waardes voor het lettertype. In dit geval wordt een font familie gebruikt van Lucida Grande, Verdana, Arial en Sans-Serif. Je kunt hier in plaats van deze fonts zelf een font kiezen. Let wel op: hou het bij standaard windowsfonts. Doe je dat niet dan zal het font alleen maar getoond worden als degene die de pagina bekijkt dat specifieke lettertype ook heeft geïnstalleerd. Kijk ook meteen even wat het effect is op verschillende pagina’s van de aanpassing. Misschien is je gekozen font groter en loopt het allemaal nu niet lekker meer. Mocht dit het geval zijn of is je font nu juist te klein, dan kun je dat achter font-size aanpassen.

Het kan overigen zijn dat het er in jouw style.css net iets anders eruit ziet. In principe vind je de selector body altijd terug en heeft het altijd dezelfde functie.

Ik heb op de testinstallatie het lettertype aangepast naar een andere font-family en de afmeting op 60% gezet.

Kleuren aanpassen in WordPress

Een kloddertje roze hier en een kloddertje roze daar. Ik ben dat systeemgrijs van de standaardtheme van WordPress zat. Laten we er een mooie roze basis van maken. Verander hiervoor achter background de kleurcode naar een tint roze die jou kan bekoren zoals bijvoorbeeld deze kleur: #CC33CC. Voor een overzicht van kleurencodes klik je hier.

Tekstkleur pas je makkelijk aan door de code achter color te veranderen van #333 naar de kleur die jij graag ziet. Doe hier maar niet te wild mee. Kies een kleur die vooral goed te lezen is.

Wil je liever een plaatje in de achtergrond dan alleen maar een kleur? Dan upload je het plaatje naar de map images in je themebestanden en vervang je de imagenaam achter background door jouw eigen image.

De header van je theme

Wil je het headerplaatje aanpassen, dan vervang je in dit stukje code:

De imagenaam naar de afbeelding die jij wilt gebruiken. Wat ik meestal doe is de afbeelding vervangen door een andere afbeelding met dezelfde naam. Je vindt ook dit plaatje in de map images bij je themebestanden.

Er zijn nog veel meer zaken die je in de .css aan kunt passen. Denk aan hoe links worden getoond, hoe headers eruit moeten zien, hoe je footer eruit moet zien. Ik loop nu niet door alles heen. Hiermee puzzelen is een goed begin. Wil je iets specifieks weten? Stel je vraag dan in de comments.

De andere bestanden php-bestanden

Je hebt een hele hoop themebestanden waarin je te pas en te onpas zaken aan kunt passen. Stop er plaatjes in, teksten of plugins. De belangrijkste bestanden zijn de volgende:

single.php: dit is het bestand dat wordt getoond wanneer iemand één enkel artikel bekijkt.

comment.php: dit is het reactieformulier die onderaan de single.php wordt getoond

Sidebar.php: dit is de zijkant van je site als het ware. Hierin worden widgets getoond, Je kunt er ook voor kiezen geen widgets te gebruiken en hierin code te plaatsen om plugins op te roepen. Maar over het algemeen is dat niet nodig.

footer.php: Deze toont je footer. Ook hier kun je van alles toevoegen. Denk bijvoorbeeld aan een copyright link.

Search.php: dit is de pagina die de zoekresultaten toont. Je kunt hier bijvoorbeeld een google searchbox op plaatsen.

Naast de bovenstaande bestanden zijn er nog anderen die je kunt hacken. Maar dit zijn wel de belangrijkste.

Een voorbeeld

Om je een idee te geven van hoe je de bovenstaande bestanden aan kunt passen heb ik hieronder een voorbeeld van een aanpassing. Daarnaast kun je een specifieke vraag natuurlijk altijd in de comments gooien (garantie tot aan de deur).

Voorbeeld  – blokje voor de auteur onder artikel

Op onze site vind je onder elk artikel een blokje waarin de auteur van een artikel wordt getoond, inclusief website en een korte beschrijving. Dit vind je in de standaard Kubrick theme niet terug. We gaan dat blokje nu toevoegen.

Open je single.php. Zoek naar de volgende code:

en plak eronder deze code:

code

Je ziet nu al de auteur onder het artikel staan. Nu nog even wat fixen aan de opmaak. Voeg het volgende toe aan je style.css:

/* Author box (single) */

#author-box {
height: 100%;
overflow: hidden;
padding: 15px;
margin-bottom: 10px;
background: #fff;
border: 1px solid #ddd;
}

#img.left {
float:left;

}

#author-box .avatar {
float: left;
width: 75px;
height: 75px;
margin-right: 10px;
}
#author-box h4 {
margin-bottom: 1px;
}

Je blokje ziet er nu al een beetje beter uit. Je kunt nu zelf nog zaken aanpassen die je aan wilt passen.Zoals de background kleur of bijvoorbeeld de dikte van de rand eromheen.

Pimpen van je wp-theme

Krijg je van dit alles een beetje koppijn? Maak je geen zorgen. Hoe langer je met WordPress werkt, hoe makkelijker het wordt. En hoe meer je behoefte hebt aan een specifieke aanpassing, hoe meer moeite je erin zal stoppen. Je kunt deze les ook nog even opzij zetten als je nog geen zin hebt om er echt in te duiken. In de volgende les gaan we plugins toevoegen. Een andere manier om je WordPress installatie te pimpen.

Xaviera

Don’t stress….it’s just me!

I’ve spent over 25 years working in content strategy and digital transformation, which means I’ve seen enough technology hype cycles to be skeptical and enough genuine innovation to stay curious.

Want to talk shop? Do get in touch!

www.contentchefs.nl