Wat is de WordPress Sjabloonhiërarchie en hoe werkt het?

Als je thema’s wilt ontwikkelen, moet je de WordPress sjabloonhiërarchie begrijpen. Het CMS gebruikt sjabloonbestanden om inhoud weer te geven aan de voorkant. Daarom is het leren van de grondbeginselen van de WordPress hiërarchie essentieel voor het aanpassen van thema’s of het bouwen van een thema vanaf nul.

Hoewel het maken van een WordPress thema geen raketwetenschap is, moet je wel op de hoogte zijn van de basisprincipes. Naast veilige WP hosting, domein, thema en plugins, moet je ook de template hiërarchie begrijpen. In dit artikel leggen we uit hoe de hiërarchie, paginastructuur en sjabloonbestanden van WP werken, zodat je thema’s kunt gaan bouwen en aanpassen als een professional. Laten we erin duiken!

Wat is de WordPress Sjabloonhiërarchie?

WordPress sjabloonhiërarchie is de structuur die bepaalt welke sjablonen worden gebruikt en in welke volgorde bij het weergeven van een webpagina. In technische termen gebruikt het query strings om door de hiërarchie te bladeren tot het de eerste passende sjabloon vindt. Deze hiërarchie stelt webontwikkelaars in staat om aangepaste paginalay-outs te maken voor verschillende soorten inhoud door voorrang te geven aan specifieke sjabloonbestanden boven hun algemene tegenhangers.

Als WordPress een specifiek sjabloonbestand niet kan vinden, gaat het verder in de hiërarchie totdat het het eerste bruikbare bestand vindt. Daarom zorgt het begrijpen en gebruiken van de sjabloonhiërarchie voor meer flexibiliteit en controle over het uiterlijk en de functionaliteit van een WordPress site.

Statische websites gebruiken meestal statische HTML en CSS voor het renderen van hun inhoud aan de voorkant. WordPress is echter een dynamisch platform en is gebaseerd op de programmeertaal PHP. Elke WordPress website laadt tonnen PHP bestanden, die elk specificeren hoe verschillende secties op de pagina eruit zullen zien.

Elk Content Management Systeem zoekt elke keer dat je een webapplicatie laadt naar de sjabloonbestanden. Als je bijvoorbeeld de zoekfunctie van WordPress gebruikt, zoekt het CMS naar twee sjabloonbestanden.

1. Search.php bepaalt hoe je zoekpagina’s eruit zien
2. Index.php is het standaard sjabloonbestand dat WordPress gebruikt als het de bovenste optie binnen een hiërarchie niet kan identificeren.

Wat zijn WordPress Sjabloonbestanden?

Sjabloonbestanden zijn een onderdeel van de WordPress architectuur. De code legt de route vast voor het weergeven van inhoud op berichten, pagina’s en andere gebieden op de website. Sjabloon hiërarchie WordPress maakt deel uit van elk thema of lay-out die je gebruikt. Klassieke WordPress thema’s gebruiken over het algemeen PHP-bestanden die zijn ontwikkeld met HTML en PHP-codes. Terwijl moderne blokthema’s alleen HTML-bestanden gebruiken.

De meeste WordPress sites hebben meerdere sjabloonbestanden nodig om inhoud weer te geven. Hier zijn de zeven veelgebruikte sjabloonbestanden waar je bekend mee moet zijn.

1. Index.php
2. Header.php
3. Footer.php
4. Sidebar.php
5. Functions.php
6. Comments.php
7. Single.php

Blog posts gebruiken over het algemeen het bestand single.php als standaardsjabloon voor het weergeven van inhoud, terwijl de header, footer en sidebar op individuele pagina’s hun respectievelijke .php-bestanden gebruiken. De laatste drie bestanden worden sjabloon partials genoemd, omdat ze ook kunnen worden gebruikt om andere sjablonen te definiëren. Daarover later meer.

Begrijpen hoe sjabloonhiërarchie werkt

Een typisch WordPress thema bestaat uit meerdere sjablonen. Daarom moet het platform ontcijferen welke sjabloon het moet gebruiken om inhoud weer te geven. Daarom moeten sommige sjabloonbestanden voorrang hebben op andere. En dat is de essentie van sjabloonhiërarchie.

Sjabloonbestanden met hoge prioriteit zijn de back-up als WordPress er niet in slaagt om een gebruikersspecifieke hiërarchie te vinden. WordPress zoekt naar een geselecteerd sjabloonbestand wanneer gebruikers een webpagina willen zien. Als het CMS het juiste sjabloon niet kan vinden, zal het de hiërarchie gebruiken om het eerstvolgende meest geschikte sjabloon te vinden.

