WordPress Sjabloon Maken

YouTube voorvertoningsafbeelding

Een pagina heeft standaard het “Standaard sjabloon” (klinkt logisch toch?).
Dit sjabloon is gebaseerd op het bestand page.php dat je in de thema map kunt vinden. In de meeste gevallen bevat dit bestand een zijbalk (sidebar).

Het sjabloon dat ik ga maken is een sjabloon voor pagina’s waar ik die zijbalk niet wil laten zien. In het voorbeeld gebruik ik het Light Clean Blue thema (te downloaden via WordPress.org).

Ik begin met een exacte kopie te maken van het bestand page.php. Deze kopie sla ik op onder de naam no-sidebar.php. Zo herken ik makkelijk welk sjabloon het is.

Nu wordt het bestand nog niet herkend als een sjabloon.
Om een sjabloon ervan te maken voeg ik helemaal bovenaan de volgende code toe:

<?php
/*
Template Name: No sidebar
*/
?>

“No sidebar” is in dit geval de naam van het sjabloon. Deze naam verschijnt straks in de lijst van sjablonen die WordPress toont. Sla het bestand nu op.

In mijn voorbeeld gebruik ik weer de standaard “Over” pagina die bij een WordPress installatie wordt gemaakt.
Ik stel voor die pagina via het Dashboard in welk sjabloon ik wil gebruiken (weet je niet hoe je dit in moet stellen, bekijk dan de tutorial WordPress sjablonen gebruiken).

Als sjabloon kies ik voor het sjabloon dat ik net gemaakt heb (No sidebar) en klik op Bijwerken. Bezoek nu de pagina en je zult zien dat er nog niets veranderd is.

De oorzaak is simpel: het bestand no-sidebar.php is nu weliswaar een sjabloon, maar de opmaak is nog precies hetzelfde als die van page.php.
Daar gaan we nu dus iets aan veranderen.

Om de sidebar uit het thema te halen ga je op zoek naar de functie die de sidebar op het scherm zet. Dat is
get_sidebar();.

Deze regel ga je nu als commentaar maken. Je kunt dat doen door twee slashes voor de regel te zetten. Commentaar staat wel nog in het bestand maar wordt door PHP niet verwerkt.

<?php get_sidebar(); ?>

verander je dus in

<?php //get_sidebar(); ?>

Je kunt ook de volledige regel

<?php get_sidebar(); ?>

verwijderen als je dat liever hebt.

Sla wederom het bestand op en wanneer je nu de pagina bezoekt die het sjabloon gebruikt zul je zien dat de zijbalk verdwenen is.
Je kunt eventueel ook de

<div></div>

verwijderen waar de sidebar in zit, maar in dat geval moet je ook dingen in de CSS gaan veranderen. Omdat dat per thema verschillend is ga ik daar verder niet op in.

Je sjabloon hoeft natuurlijk niet alleen voor de zijbalk te zijn. Er zijn nog veel meer mogelijkheden, bijvoorbeeld de titel van de pagina niet tonen. Ook op deze mogelijkheden ga ik niet verder in, het ligt net aan je eigen wensen.

Belangrijkste is:
Je weet nu hoe je een sjabloon kunt maken op basis van het page.php bestand dat bij het thema zit.

Comments

  1. Zeer duidelijk verhaal. Ben ook benieuwd naar de wijzigingen in css, daar komt ontgetwijfeld nog eens een video over.

  2. Duidelijke video, Glenn!

  3. Glenn super bedankt dit is precies wat ik zocht.

    Groetjes

  4. Ik zou ook helemaal blij worden van een video met uitleg over hoe ik dan de css kan wijzigen.
    Heel erg bedankt voor de duidelijke uitleg!

  5. Glenn, ik was op zoek naar info om van een pagina een template te maken. Ik wilde graag een startscherm zonder sidebar. Dankzij jouw verhaal is dat gelukt! Dank je.
    Groet, Bart

  6. Manon says:

    Momenteel ben ik bezig met het maken van mijn eerste wordpress template en dit onderdeel was het enige dat nog ontbrak.
    Het is dankzij jouw video gelukt dus daar ben ik heel dankbaar voor!

  7. Dank hiervoor, lekker duidelijk! Toch… verschijnt het template niet in mijn pop-up list. Ik gebruik versie 3.5.1. en twenty-twelve theme. Hierin een default template (page.php) en 2 andere templates die in een andere folder templates staan. Ik werk local via Xampp. Enig idee?

  8. en een dag later is het wel zichtbaar… ondanks refreshen moest hij er dus een nachtje over slapen…

  9. Super, heb het meteen gedaan! Ben wel benieuwd naar het stukje over de css, aangezien ik nu een leeg gedeelte rechts hebt waar ik ook vanaf wil…

Speak Your Mind

*