Créer un modèle de page sur WordPress
La création d'un modèle de page peut s'avérer très utile quand un thème ne correspond pas tout à fait à vos besoins. Voici quelques exemples de modèles fréquemment rencontrés :
- une page d'accueil sur mesure avec un bandeau, absent sur les autres pages
- une page pleine largeur sans sidebar
- une page contact avec un plan et un formulaire parfaitement positionnés
Théorie
La création d'un modèle de page est très simple :
Création du fichier
Créez un fichier nommé comme bon vous semble avec une extension .php, et enregistrez-le dans la racine du thème. Exemple : contact.php
Ajout du commentaire Template name:
Avec un éditeur de texte, ajoutez le commentaire suivant en début de page :
<?php /* Template name: Contact */ ?>En supposant que vous souhaitiez créer un modèle de page contact.
Contenu du modèle
Vous pouvez mettre ce que vous voulez : du code HTML, des fonctions PHP. Bien entendu, si vous voulez rester dans la cohérence d'un thème existant, je vous conseille de dupliquer le contenu de page.php qui est le modèle des pages par défaut, puis de l'ajuster à votre gout.
Application du modèle
Dans le tableau de bord, créez une page ou modifiez une page, puis choisissez le modèle Contact sur la colonne de droite. C'est tout.
A partir de la version 5.8 de WordPress, inutile de chercher dans les Attributs de page, en haut de l'onglet Page, cliquez sur l'encadré Modèle par défaut puis sélectionnez votre modèle :
Ce qu'il faut comprendre, c'est que WordPress scanne l'ensemble des fichiers du thème, et s'il rencontre un fichier PHP portant la mention Template name: dans les commentaires, il l'ajoute comme modèle de page.
En pratique
Voici un exemple concret. Nous allons créer un modèle de page pleine largeur pour un thème qui en est dépourvu.
Thème OceanWP
Pour commencer, installez et activez le thème gratuit OceanWP.
Première constatation : les pages ont obligatoirement le sidebar sur la droite :
Impossible de profiter d'une page simple, qui occupe toute la largeur, sans les widgets.
Enlever tous les widgets ne va pas corriger le problème pour plusieurs raisons :
- Si j'enlève les widgets dans le Tableau de bord, je ne les verrai plus dans l'ensemble du site, notamment les articles pour qui les widgets sont quasi indispensables pour la navigation.
- La page occupera 70% de l'espace, avec une colonne vide et disgracieuse à droite.
La création d'un modèle de page pleine largeur sera la solution idéale.
Création du fichier pleinelargeur.php
Avec un éditeur de texte, créez un fichier nommé pleinelargeur.php et enregistrez-le dans le dossier du thème. Si vous êtes en ligne, ça se complique, il faudra utiliser un client FTP pour déposer le nouveau fichier, ou bien, autre astuce : installez l'extension Theme Editor qui permet, outre la coloration syntaxique, de créer des nouveaux fichiers directement depuis le Tableau de bord de WordPress. Elle n'est pas belle la vie ?
Copiez le contenu du fichier page.php dans le fichier pleinelargeur.php.
Nom du modèle
Insérez le commentaire PHP Template name: Pleine largeur en début de fichier :
Le modèle est ainsi officiellement déclaré pour WordPress.
Suppression du sidebar
Dans notre modèle pleinelargeur.php, supprimez la ligne qui affiche le sidebar :
<?php do_action( 'ocean_after_primary' ); ?>Application du modèle
Dans le Tableau de bord, modifiez la page d'exemple et appliquez le modèle Pleine largeur dans les Attributs de page :
La page devrait ressembler à ceci :
Ce n'est pas vraiment satisfaisant, car la page occupe 70% du conteneur, laissant la colonne de droite vide. Nous allons corriger cela grâce aux feuilles de style.
Code CSS
En inspectant le code HTML généré par la page d'exemple, nous constatons que la balise body est tamponnée d'une nouvelle classe nommée page-template-pleinelargeur :
Nous profitons de cette classe pour ajouter un CSS personnalisé dans la rubrique Apparence -> Personnaliser
Voici donc le résultat, éblouissant de beauté :
Mise à jour du thème
Il faut savoir qu'en cas de mise à jour du thème, le contenu du dossier du thème oceanwp sera totalement remplacé par le nouveau, pulvérisant notre beau modèle de page Pleine largeur. Le CSS personnalisé sera quant à lui conservé, car il est stocké dans la base de données.
2 solutions pour remédier au problème :
- Créer un thème enfant pour y déposer notre modèle de page pleine largeur,
- ou désactiver les mises à jour du thème.
