L'une des fonctionnalités puissantes souvent utilisées par les développeurs et les concepteurs de thèmes lors de la création ou de la personnalisation d'un site Web WordPress est la balise de modèle. Comprendre ce qu'est une balise de modèle et comment il fonctionne peut améliorer considérablement votre capacité à structurer le contenu dynamique sur votre page Web.
Que vous soyez un débutant ou un développeur expérimenté, ce guide explique tout ce que vous devez savoir sur les balises de modèle dans WordPress en termes simples.
Introduction aux balises de modèle
Dans WordPress, une balise de modèle est une fonction PHP utilisée pour récupérer et afficher les données dynamiquement. Au lieu de codage rigide tels que le titre de votre site ou le nom de l'auteur, vous utilisez une balise pour les retirer de la base de données et les afficher si nécessaire.
Les balises de modèle sont utilisées dans les fichiers de thème WordPress WordPress comme Header.php, Footer.php, index.php et single.php. Ces fonctions aident à définir la structure de votre site sans duplication de code plusieurs fois.
Tag de modèle vs HTML<template> Élément
Il est important de ne pas confondre les balises de modèle WordPress avec le HTML<template> élément. Bien que les deux soient utiles, ils servent des objectifs très différents.
- L' élément HTML contient des fragments de code non rendus lorsque la page se charge. Ce contenu peut être cloné et inséré plus tard à l'aide de JavaScript.
- Une balise de modèle dans WordPress est une fonction PHP qui publie du contenu ou des informations spécifiques sur une page, comme le titre de publication ou la date.
Bien que étroitement lié dans le concept, l'un est principalement utilisé pour le rendu frontal basé sur JavaScript, et l'autre est pour la manipulation du modèle PHP backend.
Anatomie d'une balise de modèle
Voici un exemple simple d'une balise de modèle:
<?php the_title(); ?>
Ce code affiche le titre d'une publication WordPress. Il utilise une fonction prédéfinie fournie par WordPress .
La plupart des balises de modèle suivent un format similaire:
- Une fonction PHP
- Peut prendre des paramètres (facultatif)
- Peut faire écho à la sortie directement ou renvoyer une valeur
Echo vs retour
Certaines balises font écho directement leur contenu, tandis que d'autres renvoient une valeur que vous pouvez attribuer à une variable. Reportez-vous toujours à la documentation WordPress pour vérifier le comportement attendu.
Tags de modèle couramment utilisés
WordPress possède diverses balises de modèle intégrées qui facilitent l'affichage du contenu dynamique. Ces balises sont regroupées par fonctionnalité et sont largement utilisées sur les fichiers de thème.
Étiquettes structurelles
Les balises de modèle structurel incluent automatiquement différentes parties de votre disposition de thème. Ils vous aident à maintenir la cohérence sur plusieurs pages sans réécrire du code.
Ces balises incluent d'autres fichiers de modèle comme Header.php, Footer.php et Sidebar.php.
Explorez davantage: tags d'en-tête - Que sont-ils et comment les utiliser
Tags de contenu
Les balises de modèle de contenu sont essentielles pour afficher les données de publication dynamique sur votre page Web. Ils publient des éléments de contenu clés comme les titres, les corps et les extraits.
Tags de métadonnées
Les balises de métadonnées vous permettent de tirer des informations supplémentaires liées au message, telles que le nom, la date de la publication ou les catégories de l'auteur. Ceux-ci enrichissent votre contenu avec un contexte approprié.
Ces étiquettes tirent des métadonnées sur le message ou l'utilisateur qui l'a écrit.
Tags d'information du site
Les balises d'information du site récupèrent les paramètres et les informations définies dans votre tableau de bord WordPress. Cela peut inclure le nom, la description et l'URL de base de votre site.
Ces balises tirent des données des paramètres de votre site.
Lire la suite: quelles sont les tags méta-
Tags de modèle à l'intérieur de la boucle
La boucle WordPress est un bloc de code PHP qui traite et affiche des publications. La plupart des balises de modèle liées au contenu fonctionnent mieux lorsqu'ils sont placés à l'intérieur de cette boucle.
À l'intérieur de la boucle, des balises comme the_title () ou the_content () fonctionnent basées sur le post actuel en contexte.
Comment créer une balise de modèle personnalisée
Parfois, les balises de modèle par défaut ne couvrent pas tous vos besoins. C'est là que les balises de modèle personnalisés entrent en jeu.
Pour en créer un, vous écrivez une fonction PHP personnalisée dans les fonctions de votre thème.
fonction mytheme_display_random_number () {
echo rand (1, 100);
}
Vous pouvez ensuite appeler cette fonction dans votre modèle de thème comme tel:
<?php mytheme_display_random_number(); ?>
Meilleures pratiques
- Préfixez toujours vos noms de fonction pour éviter de nommer les collisions.
- Désinfecter et valider les données avant la sortie.
- Utilisez des fonctions fournies par WordPress comme ESC_HTML () pour assurer une sortie sûre.
Quand et où utiliser les balises de modèle
Savoir quand et où utiliser une balise de modèle aide à garantir correctement que votre thème WordPress fonctionne correctement. Les balises de modèle sont principalement placées dans des fichiers de thème comme single.php, archive.php, page.php ou même index.php, selon le type de contenu rendu.
Par exemple:
- À l'intérieur de la boucle, appelez
the_title ()
pour afficher le titre de chaque message. - Dans
page.php
ousingle.php,
insérez une barre latérale cohérente à l'aide deget_sidebar ()
. - Pour afficher le slogan de votre site dans
header.php
, utilisezBlogInfo («Description»)
.
La compréhension de la structure du modèle aide à déterminer le placement approprié, en vous assurant que votre page Web charge efficacement le contenu dynamique.
Lire plus approfondie: Comment corriger les balises de titre en double dans WordPress pour améliorer le référencement
Différence entre les balises de modèle et les fichiers de modèle
Les débutants confondent souvent les balises de modèle avec des fichiers de modèle, qui servent des objectifs différentes dans le développement de thème WordPress.
- Les fichiers de modèle sont des fichiers PHP entiers, tels que home.php, single.php ou 404.php, qui définissent la disposition ou la structure globale d'une page Web.
- Une balise de modèle est une fonction écrite dans ces fichiers pour afficher des données spécifiques, comme le contenu de publication, les métadonnées ou les informations sur le site.
Vous pouvez considérer les fichiers de modèle comme les conteneurs et les balises de modèle comme les éléments individuels qui composent le contenu à l'intérieur de ce conteneur.
En utilisant des balises conditionnelles avec des balises de modèle
Vous pouvez combiner des balises de modèle avec des balises conditionnelles WordPress pour contrôler lorsque le contenu apparaît sur une page. Cela permet à votre site de se comporter dynamiquement en fonction du contexte.
Exemple:
php
if (is_single ()) {
the_title ();
the_content ();
}
Ce code garantit que le titre de publication et le contenu sont affichés uniquement sur les vues de publication unique. L'utilisation de balises de modèle vous aide à adapter la structure de la page Web et l'expérience utilisateur sans codage rigide.
Conseils de performance et de sécurité
Les balises de modèle peuvent avoir un impact sur les performances et la sécurité si elles ne sont pas utilisées correctement.
- Sortie d'échappement : utilisez toujours des fonctions comme ESC_URL () et ESC_HTML () lors de l'impression de données.
- Données de cache : stockez des requêtes répétées à l'aide de transitoires pour améliorer les performances.
- Évitez les appels DB directs : utilisez les fonctions API WordPress pour récupérer les données.
Lire aussi: Comment les étiquettes tierces peuvent-elles avoir un impact sur les performances
Tags de modèle par rapport aux shortcodes
Les balises de modèle et les codes short sont utilisés pour insérer le contenu dynamique, mais diffèrent en utilisation et en objectif.
- Les balises de modèle sont utilisées dans les fichiers PHP de thème pour insérer et contrôler directement la sortie HTML dynamique.
- Les raccourcis sont utilisés à l'intérieur du contenu du post ou de la page via l'éditeur WordPress ou la fonction do_shortcode ().
Par exemple, utilisez the_author () (une balise de modèle) dans single.php pour afficher le nom de l' auteur la galerie (un shortcode) peut être ajoutée à l'intérieur d'un corps de poste.
Les shortcodes sont plus orientés vers les utilisateurs, tandis que les balises de modèle fonctionnent dans les coulisses du code de thème.
Explorer davantage: comment configurer les points d'élément Elementor pour une utilisation facile
Utilisation avancée: passant par des paramètres aux balises de modèle
Certaines balises de modèle acceptent les paramètres pour personnaliser la façon dont les données sont affichées. Cette flexibilité vous permet d'adapter la présentation de contenu sans répéter le code.
Exemple avec wp_nav_menu ():
php
wp_nav_menu (
array ('thème_location' => 'primaire',
'menu_class' => 'nav-menu',
'contener' => 'nav',
));
?>
Ici, un tableau de paramètres est passé pour définir l'apparence du menu et la structure HTML. De même, des balises comme get_the_excerpt ($ post_id) vous permettent de récupérer l'extrait pour un article spécifique, offrant plus de contrôle sur la façon dont les informations sont récupérées et affichées.
SEO et considérations d'accessibilité
Lorsque vous utilisez des balises de modèle, suivez les meilleures pratiques pour le référencement et l'accessibilité :
- Utilisez des balises HTML sémantiques (<article> ,<section> ) ainsi que des balises de modèle.
- Ajoutez des attributs ALT aux balises d'image à l'aide de The_Post_thumbnail ().
- Assurez-vous que les titres utilisent la structure correcte (<h1> ,<h2> ).
Exemple:
<img src=”<?php echo get_the_post_thumbnail_url(); ?> "Alt ="<?php the_title(); ?> »>
Tags de modèle de débogage
Si une balise de modèle ne fonctionne pas:
- Vérifiez si vous êtes à l'intérieur de la boucle.
- Vérifiez l'existence de la fonction à l'aide de function_exists ().
- Utilisez WP_DEBUG et les journaux d'erreur pour suivre les problèmes.
Exemple:
if (function_exists ('the_title')) {
the_title ();
}
Prise en charge et compatibilité du navigateur
Les balises de modèle font partie de PHP et WordPress Core, donc la prise en charge du navigateur n'est pas une préoccupation directe. Cependant, lorsque vous utilisez JavaScript avec le HTML<template> élément:
- La plupart des navigateurs modernes (Chrome, Firefox, Safari, Edge) le soutiennent.
- Les versions plus anciennes d'Internet Explorer ne le font pas.
- Utilisez un polyfill pour ajouter le support si nécessaire.
Lire la suite: Guide essentiel sur la façon de mettre à jour la version WordPress PHP en toute sécurité
Html<template> Élément et javascript
JavaScript frontal .
Exemple:
const template = document.QuerySelector ('# card-template');
const clone = template.content.clonenode (true);
clone.QuerySelector ('img'). src = 'image.jpg';
clone.QuerySelector ('. Description'). textContent = 'Card Description';
document.body.ApendChild (clone);
Cela vous permet de réutiliser dynamiquement les structures HTML, similaires dans le concept aux balises de modèle mais implémentées avec JavaScript.
Erreurs courantes à éviter
Voici quelques erreurs à surveiller lorsque vous utilisez des balises de modèle:
- Utilisation du mauvais contexte : des balises comme the_content () doivent être utilisées à l'intérieur de la boucle; Sinon, ils ne fonctionneront pas comme prévu.
- Oublier d'échapper à la sortie : pour éviter les problèmes de sécurité, désinfectez toujours la sortie avec ESC_HTML (), ESC_URL () ou des fonctions similaires.
- Ne pas vérifier la compatibilité du navigateur : si vous utilisez l' élément HTML avec JavaScript, vérifiez toujours la prise en charge du navigateur et ajoutez des polyfills si nécessaire.
- Codage dur au lieu des balises : évitez les valeurs statiques lorsqu'une balise de modèle peut tirer dynamiquement de la base de données.
Suivre les meilleures pratiques garantit que votre site reste sécurisé, performant et facile à entretenir.
Résumé
Les balises de modèle dans WordPress offrent un moyen puissant d'afficher le contenu dynamique, de maintenir le code propre et d'améliorer la flexibilité du site. Que vous affichiez des titres de publication, des noms d'auteur ou des données personnalisées, les balises de modèle rationalisent votre développement de thème.
Les utiliser correctement garantit que vos pages Web sont bien structurées, accessibles et conviviales. La création de balises de modèle personnalisé permet également une personnalisation avancée, vous aidant à contrôler exactement ce qui s'affiche et comment.
Foire aux questions
Qu'est-ce qu'une balise de modèle?
Une balise de modèle est une fonction PHP utilisée dans WordPress pour récupérer et afficher le contenu dynamique.
Puis-je créer mes balises de modèle?
Oui, en définissant des fonctions personnalisées dans Functions.php.
Les balises de modèle fonctionnent-elles en dehors de la boucle?
Certains le font, mais de nombreuses balises reposent sur le contexte de la boucle pour fonctionner correctement.
La prise en charge du navigateur est-elle nécessaire pour les balises de modèle?
Non, car les balises de modèle sont basées sur PHP. Cependant, HTML<template> Les éléments utilisés avec JavaScript ont des considérations de compatibilité du navigateur.
Quelle est la différence entre les fonctions Get_ et The_?
Les fonctions GET_ renvoient une valeur pour un traitement ultérieur, tandis que la sortie des fonctions (Echo) la valeur directement à la page.