Découvrez les templates de page
Dans ce chapitre, nous allons voir comment créer un template de page dans notre thème. Ces templates permettent de créer une page personnalisée avec un contenu spécifique.
Pourquoi créer un template de page si l’on peut tout faire avec Gutenberg ?
L’éditeur Gutenberg permet de créer des pages assez précisément, avec une grande variété de blocs. Cependant, il est parfois nécessaire de faire une intégration précise en HTML, d’ajouter du code spécifique PHP sans avoir à créer de blocs, widgets et/ou shortcodes. Ça serait le cas, par exemple, de pages qui chargeraient du contenu de services extérieurs, ou qui utiliseraient des frameworks JS avec des contenus très spécifiques.
Pour démontrer ces éléments, nous allons créer un template de page pour une page “À propos”. On part du principe que cette page avait déjà été faite précédemment sur un site fait entièrement en HTML et CSS.
Dans un premier temps, voyons comment créer un template de page :
Intégrez une page HTML/CSS dans le template de page
Nous allons maintenant intégrer la page “À propos” et, comme nous l’avons vu précédemment, nous allons intégrer une page qui a déjà été faite en HTML et CSS.
Une fois l’intégration de ce template terminée, vous devriez avoir une page qui ressemble à cela :
Nous n’avons vu qu’une approche simple de ce que nous pouvons faire avec un template de page. Par exemple, on peut aussi intégrer des contenus de page et des champs personnalisés que l’on pourra ajouter à une page. Ce ne sera pas vu dans ce cours, mais des cours plus avancés pourront vous renseigner sur ces pratiques.
À vous de jouer !
Maintenant que l’on a créé un template de page pour la partie “À propos”, votre mission va être de faire la même chose pour une page de lexique qui a déjà été créée en HTML/CSS.
Il y a dans cette page une petite subtilité, car du JavaScript y a été ajouté. Il est possible que vous n’ayez pas encore appris le JavaScript, mais ce n’est pas grave ; il vous suffit de considérer le bout de code entre les balises <script></script> comme du HTML, et tout devrait fonctionner.
Consignes :
Créer un template de page pour intégrer le lexique.
Intégrer le code HTML/CSS que vous avez récupéré.
Si vous voulez aller plus loin, vous pouvez essayer de réaliser ces points bonus :
Créer un tableau PHP avec pour chaque entrée le titre et le contenu du lexique, puis optimiser le HTML en faisant une boucle PHP du tableau nouvellement créé.
Utiliser la fonction
get_template_part()pour mettre dans un fichier à part le bout de code qui va afficher un bloc de lexique (il existe de la documentation de cette fonction sur le site WordPress).
Corrigé
Alors, vous avez trouvé ? Suivez-moi dans le screencast ci-dessous pour la correction :
Pour découvrir la partie bonus :
En résumé
Un template de page permet de personnaliser le code utilisé pour une page particulière.
Lorsque que l’on souhaite intégrer dans un template de page une image présente dans les dossiers du thème, il faut penser à générer un lien absolu grâce à
get_stylesheet_directory_uri().Quand on crée un template de page, il est intéressant d’utiliser la fonction
get_template_part()pour séparer le template en sous-parties dans des fichiers à part, et ainsi créer une structure plus facile à faire évoluer et à maintenir.
Maintenant que nous avons vu comment personnaliser la page d’accueil et créer des pages personnalisées avec des templates, nous allons voir comment utiliser les articles de WordPress personnalisés. Rendez-vous au prochain chapitre !
