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

Ce qu'il faut comprendre, c'est qu'en allant dans le Tableau de bord, WordPress scanne l'ensemble des fichiers du thème, et s'il rencontre une fichier PHP portant la mention Template name: dans les commentaires, il l'ajoute dans les modèles de page.

Pratique

Si vous n'avez toujours pas compris l'usage d'un modèle de page, voici un exemple concret. Nous allons créer un modèle de page pleine largeur pour un thème qui n'en a pas.

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 Advanced Code 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 ?

Advanced code editor create new file

Nouveau fichier pour la création d'un modèle WordPress

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.

Template name: Pleine largeur

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_display_sidebar' ); ?>

Application du modèle

Dans le Tableau de bord, modifiez la page d'exemple et appliquez le modèle Pleine largeur.

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é :

Page 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.

Articles connexes

Laisser un commentaire

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