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.

Modèle de page Contact

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 :

Template, modèle de page WordPress

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 :

Page avec sidebar

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 :

Modèle pleine largeur

La page devrait ressembler à ceci :

Page sans sidebar

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 :

classe du modèle Pleine largeur

Nous profitons de cette classe pour ajouter un CSS personnalisé dans la rubrique Apparence -> Personnaliser

CSS personnalisé dans WordPress

Voici donc le résultat, éblouissant de beauté :

modèle pleine largeur

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.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.