WordPress Ontcijferen: Aangepaste Templates en Template Onderdelen

Met de introductie van WordPress 5.9, kun je nu Volledige-Site Bewerking gebruiken om het uiterlijk van je thema aan te passen. Bovendien kun je toegang krijgen tot meer ontwerpmogelijkheden om je website te bouwen zonder te programmeren met een op blokken gebaseerd thema. Deze basisinstellingen voldoen echter mogelijk niet aan je behoeften.

Gelukkig kun je gemakkelijk aangepaste sjablonen en sjabloononderdelen toevoegen aan je WordPress blokthema. Of je nu gebruikmaakt van Volledige-Site Bewerking of je themabestand bewerkt, je kunt een aangepaste indeling creëren om opnieuw te gebruiken bij het ontwerpen van nieuwe inhoud.

In dit artikel bespreken we wat templates en templateonderdelen zijn. Daarna laten we je zien hoe je deze in WordPress kunt maken. Laten we beginnen!

Een Introductie Tot WordPress Paginasjablonen

Thema’s zijn enkele van de meest veelzijdige functies van WordPress. Door een thema op je site te installeren, kun je het uiterlijk radicaal veranderen om aan je behoeften te voldoen. Bovendien is het meestal eenvoudig om thema’s te vinden die zijn afgestemd op je specifieke niche en veel flexibiliteit bieden tijdens het ontwerpproces.

Echter, er zijn een paar dingen die moeilijk te doen zijn als je alleen een thema gebruikt om het uiterlijk van je site aan te passen. Bijvoorbeeld, wat als je wilt dat je archieven een heel andere indeling hebben dan de rest van je pagina’s? Evenzo wil je misschien dat de zijbalk verschillende informatie bevat op verschillende paginatypes.

Maak kennis met paginasjablonen — een manier om meer controle te krijgen over het uiterlijk van je site. Op sommige manieren zijn paginasjablonen erg vergelijkbaar met thema’s. Beide zijn bestanden met code die je site vertellen hoe informatie weer te geven.

Zoals de naam al doet vermoeden, regelt een paginasjabloon echter alleen de stijl van een specifieke pagina (of een type pagina). Veel thema’s komen met verschillende paginasjablonen waaruit je kunt kiezen, maar je kunt ook je eigen sjabloon maken. Op die manier kun je precies bepalen hoe het moet worden opgezet en welke pagina’s moeten worden toegewezen om dat sjabloon te volgen.

Het begrijpen en gebruiken van templates is technischer dan omgaan met thema’s. Als je echt wilt begrijpen hoe templates werken, wil je misschien wat tijd besteden aan het lezen over de WordPress Template Hiërarchie. Dit systeem kent een prioriteitsniveau toe aan elk type template zodat je WordPress-site altijd weet welke er getoond moet worden.

We gaan nu niet te veel in op dit concept, omdat we ons eerst specifiek gaan richten op paginasjablonen. Laten we beginnen met te verkennen waarom je in de eerste plaats sjablonen zou willen gebruiken.

De Voordelen Van Het Gebruiken Van Paginasjablonen

Tegen deze tijd zou je enig idee moeten hebben waarom paginasjablonen zo nuttig zijn. Ze bieden veel meer controle over het uiterlijk en de indeling van je site dan je normaal gesproken kunt krijgen door je thema aan te passen. De toepassingen voor paginasjablonen zijn talrijk — de enige beperking is je eigen creativiteit.

Om je een idee te geven van het belang van deze functie, volgen hier een paar voorbeelden van situaties waarin je een paginasjabloon zou willen gebruiken:

• Als je wilt dat een bepaalde pagina een volledige breedte lay-out heeft terwijl je voor de andere pagina’s een vaste breedte behoudt.
• Om een aangepaste pagina te creëren die widgets gebruikt die op andere pagina’s niet worden weergegeven.
• Voor het weergeven van aanbevolen berichten aan lezers die relevant zijn voor de specifieke inhoud die ze bekijken.
• Om een pagina te bouwen met een unieke set functies, zoals een bijdragers- of archiefpagina.

Aan het einde van deze post laten we je zien hoe je al deze dingen kunt doen. Zodra je begint te experimenteren met paginasjablonen en een gevoel krijgt voor hoe ze werken, kun je er alles mee doen wat je wilt.

Een Introductie tot Volledige Sitebewerking Met Templates en Template-onderdelen

Met Volledige-Site Bewerking kun je het ontwerp van je website bepalen met blokken. Je gebruikt waarschijnlijk al blokken om WordPress-berichten te maken. Nu kunnen ze je hele site opbouwen, inclusief niet-contentgebieden.

