WordPress: werken met kindthema’s (2)

wordpress-boekenElke 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 tweede deel van hoofdstuk 4 van WordPress-thema’s bouwen over het werken met kindthema’s. Het eerste deel van 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.

Het juiste CSS-element vinden

U vraagt zich wellicht af: hoe weten we welke CSS-code aangepast moet worden om veranderingen te door te voeren? Hoe wisten wij bijvoorbeeld dat we de code .site:before moesten gebruiken om de achtergrondkleur te wijzigen?

De browsers Chrome en Firefox hebben hiervoor de bijzonder handige functie Element inspecteren ingebouwd. Klik met rechts op een element waarvan u de stijl wilt wijzigen, bijvoorbeeld een berichtblok. Er wordt een codevenster geopend (afbeelding 4.10). Daarin staan de HTML en CSS van uw site. Overigens is er voor Firefox de add-on Firebug verkrijgbaar. Dat is een nog wat krachtiger hulpje bij het speuren en aanpassen van HTML- en CSS-codes.

Via Element Inspecteren ontdekken we snel welke CSS-code we moeten hebben om de achtergrondkleur van de zijbalk aan te passen. Links is de balk gemarkeerd doordat we rechts op het juiste element staan.
Via Element Inspecteren ontdekken we snel welke CSS-code we moeten hebben om de achtergrondkleur van de zijbalk aan te passen. Links is de balk gemarkeerd doordat we rechts op het juiste element staan.

PHP-code wijzigen met een kindthema

Met een kindthema is meer mogelijk dan alleen CSS aanpassen. Ieder bestand in een thema kan worden vervangen. Dat gaat heel eenvoudig door een bestand met dezelfde naam als in het ouderthema te gebruiken. Stel dat u het bestand footer.php wilt wijzigen? Plaats een bestand met de naam footer.php in het kindthema. Voortaan zal die versie gebruikt worden. Merk op dat het style.css-bestand in uw kindthema wordt gebruikt als aanvulling op de css van het ouderthema, terwijl een .php-bestand het gelijknamige bestand uit het ouderthema helemaal vervangt.

Het is zelfs mogelijk om PHP-bestanden in een kindthema te plaatsen die niet aanwezig zijn in het ouderthema. Misschien dat u een speciaal sjabloon wilt aanmaken voor een bepaalde categorie: voeg het bestand category-slugnaam.php toe aan uw kindthema. Praktijkvoorbeeld: u hebt de categorie Parijs in een site over Frankrijk. De slug van deze categorie is parijs. Noem dus het PHP-bestand category-parijs.php om een speciaal sjabloon voor deze categoriepagina aan te maken; bijvoorbeeld met een achtergrondfoto van Parijs. Verderop in dit boek gaan we dieper in op de hiërarchie voor sjablonen.

We kijken weer even naar het thema Twenty Fourteen om daar een aanpassing in een PHP-bestand te doen. Op de voorpagina toont dit thema de categorienaam boven de titel van het bericht. Stel dat nu we de naam van de categorie er juist onder willen zetten? Toegegeven: het is geen ingrijpende wijziging, maar het dient even als voorbeeld van wat er mogelijk is. Op vergelijkbare wijze kunt u ook veel ingrijpender aanpassingen maken, al is daar wel de kennis voor nodig die we in het volgende hoofdstuk behandelen bij het maken van een volledig nieuw thema.

Om de categorienaam te verplaatsen, moeten we achterhalen welke .php-pagina de categorienaam plaatst. Het vinden van het verantwoordelijke PHP-bestand is soms best een puzzel. In het vorige hoofdstuk hebben we al aangegeven dat index.php vaak de loop bevat waarmee alle content op de site wordt gezet, inclusief bijbehorende gegevens zoals de door ons gezochte categorienaam. Maar – zo lazen we ook in hoofdstuk 3 – themabouwers kiezen er soms ook voor om een apart bestand aan te maken dat de content op de site toont met de naam content.php.

We zetten onze Sherlock Holmes-pet op en onderzoeken daarom het ouderthema grondig. Hiervoor loggen we in op onze WordPress-site en gaan naar Weergave, Editor. Klik op het thema Twenty Fourteen (let op: dus niet het kindthema). We kijken eerst of er een pagina met de naam front-page.php bestaat. Die wordt gebruikt op de voorpagina, maar als deze niet bestaat valt WordPress terug op index.php (of eventueel op home.php, maar ook die bestaat niet). Daarom is het een veilige keuze om te veronderstellen dat index.php verantwoordelijk is voor het tonen van de voorpagina.

