Over de auteur

Nick Schäferhoff is een ondernemer, online marketeer en professionele blogger uit Duitsland. Wanneer hij geen websites bouwt, inhoud maakt of zijn klanten helpt … Meer over Nick↬

Ik zie WordPress graag als het gateway-medicijn voor webontwikkeling. Veel mensen die het platform gaan gebruiken, zijn in eerste instantie alleen op zoek naar een comfortabele (en gratis) manier om een eenvoudige website te maken, vaak met behulp van een WordPress-pagina builder-plug-in. Zoiets als “Ik ga het maar een keer proberen.”

Maar een flink aantal gebruikers stopt daar niet. In plaats daarvan raken ze verslaafd. Kom met meer ideeën. Experiment. Probeer nieuwe plug-ins uit. Ontdek Firebug. Boom. Binnenkort is er geen weg meer terug. Klinkt dat als jouw verhaal? Als WordPress-gebruiker is het niet meer dan normaal dat je steeds meer controle over je website wilt. Verlang naar aangepast ontwerp, aangepaste functionaliteit, alles op maat.

Verder lezen over SmashingMag:

• Hoe een WordPress-kindthema te maken en aan te passen
• Bouwen Een aangepaste archiefpagina voor WordPress
• WordPress-archieven aanpassen

Gelukkig is WordPress precies daarvoor gebouwd. Zijn flexibele structuur en gecompartimenteerde architectuur stelt iedereen in staat praktisch alles op zijn site te veranderen.

Een van de belangrijkste tools in de zoektocht naar volledige websitecontrole zijn paginasjablonen. Ze stellen gebruikers in staat het ontwerp en de functionaliteit van hun website ingrijpend te veranderen. Wilt u een aangepaste koptekst voor uw voorpagina? Gedaan. Een extra zijbalk alleen voor uw blogpagina? Geen probleem. Een unieke 404-foutpagina? Worden. Mijn. Gast.

Als u wilt weten hoe WordPress-paginasjablonen u daarbij kunnen helpen, lees dan verder. Maar eerst wat achtergrondinformatie.

Sjabloonbestanden in WordPress

Waar hebben we het over als we het hebben over sjablonen in de context van WordPress? De korte versie is dat sjablonen bestanden zijn die WordPress vertellen hoe verschillende soorten inhoud moeten worden weergegeven.

De iets langere versie: elke keer dat iemand een verzoek stuurt om een deel van uw website te bekijken, komt het WordPress-platform erachter welke inhoud ze willen zien en hoe dat specifieke deel van uw website moet worden weergegeven.

Voor het laatste zal WordPress proberen het meest geschikte sjabloonbestand te gebruiken dat binnen uw thema wordt gevonden. Welke wordt bepaald op basis van een vaste volgorde, de WordPress-sjabloonhiërarchie. U kunt zien hoe dit eruitziet in de onderstaande schermafbeelding of in deze interactieve versie.

De sjabloonhiërarchie is een lijst met sjabloonbestanden waarmee WordPress bekend is en die zijn gerangschikt om te bepalen welke bestand heeft voorrang op een ander.

Je kunt het zien als een beslissingsboom. Wanneer WordPress probeert te beslissen hoe een bepaalde pagina moet worden weergegeven, werkt het naar beneden in de sjabloonhiërarchie totdat het het eerste sjabloonbestand vindt dat op de gevraagde pagina past. Als iemand bijvoorbeeld probeert toegang te krijgen tot het adres http://yoursite.com/category/news, zoekt WordPress naar het juiste sjabloonbestand in deze volgorde:

Onderaan de hiërarchie staat index .php. Het wordt gebruikt om alle inhoud weer te geven waarvoor geen specifieker sjabloonbestand aan de naam is gekoppeld. Als een sjabloonbestand hoger in de hiërarchie staat, zal WordPress dat bestand automatisch gebruiken om de betreffende inhoud weer te geven.

Paginasjablonen en hun gebruik

Voor pagina’s, de standaardsjabloon is gewoonlijk de toepasselijke naam page.php. Tenzij er een specifieker sjabloonbestand beschikbaar is (zoals archive.php voor een archiefpagina), gebruikt WordPress page.php om de inhoud van alle pagina’s op uw website weer te geven.

