Elke maand besteden we speciale aandacht aan een boek uit het fonds van Van Duuren Media. Deze maand gaat het om twee boeken rond het thema WordPress. De boeken van de maand februari zijn twee boeken uit de CMS Development Library: WordPress-thema’s bouwen en Een webwinkel met WordPress van auteur Dirkjan van Ittersum. We geven deze maand wat voorproefjes uit deze boeken. Dit is het eerste deel van hoofdstuk 4 van WordPress-thema’s bouwen over het werken met kindthema’s. Het tweede deel van dit hoofdstuk vind je HIER. (H.F.)
Deze twee boeken worden tot 1 augustus 2016 door de uitgever voor een speciale bundelprijs aangeboden: van €48,90 voor €29,95! De bestelpagina vind je HIER.
Er zijn verschillende manieren om de vormgeving van uw site aan te passen. U kunt van nul af aan beginnen. Zo hebt u de volledige vrijheid. Makkelijker is het om uit te gaan van een bestaand thema. Dit hoofdstuk kiezen we voor die aanpak. In veel gevallen is deze route voldoende om de gewenste site te maken.
Een bestaand thema wijzigen
Er zijn talloze thema’s. Zowel gratis als commerciële en daaronder zijn echte juweeltjes te vinden. Als u een thema vindt dat aansluit bij uw wensen is het niet nodig zelf een thema te ontwikkelen. De meeste thema’s kunt u nog enigszins naar uw hand zetten via Weergave, Customizer (zie hoofdstuk 2). De exacte mogelijkheden zijn afhankelijk van het thema, maar via de Customizer kunt u sleutelen aan bijvoorbeeld het logo, de kop- en achtergrondafbeelding, menu’s en widgets. Daarnaast hebben de wat meer geavanceerde thema’s nog een aparte sectie met opties waar u bijvoorbeeld het lettertype of de kleurstelling kunt aanpassen. Dat is allemaal leuk en aardig, maar we gaan er in dit boek vanuit dat u meer wilt: u wilt een site met een volledig eigen vormgeving. Met een kindthema kunt u een aardig eind in die richting komen.
Wat is een kindthema? Het is een thema dat leunt op een bestaand thema. U raadt het al: het ouderthema. Aan de zaken die in orde zijn doet u niets. Met het kindthema vertelt u WordPress alleen wat er anders moet ten opzichte van het ouderthema. Stel dat u de kleuren niet goed vindt? Of de plek van de zijbalk? Dergelijke zaken zijn vrij eenvoudig aan te passen met een kindthema.
Het is wel belangrijk om een thema te kiezen dat in de basis aansluit bij uw wensen. Een thema volledig op zijn kop zetten met behulp van een kindthema kan in theorie misschien wel, maar is niet erg praktisch. Beter is het een thema te vinden dat op punten gewijzigd dient te worden, waarbij het vooral van belang is dat u over een goede dosis CSS-kennis beschikt. De aanpassingen aan een kindthema hoeven overigens niet beperkt te blijven tot de CSS. Er kan ook gesleuteld worden aan de PHP. Op die manier zijn meer ingrijpende wijzigingen mogelijk.
Strikt genomen kun u de genoemde wijzigingen ook doen in het ouderthema zelf. Ga maar eens in het beheerdersgedeelte van WordPress naar Weergave, Bewerker (soms ook vertaald als Editor). U vindt daar het bestand style.css. Deze stylesheet bepaalt het uiterlijk van uw site. Door bijvoorbeeld de kenmerken van het element H1 te wijzigen, maakt u de koppen op de site groter of kleiner.
Toch zou het niet verstandig zijn om hier rechtstreeks aan het thema te sleutelen. Af en toe verschijnen er updates voor een thema. Het is belangrijk die te installeren, al was het maar omdat ze soms beveiligingsproblemen oplossen. Niet updaten is dus geen optie. Maar u raadt het al… door zo’n update raakt u alle wijzigingen in uw stylesheet kwijt!
De oplossing is het maken van een kindthema. Deze bestanden worden niet overschreven bij een update. Zo blijven uw gemaakte wijzigingen behouden. Het kindthema bepaalt alleen wat er anders moet ten opzichte van het ouderthema.
Kleine CSS-wijzigingen zonder kindthema
Als de wijzigingen aan de CSS relatief beperkt zijn, bestaan er ook andere manieren om eraan te sleutelen:
- Er zijn thema’s waaraan u CSS kunt toevoegen. Bij Thema Opties van sommige thema’s vindt u een vakje Custom CSS. Daar kunt u aanpassingen kwijt zonder kindthema, mits uw aanpassingen beperkt blijven tot CSS.
- Sommige thema’s leveren een bestand met de naam custom.css mee waarin u wijzigingen kunt aanbrengen. Dat gaat via Weergave, Editor (mits het thema is geactiveerd). In de CSS ziet u een waarschuwing (afbeelding 4.3) met de opmerking dat u aanpassingen kunt aanbrengen in het custom.css-bestand (te vinden onder in de rechterkolom).
- Er bestaan ook speciale plug-ins waarmee u CSS aan een thema kunt toevoegen, zoals Simple Custom CSS.
PHP-bestanden op deze manier veranderen is niet mogelijk.
Een kindthema voor Twenty Fifteen maken
Tijd om aan de slag te gaan met een kindthema! Als u dat nog niet had gedaan: activeer het thema Twenty Fourteen in WordPress. Dit thema willen we voorzien van andere kleuren en een ander lettertype. U moet daarvoor inloggen op uw site met uw FTP-programma, bijvoorbeeld FileZilla, zoals we in hoofdstuk 2 hebben besproken. Volg deze stappen om dat te bereiken:
- Log via FTP in op de server waar uw WordPress-installatie staat. Ga naar het mapje wp-content.
- In de map wp-content maakt u een nieuwe map aan. Geef die de naam van het kindthema. Het is gebruikelijk om de map dezelfde naam te geven als het ouderthema, maar dan met de toevoeging -child erachter. In dit voorbeeld noemen we de map dus twentyfourteen-child.
In de map moet het CSS-bestand komen te staan. Start uw favoriete teksteditor (bijvoorbeeld het in hoofdstuk 1 besproken Notepad++). Maak een nieuw bestand aan en zet daarin (bovenin) deze code:
/* Theme Name: Twenty Fourteen Child Theme URI: http://uwsite.nl/twenty-fourteen-child/ Description: Twenty Fourteen Child Theme Author: Uw Naam Author URI: http://uwsite.nl Template: twentyfourteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, green, white, light, dark Text Domain: twenty-fourteen-child */ /* Theme customization starts here ---------- */
Uiteraard past u hier enkele zaken aan, zoals Theme URI (het internetadres van uw thema), Author en Author URI (uw internetadres). Overigens zijn niet alle genoemde regels verplicht. Wel noodzakelijk zijn Theme Name en Template. Bij de laatste moet de naam van het ouderthema staan.
Hiermee bent u er nog niet. WordPress weet nog niet waar het CSS-bestand van het ouderthema staat. Dat maakt u WordPress duidelijk door een functions.php-bestand aan te maken. Dat gaat opnieuw in Notepad++. Maak een nieuw bestand aan en geef het de naam functions.php. Voeg deze code toe om de stylesheet klaar te zetten:
<?
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ ); function theme_enqueue_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . /style.css’ );
}
?>Normaal gesproken wordt het kindthema nu automatisch geladen. Als dat niet gebeurt adviseert de Codex (codex.wordpress.org/Child_Themes) het apart vermelden van ouder- en kindthema in functions.php:
<?
function theme_enqueue_styles() { $parent_style = ‘parent-style’; wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ ); wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( $parent_style )
);
}
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
?>LET OP! Niet meer via @import In eerdere versies van WordPress werd geadviseerd de stylesheet van het ouderthema aan te roepen met deze opdracht:
@import url(“../twentyfourteen/style.css”);Hoewel deze methode nog steeds werkt, raden de WordPress-ontwikkelaars tegenwoordig aan om de stylesheet te laden via het functions.php-bestand.
U hebt nu twee bestanden: style.css en functions.php. Ga als volgt te werk:
- Kopieer de twee bestanden naar de server van uw webhost. Zet ze in de map twentyfourteen-child die u zojuist hebt aangemaakt.
- Ga naar het beheerdersdeel van WordPress en klik op Weergave, Thema’s. In het overzicht van geïnstalleerde thema’s vindt u nu een nieuw thema met de naam Twenty Fourteen Child. Activeer dit thema.
U hebt nu een kindthema gemaakt. Maar als u nu de site bekijkt, is deze niet anders dan met het reguliere thema Twenty Fourteen. Niet zo raar: er staat nog niets in de stylesheet van het kindthema.
Via Weergave, Bewerker gaan we enkele CSS-codes toevoegen. De codes plaatst u meteen na deze opmerking in de stylesheet:
/* Theme customization starts here ---------- */
Om snel duidelijk maken wat er zoal mogelijk is, veranderen we de kleur van de zijbalk links.
.site:before {
background-color: rgb(44, 115, 28);
}Het blok heeft nu een donkergroene achtergrondkleur. Ook de balk aan de bovenzijde kunnen we die kleur geven, als volgt:
.site-header {
background-color: rgb(44, 115, 28);
}
Nog een wijziging dan: Twenty Fourteen gebruikt het lettertype Lato. Stel dat u liever het wat meer traditionele Arial wilt gebruiken, met de in CSS vaak gebruikte uitwijkmogelijkheden Helvetica en sans-serif. Voeg deze CSS-code toe:
body {
font-family: Arial, Helvetica, sans-serif;
}U ziet: met het aanpassen van de CSS kunt u vrij eenvoudig het uiterlijk van de site wijzigen.
TIP! • RTL-talen ondersteunen Als u wilt dat het kind-thema talen waarin van rechts naar links wordt geschreven ondersteunt (RTL-talen) voegt u een rtl.css bestand toe aan het kind-thema, dat als volgt begint. Eronder volgt de CSS:
/* Theme Name: Twenty Fourteen Child Template: twentyfourteen */
Deel twee over het maken en gebruiken van kindthema’s volgt spoedig!
Hans Frederiks is journalist en fotograaf en hoofdredacteur van blog.computercreatief.nl. Hij schrijft over ontwikkelingen op het gebied van computers, van vormgeving op het web en print, en fotografeert al zijn hele leven lang. Zijn specialisaties zijn panorama’s, landschappen en podiumfotografie. Zijn blog vind je HIER, zijn boeken vind je HIER.