Het stijlen van een WordPress website

Een tutorial over WordPress childtheme en css aanpassingen maken

Wanneer je een WordPress website mag bezitten, dan ben je een gelukkig mens. De vele voordelen die een WordPress website biedt, heb ik al in een ander blogartikel over WordPress beschreven. Ben je nog helemaal nieuw op het gebied van WordPress dan raad ik je aan deze eerst te lezen.

Vereisten om aan de slag te kunnen gaan met deze tutorial:

1. Een domeinnaam en webruimte bij een webhoster
   (zie punt 2 van WordPress blogartikel).
2. Een ingericht FTP programma
   (zie punt 1 van WordPress blogartikel).
3. Een WordPress installatie in wwwroot van webruimte
   (zie punt 1 van WordPress blogartikel).
4. Een goed functionerende WordPress Thema (bijvoorbeeld Twenty Ten of Twenty Eleven).
5. Een goede text editor (bijvoorbeeld Adobe Dreamweaver).
   Er zijn ook (gratis) alternatieven voor Dreamweaver. Zoek daarvoor op internet.
   In dit artikel worden wat gratis alternatieven besproken. Ik heb persoonlijk geen ervaringen met deze programma’s.
6. De Firefox browser en de add-on Firebug. Deze laatste is uiterst handig om de juiste css codes die je aan wilt passen te vinden.
7. Wat kennis van css. Mocht je dit niet hebben, dan kun je op internet ook allerlei tutorials hierover vinden. Een hele goede startpunt is de engelstalige website van W3C.

WordPress childtheme maken

Als uitgangspunt heb ik het thema ‘Twenty Eleven’ genomen, maar vul gerust hiervoor jouw eigen gekozen thema naam in.

1. Ga via jouw FTP programma naar de map themes van jouw WordPress installatie (www.jouwdomeinnaam/wwwroot/wp-content/themes/)
2. Maak daar een nieuwe map aan met de naam ChildofTwentyeleven (mag ook een andere voor jou herkenbare naam zijn). Dit kun je eenvoudig doen door met rechts te klikken en te kiezen voor ‘Map aanmaken’.
3. Maak in jouw text editor een nieuwe css bestand aan met alleen de volgende tekst (knip en plak):
   ——————————————————————————————-

   @import url(‘../twentyeleven/style.css’);

   /*
   Theme Name: Child of Twentyeleven
   Theme URI: http://www.jouwdomeinnaam/wp-content/themes/childofTwentyeleven
   Description: Aangepast Twentyeleven thema
   Author: jouw naam
   Author URI: http://jouwdomeinnaam
   Template: Twenty Eleven
   */

   ———————————————————————————————–

Uitleg

• @import url(‘../twentyeleven/style.css’);
  dit importeert de style sheet van het oorspronkelijke thema twenty eleven, zodat je blijft profiteren van de opmaak die jou al bevalt van het oorspronkelijke thema . Alles wat je in de childtheme stylesheet wijzigt, overschrijft wat er in de stylesheet van het oorspronkelijke thema staat. Mocht er iets mis gaan, dan is de oorspronkelijke stylesheet altijd nog in tact. Verder wordt de childtheme stylesheet niet overschreven bij een update van het oorspronkelijke thema. Zo maak je gebruik van de goede onderdelen van het oorspronkelijke thema en blijven jouw wijzigingen altijd van kracht, ook na een update van het oorspronkelijke thema.
• Thema Name: een eigen bedachte naam voor jouw childtheme.
• Theme URI: het pad waar jouw childtheme zich bevindt => http://jouwdomeinnaam/wwwroot/wp-content/themes/ChildofTwentyeleven is de map die je zelf aangemaakt hebt in de themes map.
• Description: een eigen bedachte omschrijving van jouw childtheme.
• Template: naam van het oorspronkelijke thema. Let op! Deze is wel hoofdletter gevoelig. Kijk in de dashboard van jouw WordPress website onder thema’s hoe daar de naam van het oorspronkelijke thema geschreven staat.
• Ga nu naar de WordPress dashboard van jouw website en kies voor Weergave => Thema’s.
  Je zult nu zien dat jouw childtheme wordt vermeld als thema. Activeer jouw childtheme. Zolang je nog niets gewijzigd hebt in de style sheet van jouw childtheme, zal jouw website er nog steeds zo uitzien als toen je het originele thema geactiveerd had.

Stylesheet van childtheme aanpassen
Je kunt ervoor kiezen om de stylesheet van jouw childtheme bij te werken via de WordPress dashboard optie Weergave => Bewerker. Je moet dan wel weten wat de toegepaste codes zijn voor CSS.
Ben je nog niet zover, dan raad ik het gebruik van Dreamweaver aan, omdat deze suggesties geeft voor stijlopties.

In de volgende videotutorial laat ik met behulp van het FTP programma FileZilla, text editor Adobe Dreamweaver en Firefox add-on Firebug zien hoe je onderdelen van jouw WordPress childtheme qua stijl kunt aanpassen.

Kijk hier voor het vervolg:Een WordPress website stijlen – deel 2


Is het je gelukt om een childtheme en bijbehorend stylesheet te maken en aan te passen? Laat het me dan weten.
Ook als je nog vragen hebt, ben ik graag bereid je verder te helpen.

————————————————————————————————–

Yvonne Alefs is webdesigner bij van Wens naar Website – voor betaalbare doch professionele WordPress websites. Het hebben van een (huis)stijlvolle Facebook- en/of Twitterpagina achtergrond, vindt zij net zo belangrijk als een goed uitziende visitekaartje. Zij ontwerpt dan ook Facebook en Twitterpagina achtergronden bij Pimp mijn Pagina .