We onderzoeken dit bestand in de hoop een aanwijzing te kunnen vinden waar de door ons gezochte code kan staan. In het bestand vinden we om te beginnen de volgende code:
code-1

Zouden we iets in de header willen aanpassen dan moeten we dus zoeken naar header.php. Maar dat is niet het geval, dus we kijken verder. Vervolgens zien we:
code-2

Vrij vertaald staat hier: als we op de voorpagina zitten en er zijn uitgelichte berichten (sticky posts), dan moet de sjabloon featured-content getoond worden. Belangrijke code, maar ook niet wat we zoeken. Met ons vergrootglas in de aanslag lezen we verder:
code-3

Nu wordt het interessant: we zien hier de start van de loop. De vertaling luidt: als er berichten zijn, gebruik dan de sjabloon content (of eventueel de sjabloon van het berichttype zoals content-audio.php of content-image.php, maar dat was niet aan de orde).

Hieruit blijkt dat het thema het tonen van berichten laat afhandelen door het bestand content.php. Vermoedelijk zal dit bestand ook de metadata (zoals auteursnaam, datum en categorie) plaatsen. Genoeg reden dus om content.php eens aan een nadere inspectie te onderwerpen. Via de Editor van WordPress is dit snel gedaan en dan blijkt inderdaad dat de volgende code in het content.php-bestand staat:
code-4

Dat kan niet missen: daar wordt de categorie getoond.

Het is soms net detectivewerk. We vermoeden dat het bestand content.php verantwoordelijk is voor het tonen van de categorienaam. En inderdaad… met wat kennis van PHP haalt u het er zo uit.
Het is soms net detectivewerk. We vermoeden dat het bestand content.php verantwoordelijk is voor het tonen van de categorienaam. En inderdaad… met wat kennis van PHP haalt u het er zo uit.

üGebruikt de codex    Een handig hulpmiddel bij het vinden van WordPress-functies is de Codex (codex.wordpress.org). In hoofdstuk 5 gaan we daar verder op in, maar als we in de codex zoeken op get_the_category_list zien we snel uitleg waaruit blijkt dat deze functie bedoeld is om de categorie te tonen.

Nu duidelijk is dat we content.php moeten aanpassen, volgende we deze stappen om de wijziging door te voeren:

1. Log via FTP in op uw server en ga naar de map van het ouderthema (wp-content/themes/twentyfourteen).

2. Kopieer het bestand content.php naar uw computer en open het met een teksteditor.

3. Zoek de code die ervoor zorgt dat het thema de categorienaam op het scherm plaatst:
code-5

 

4. Knip en plak de code, zodat deze direct boven deze HTML- en PHP-regels komt te staan.
code-6

5. Sla het aangepaste content.php-bestand op en upload het bestand weer via FTP naar de map twentyfourteen-child. Let op: het bestand moet nu dus naar het kindthema, niet naar het ouderthema.

Het resultaat is te zien in de laatste afbeelding. Eerst de kop, dan pas de uitgelichte afbeelding.

Toegegeven: dit is slechts een kleine wijziging. Maar er is weinig fantasie voor nodig om te begrijpen dat u op deze wijze het thema ook veel radicaler kunt wijzigen.

Door het stukje code te verplaatsen, verschijnt de tekst op een andere plek.
Door het stukje code te verplaatsen, verschijnt de tekst op een andere plek.
Het eindresultaat van deze PHP-wijziging.
Het eindresultaat van deze PHP-wijziging.

Grotere wijzigingen

U hebt gezien dat u met wat speurwerk een thema kunt aanpassen. Natuurlijk zijn veel ingrijpender wijzigingen denkbaar, maar daarvoor is wat meer kennis nodig. Omdat dit zou dubbelen met de kennis die nodig is voor het maken van een volledig nieuw thema houden we het hierbij voor wat betreft ouder- en kindthema’s. Ons advies is om nu hoofdstuk 5 door te nemen, zodat u leert hoe u een thema vanaf nul maakt. Hebt u dat onder de knie, dan zijn ingrijpender aanpassingen op kindthema’s niet zo lastig meer met de aanwijzingen uit dit hoofdstuk.

Geef een reactie

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

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.