Wat is een template-tag in WordPress?

Een krachtige functie die ontwikkelaars en themaontwerpers bij het bouwen of aanpassen van een WordPress-website, is de template-tag. Inzicht in wat een template-tag is en hoe deze werkt, kan uw mogelijkheden om dynamische content op uw webpagina te structureren aanzienlijk verbeteren.

Of je nu een beginner of een ervaren ontwikkelaar bent, deze handleiding legt alles wat je moet weten over template-tags in WordPress in eenvoudige bewoordingen uit.

Inleiding tot sjabloontags

In WordPress is een template-tag een PHP-functie die wordt gebruikt om dynamisch gegevens op te halen en weer te geven. In plaats van waarden zoals de sitetitel of de naam van de auteur vast te coderen, gebruik je een tag om deze uit de database te halen en op de gewenste plek weer te geven.

Template-tags worden gebruikt in WordPress-themabestanden zoals header.php, footer.php, index.php en single.php. Deze functies helpen de structuur van je site te definiëren zonder code meerdere keren te dupliceren.

Templatetag versus HTML<template> Element

Het is belangrijk om WordPress-sjabloontags niet te verwarren met HTML.<template> element. Hoewel beide nuttig zijn, dienen ze heel verschillende doelen.

• Het HTML- bevat codefragmenten die niet worden weergegeven wanneer de pagina wordt geladen. Deze inhoud kan worden gekopieerd en later met JavaScript worden ingevoegd.

• Een template-tag in WordPress is een PHP-functie die specifieke inhoud of informatie op een pagina weergeeft, zoals de titel of datum van een bericht.

Hoewel ze qua concept nauw verwant zijn, wordt de ene voornamelijk gebruikt voor JavaScript-gebaseerde frontend-rendering en de andere voor de verwerking van PHP-templates aan de backend.

Anatomie van een sjabloontag

Hier is een eenvoudig voorbeeld van een template-tag:

<?php the_title(); ?>

Deze code geeft de titel van een WordPress-bericht weer. Er wordt gebruikgemaakt van een vooraf gedefinieerde functie van WordPress .

De meeste sjabloontags volgen een vergelijkbaar formaat:

• Een PHP-functie
• Kan parameters accepteren (optioneel)
• Kan de uitvoer direct weergeven of een waarde retourneren

Echo versus Return

Sommige tags geven hun inhoud direct weer, terwijl andere een waarde retourneren die je aan een variabele kunt toewijzen. Raadpleeg altijd de WordPress-documentatie om te controleren wat het verwachte gedrag is.

Veelgebruikte sjabloontags

WordPress beschikt over diverse ingebouwde sjabloontags die het weergeven van dynamische content vereenvoudigen. Deze tags zijn gegroepeerd op functionaliteit en worden veelvuldig gebruikt in themabestanden.

Structurele tags

Structurele template-tags voegen automatisch verschillende onderdelen van je thema-layout toe. Ze helpen je om consistentie te behouden op meerdere pagina's zonder code te hoeven herschrijven.

Deze tags omvatten ook andere sjabloonbestanden zoals header.php, footer.php en sidebar.php.

Ontdek meer: ​​Kopteksttags – Wat zijn ze en hoe gebruik je ze?

Inhoudstags

Content template tags zijn essentieel voor het weergeven van dynamische berichtgegevens op uw webpagina. Ze genereren belangrijke contentelementen zoals titels, hoofdteksten en samenvattingen.

Metadata-tags

Met metadatatags kun je aanvullende informatie over het bericht ophalen, zoals de naam van de auteur, de publicatiedatum of categorieën. Deze tags verrijken je content met de juiste context.

Deze tags halen metadata op over het bericht of de gebruiker die het heeft geschreven.

Site-informatielabels

Site-informatietags halen instellingen en informatie op die zijn gedefinieerd in uw WordPress-dashboard. Dit kan de naam, beschrijving en basis-URL van uw site omvatten.

Deze tags halen gegevens uit uw site-instellingen.

Lees meer: ​​Wat zijn metatags?

Sjabloontags binnen de lus

De WordPress Loop is een PHP-codeblok dat berichten verwerkt en weergeeft. De meeste sjabloontags voor content werken het beste wanneer ze binnen deze loop worden geplaatst.

Binnen de Loop werken tags zoals the_title() of the_content() op basis van de context van het huidige bericht.

Hoe maak je een aangepaste sjabloontag?