In veel gevallen het kan nodig zijn om het ontwerp, de look, het gevoel of de functionaliteit van afzonderlijke delen van uw website te wijzigen. Dit is waar paginasjablonen in het spel komen.Met aangepaste paginasjablonen kunt u elk deel van uw WordPress-site individualiseren zonder de rest ervan te beïnvloeden.

Misschien heeft u dit al aan het werk gezien. Veel WordPress-thema’s hebben tegenwoordig bijvoorbeeld een optie om uw pagina naar de volledige breedte te wijzigen, een tweede zijbalk toe te voegen of de locatie van de zijbalk te wijzigen. Als dat het geval is voor de uwe, is dit waarschijnlijk gedaan via sjabloonbestanden. Er zijn verschillende manieren om dit te bereiken en we zullen ze later bespreken.

Maar eerst een waarschuwing: aangezien het werken met sjablonen inhoudt dat u bestanden in uw actieve thema moet bewerken en wijzigen, is het altijd goed idee om met een child-thema te gaan bij het maken van dit soort aanpassingen. Op die manier loopt u niet het gevaar dat uw wijzigingen worden overschreven wanneer uw hoofdthema wordt bijgewerkt.

Hoe u een pagina in WordPress kunt aanpassen

Er zijn drie basismanieren om aangepaste paginasjablonen in WordPress: voorwaardelijke verklaringen toevoegen aan een bestaande sjabloon; het creëren van specifieke paginasjablonen die hoger in de hiërarchie staan; en het direct toewijzen van sjablonen aan specifieke pagina’s. We zullen deze achtereenvolgens bekijken.

Voorwaardelijke tags gebruiken in standaardsjablonen

Een gemakkelijke manier om paginaspecifieke wijzigingen aan te brengen, is door de vele voorwaardelijke tags van WordPress toe te voegen aan een sjabloon al in gebruik. Zoals de naam doet vermoeden, worden deze tags gebruikt om functies te creëren die alleen worden uitgevoerd als aan een bepaalde voorwaarde is voldaan. In de context van paginasjablonen zou dit iets zijn in de trant van “Voer alleen actie X uit op pagina Y”.

Doorgaans voegt u voorwaardelijke tags toe aan het page.php-bestand van uw thema (tenzij, van u wilt natuurlijk een ander deel van uw website aanpassen). Ze stellen u in staat om wijzigingen aan te brengen die beperkt zijn tot de startpagina, voorpagina, blogpagina of elke andere pagina van uw site.

Hier volgen enkele veelgebruikte voorwaardelijke tags:

Wanneer bijvoorbeeld toegevoegd aan uw page.php in plaats van de standaard get_header(); -tag, laadt de volgende code een aangepast header-bestand met de naam header -shop.php bij het weergeven van de pagina http://yoursite.com/products.

Een goede use case hiervoor zou zijn als u een winkel op uw site hebben en u moet een andere headerafbeelding of aangepast menu op de winkelpagina weergeven. U kunt deze aanpassingen vervolgens toevoegen in header-shop.php en het wordt op de juiste plaats weergegeven.

Voorwaardelijke tags zijn echter niet li beperkt tot één pagina. U kunt als volgt verschillende uitspraken achter elkaar doen:

In dit tweede voorbeeld veranderen twee voorwaarden het gedrag van verschillende pagina’s op uw site. Naast het laden van het eerder genoemde winkel-specifieke header-bestand, zou het nu ook een header-about.php laden op een pagina met de ID van 42. Voor alle andere pagina’s is het standaard header-bestand van toepassing.

Voor meer informatie over het gebruik van voorwaardelijke tags, worden de volgende bronnen sterk aanbevolen:

• WordPress Codex: voorwaardelijke tags
• ThemeLab: de ultieme gids voor WordPress voorwaardelijke tags

Paginaspecifieke bestanden maken in de WordPress-hiërarchie

Voorwaardelijke tags zijn een geweldige manier om kleinere wijzigingen in uw paginasjablonen aan te brengen. U kunt natuurlijk ook grotere aanpassingen maken door veel voorwaardelijke instructies achter elkaar te gebruiken. Ik vind dit echter een erg omslachtige oplossing en zou in plaats daarvan kiezen voor aangewezen sjabloonbestanden.

