Dans cette leçon du didacticiel sur le thème WordPress pour les débutants, nous allons nous plonger davantage dans les modèles. Nous allons en apprendre davantage sur les composants de modèle et les implémenter pour les réutiliser. Et nous ajouterons plus de modèles par défaut de WordPress à notre thème.
Mais avant de commencer à ajouter d’autres fichiers de modèle, nous devons savoir pourquoi nous devrions nous soucier des éléments de modèle.
Pièces de modèle : blocs de construction plus flexibles
Les parties de modèle fonctionnent exactement comme get_header()et get_footer()dont nous avons entendu parler dans la partie 2, mais ne sont pas limitées à ces fichiers. Vous pouvez utiliser des éléments de modèle pour le fichier de votre choix !
Les thèmes utilisent généralement une partie de modèle pour les publications en boucle. Habituellement, de nombreux modèles tels que la catégorie, les archives et les résultats de recherche affichent généralement chaque message en boucle de la même manière. C’est donc une très bonne idée de séparer la sortie de la boucle post dans un seul fichier. De cette façon, vous n’avez pas à le répéter dans chaque modèle.
"Convertissons" une partie de notre code existant en parties de modèle avant de commencer à créer d’autres modèles !
Création d’un composant de modèle de boucle de publication
Créez un nouveau fichier vide dans notre dossier de thème ; appelé content-loop.php. Vous pouvez nommer les parties du modèle comme vous le souhaitez. Mais vous ne pouvez pas les nommer de la même manière que n’importe lequel des modèles définis par WordPress. Dans notre index.php, localisez tout ce que vous avez à l’intérieur de la boucle, découpez-le et collez-le à l’intérieur content-loop.php.
À l’intérieur de la boucle maintenant vide dans index.php, utilisez l’appel de fonction get_template_part()et définissez votre fichier de pièce de modèle en tant que paramètre (sans l’ .phpextension). Voici à quoi cela devrait ressembler dans les deux fichiers :
...
while (have_posts()): the_post();
get_template_part('content-loop');
endwhile;
the_posts_pagination();
...<article <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php if (has_post_thumbnail()) {
the_post_thumbnail();
} ?>
<?php the_excerpt(); ?>
<?php the_category(); ?>
</article>Si vous actualisez votre page d’accueil, vous ne devriez voir absolument aucune différence.
Super! Maintenant que notre index.phpest beau et propre, nous pouvons l’utiliser comme base pour le dupliquer dans plus de modèles. Ci-dessous, je vais expliquer comment ajouter un modèle de catégorie et un modèle de résultats de recherche, mais je vous encourage à créer plus de modèles pour plus de contrôle sur la conception de votre thème.
Ajout d’un modèle de catégorie
Si vous vous référez à la hiérarchie des modèles de WordPress, vous pouvez voir que pour les catégories de publication, WordPress recherchera le modèle nommé category.php. Nous allons d’abord créer celui-ci.
Dans votre dossier de thème, faites une copie du index.phpfichier et renommez la copie category.php.
Et c’est tout. Vous avez pratiquement terminé… !
Cependant, nous ajouterons un détail; nous voulons afficher un titre qui nous indique que nous sommes sur une page de catégorie pour les articles de la catégorie nommée X. WordPress a une fonction pour cela que vous pouvez utiliser dans tous les modèles d’archives (catégorie, balises, archives de date), the_archive_title. Ajoutons-le avant la boucle, à l’intérieur d’une <h1>balise.
<?php get_header(); ?>
<h1><?php the_archive_title(); ?></h1>
<?php
if (have_posts()) {
...Si vous affichez une page de catégorie de publication, vous devriez voir quelque chose comme ceci, avec le titre d’archive "Catégorie :". PS : Si vous souhaitez modifier la sortie du titre de l’archive (par exemple, ne pas afficher "Catégorie : "), vous pouvez ajouter un filtre à get_the_archive_title. La page de documentation montre un excellent exemple de la façon de procéder.
Eh bien, c’était facile! Gérons ensuite le modèle de résultats de recherche.
Ajout d’un modèle de résultats de recherche
La procédure est exactement la même que pour les modèles de catégories. Cette fois, faites une copie de category.phpet renommez la copie en search.php.
Tout ce que nous devons corriger, c’est le titre. La fonction de titre d’archive que nous avons utilisée dans le modèle de catégorie ne fonctionne malheureusement pas très bien pour le modèle de résultats de recherche. En fait, il n’existe pas de fonction simple dans WordPress qui génère un titre pour nous.
Mais nous pouvons facilement en créer un nous-mêmes, et en même temps, je montrerai comment générer une variable dynamique tout en gardant le texte traduisible.
PHP a deux fonctions utiles, printf()et sprintf(). Ils font la même chose, sauf qu’ils printfle sortent (comme echo) et sprintfle renvoient, nous pouvons donc le stocker dans une variable. Après avoir mis le texte comme premiers paramètres, nous pouvons ajouter des variables dynamiques comme arguments, qui sont ensuite injectées dans le texte. À l’intérieur de ceux-ci, nous pouvons utiliser les fonctions de texte traduisible __()et _e(). Je vous recommande de lire un peu le fonctionnement de printf ou sprintf, car je n’entrerai pas dans les détails ici.
WordPress propose une fonction simple pour obtenir la chaîne qui a été recherchée ; get_search_query(). Cela dit, remplaçons la fonction de titre d’archive par ceci ;
<h1><?php printf(__('Search: %s', 'wptutorial'), get_search_query()); ?></h1>Ce que fait le code ci-dessus est de l’intérieur vers l’extérieur ; définir un texte traduisible « Rechercher : %s » qui est placé à l’intérieur d’un printfqui fait écho à la chaîne, et remplace la chaîne constante (%s) par le deuxième argument ; qui est get_search_query().
En conséquence, nous obtenons un titre comme celui-ci lors de la recherche de "er":
Agréable! Un autre modèle fait. Quant à la dernière partie de cette leçon, nous allons entrer dans notre modèle de publication unique et ajouter quelque chose de très courant dans WordPress ; le modèle de commentaires.
Ajout d’un modèle de commentaires à un seul article
Dans notre single.php, après l’article de publication, nous voulons afficher les commentaires. Les commentaires doivent générer une liste des commentaires précédents et un formulaire pour ajouter un nouveau commentaire.
Le modèle de commentaires est un fichier de modèle que vous pouvez ajouter à votre thème, mais WordPress a en fait sa propre sortie de modèle de commentaires par défaut. Si vous n’en avez pas comments.phpdans votre thème, demander le modèle de commentaires renverra la sortie par défaut de WordPress pour celui-ci. C’est ce que nous allons faire dans ce tutoriel.
Nous ne voulons appeler le modèle de commentaires que si la publication a des commentaires activés (c’est un paramètre pour chaque publication et un paramètre global du site). Nous ajoutons donc une vérification if pour vérifier si les commentaires sont autorisés avec comments_open()et s’il renvoie true, nous demandons un modèle de commentaires avec comments_template(). Gardez à l’esprit que tout cela doit se produire dans la boucle. Je l’ai ajouté après la fin de </article>, juste avant la fermeture de la boucle.
...
<p><?php _e('Author', 'wptutorial'); ?>: <?php the_author(); ?></p>
</article>
<?php
if (comments_open()) {
comments_template();
}
endwhile;
} else {
?><p><?php _e('No posts, sorry.', 'wptutorial'); ?></p><?php
...Si vous visitez un seul article qui a autorisé les commentaires (j’ai ajouté un commentaire juste pour vous montrer également la liste des commentaires); vous obtiendrez ce magnifique (ahem) modèle de commentaires par défaut :
Maintenant, vous pouvez (et c’est souvent encouragé) créer le vôtre comments.phpdans votre thème, ce qui remplacera la sortie par défaut de WordPress. Cependant, je ne vais pas créer de modèle de commentaires dans ce didacticiel, car la sortie par défaut de WordPress fonctionne très bien tant que vous la stylisez correctement. Si vous inspectez le code HTML, de nombreux wrappers et classes sont disponibles.