Een voordeel van Volledige-sitebewerking is de paginasjablonen. Ze stellen je in staat om eenvoudig je sjablonen te bekijken en aan te passen zonder dat je handmatig je themabestanden hoeft te bewerken:

In WordPress zijn er ook sjabloondelen, die fungeren als kleinere structurele secties van een paginasjabloon. Je zult gewoonlijk sjabloondelen voor koppen of voetteksten zien:

Met een sjabloon kun je pagina’s bouwen met unieke functies. Je wilt bijvoorbeeld misschien niet dat je homepagina dezelfde indeling heeft als de rest van je inhoud. Daarom kun je een uniek ontwerp bereiken met een paginasjabloon.

Verder kun je tijd besparen tijdens het ontwerpproces door sjablonen en onderdelen van sjablonen te hergebruiken. Door simpelweg op een sjabloon of individueel element te klikken, kun je het direct implementeren.

Hoe Maak Je Sjablonen In WordPress Met De Sjablooneditor

Als je een blokthema gebruikt, komt het met de Sjablooneditor. Door gebruik te maken van deze functie, kun je sjablonen maken en bewerken voor elke pagina of bericht op je website. Het werkt vergelijkbaar met de Blokeditor, waardoor je je thema met blokken kunt aanpassen.

Om te beginnen moet je een blokthema installeren. Navigeer in je WordPress-dashboard naar Appearance > Themes > Add New. Filter vervolgens de resultaten met een Full Site Editing tag:

Selecteer Apply Filters. In de zoekresultaten, installeer en activeer een thema. We gebruiken het standaard Twenty Twenty-Two thema voor deze tutorial:

Om een nieuwe sjabloon te maken, begin met het toevoegen van een nieuwe post of pagina. Vervolgens, in het Post instellingen tabblad, zoek de Sjabloon sectie en selecteer de Nieuw knop:

In het pop-upvenster, geef je nieuwe sjabloon een naam. Kies vervolgens Create:

Dit opent automatisch de Sjabloonbewerker. Je kunt je sjabloon ontwerpen met dezelfde blokken die je in een bericht zou gebruiken. Het is echter belangrijk om te weten dat deze blokken aan elk bericht met dit sjabloon worden toegevoegd:

Je kunt ook blokken toevoegen die gerelateerd zijn aan je thema. Door naar beneden te scrollen naar de Theme sectie van de blokopties, kun je een logo, tagline, reacties op berichten en meer weergeven:

Wanneer je klaar bent met het aanpassen van je sjabloon, klik op Publiceren. Daarna, wanneer je een bericht of pagina aan dat sjabloon wilt toewijzen, selecteer het gewoon in het instellingen tabblad.

Hoe Template Onderdelen Te Maken In WordPress Met De Site Editor

Met een blokthema kun je sjablonen bewerken met de Site-editor. Je kunt je thema direct bewerken in plaats van een nieuw bericht of een nieuwe pagina te maken.

Eerst ga je naar je dashboard. Daarna selecteer je Appearance > Editor (beta):

Dit opent de Site Editor. Om de sjablonen en sjabloondelen van je thema te vinden, klik op het WordPress-icoon in de linkerbovenhoek:

Na het selecteren van Template Parts, zie je een lijst met standaardopties. Om een nieuw template-onderdeel toe te voegen, klik je op de Voeg Nieuw Toe knop:

Maak vervolgens een naam voor je sjabloononderdeel en kies waar je het wilt plaatsen. De drie plaatsingsgebieden zijn Algemeen, Header en Footer:

Wanneer je klaar bent, selecteer Create. Dit brengt je naar het geïsoleerde sjabloongedeelte, dat je kunt aanpassen door blokken toe te voegen:

Je kunt een eenvoudige oproep tot actie, website-logo of iets anders weergeven dat je misschien wilt hergebruiken als een sjabloononderdeel. Zodra het opgeslagen is, kun je het aan elk sjabloon toevoegen door simpelweg het Template Part blok in te voegen.

Hoe Maak Je Aangepaste Sjablonen en Sjabloononderdelen in WordPress (Handmatig Coderen)

Hoewel Volledige Site-Bewerking je in staat stelt om sjablonen en sjabloondelen voor een bestaand thema te maken, wil je misschien je eigen thema ontwikkelen. Bovendien kan deze optie je meer controle geven over het uiterlijk van je website.

Als je jouw nieuwe thema bouwt vanuit een bestaand thema, raden we het aanmaken van een child-thema aan. Deze stap zorgt ervoor dat nieuwe updates op het parent-thema jouw aanpassingen niet overschrijven.

Stap 1: Voeg Een Configuratiebestand Toe

Met eerdere PHP-gebaseerde thema’s, kon je de kop van je sjabloonbestand bewerken. Echter, om aangepaste inhoud in een blok-gebaseerd thema te creëren, moet je een nieuw theme.json-bestand aanmaken.

