Was ist das Template-Tag in WordPress?

Ein leistungsstarkes Feature, das Entwickler und Theme-Designer beim Erstellen oder Anpassen von WordPress-Websites häufig nutzen, ist das Template-Tag. Wenn Sie verstehen, was ein Template-Tag ist und wie es funktioniert, können Sie dynamische Inhalte auf Ihrer Webseite deutlich besser strukturieren.

Egal ob Anfänger oder erfahrener Entwickler, dieser Leitfaden erklärt Ihnen alles Wissenswerte über Template-Tags in WordPress in einfachen Worten.

Einführung in Template-Tags

In WordPress ist ein Template-Tag eine PHP-Funktion, die Daten dynamisch abruft und anzeigt. Anstatt Werte wie den Seitentitel oder den Namen des Autors fest im Code zu verankern, verwendet man einen solchen Tag, um sie aus der Datenbank abzurufen und an der gewünschten Stelle anzuzeigen.

Template-Tags werden in WordPress-Theme-Dateien wie header.php, footer.php, index.php und single.php verwendet. Diese Funktionen helfen dabei, die Struktur Ihrer Website zu definieren, ohne Code mehrfach zu duplizieren.

Template-Tag vs. HTML<template> Element

Es ist wichtig, WordPress-Template-Tags nicht mit HTML zu verwechseln.<template> Element. Obwohl beide nützlich sind, dienen sie ganz unterschiedlichen Zwecken.

• Das HTML- enthält Codefragmente, die beim Laden der Seite nicht gerendert werden. Dieser Inhalt kann mithilfe von JavaScript kopiert und später eingefügt werden.

• Ein Template-Tag in WordPress ist eine PHP-Funktion, die bestimmte Inhalte oder Informationen auf einer Seite ausgibt, wie zum Beispiel den Titel oder das Datum des Beitrags.

Obwohl sie konzeptionell eng verwandt sind, wird die eine primär für das JavaScript-basierte Frontend-Rendering verwendet, die andere für die Backend-PHP-Template-Verarbeitung.

Anatomie eines Template-Tags

Hier ist ein einfaches Beispiel für ein Template-Tag:

<?php the_title(); ?>

Dieser Code zeigt den Titel eines WordPress-Beitrags an. Er verwendet eine von WordPress .

Die meisten Template-Tags folgen einem ähnlichen Format:

• Eine PHP-Funktion
• Kann Parameter entgegennehmen (optional)
• Kann die Ausgabe direkt ausgeben oder einen Wert zurückgeben

Echo vs. Return

Manche Tags geben ihren Inhalt direkt aus, andere hingegen einen Wert zurück, den Sie einer Variablen zuweisen können. Schlagen Sie immer in der WordPress-Dokumentation nach, um das erwartete Verhalten zu überprüfen.

Häufig verwendete Vorlagen-Tags

WordPress verfügt über verschiedene integrierte Template-Tags, die das Anzeigen dynamischer Inhalte vereinfachen. Diese Tags sind nach ihrer Funktionalität gruppiert und werden in zahlreichen Theme-Dateien verwendet.

Strukturelle Kennzeichnungen

Strukturelle Template-Tags binden automatisch verschiedene Teile Ihres Theme-Layouts ein. Sie helfen Ihnen, die Konsistenz über mehrere Seiten hinweg zu wahren, ohne Code neu schreiben zu müssen.

Diese Tags binden weitere Template-Dateien wie header.php, footer.php und sidebar.php ein.

Weiterführende Informationen: Überschriften-Tags – Was sind sie und wie verwendet man sie?

Inhalts-Tags

Content-Template-Tags sind unerlässlich, um dynamische Beitragsdaten auf Ihrer Webseite anzuzeigen. Sie geben wichtige Inhaltselemente wie Titel, Texte und Auszüge aus.

Metadaten-Tags

Metadaten-Tags ermöglichen es Ihnen, zusätzliche Informationen zum Beitrag abzurufen, wie beispielsweise den Namen des Autors, das Veröffentlichungsdatum oder Kategorien. Dadurch wird Ihr Inhalt mit dem passenden Kontext angereichert.

Diese Tags rufen Metadaten über den Beitrag oder den Benutzer, der ihn verfasst hat, ab.

Website-Informations-Tags

Website-Informations-Tags rufen Einstellungen und Informationen ab, die in Ihrem WordPress-Dashboard definiert sind. Dazu gehören beispielsweise der Name Ihrer Website, die Beschreibung und die Basis-URL.

Diese Tags rufen Daten aus Ihren Website-Einstellungen ab.

Weiterlesen: Was sind Meta-Tags?

Template-Tags innerhalb der Schleife

Die WordPress-Schleife ist ein PHP-Codeblock, der Beiträge verarbeitet und anzeigt. Die meisten inhaltsbezogenen Template-Tags funktionieren am besten, wenn sie innerhalb dieser Schleife platziert werden.