Een manier om dit te doen is door gebruik te maken van de WordPress-sjabloonhiërarchie. Zoals we hebben gezien, zal de hiërarchie een lijst met mogelijke sjabloonbestanden doorlopen en de eerste kiezen die past. Voor pagina’s ziet de hiërarchie er als volgt uit:

• Aangepaste paginasjabloon
• pagina- {slug} .php
• pagina- {id} .php
• page.php
• index.php

In de eerste plaats zijn er aangepaste paginasjablonen die direct aan een bepaalde pagina zijn toegewezen. Als een van deze bestaat, zal WordPress deze gebruiken, ongeacht welke andere sjabloonbestanden aanwezig zijn. We zullen straks meer over aangepaste paginasjablonen praten.

Daarna gaat WordPress op zoek naar een paginasjabloon die de slug van de betreffende pagina bevat. Als u bijvoorbeeld een bestand met de naam page-about.php opneemt in uw themabestanden, gebruikt WordPress dit bestand om uw ‘Over’-pagina weer te geven of welke pagina dan ook te vinden is onder http://www.yoursite.com/about .

Als alternatief kunt u hetzelfde bereiken door uw pagina-ID te targeten. Dus als diezelfde pagina een ID van 5 heeft, gebruikt WordPress het sjabloonbestand page-5.php vóór page.php als het bestaat; dat wil zeggen, alleen als er geen paginasjabloon van een hogere rangorde beschikbaar is.

(U kunt trouwens de ID voor elke pagina achterhalen door over de titel te bewegen onder ‘Alle pagina’s’ in uw WordPress-achterkant -end. De ID wordt weergegeven in de link die door uw browser wordt weergegeven.)

Aangepaste paginasjablonen toewijzen

Naast het leveren van sjablonen in een vorm die WordPress automatisch zal gebruiken, is het ook mogelijk om handmatig aangepaste sjablonen toe te wijzen aan specifieke pagina’s.Zoals u kunt zien in de sjabloonhiërarchie, zullen deze elk ander sjabloonbestand in de themamap overtroeven.

Net als het maken van paginaspecifieke sjablonen voor de WordPress-hiërarchie, vereist dit dat u een sjabloonbestand en link het vervolgens naar de pagina waarvoor u het wilt gebruiken. Dit laatste kan op twee verschillende manieren worden gedaan die u misschien al kent. Voor het geval u dat niet bent, hier is hoe u het moet doen.

1. Aangepaste paginasjablonen toewijzen vanuit de WordPress-editor

In de WordPress-editor vind je een optieveld genaamd ‘Paginakenmerken’ met een vervolgkeuzemenu onder ‘Sjabloon’.

Als je erop klikt, krijg je een lijst met beschikbare paginasjablonen op je WordPress-website. Kies degene die u wenst, sla uw pagina op of update deze en u bent klaar.

2. Een aangepaste sjabloon instellen via Snel bewerken

Hetzelfde kan ook worden bereikt zonder de WordPress-editor te openen. Ga naar ‘Alle pagina’s’ en plaats de muisaanwijzer op een item in de lijst daar. Er wordt een menu zichtbaar met het item ‘Snel bewerken’.

Klik erop om de pagina-instellingen rechtstreeks vanuit de lijst te bewerken. U ziet hetzelfde vervolgkeuzemenu voor het kiezen van een ander paginasjabloon. Kies er een, werk de pagina bij en je bent klaar.

Niet zo moeilijk toch? Maar wat als u nog geen aangepaste paginasjabloon heeft? Hoe creëer je het zodat je website er precies uitziet zoals jij dat wilt? Maak je geen zorgen, daar gaat het volgende deel over.

Een stapsgewijze handleiding voor het maken van aangepaste paginasjablonen

Het samenstellen van aangepaste sjabloonbestanden voor uw pagina’s is niet dat is moeilijk, maar hier zijn een paar details waar je op moet letten. Laten we daarom het proces stukje bij beetje doornemen.

1. Vind de standaardsjabloon

Een goede manier is om te beginnen met het kopiëren van de sjabloon die momenteel wordt gebruikt door de pagina die u wilt wijzigen. Het is gemakkelijker om bestaande code te wijzigen dan om een hele pagina helemaal opnieuw te schrijven. In de meeste gevallen is dit het page.php-bestand.