Je moet eerst toegang krijgen tot je site via Secure File Transfer Protocol (SFTP) of het site manager Dashboard van je hostingprovider. Zoek vervolgens naar de themes-map, die zich onder wp-content zou moeten bevinden:

In je child-thema map, maak een nieuw bestand. Label het als “theme.json”:

In dit bestand, voeg het versienummer tussen accolades toe. Als je dit niet doet, wordt het gelezen als “versie 0”:

{
    "versie": 2
}

Je moet dit theme.json-bestand configureren om de breedte van je inhoud te ondersteunen. Na je versienummer, kopieer en plak deze extra code:

{
        "version": 2,
"settings": {
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
 }
 }
}

Dit stelt de breedte van je inhoud in op 840px. De brede breedte wordt ook bijgewerkt naar 1100px. Deze waarden komen overeen met de standaardbreedtes in de Site Editor, maar je kunt ze zo nodig aanpassen.

Aangezien de breedte van de inhoud nu 840px is, zal het veel ruimte bieden voor elke regel tekens. Afhankelijk van je gekozen lettertype en grootte, moet je dit mogelijk aanpassen zodat kijkers je inhoud comfortabel kunnen lezen.

Stap 2: Maak Nieuwe Sjabloononderdelen

Ga dan terug naar je themes-map en open de templates-map:

Hier, maak een index.html bestand:

Keer terug naar je themamap en klik op template-parts. Maak binnen deze map bestanden voor footer.html en header.html:

In het header.html bestand, voeg code toe voor je site titel en tagline blokken. Je kunt dit doen door het volgende blokmarkering op te nemen:

<!-- wp:site-title /-->
<!-- wp:site-tagline /-->

Ga vervolgens naar het bestand footer.html en plak de volgende code:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Met trots aangedreven door 
<a href="https://wordpress.org/">WordPress</a>.</p>
<!-- /wp:paragraph /—->

Zodra je deze sjabloondelen toevoegt, kunnen ze gemakkelijk worden geïdentificeerd wanneer je klaar bent om je thema te testen.

Stap 3: Combineer De Template Onderdelen

De volgende stap is het plaatsen van blokmarkeringen voor je sjabloondelen in je sjabloon HTML-bestand. Open de map templates en zoek het bestand index.html dat je in de vorige stap hebt gemaakt.

Daarna moet je code toevoegen voor je twee sjabloononderdelen:

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:template-part {"slug":"footer"} /—->

Gebaseerd op de naam van het templateonderdeelbestand, zal deze naam de slug worden. Bijvoorbeeld, het templateonderdeel header.html zal “header” als zijn slug hebben.

Voeg vervolgens het juiste HTML-element toe voor elk template-onderdeel. Ze zullen de locatie van het template-onderdeel aangeven:

"tagName":"header"
"tagName":"footer"

Als je van plan bent CSS te gebruiken om deze kop- en voettekst te identificeren, moet je een aangepaste CSS-klassenaam toevoegen. Je kunt deze code aan het einde van elke regel plaatsen:

"className":"site-header"
"className":"site-footer"

Ten slotte moet de lay-outinstelling die je hebt ingevoerd in het theme.json-bestand worden ondersteund. Om dit te doen, voeg je deze code toe aan elk sjabloononderdeel:

"layout":{"inherit":true}

Hier is hoe de resulterende code eruit zou moeten zien:

Nadat je klaar bent met coderen, kun je een voorbeeld van je site bekijken om deze wijzigingen in je lay-out te zien.

Klaar om Je Eigen Aangepaste Sjablonen te Maken?

Als je het ontwerpproces van je website wilt stroomlijnen, is het een goed idee om Volledige-Site-Bewerking te gebruiken. Je kunt gemakkelijk het uiterlijk van je site aanpassen met sjablonen en sjabloondelen door gebruik te maken van deze functie. Deze aanpak kan een eenvoudiger alternatief zijn dan het volledig opnieuw ontwerpen van elke pagina vanaf nul.

Om te herhalen, hier zijn de verschillende manieren waarop je sjablonen en sjabloononderdelen in WordPress kunt maken:

1. Maak een nieuw sjabloon met de Sjabloon Editor.
2. Maak sjabloononderdelen met de Site Editor.
3. Codeer sjablonen en sjabloononderdelen handmatig.

Het coderen van je eigen thema kan lastig zijn, vooral als je geen ervaring hebt met webontwikkeling. Als je je lay-out vanaf nul wilt aanpassen, wil je misschien een professionele ontwerper inhuren. Met onze Custom Web Design Pro Service kun je dit ingewikkelde codeerproces vermijden en een hoogwaardige website laten ontwerpen voor jouw merk!