Innerhalb der Schleife funktionieren Tags wie the_title() oder the_content() basierend auf dem aktuellen Beitrag im Kontext.

So erstellen Sie ein benutzerdefiniertes Vorlagen-Tag

Manchmal decken die Standard-Template-Tags nicht alle Ihre Anforderungen ab. Hier kommen benutzerdefinierte Template-Tags ins Spiel.

Um eine solche Funktion zu erstellen, schreiben Sie eine benutzerdefinierte PHP-Funktion in die functions.php-Datei Ihres Themes:

function mytheme_display_random_number() {
echo rand(1, 100);
}

Sie können diese Funktion dann in Ihrer Theme-Vorlage wie folgt aufrufen:

<?php mytheme_display_random_number(); ?>

Bewährte Verfahren

• Um Namenskonflikte zu vermeiden, sollten Funktionsnamen immer ein Präfix enthalten.
• Daten vor der Ausgabe bereinigen und validieren.
• Verwenden Sie von WordPress bereitgestellte Funktionen wie esc_html(), um eine sichere Ausgabe zu gewährleisten.

Wann und wo man Template-Tags verwendet

Zu wissen, wann und wo man Template-Tags verwendet, trägt dazu bei, dass Ihr WordPress-Theme korrekt funktioniert. Template-Tags werden hauptsächlich in Theme-Dateien wie single.php, archive.php, page.php oder auch index.php platziert, abhängig vom Typ des darzustellenden Inhalts.

Zum Beispiel:

• Innerhalb der Schleife rufen Sie die Funktion the_title() , um den Titel jedes Beitrags anzuzeigen.
• In page.php oder single.php get_sidebar() eine einheitliche Seitenleiste ein .
• Um den Slogan Ihrer Website in header.php , verwenden Sie bloginfo('description') .

Das Verständnis der Template-Struktur hilft dabei, die richtige Platzierung zu bestimmen und sicherzustellen, dass Ihre Webseite dynamische Inhalte effizient lädt.

Weiterführende Informationen: So beheben Sie doppelte Titel-Tags in WordPress, um die SEO zu verbessern

Unterschied zwischen Template-Tags und Template-Dateien

Anfänger verwechseln oft Template-Tags mit Template-Dateien, die bei der WordPress-Theme-Entwicklung unterschiedliche Zwecke erfüllen.

• Template-Dateien sind vollständige PHP-Dateien, wie zum Beispiel home.php, single.php oder 404.php, die das Gesamtlayout oder die Struktur einer Webseite definieren.

• Ein Template-Tag ist eine Funktion, die in diesen Dateien geschrieben ist, um bestimmte Daten anzuzeigen, wie zum Beispiel Beitragsinhalte, Metadaten oder Website-Informationen.

Man kann sich Template-Dateien als Container vorstellen und Template-Tags als die einzelnen Elemente, aus denen der Inhalt innerhalb dieses Containers besteht.

Verwendung bedingter Tags mit Template-Tags

Sie können Template-Tags mit bedingten WordPress-Tags kombinieren, um zu steuern, wann Inhalte auf einer Seite angezeigt werden. Dadurch kann sich Ihre Website dynamisch und kontextabhängig verhalten.

Beispiel:

php

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

Dieser Code stellt sicher, dass Titel und Inhalt des Beitrags nur in der Einzelansicht angezeigt werden. Durch die bedingte Verwendung von Template-Tags können Sie die Webseitenstruktur und die Benutzererfahrung ohne feste Codierung anpassen.

Tipps zu Leistung und Sicherheit

Template-Tags können sich negativ auf die Leistung und Sicherheit auswirken, wenn sie nicht korrekt verwendet werden.

• Ausgabe maskieren : Verwenden Sie beim Drucken von Daten immer Funktionen wie esc_url() und esc_html().
• Cache-Daten : Wiederholte Abfragen werden mithilfe von Transienten gespeichert, um die Leistung zu verbessern.
• Vermeiden Sie direkte Datenbankabfragen : Nutzen Sie stattdessen die WordPress-API-Funktionen zum Abrufen von Daten.

Lesen Sie auch: Wie können Tags von Drittanbietern die Leistung beeinflussen?

Template-Tags vs. Shortcodes

Sowohl Template-Tags als auch Shortcodes dienen zum Einfügen dynamischer Inhalte, unterscheiden sich jedoch in Verwendung und Zweck.

• Template-Tags werden in den PHP-Dateien des Themes verwendet, um dynamische HTML-Ausgaben direkt einzufügen und zu steuern.
• Shortcodes werden innerhalb von Beitrags- oder Seiteninhalten über den WordPress-Editor oder die Funktion do_shortcode() verwendet.

