Créer un modèle de page WordPress
Les modèles de pages constituent un des éléments charnières dans la gestion des templates sous WordPress. Plan de site, formulaires de contact sont autant de pages modèles qu’il est facile de créer. Voyons comment faire de même pour générer vos propres types de pages.
Mise à jour du 17/09/2010 : consultez notre liste de 6 modèles de page WordPress prêtes-à-l’emploi !
Étape n°1 – Création d’un fichier PHP
La première étape consiste à se connecter sur votre serveur FTP puis de localiser le dossier de votre thème dans /wp-content/themes/NOM_DU_THEME/
A l’intérieur du dossier, créez un nouveau fichier PHP qui correspondra à votre modèle.
Pour différencier votre modèle des autres fichiers standards d’un thème WordPress, nommez-le de la façon suivante : template-nom.php
Ouvrez donc ledit fichier puis copiez / collez ces lignes de code qui indiqueront à WordPress qu’il s’agit d’un modèle de page :
<?php /* Template Name: Nom du modèle */ ?>
Remplacez donc Nom du modèle par le titre qui s’affichera lors de la création d’une nouvelle page WordPress.
Lignes de code insérées dans un modèle de page test
Étape n°2 – Reprise de la structure de page.php
La deuxième étape consiste à réutiliser la structure de page de WordPress. Ouvrez le fichier page.php puis copiez / collez la totalité du code juste en dessous des lignes de code précédemment insérées dans votre template.
A présent, à vous d’opérer les modifications nécessaires en termes de styles, de structure et fonctionnalités PHP.
Un modèle simple consiste à créer une page sans sidebar :
- Supprimez la ligne
<?php get_sidebar(); ?>; - Vérifiez que les balises
<div>sont correctement fermées ; - Appliquez une classe plus large pour votre contenu principal via le CSS ;
N’oubliez pas de sauvegarder votre fichier.
Étape n°3 – Création d’une page avec modèle
La troisième étape est la plus simple ! Connectez-vous sur votre administration WordPress puis cliquez sur Ajouter dans le menu Pages.
Dans le module Attributs de page, sélectionnez le modèle nouvellement créé puis rédigez votre page comme à l’accoutumée.
Tous les modèles de page WordPress sont dans la nature du Web…
Les modèles de page sont extrêmement répandus sous WordPress. Un prochain article en listera les plus importants. Restez connectés !
Crédits photo : Muao
Podcast: Télécharger (Durée: 4:39 — 63.1MB)
A propos de l'auteur
Aurélien Denis est le fondateur du projet WordPress Channel proposant tutoriels et podcasts librement téléchargeables. En 2010, il fonde Neticpro, une agence Web spécialisée WordPress. Il est aussi co-fondateur du site Protuts.net (tutoriels PC/Mac/Linux) et community manager pour l’Imagine Cup 2011/2012, une compétition mondiale organisée par Microsoft.
WordPress 3.5 – Un CMS pour créer et gérer blogs et sites Web
RT-Theme 17, traduction française
Maven Hosting, 12 mois d’hébergement
Themetick, traduction française
je connais un plugin qui crée des modèles de pages, très facile à utiliser, pas besoin de connaître le HTML/PHP, ça peut être utile pour les débutants
Il serait plus intéressant de fournir le lien vers l’extension à moins quelle est était modérée ?
Exact !
Bonjour, excellent tutoriel… Est ce possible d’avoir la même chose pour les billets. En effet, je n arrive pas a trouver la méthode pour faire un modèle d’ articles et surtout comment l
Appliquer!
Je ne pense que l’on puisse faire cela avec WordPress… du moins pas encore car il me semble que c’est prévu !
Mais sinon j’ai trouvé ce plugin : http://wordpress.org/extend/plugins/custom-post-template/
Merci pour cet article et accessoirement pour l’adresse du plugin. Ceci dit, après installation du plugin, rien ne s’est ajouté dans le menu déroulant pour me proposer d’autres modèles de pages, après, j’ai certainement du sauter une étape.
Concernant la méthode « traditionnelle » (mains dans le cambouis), j’ai pour ma part un template qui n’a quasiment rien dans sa page « page.php », en fait cette dernière récupère les pages « content-after.php » et « content-before.php » donc dans ce cas, comment procéder ?
Cela ne devrait pas empêcher de créer une page sur-mesure. Le thème en question utilise des fonctions pour faciliter le développement… mais qui n’est pas très facile pour l’utilisateur qui souhaite bidouiller.
C’est difficile pour ne pas dire impossible de vous aiguiller sans une intervention directe. Si vous intéressés, contactez-moi !
Je souhaite créer une page « Vidéo » où les internautes retrouveront six vidéos (avec le titre « le zapping du ??? » en dessous le player. Chaque page contiendrait 6 vidéo ou 8 et ainsi de suite.
Est-ce compliqué à réaliser ?
Pour intégrer ces vidéos dans mon site (www.info2tele.com) j’utilise des customs fiels :
- video pour l’adresse web
videos pour le code adresse
Merci pour l’aide
Peut-être que TubePress conviendrait : http://wpchannel.com/tubepress-plugin-alliant-wordpress-youtube/
Bonjour,
Merci pour cette réponse. Toutefois, je n’utilise pas que des vidéo Youtube. D’autre part comme je l’ai indiqué, pour intégrer ces vidéos, j’utilise costums fields. Ce qui n’est pas toujours simple.
Je voudrais savoir comment pratiquer pour que mon thème gère les « catch_image » et créer la fonction « catch_image »
Cordialement
Hum, il faut faire appel à un professionnel pour ton projet car c’est très spécifique.
Salut,
Sympa ton tuto, dans mon cas j’aurai voulu ajouter des cases en dessous de ma zone de texte, j’ai crée une page type en suivant ton tuto serai tu comment faire pour en ajouter ?
Quand je parles de case c’est de crée des espaces ou je pourrai ajouter des liens. Mais toutes les pages n’ayant pas les mêmes liens je pensais passer par des modèles type.
SI tu as une idée de comment faire je suis preneur.
Merci
Pour être honnête, je n’ai rien compris à ta demande…
Bonjour Aurélien,
je suis toute la procédure, mais le modèle n’apparaît pas dans wordpress quand je veux créer une nouvelle page
Une idée ?
merci
Canon
Bonsoir,
J’ai plusieurs page sur mon site et j’aimerai changé uniquement l’image de fond sur chaque page.
Avez vous une idée de la procédure à suivre ?
Cordialement
Bonjour,
Est il possible d’appliquer à chaque page d’un site un théme different ?
Merci par avance
Pas un thème au sens strict de WordPress mais oui pour adopter une apparence spécifique sur chaque page. Si le thème est bien fait tu disposes de classes CSS dédiées te permettant de les utiliser directement. Regardes ton code source avec Firebug.
Super, merci pour l’info sur les templates. Ca marche !
Merci pour ce tuto très instructif.
J’ai réussi à créer mon nouveau template et donc ma nouvelle page.
Maintenant après avoir enlevé ma sidebar, j’aimerais que mon « content » puisse prendre toute la largeur : http://www.bons-plans-voyage-new-york.com/calendrier
Comment s’y prendre ?
Dois-je appeler mon content différemment?
Dois-je bidouiller dans mon css ou ma page template-nom.php ?
Merci d’avance pour le travail
Alex
Juste pour dire que je viens d’essayer de mettre dans mon css 100% pour le width au lieu de : width: 593px;
Pour la page du calendrier cela a marché parfaitement, mais pour le reste de mes pages et mes articles, cela ne convient pas…
Bon désolé mais je réponds seul à mes questions.
En fait, j’ai crée un « contentcal » dans mon css qui est le même que le « content » mais avec « width : 100% ».
Et dans ma page template-nom.php, j’ai mis à la place de
Et ça marche
Hello,
merci pour ton tuto, je viens d’essayer mais mon nouveau template n’apparait pas dans la liste des templates dispo (seulement celui par defaut)…
je comprend pas j’ai bien respecté toutes les etapes pourtant…
Pour info :
Je developpe en local
WordPress 3.4.2.
quelqu’un aurait il une idée ? merci
Je viens de régler le probleme !! haha
je suis en con en fait j’avais rangé les css dans un dossier « css » alors qu’il faut que le style.css reste à la racine du theme.
probleme réglé et ton tuto marche de folie
++
G
Ravi d’apprendre que tu as résolu ton souci !
Je teste tous les carrousels et slideshow gratuits mais clairement il n’y en a pas beaucoup qui sont bien ou fonctionnels simplement.
Ce dernier, le CarouFredSel ne marche pas chez moi dans wordpress. Le truc de démo est bien gentil mais il ne fonctionne pas même après debug des parenthèses. WordPress est une sacrée usine à gaz … Au final c’est peut-être mieux d’utiliser un autre CMS
Tu as essayé de suivre le tutoriel sur CaroudFredSel ?
WordPress n’est pas une usine à gaz et les nouvelles versions ajoutent de nouvelles fonctionnalités mais en suppriment également.
L’objectif est de conserver un coeur léger et flexible et d’utiliser les plugins ou des fonctionnalités sur-mesure en PHP pour accomplir les objectifs recherchés.
Oui en fait j’ai suivi pas à pas le tutorial, et mes photos s’affichent toutes sans que le suivant précédent ne fonctionne, je n’ai pas compris pourquoi. J’ai essayé aussi de faire fonctionner les exemples du site http://caroufredsel.frebsite.nl/ et rien ne marche non plus. J’ai du rater un truc avec Jquery, je ne sais pas; pourtant il s’agit juste de javascript. Je vais jeter un oeil sur le fonctionnement de Jquery : http://docs.jquery.com/Tutorials:How_jQuery_Works
Pourquoi ne pas fournir directement un template complet avec un carrousel fonctionnel plutôt que de donner des bouts à assembler ?
Merci de poster les questions relatives à CaroudFredSel sur la page concernée.
D’ailleurs, la réponse y figure déjà.
Juste merci pour ce tuto, c’est ce que je cherchais.
Bonjour, je souhaite travailler des templates WP avec Dream CS5 et impossible a faire cela pourtant j’ai bien suivi ce tuto (http://seonul.blogspot.fr/2012/08/modif … -avec.html) et non … qqn a une idée merci
Bonjour,
Merci beaucoup Aurélien pour ce tuto très bien fait et très clair pour une néophyte comme moi !
J’ai réussi à mettre en place un template pour un type de pages (page simple, de type « fiche », sans colonne). En revanche, est-il possible de modifier la couleur du titre de ces pages (uniquement les pages utilisant ce template) ? Doit-on pour cela modifier le style.css ?
Merci beaucoup !!
En appliquant une classe spécifique ou un ID CSS, oui. Et oui en utilisant style.css.
bonjour,
j’arrive à enlever la slidebar mais quand j’enlève l’en-tête ça m’affiche un site sans « feuille de style ».
Quelqu’un a une idée??
Bonjour,
Je viens de suivre votre tuto il est excellent. Mais dans ma div id= »content » quand je rajoute style= »width:900px; » sa ne fonctionne pas mon texte reste justifié en 400px . Comment puis je faire ? J’ai bien mis style sans sidebar, et je n’ai pas mis de sidebar dans l’onglet sidebar
Ne rajoutez pas des styles CSS en inline. Passez par la feuille de style directement. Il y a sans doute d’autres div qui s’imbrique à l’intérieur également.
Bonjour, je vous avais envoyé un email. Je n’ai pas reçu la réponse malheureusement.
Pourriez vous m’aidez ?
Bonjour,
Merci pour ce claire et simple tutoriel, vraiment utile.
J’aimerais savoir si a votre connaissance, il existe un template ou un plugin pour créer un affichage de catégories porfolio.
Cordialement
David
Bonjour, je suis au bord de la crise de nerf ^^
J’ai un site WordPress dans lequel je veux intégrer une page blog qui soit parfaitement identiques aux autres pages de mon site (image d’en-tête et widgets à droite) avec simplement les articles qui s’affichent dans le cadre principal. J’essaie depuis trois jours et j’ arrive pas : soit j’ai la mise en page soit j’ai les articles mais pas les deux.
Quelqu’un a une idée, svp ? Merci !
Dans les réglages de lecture de WordPress, il faut indiquer une page statique pour votre accueil et une autre pour les articles (page que l’on aura créé préalablement dans le back-office).
Certains thèmes proposent des modèles de pages spécifiques au blog aussi.
Merci pour ta réponse Aurélien.
(
Malheureusement j’avais déjà testé : soit je ne le fais pas et j’ai la mise en page sans les articles, soit je fais cette manip et j’ai les articles mais sans la mise en page (ni menu, ni « image à la une », ni widgets à droite…),
Mon site : www.alter-assist.fr.
J’ai même essayé de créer un nouveau template spécifique pour le blog en reprenant le page.php mais je ne sais pas quel code insérer et où pour qu’il aille chercher les articles dans le cadre principal. Je n’y comprends rien.
Aurais-tu une autre idée ? Merci d’avance et bon week-end !
Impossible à dire comme cela, il faudrait que j’intervienne directement sur ton site…
Merci encore mais je pense avoir trouvé une solution avec le plugin « blog-in-blog ».
Il me reste quelques soucis :
- afficher la catégorie d’article mais SANS lien,
- afficher le nombre de commentaires,
- ouverture d’un petit cadre de commentaire sous chaque article quand on clique sur un lien « commenter »,
- et surtout => que les articles se « déroulent » sur la même page lorsqu’on clique sur le « Lire la suite ».
Encore de longues heures de boulot en perspective ^^
Je te remercie encore d’avoir pris le temps de me répondre.
Bonjour et merci pour ce tuto,
Je cherche à créer un site avec un header différent pour chaque groupe de page. j’ai donc crée plusieurs header et plusieurs templates pour appeler les headers respectifs…
Cela fonctionne trés bien pour 2 templates mais malheureusement pas pour les autres… pouvez vous m’aider?
Merci d’avance
Sylvain
Pour faire un header sur chaque page, il faut utiliser soit des modèles de pages PHP comme tu l’as fait, soit des metaboxes pour avoir le choix directement dans l’admin. La première solution est pertinente pour quelques pages, la seconde bien que plus compliquée à mettre en place et mieux adaptée.
Si le changement ne s’opère pas c’est que ton modèle de page ne doit pas s’appliquer.
Bonjour, je decouvre votre blog et suite à plusieurs recherche, il s avere que je tombe souvent dessus. Vous m’avez bien aidé pour certains soucis recontrés. Mon probleme actuelle est que je n’ai pas le modele de page blog, et que je voudrait creer une page sous ce modele pour un blog sur mon site. C’est la premiere fois que je vois ca, habituellement ce modele de page y est toujours dispo? Dois-je recreer le modele blog? Si oui de quelle maniere? Merci d’avance.