Soms voldoen de standaard sjabloontags niet aan al je behoeften. In dat geval bieden aangepaste sjabloontags uitkomst.

Om er een te maken, schrijf je een aangepaste PHP-functie in het functions.php-bestand van je thema:

functie mythome_display_random_number() {
echo rand(1, 100);
}

Je kunt deze functie vervolgens als volgt in je themasjabloon aanroepen:

<?php mytheme_display_random_number(); ?>

Beste praktijken

• Voorzie functienamen altijd van een voorvoegsel om naamconflicten te voorkomen.
• Gegevens opschonen en valideren vóór uitvoer.
• Gebruik functies van WordPress, zoals esc_html(), om een ​​veilige uitvoer te garanderen.

Wanneer en waar sjabloontags te gebruiken

Weten wanneer en waar je een template-tag moet gebruiken, zorgt ervoor dat je WordPress-thema correct functioneert. Template-tags worden meestal geplaatst in themabestanden zoals single.php, archive.php, page.php of zelfs index.php, afhankelijk van het type inhoud dat wordt weergegeven.

Bijvoorbeeld:

• Roep binnen de lus de functie `the_title()` om de titel van elk bericht weer te geven.
• in page.php of single.php een consistente zijbalk in met behulp van get_sidebar() .
• Om de slogan van je site in header.php , gebruik je bloginfo('description') .

Inzicht in de sjabloonstructuur helpt bij het bepalen van de juiste plaatsing, zodat uw webpagina dynamische inhoud efficiënt laadt.

Verder lezen: Hoe je dubbele titel-tags in WordPress kunt oplossen om je SEO te verbeteren

Verschil tussen sjabloontags en sjabloonbestanden

Beginners verwarren vaak template-tags met template-bestanden, die verschillende doeleinden dienen bij de ontwikkeling van WordPress-thema's.

• Templatebestanden zijn complete PHP-bestanden, zoals home.php, single.php of 404.php, die de algehele lay-out of structuur van een webpagina bepalen.

• Een template-tag is een functie die in die bestanden is geschreven om specifieke gegevens weer te geven, zoals berichtinhoud, metadata of site-informatie.

Je kunt sjabloonbestanden zien als de containers en sjabloontags als de afzonderlijke elementen waaruit de inhoud binnen die container bestaat.

Voorwaardelijke tags gebruiken met sjabloontags

Je kunt sjabloontags combineren met WordPress-voorwaardelijke tags om te bepalen wanneer content op een pagina verschijnt. Hierdoor kan je website zich dynamisch gedragen op basis van de context.

Voorbeeld:

php

if ( is_single() ) {
the_title();
the_content();
}

Deze code zorgt ervoor dat de titel en inhoud van het bericht alleen worden weergegeven bij individuele berichtweergaven. Door sjabloontags voorwaardelijk te gebruiken, kunt u de structuur van de webpagina en de gebruikerservaring aanpassen zonder hardcoded te werken.

Tips voor prestaties en beveiliging

Template-tags kunnen de prestaties en de beveiliging beïnvloeden als ze niet correct worden gebruikt.

• Escape-uitvoer : Gebruik altijd functies zoals esc_url() en esc_html() bij het afdrukken van gegevens.
• Cachegegevens : Sla herhaalde query's op met behulp van tijdelijke gegevenstypen om de prestaties te verbeteren.
• Vermijd directe databaseaanroepen : gebruik de WordPress API-functies om gegevens op te halen.

Lees ook: Hoe kunnen tags van derden de prestaties beïnvloeden?

Sjabloontags versus shortcodes

Zowel template-tags als shortcodes worden gebruikt om dynamische content in te voegen, maar ze verschillen in gebruik en doel.

• Template-tags worden in PHP-bestanden van thema's gebruikt om dynamische HTML-uitvoer direct in te voegen en te beheren.
• Shortcodes worden gebruikt in de inhoud van berichten of pagina's via de WordPress-editor of de functie do_shortcode().

Gebruik bijvoorbeeld de `the_author()` (een template-tag) in `single.php` om de naam van de auteur weer te geven, terwijl `gallery` (een shortcode) in de body van een bericht kan worden toegevoegd.

Shortcodes zijn meer zichtbaar voor de gebruiker, terwijl template-tags op de achtergrond in de themacode werken.

Ontdek meer: ​​Hoe stel je Elementor-shortcodes in voor eenvoudig gebruik van sjablonen?

Geavanceerd gebruik: parameters doorgeven aan sjabloontags

