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.

wp-c-1

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.

css1

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.

css1

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:

wpheader

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:

wpcode1en plak eronder deze code:

wpcode2

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.

0 Shares:
14 comments
  1. oeps, dat vind ik nog wel ingewikkeld. Ik wacht even voordat ik dit ga proberen :)

  2. Beste Xaviera,

    Heel graag zou ik het horizontale menu boven het logo onder de headerimage plaatsen.

    Wil jij me helpen.

    Groet,

    Mink

  3. Ik wil graag de kleur van de titelnaam aanpassen

    Dit is standaard (kubricktheme) wit.

    Vragen: waar en hoe pas ik die kleur aan?

    En kan dat alleen met kleurcodes (en waar vind ik dan welke kleur welke code heeft?) of kan het ook met kleurnamen?

    Ik wil daarbij graag bijv. twee woorden in de titel een van elkaar afwijkende kleur meegeven.

  4. Xaviera, bedankt voor de handige uitleg. Heel verhelderend en bruikbaar, complimenten.

    Eén ding is me nog niet duidelijk van bovenstaande, en dat gaat om het volgende 'Voeg het volgende toe aan je style.css' schrijf je. Vervolgens geef je de code die in het bestand moet. Maar waar in het bestand moet die code komen?

  5. Hoi Xaviera,

    Bedankt voor deze cursus! IK heb een vraag: Wat doe ik als ik een hele simpele statische beginpagina wil, zonder kolom rechts met links/historie e.d., maar ik wil dit wel op mijn blogpagina? Moet ik dan met 2 verschillende thema's werken? Ik bedoel dat de indeling op mijn verschillende pagina's anders wordt.

  6. Ben bezig met mijn eigen website en heb al enorm veel gehad aan je cursus WordPress, dus thanks! Heb het thema Arthemia geïnstaleerd (die gebruik jij ook, zie ik ;)), alles gaat precies zoals ik wil alleen het Catogries balkje krijg ik niet ingevuld. Hoe doe ik dat?

    Thanks!

  7. Alles gedaan om een achtergrond plaatje te laten verschijnen. Maar krijg gewoon niets te zien.
    Komt dat doordat ik een thema gebruik? Ik de functie achtergrond toegevoegd. Kan wel plaatje uploaden en aanpassen met achtergrond. Maar het komt gewoon niet op de site.

    Ideeen zijn welkom. 

  8. Hallo,

    Hoe kan ik in een WordPress website aanpassen dat je mijn achtergrond over de hele website ziet dus ook in het menu en de pagina's die ik heb aangemaakt? Nu krijg mijn menu alleen in het wit te zien en dat vindt ik niet passend.

    groetjes

    Sergio

  9. Hi Xaviera,

    Kun je me vertellen waar ik het lettertype in de menubalk kan aanpassen en hoe dan?

    thx Mariëlle

  10. Bij instellingen -> Lezen kun je aangeven of je je laatste berichten wilt tonen of een statische pagina en welke pagina je blog is. Kan dus in ieder thema ingesteld worden.

  11. Persoonlijk zou ik niet in de CSS van het thema zelf gaan zitten omdat je dan problemen kunt krijgen bij het updaten. En het zou zonde zijn als je geen updates meer krijgt. Mijn suggestie zou zijn om te werken met de plugin Custom CSS. Die krijgt voorrang boven de CSS van het thema. En als het goed is kun je alles aanpassen met CSS. Hoef je ook geen FTP te gebruiken of een back up te maken. Simpel toch.

Comments are closed.

Dit artikel is 72.489 keer gelezen