(Als u niet weet welk sjabloonbestand wordt gebruikt op de pagina die u wilt bewerken, zal de plug-in What The File nuttig blijken.)

Ik zal het Twenty Twelve-thema gebruiken voor demonstraties. Hier is hoe zijn standaard paginasjabloon eruit ziet:

Zoals je kunt zien, niets bijzonders hier: de gebruikelijke oproepen voor de kop- en voettekst, en de lus in het midden. De pagina in kwestie ziet er als volgt uit:

2. Kopieer en hernoem het sjabloonbestand

Nadat u het standaard sjabloonbestand heeft geïdentificeerd, is het tijd om een kopie te maken. We zullen het gedupliceerde bestand gebruiken om de gewenste wijzigingen op onze pagina aan te brengen. Daarvoor zullen we het ook moeten hernoemen. Er kunnen geen twee bestanden met dezelfde naam zijn, dat is voor iedereen gewoon verwarrend.

Het staat je vrij om het bestand elke gewenste naam te geven, zolang het maar niet begint met een van de gereserveerde themabestandsnamen . Noem het dus niet page-something.php of iets anders waardoor WordPress denkt dat het een speciaal sjabloonbestand is.

Het is logisch om een naam te gebruiken die gemakkelijk identificeert wat dit sjabloonbestand wordt gebruikt for, zoals my-custom-template.php. In mijn geval ga ik voor custom-full-width.php.

3. Pas de sjabloonbestandkop aan

Vervolgens moeten we WordPress vertellen dat dit nieuwe bestand een aangepaste paginasjabloon is. Daarvoor zullen we de bestandsheader op de volgende manier moeten aanpassen:

De naam onder ‘Sjabloonnaam’ is wat wordt weergegeven onder ‘Pagina Attributes ‘in de WordPress-editor. Zorg ervoor dat u deze aanpast aan uw sjabloonnaam.

4. Pas de code aan

Nu is het tijd om naar het vlees en de aardappelen van de paginasjabloon te gaan: de code. In mijn voorbeeld wil ik alleen de zijbalk van mijn demopagina verwijderen.

Dit is relatief eenvoudig, omdat ik alleen <?php get_sidebar(); ?> van mijn paginasjabloon, aangezien dat de zijbalk wordt genoemd. Als gevolg hiervan ziet mijn aangepaste sjabloon er als volgt uit:

5. Upload de paginasjabloon

Na het opslaan van mijn aangepaste bestand, is het nu tijd om het naar mijn website te uploaden. Aangepaste paginasjablonen kunnen op verschillende plaatsen worden opgeslagen om door WordPress te worden herkend:

• De map van uw actieve (kind) thema
• De map van uw hoofdhoofdthema
• Een submap binnen elk van deze

Persoonlijk vind ik het leuk om een map met de naam page_templates in mijn child-thema te maken en daar eventuele aangepaste sjablonen in te plaatsen.Ik vind dit het gemakkelijkst om een overzicht te behouden over mijn bestanden en aanpassingen.

6. Activeer de sjabloon

Als laatste stap moet u de paginasjabloon activeren. Zoals eerder vermeld, gebeurt dit onder Paginakenmerken → Sjablonen in de WordPress-editor. Bewaar, bekijk de pagina en voilà! Hier is mijn aangepaste pagina zonder zijbalk:

Niet zo moeilijk, toch? Maakt u zich geen zorgen, u zult het snel onder de knie krijgen. Om u een betere indruk te geven van waarvoor u deze paginasjablonen moet gebruiken, zal ik aanvullende use-cases demonstreren (inclusief de code) voor de rest van het artikel.

Vijf verschillende manieren om paginasjablonen te gebruiken

Zoals eerder vermeld, kunnen paginasjablonen voor veel verschillende doeleinden worden gebruikt. Met hun hulp kunt u vrijwel alles op elke pagina aanpassen. Alleen je verbeeldingskracht (en codeervaardigheden) staat je in de weg.

1. Paginasjabloon met volledige breedte

Het eerste geval dat we zullen bekijken, is een geavanceerde versie van de demosjabloon die we hierboven hebben gemaakt. Daarboven hebben we de zijbalk al verwijderd door <?php get_sidebar(); ?> uit de code te verwijderen. Zoals je echter hebt gezien in de schermafbeelding, resulteert dit niet echt in een lay-out over de volledige breedte, aangezien de inhoudsectie aan de linkerkant blijft.