Als je bijvoorbeeld een webpagina probeert te laden, bijvoorbeeld voor de categorie shared hosting, dan gebeurt dit op de achtergrond.

• WordPress zoekt naar een sjabloonbestand met de naam “category-shared-hosting.php” in de map van het geïnstalleerde thema.
• Als het bestand niet gevonden kan worden, gaat WordPress in plaats daarvan zoeken naar de categorie-ID. Bijvoorbeeld “categorie-2.php.”
• Als een van beide sjabloonbestanden niet gevonden wordt, zal WordPress zoeken naar een algemeen “category.php” bestand.
• De zoektocht eindigt daar niet, want de volgende in de rij is het bestand “archive.php”.
• Als al het andere faalt, gebruikt WordPress het “index.php” bestand van je thema als standaard sjabloon.

Elke WordPress website bestaat uit meerdere categorieën, elk met een eigen sjabloonhiërarchie voor naadloze navigatie en snelle toegang. Een typische website kan worden onderverdeeld in zeven sjabloonstijlen. Laten we ze wat gedetailleerder met je doornemen.

Voorpagina

De voorpagina of homepage is de belangrijkste landingspagina voor een website omdat bezoekers hier normaal gesproken landen. De hiërarchie van de voorpagina bestaat meestal uit drie sjabloonbestanden, namelijk front-page.php, home.php en index.php. WordPress gebruikt deze hiërarchie wanneer een gebruiker de homepage van je website wil zien.

Enkelvoudige berichten

Er zijn drie primaire sjabloonbestanden voor afzonderlijke posts zoals blogs en artikelen. Dit zijn single,php, singular.php en index.php. Omdat er echter voorzieningen kunnen zijn voor aangepaste posttypes op de website, zoekt WordPress eerst naar twee andere sjabloonbestanden voordat het met deze begint. De hiërarchie van de sjablonen ziet er dus als volgt uit.

1. Single-{post-type}-{slug}.php
2. Single-{post-type}.php
3. Single,php
4. Singular.php
5. Index.php

Enkele pagina’s

Elke pagina in een WordPress website behalve de homepage valt onder de categorie losse pagina’s. De hiërarchie van de sjablonen is vergelijkbaar met die van afzonderlijke berichten, behalve het optionele aangepaste sjabloonbestand. Laten we eens kijken naar de hiërarchie.

1. (Custom template file)
2. Page-{slug}.php
3. Page-{id}.php
4. Page.php
5. Singular.php
6. Index.php

Categorie pagina’s

De sjabloonhiërarchie voor categorieën werkt op dezelfde manier als de hiërarchie voor afzonderlijke pagina’s. Bijvoorbeeld, in plaats van te zoeken naar de pagina slug gevolgd door de pagina ID, zoekt WordPress naar de categorie slug en ID voordat er gezocht wordt naar category.php, archive.php en index.php.

Aangepaste berichttypes

Als je een WordPress custom post types plugin gebruikt of als je thema deze functie heeft ingebouwd, zal het CMS zoeken naar het archief van het posttype voordat het terugkeert naar de standaard archive.php en index.php bestanden van het thema. Als je bijvoorbeeld zoekt naar het aangepaste posttype voor een product, dan is de hiërarchie van het sjabloon:

1. Archive-{post_type}.php
2. Archive.php
3. Index.php

Zoekresultaten pagina’s

De meeste WordPress thema’s hebben tegenwoordig een ingebouwde zoekfunctie. Hiervoor is het sjabloon search.php nodig voor de pagina met zoekresultaten. Als je site afhankelijk is van de zoekfunctie, zorg er dan voor dat je WordPress thema een sjabloon heeft voor de zoekpagina. Als je nieuw bent in webontwikkeling en hulp nodig hebt bij het vinden van een goed WordPress thema, kun je hier leren hoe je een WordPress thema kiest.

404 Foutmeldingen

Wanneer bezoekers een URL verkeerd intypen of een pagina proberen te bekijken die niet bestaat, zal WordPress een 404 foutpagina teruggeven. De WordPress template hiërarchie is vrij eenvoudig. Het CMS zoekt eerst naar het 404.php bestand, gevolgd door index.php. De meeste WordPress thema’s hebben standaard een 404.php bestand. Maar als dat niet het geval is, raden we je aan om een eigen foutpaginasjabloon te maken.

Conclusie

De WordPress sjabloonhiërarchie legt uit hoe het CMS naar bestanden zoekt bij het laden van een webpagina. Als je bekend bent met de sjabloonhiërarchie van je website, kun je zoekresultaten optimaliseren en de laadtijd van pagina’s verkorten, waardoor de gebruikerservaring verbetert. Laat je niet overweldigen door de details. In plaats daarvan kun je langzaam beginnen en door oefening aan het proces wennen.v

FAQ