Beispielsweise kann man in single.php die Methode the_author() (ein Template-Tag) verwenden, um den Namen des Autors anzuzeigen, während gallery innerhalb des Beitragstextes eingefügt werden kann.

Shortcodes sind eher für den Benutzer bestimmt, während Template-Tags im Hintergrund im Theme-Code arbeiten.

Weiterführende Informationen: So richten Sie Elementor-Shortcodes für die einfache Template-Nutzung ein

Erweiterte Nutzung: Parameter an Template-Tags übergeben

Einige Template-Tags akzeptieren Parameter, um die Datendarstellung anzupassen. Diese Flexibilität ermöglicht es Ihnen, die Inhaltsdarstellung individuell zu gestalten, ohne Code wiederholen zu müssen.

Beispiel mit wp_nav_menu():

PHP

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

Hier wird ein Array von Parametern übergeben, um das Aussehen und die HTML-Struktur des Menüs zu definieren. Ähnlich ermöglichen Tags wie `get_the_excerpt($post_id)` das Abrufen des Auszugs eines bestimmten Beitrags und bieten so mehr Kontrolle darüber, wie Informationen abgerufen und angezeigt werden.

SEO- und Barrierefreiheitsaspekte

Bei der Verwendung von Template-Tags sollten Sie die Best Practices für SEO und Barrierefreiheit :

• Verwenden Sie semantische HTML-Tags (<article> ,<section> ) zusammen mit Template-Tags.
• Füge Bild-Tags Alt-Attribute mit the_post_thumbnail() hinzu.
• Stellen Sie sicher, dass die Überschriften die korrekte Struktur aufweisen (<h1> ,<h2> ).

Beispiel:

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

Debugging-Vorlagen-Tags

Wenn ein Template-Tag nicht funktioniert:

• Prüfen Sie, ob Sie sich innerhalb der Schleife befinden.
• Überprüfen Sie die Existenz der Funktion mit function_exists().
• Verwenden Sie WP_DEBUG und Fehlerprotokolle, um Probleme zu verfolgen.

Beispiel:

if ( function_exists('the_title') ) {
the_title();
}

Browserunterstützung und Kompatibilität

Template-Tags sind Bestandteil des PHP- und WordPress-Kerns, daher ist die Browserkompatibilität kein direktes Problem. Bei der Verwendung von JavaScript mit HTML kann es jedoch zu Abweichungen kommen.<template> Element:

• Die meisten modernen Browser (Chrome, Firefox, Safari, Edge) unterstützen es.
• Ältere Versionen des Internet Explorers tun dies nicht.
• Verwenden Sie bei Bedarf ein Polyfill, um Unterstützung hinzuzufügen.

Weiterlesen: Unverzichtbarer Leitfaden zur sicheren Aktualisierung der WordPress-PHP-Version

HTML<template> Element und JavaScript

Obwohl es nicht direkt zu den WordPress-Template-Tags gehört, ist das Verständnis des JavaScript- Rendering.

Beispiel:

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

Dies ermöglicht die dynamische Wiederverwendung von HTML-Strukturen, ähnlich dem Konzept von Template-Tags, jedoch implementiert mit JavaScript.

Häufige Fehler, die es zu vermeiden gilt

Hier sind einige Fehler, auf die Sie bei der Verwendung von Template-Tags achten sollten:

• Verwendung des falschen Kontexts : Tags wie the_content() müssen innerhalb der Schleife verwendet werden; andernfalls funktionieren sie nicht wie erwartet.

• Vergessen, die Ausgabe zu maskieren : Um Sicherheitsprobleme zu vermeiden, sollten Sie die Ausgabe immer mit esc_html(), esc_url() oder ähnlichen Funktionen bereinigen.

• Keine Überprüfung der Browserkompatibilität : Wenn Sie das HTML-

• Festcodierung statt Tags : Vermeiden Sie statische Werte, wenn ein Template-Tag dynamisch Daten aus der Datenbank abrufen kann.

Die Einhaltung bewährter Verfahren gewährleistet, dass Ihre Website sicher, leistungsstark und wartungsfreundlich bleibt.

Zusammenfassung

WordPress-Template-Tags bieten eine leistungsstarke Möglichkeit, dynamische Inhalte anzuzeigen, sauberen Code zu pflegen und die Flexibilität der Website zu verbessern. Ob Sie Beitragstitel, Autorennamen oder benutzerdefinierte Daten anzeigen möchten – Template-Tags optimieren Ihre Theme-Entwicklung.

Die korrekte Verwendung von Template-Tags gewährleistet, dass Ihre Webseiten gut strukturiert, zugänglich und suchmaschinenfreundlich sind. Durch das Erstellen benutzerdefinierter Template-Tags sind zudem erweiterte Anpassungsmöglichkeiten gegeben, mit denen Sie genau steuern können, was und wie angezeigt wird.

Häufig gestellte Fragen