Om dit aan te pakken, moeten we met name de CSS behandelen dit deel:

Het width attribuut beperkt het element dat onze inhoud bevat tot 65,1042% van de beschikbare ruimte . We willen dit vergroten.

Als we het echter gewoon naar 100% veranderen, heeft dit invloed op alle andere pagina’s op onze site, en dat is verre van wat we willen. Daarom is de eerste volgorde hier om de primaire div ’class in onze aangepaste sjabloon te wijzigen in iets anders, zoals class="site-content-fullwidth”. Het resultaat:

Nu kunnen we de CSS aanpassen voor onze nieuwe aangepaste klasse:

Als resultaat strekt de inhoud nu alle de weg over het scherm.

2. Dynamische 404-foutpagina met widgetgebieden

De 404-foutpagina is waar iedereen terechtkomt die probeert toegang te krijgen tot een pagina op uw website die niet bestaat, hetzij door een typefout, een defecte link of omdat de de permalink van de pagina is veranderd.

Ondanks het feit dat het krijgen van een 404 door iedereen op internet niet gewaardeerd wordt, is de 404-foutpagina niet van weinig belang als je een website beheert. De inhoud ervan kan de doorslaggevende factor zijn om te bepalen of iemand uw site onmiddellijk verlaat of blijft hangen en uw andere inhoud bekijkt.

Het coderen van een aangepaste foutpagina vanaf het begin is omslachtig, vooral als u niet zeker bent van uw mogelijkheden . Een betere manier is om widgetgebieden in uw sjabloon in te bouwen, zodat u flexibel kunt wijzigen wat daar wordt weergegeven door middel van slepen en neerzetten.

Hiervoor pakken en bewerken we het bestand 404.php dat wordt meegeleverd met Twenty Twelve ( sjabloonhiërarchie, weet je nog?). Voordat we daar iets aan veranderen, zullen we echter eerst een nieuwe widget maken door de volgende code in ons functions.php-bestand in te voegen:

Dit zou de nieuw gemaakte widget in uw WordPress-back-end moeten weergeven. Om er zeker van te zijn dat het daadwerkelijk op de site verschijnt, moet u de volgende regel code op de juiste plaats aan uw 404-pagina toevoegen:

Na als ik de sjabloon naar mijn site upload, is het tijd om mijn nieuwe widgetgebied te vullen:

Als ik nu de 404-foutpagina bekijk, worden mijn nieuw gemaakte widgets daar weergegeven:

3. Paginasjabloon voor het weergeven van aangepaste berichttypen

Aangepaste berichttypen zijn een geweldige manier om inhoud te introduceren die zijn eigen set gegevenspunten, ontwerp en andere aanpassingen heeft. Een favoriete use case voor deze berichttypen zijn recensie-items zoals boeken en films. In ons geval willen we een paginasjabloon bouwen die portfolio-items toont.

We moeten eerst ons aangepaste berichttype (CPT) maken. Dit kan handmatig of via plug-in worden gedaan. Een plug-in-optie die ik van harte kan aanbevelen, is Types. Hiermee kunt u eenvoudig aangepaste berichttypen en aangepaste velden maken.

Typen installeren en activeren, een aangepast bericht toevoegen, ervoor zorgen dat de slug ‘portfolio’ is, alle velden aanpassen die u nodig hebt (zoals het toevoegen van een uitgelichte afbeelding ), pas eventuele andere opties aan en sla op.

Nu we ons posttype voor portfolio’s hebben, willen we dat het op onze site verschijnt. Het eerste dat we zullen doen, is de betreffende pagina maken.Houd er rekening mee dat als u ‘portfolio’ kiest als de slug van uw CPT, de pagina niet dezelfde slug kan hebben. Ik ging met mijn clients-portfolio en voegde ook wat voorbeeldtekst toe.

Na het toevoegen van een paar items in de sectie ‘portfolio’ berichttype, willen we dat ze op onze pagina verschijnen, direct onder de pagina-inhoud.

Om dit te bereiken zullen we opnieuw een afgeleide van het page.php-bestand gebruiken. Kopieer het, noem het portfolio-template.php en verander de header naar dit:

In dit geval zullen we echter een paar wijzigingen moeten aanbrengen in het originele sjabloon. Als je de code van page.php bekijkt, zul je zien dat het een ander sjabloonbestand in het midden aanroept, genaamd content-page.php (waar staat <?php get_template_part( ‘content’, ‘page’ ); ?>). In dat bestand vinden we de volgende code:

Zoals u kunt zien, wordt hier de paginatitel en inhoud genoemd. Aangezien we die zeker op onze portfoliosite willen hebben, zullen we de benodigde delen van deze sjabloon naar ons page.php-bestand moeten kopiëren. Het resultaat ziet er als volgt uit:

Om de portfolio-items op onze pagina te krijgen, zullen we de volgende code direct onder de the_content() oproep toevoegen.

Hierdoor zal de CPT op de pagina verschijnen:

Ik weet zeker dat we het er allemaal over eens zijn dat het er minder fantastisch uitziet, dus enige vormgeving is in orde.

Veel beter, vind je niet?

En hier is de volledige code voor de portfoliopagina-sjabloon:

4. Bijdragerpagina met avatarafbeeldingen

De volgende in onze pagina voor het gebruik van sjablonen is een bijdragerspagina. We willen een lijst van auteurs op onze website opstellen, inclusief hun afbeeldingen en het aantal berichten dat ze onder hun naam hebben gepubliceerd. Het eindresultaat ziet er als volgt uit:

We zullen opnieuw beginnen met ons hybride bestand van eerder en de code voor de bijdragerslijst eraan toevoegen. Maar wat als u niet weet hoe u zoiets moet maken? Geen zorgen, u kunt rondkomen met intelligent stelen.

Zie je, het Twenty Fourteen-standaardthema wordt standaard geleverd met een bijdragerspagina. U kunt het sjabloon vinden in de map page-templates met de naam contributors.php.

Als u het bestand bekijkt, vindt u daar echter alleen de volgende aanroep: twentyfourteen_list_authors();. Gelukkig concludeer je als fervent WordPress-gebruiker nu dat dit waarschijnlijk verwijst naar een functie in het function.php-bestand van Twenty Fourteen en je zou gelijk hebben.

Van wat we daar vinden, is het deel dat ons interesseert this:

We zullen het opnieuw toevoegen onder de aanroep voor the_content() met het volgende resultaat:

Nu voor een klein beetje styling:

En dat zou het moeten zijn. Bedankt Twenty Fourteen!

5. Aangepaste archiefpagina

Twenty Twelve wordt geleverd met een eigen sjabloon voor archiefpagina’s. Het zal bijvoorbeeld in actie komen wanneer u probeert alle eerdere berichten uit een bepaalde categorie te bekijken.

Ik wil echter iets meer dat lijkt op wat Problogger heeft gedaan: een pagina waarop mensen aanvullende inhoud op mijn site op verschillende manieren. Dat wordt, nogmaals, gedaan met een paginasjabloon.

Als we bij onze gemengde sjabloon van vroeger blijven, zullen we het volgende toevoegen onder de the_content() aanroep:

Plus, een klein beetje styling voor de zoekbalk:

En het resultaat zou er ongeveer zo uit moeten zien:

Ter wille van de voltooiing is hier het volledige bestand:

Vergeet niet om het toe te wijzen aan een pagina!

WordPress-paginasjablonen in een notendop

Op weg naar het beheersen van WordPress is het leren gebruiken van paginasjablonen een belangrijke stap. Ze kunnen het aanpassen van uw website heel, heel gemakkelijk maken en u in staat stellen om unieke functionaliteit en ontwerp toe te wijzen aan zoveel of weinig pagina’s als u wilt. Van het toevoegen van widgetgebieden tot het tonen van aangepaste berichttypen tot het weergeven van een lijst met de bijdragers van uw website – de mogelijkheden zijn praktisch eindeloos.

Of u voorwaardelijke tags gebruikt, de WordPress-sjabloonhiërarchie exploiteert of paginaspecifieke sjabloonbestanden maakt, is geheel aan u en wat u probeert te bereiken. Begin klein en werk je een weg naar meer gecompliceerde dingen. Het zal niet lang duren voordat elk onderdeel van uw WordPress-website op al uw telefoontjes reageert.