Sommige sjabloontags accepteren parameters om de weergave van gegevens aan te passen. Deze flexibiliteit stelt u in staat de presentatie van de inhoud te personaliseren zonder code te hoeven herhalen.

Voorbeeld met wp_nav_menu():

php

wp_nav_menu(
array( 'theme_location' => 'primary',
'menu_class' => 'nav-menu',
'container' => 'nav',
));
?>

Hier wordt een reeks parameters doorgegeven om het uiterlijk en de HTML-structuur van het menu te definiëren. Op dezelfde manier kun je met tags zoals `get_the_excerpt($post_id)` de samenvatting van een specifiek bericht ophalen, waardoor je meer controle hebt over hoe informatie wordt opgehaald en weergegeven.

SEO- en toegankelijkheidsaspecten

Volg bij het gebruik van template-tags de beste werkwijzen voor SEO en toegankelijkheid :

• Gebruik semantische HTML-tags (<article> ,<section> ) samen met sjabloontags.
• Voeg alt-attributen toe aan afbeeldingstags met behulp van the_post_thumbnail().
• Zorg ervoor dat de kopjes de juiste structuur hebben (<h1> ,<h2> ).

Voorbeeld:

<img src=”<?php echo get_the_post_thumbnail_url(); ?> ” alt=”<?php the_title(); ?> ”>

Foutopsporingssjabloontags

Als een sjabloontag niet werkt:

• Controleer of je je binnen de Loop bevindt.
• Controleer of een functie bestaat met behulp van function_exists().
• Gebruik WP_DEBUG en foutenlogboeken om problemen op te sporen.

Voorbeeld:

als de functie 'de_titel' bestaat, voer dan
de titel
.

Browserondersteuning en -compatibiliteit

Template-tags maken deel uit van de PHP- en WordPress-kern, dus browsercompatibiliteit is geen direct probleem. Echter, bij gebruik van JavaScript met HTML kan dit wel een probleem vormen.<template> element:

• De meeste moderne browsers (Chrome, Firefox, Safari, Edge) ondersteunen het.
• Oudere versies van Internet Explorer doen dat niet.
• Gebruik een polyfill om extra ondersteuning te bieden indien nodig.

Lees meer: ​​Essentiële handleiding voor het veilig bijwerken van de PHP-versie van WordPress

HTML<template> Element en JavaScript

Hoewel het geen direct onderdeel is van de sjabloontags van WordPress, is het begrijpen van het JavaScript- rendering.

Voorbeeld:

const template = document.querySelector('#card-template');
const clone = template.content.cloneNode(true);
clone.querySelector('img').src = 'image.jpg';
clone.querySelector('.description').textContent = 'Kaartbeschrijving';
document.body.appendChild(clone);

Hiermee kun je HTML-structuren dynamisch hergebruiken, vergelijkbaar met template-tags maar dan geïmplementeerd met JavaScript.

Veelgemaakte fouten die je moet vermijden

Hieronder volgen enkele veelvoorkomende fouten bij het gebruik van template-tags:

• Het gebruik van de verkeerde context : Tags zoals the_content() moeten binnen de Loop worden gebruikt; anders werken ze niet zoals verwacht.

• Het vergeten om uitvoer te escapen : Om beveiligingsproblemen te voorkomen, moet u de uitvoer altijd saneren met esc_html(), esc_url() of vergelijkbare functies.

• Geen controle op browsercompatibiliteit : Als je het HTML-

• Gebruik hardcoded waarden in plaats van tags : Vermijd statische waarden wanneer een template-tag dynamisch gegevens uit de database kan ophalen.

Door de beste werkwijzen te volgen, zorgt u ervoor dat uw website veilig, goed presterend en gemakkelijk te onderhouden blijft.

Samenvatting

Template-tags in WordPress bieden een krachtige manier om dynamische content weer te geven, de code overzichtelijk te houden en de flexibiliteit van je website te verbeteren. Of je nu posttitels, auteursnamen of aangepaste gegevens weergeeft, template-tags stroomlijnen de ontwikkeling van je thema.

Door ze op de juiste manier te gebruiken, zorgt u ervoor dat uw webpagina's goed gestructureerd, toegankelijk en SEO-vriendelijk zijn. Het aanmaken van aangepaste sjabloontags biedt bovendien geavanceerde aanpassingsmogelijkheden, waardoor u precies kunt bepalen wat er wordt weergegeven en hoe.

Veelgestelde vragen