À propos de l’auteur

Nick Schäferhoff est un entrepreneur, un spécialiste du marketing en ligne et un blogueur professionnel allemand. Lorsqu’il ne crée pas de sites Web, ne crée pas de contenu ou n’aide pas ses clients… En savoir plus sur Nick↬

J’aime penser à WordPress comme la drogue de passerelle du développement Web. De nombreuses personnes qui commencent à utiliser la plate-forme recherchent au départ simplement un moyen confortable (et gratuit) de créer un site Web simple, souvent à l’aide d’une page WordPress builder. Un peu comme « Je vais juste essayer une fois. »

Cependant, une bonne partie des utilisateurs ne s’arrêtent pas là. Au lieu de cela, ils deviennent accro. Trouvez plus d’idées. Expérience. Essayez de nouveaux plugins. Découvrez Firebug. Boom. Bientôt, il n’y a plus de retour en arrière. Cela ressemble-t-il à votre histoire? En tant qu’utilisateur de WordPress, il est naturel de vouloir de plus en plus de contrôle sur votre site Web. Pour avoir envie de design personnalisé, de fonctionnalités personnalisées, de tout personnalisé.

Lectures supplémentaires sur SmashingMag:

• Comment créer et personnaliser un thème enfant WordPress
• Building Une page d’archive personnalisée pour WordPress
• Personnalisation des archives WordPress

Heureusement, WordPress est conçu exactement pour cela. Sa structure flexible et son architecture compartimentée permettent à n’importe qui de changer pratiquement n’importe quoi sur son site.

Parmi les outils les plus importants dans la quête d’un contrôle complet du site Web figurent les modèles de page. Ils permettent aux utilisateurs de modifier considérablement la conception et les fonctionnalités de leur site Web. Vous voulez un en-tête personnalisé pour votre page d’accueil? Fait. Une barre latérale supplémentaire uniquement pour votre page de blog? Aucun problème. Une page d’erreur 404 unique? Être. Mon. Invité.

Si vous voulez savoir comment les modèles de page WordPress peuvent vous aider à atteindre cet objectif, lisez la suite. Mais d’abord, un peu d’informations générales.

Fichiers de modèles dans WordPress

De quoi parle-t-on quand on parle de modèles dans le contexte de WordPress? La version courte est que les modèles sont des fichiers qui indiquent à WordPress comment afficher différents types de contenu.

La version légèrement plus longue: chaque fois que quelqu’un envoie une demande pour afficher une partie de votre site Web, la plate-forme WordPress comprendra quel contenu ils veulent voir et comment cette partie spécifique de votre site Web doit être rendue.

Pour ce dernier, WordPress tentera d’utiliser le fichier de modèle le plus approprié trouvé dans votre thème. Lequel est décidé sur la base d’un ordre défini, la hiérarchie des modèles WordPress. Vous pouvez voir à quoi cela ressemble dans la capture d’écran ci-dessous ou dans cette version interactive.

La hiérarchie des modèles est une liste de fichiers modèles avec lesquels WordPress est familier et classés pour déterminer lesquels fichier a priorité sur un autre.

Vous pouvez le considérer comme un arbre de décision. Lorsque WordPress tente de décider comment afficher une page donnée, il descend dans la hiérarchie des modèles jusqu’à ce qu’il trouve le premier fichier de modèle correspondant à la page demandée. Par exemple, si quelqu’un tentait d’accéder à l’adresse http://yoursite.com/category/news, WordPress rechercherait le fichier modèle correct dans cet ordre:

Au bas de la hiérarchie se trouve l’index .php. Il sera utilisé pour afficher tout contenu qui n’a pas de fichier modèle plus spécifique attaché à son nom. Si un fichier de modèle se classe plus haut dans la hiérarchie, WordPress utilisera automatiquement ce fichier afin d’afficher le contenu en question.

Modèles de page et leur utilisation

Pour les pages, le modèle standard est généralement le bien nommé page.php. À moins qu’un fichier modèle plus spécifique ne soit disponible (tel que archive.php pour une page d’archive), WordPress utilisera page.php pour afficher le contenu de toutes les pages de votre site Web.

Cependant, dans de nombreux cas, il peut être nécessaire de modifier la conception, l’apparence, la convivialité ou la fonctionnalité de certaines parties de votre site Web. C’est là que les modèles de page entrent en jeu.Les modèles de page personnalisés vous permettent d’individualiser n’importe quelle partie de votre site WordPress sans affecter le reste.

Vous avez peut-être déjà vu cela au travail. Par exemple, de nombreux thèmes WordPress proposent aujourd’hui une option permettant de modifier votre page en pleine largeur, d’ajouter une deuxième barre latérale ou de changer l’emplacement de la barre latérale. Si tel est le cas pour le vôtre, cela a probablement été fait via des fichiers modèles. Il y a plusieurs façons d’accomplir cela et nous les examinerons plus tard.

Tout d’abord, un mot d’avertissement: puisque travailler avec des modèles implique l’édition et la modification de fichiers dans votre thème actif, c’est toujours une bonne idée d’aller avec un thème enfant lors de ces types de personnalisations. De cette façon, vous ne courez pas le risque de voir vos modifications écrasées lorsque votre thème parent est mis à jour.

Comment personnaliser n’importe quelle page dans WordPress

Il existe trois façons de base d’utiliser la personnalisation modèles de page dans WordPress: ajout d’instructions conditionnelles à un modèle existant; créer des modèles de page spécifiques qui se classent plus haut dans la hiérarchie; et attribuer directement des modèles à des pages spécifiques. Nous examinerons chacun de ces éléments tour à tour.

Utilisation de balises conditionnelles dans les modèles par défaut

Un moyen simple d’apporter des modifications spécifiques à une page consiste à ajouter les nombreuses balises conditionnelles de WordPress à un modèle déjà utilisé. Comme son nom l’indique, ces balises sont utilisées pour créer des fonctions qui ne sont exécutées que si une certaine condition est remplie. Dans le contexte des modèles de page, ce serait quelque chose du genre « N’effectuez l’action X que sur la page Y. »

En règle générale, vous ajoutez des balises conditionnelles au fichier page.php de votre thème (à moins que, de Bien sûr, vous souhaitez personnaliser une autre partie de votre site Web). Ils vous permettent d’apporter des modifications limitées à la page d’accueil, à la page d’accueil, à la page de blog ou à toute autre page de votre site.

Voici quelques-unes des pages fréquemment utilisées balises conditionnelles:

Par exemple, lorsqu’il est ajouté à votre page.php à la place de la balise standard get_header();, le code suivant chargera un fichier d’en-tête personnalisé nommé header -shop.php lors de l’affichage de la page http://yoursite.com/products.

Un bon cas d’utilisation serait si vous avez une boutique sur votre site et vous devez afficher une image d’en-tête différente ou un menu personnalisé sur la page de la boutique. Vous pouvez ensuite ajouter ces personnalisations dans header-shop.php et elles apparaîtront à l’endroit approprié.

Cependant, les balises conditionnelles ne sont pas li mited à une page. Vous pouvez faire plusieurs déclarations d’affilée comme ceci:

Dans ce deuxième exemple, deux conditions vont changer le comportement des différentes pages de votre site. Outre le chargement du fichier d’en-tête spécifique à la boutique susmentionné, il chargerait désormais également un header-about.php sur une page avec l’ID 42. Pour toutes les autres pages, le fichier d’en-tête standard s’applique.

Pour en savoir plus concernant l’utilisation des balises conditionnelles, les ressources suivantes sont fortement recommandées:

• Codex WordPress: balises conditionnelles
• ThemeLab: Le guide ultime des balises conditionnelles WordPress

Création de fichiers spécifiques à une page dans la hiérarchie WordPress

Les balises conditionnelles sont un excellent moyen d’introduire des modifications plus petites dans vos modèles de page. Bien entendu, vous pouvez également créer des personnalisations plus importantes en utilisant plusieurs instructions conditionnelles l’une après l’autre. Cependant, je trouve que c’est une solution très lourde et j’opterais plutôt pour des fichiers modèles désignés.

Une façon de faire est d’exploiter la hiérarchie des modèles WordPress. Comme nous l’avons vu, la hiérarchie parcourra une liste de fichiers modèles possibles et choisira le premier qu’elle trouve qui correspond. Pour les pages, la hiérarchie ressemble à ceci:

• Modèle de page personnalisé
• page- {slug} .php
• page- {id} .php
• page.php
• index.php

En premier lieu, il y a des modèles de page personnalisés qui ont été directement affectés à une page particulière. Si l’un de ceux-ci existe, WordPress l’utilisera quels que soient les autres fichiers de modèle présents. Nous parlerons plus en détail des modèles de page personnalisés dans un instant.

Après cela, WordPress recherchera un modèle de page qui comprend le slug de la page en question. Par exemple, si vous incluez un fichier nommé page-about.php dans vos fichiers de thème, WordPress utilisera ce fichier pour afficher votre page « À propos » ou la page qui se trouve sous http://www.yoursite.com/about .

Vous pouvez également réaliser la même chose en ciblant l’identifiant de votre page. Donc, si cette même page a un ID de 5, WordPress utilisera le fichier modèle page-5.php avant page.php s’il existe; c’est-à-dire uniquement s’il n’y a pas de modèle de page de rang supérieur disponible.

(BTW, vous pouvez trouver l’ID de chaque page en survolant son titre sous «  Toutes les pages  » dans votre retour WordPress -end. L’ID apparaîtra dans le lien affiché par votre navigateur.)

Attribution de modèles de page personnalisés

En plus de fournir des modèles sous une forme que WordPress utilisera automatiquement, il est également possible d’attribuer manuellement des modèles personnalisés à des pages spécifiques.Comme vous pouvez le voir dans la hiérarchie des modèles, ceux-ci l’emporteront sur tout autre fichier de modèle présent dans le dossier du thème.

Tout comme la création de modèles spécifiques à la page pour la hiérarchie WordPress, cela vous oblige à fournir un fichier de modèle et puis liez-le à la page pour laquelle vous souhaitez l’utiliser. Ce dernier peut être fait de deux manières différentes que vous connaissez peut-être déjà. Au cas où vous ne l’auriez pas été, voici comment procéder.

1. Attribution de modèles de page personnalisés à partir de l’éditeur WordPress

Dans l’éditeur WordPress, vous trouvez un champ d’option appelé ‘Attributs de page’ avec un menu déroulant sous ‘Modèle’.

En cliquant dessus, vous obtiendrez une liste des modèles de page disponibles sur votre site WordPress. Choisissez celui que vous désirez, enregistrez ou mettez à jour votre page et vous avez terminé.

2. Définition d’un modèle personnalisé via l’édition rapide

La même chose peut également être obtenue sans entrer dans l’éditeur WordPress. Accédez à « Toutes les pages » et passez la souris sur n’importe quel élément de la liste. Un menu qui comprend l’élément «Modification rapide» deviendra visible.

Cliquez dessus pour modifier les paramètres de la page directement à partir de la liste. Vous verrez le même menu déroulant pour choisir un modèle de page différent. Choisissez-en un, mettez à jour la page et vous avez terminé.

Pas si difficile après tout, n’est-ce pas? Mais que faire si vous n’avez pas encore de modèle de page personnalisé? Comment le créez-vous pour que votre site Web soit exactement comme vous le souhaitez? Ne vous inquiétez pas, c’est le sujet de la partie suivante.

Un guide étape par étape pour créer des modèles de page personnalisés

L’assemblage de fichiers de modèles personnalisés pour vos pages n’est pas c’est difficile mais voici quelques détails auxquels vous devez prêter attention. Par conséquent, passons en revue le processus petit à petit.

1. Rechercher le modèle par défaut

Un bon moyen est de commencer par copier le modèle actuellement utilisé par la page que vous souhaitez modifier. Il est plus facile de modifier le code existant que d’écrire une page entière à partir de zéro. Dans la plupart des cas, ce sera le fichier page.php.

(Si vous ne savez pas comment savoir quel fichier modèle est utilisé sur la page que vous souhaitez modifier, le plugin What The File se révèle utile.)

J’utiliserai le thème Twenty Twelve pour la démonstration. Voici à quoi ressemble son modèle de page standard:

Comme vous pouvez le voir, rien d’extraordinaire ici: les appels habituels pour l’en-tête et le pied de page, et la boucle au milieu. La page en question ressemble à ceci:

2. Copier et renommer le fichier modèle

Après avoir identifié le fichier modèle par défaut, il est temps de faire une copie. Nous utiliserons le fichier dupliqué afin d’apporter les modifications souhaitées à notre page. Pour cela, nous devrons également le renommer. Vous ne pouvez pas avoir deux fichiers du même nom, c’est déroutant pour tout le monde.

Vous êtes libre de donner au fichier le nom de votre choix tant qu’il ne commence pas par l’un des noms de fichier de thème réservés . Alors ne le nommez pas page-something.php ou quoi que ce soit d’autre qui ferait penser à WordPress qu’il s’agit d’un fichier de modèle dédié.

Il est logique d’utiliser un nom qui identifie facilement ce que ce fichier de modèle est utilisé pour, comme my-custom-template.php. Dans mon cas, j’irai avec custom-full-width.php.

3. Personnalisez l’en-tête du fichier de modèle

Ensuite, nous devons dire à WordPress que ce nouveau fichier est un modèle de page personnalisé. Pour cela, nous devrons ajuster l’en-tête du fichier de la manière suivante:

Le nom sous ‘Nom du modèle’ est ce qui sera affiché sous ‘Page Attributs ‘dans l’éditeur WordPress. Assurez-vous de l’ajuster au nom de votre modèle.

4. Personnalisez le code

Il est maintenant temps de passer à la viande et aux pommes de terre du modèle de page: le code. Dans mon exemple, je souhaite simplement supprimer la barre latérale de ma page de démonstration.

C’est relativement simple, car tout ce que j’ai à faire est de supprimer <?php get_sidebar(); ?> de mon modèle de page puisque c’est ce qui appelle la barre latérale. En conséquence, mon modèle personnalisé finit par ressembler à ceci:

5. Télécharger le modèle de page

Après avoir enregistré mon fichier personnalisé, il est maintenant temps de le télécharger sur mon site Web. Les modèles de page personnalisés peuvent être enregistrés à plusieurs endroits pour être reconnus par WordPress:

• Le dossier de votre thème (enfant) actif
• Le dossier de votre thème principal parent
• Un sous-dossier dans l’un ou l’autre de ces éléments

Personnellement, j’aime créer un dossier nommé page_templates dans mon thème enfant et y placer des modèles personnalisés.Je trouve cela plus facile de conserver une vue d’ensemble de mes fichiers et personnalisations.

6. Activer le modèle

En dernier lieu, vous devez activer le modèle de page. Comme mentionné précédemment, cela se fait sous Attributs de page → Modèles dans l’éditeur WordPress. Enregistrez, affichez la page et voilà! Voici ma page personnalisée sans barre latérale:

Pas si difficile, n’est-ce pas? Ne vous inquiétez pas, vous comprendrez rapidement. Pour vous donner une meilleure idée de l’utilisation de ces modèles de page, je vais vous présenter des cas d’utilisation supplémentaires (y compris le code) pour le reste de l’article.

Cinq façons différentes d’utiliser les modèles de page

Comme déjà mentionné, les modèles de page peuvent être utilisés à de nombreuses fins différentes. Vous pouvez personnaliser à peu près tout sur n’importe quelle page avec leur aide. Seule votre imagination (et vos capacités de codage) vous empêchent.

1. Modèle de page pleine largeur

Le premier cas que nous allons examiner est une version avancée du modèle de démonstration que nous avons créé ci-dessus. Là-haut, nous avons déjà supprimé la barre latérale en supprimant <?php get_sidebar(); ?> du code. Cependant, comme vous l’avez vu sur la capture d’écran, cela ne se traduit pas réellement par une mise en page pleine largeur puisque la section de contenu reste sur la gauche.

Pour résoudre ce problème, nous devons traiter le CSS, en particulier cette partie:

L’attribut width limite l’élément qui contient notre contenu à 65,1042% de l’espace disponible . Nous voulons l’augmenter.

Si nous le modifions simplement à 100%, cela affectera toutes les autres pages de notre site, ce qui est loin de ce que nous voulons. Par conséquent, le premier ordre ici consiste à changer la classe principale de div dans notre modèle personnalisé par autre chose, comme class="site-content-fullwidth”. Le résultat:

Nous pouvons maintenant ajuster le CSS pour notre nouvelle classe personnalisée:

En conséquence, le contenu s’étend maintenant tout le chemin à travers l’écran.

2. Page d’erreur 404 dynamique avec zones de widgets

La page d’erreur 404 est l’endroit où chaque personne tente d’accéder à une page de votre site Web qui n’existe pas, que ce soit par une faute de frappe, un lien défectueux ou parce que le Le lien permanent de la page a changé.

Malgré le fait que tout le monde n’aime pas obtenir un 404 sur Internet, si vous utilisez un site Web, la page d’erreur 404 n’a pas peu d’importance. Son contenu peut être le facteur décisif pour savoir si quelqu’un abandonne immédiatement votre site ou reste et vérifie votre autre contenu.

Coder une page d’erreur personnalisée à partir de zéro est fastidieux, surtout si vous n’êtes pas sûr de vos capacités . Une meilleure façon est de créer des zones de widgets dans votre modèle afin que vous puissiez modifier de manière flexible ce qui y est affiché par glisser-déposer.

Pour cela, nous allons saisir et éditer le fichier 404.php fourni avec Twenty Twelve ( hiérarchie des modèles, vous vous souvenez?). Cependant, avant de changer quoi que ce soit là-dessus, nous allons d’abord créer un nouveau widget en insérant le code suivant dans notre fichier functions.php:

Cela devrait afficher le widget nouvellement créé dans votre back-end WordPress. Pour vous assurer qu’il apparaît réellement sur le site, vous devez ajouter la ligne de code suivante à votre page 404 à l’endroit approprié:

Après en téléchargeant le modèle sur mon site, il est temps de remplir ma nouvelle zone de widget:

Si je regarde maintenant la page d’erreur 404, mes widgets nouvellement créés apparaissent là-haut:

3. Modèle de page pour afficher des types de publication personnalisés

Les types de publication personnalisés sont un excellent moyen d’introduire du contenu qui a son propre ensemble de points de données, de conception et d’autres personnalisations. Un cas d’utilisation préféré pour ces types de publication est les éléments de révision tels que les livres et les films. Dans notre cas, nous voulons créer un modèle de page qui montre les éléments du portfolio.

Nous devons d’abord créer notre type de publication personnalisé (CPT). Cela peut être fait manuellement ou via un plugin. Une option de plugin que je peux recommander sans réserve est Types. Il vous permet de créer facilement des types d’articles personnalisés et des champs personnalisés.

Installez et activez des types, ajoutez un article personnalisé, assurez-vous que son slug est «portfolio», personnalisez tous les champs dont vous avez besoin (comme l’ajout d’une image sélectionnée ), ajustez les autres options et enregistrez.

Maintenant que nous avons notre type de publication de portfolio, nous voulons qu’il apparaisse sur notre site. La première chose que nous allons faire est de créer la page en question.Sachez que si vous avez choisi «portfolio» comme slug de votre CPT, la page ne peut pas avoir le même slug. J’y suis allé avec mon clients-portfolio et j’ai également ajouté un exemple de texte.

Après avoir ajouté quelques éléments dans la section de type de publication ‘portfolio’, nous voulons qu’ils apparaissent sur notre page juste en dessous du contenu de la page.

Pour y parvenir, nous utiliserons à nouveau un dérivé du fichier page.php. Copiez-le, appelez-le portfolio-template.php et changez l’en-tête comme suit:

Cependant, dans ce cas, nous devrons apporter quelques modifications au modèle d’origine. Quand vous regardez le code de page.php, vous verrez qu’il appelle un autre fichier modèle au milieu, nommé content-page.php (où il dit <?php get_template_part( ‘content’, ‘page’ ); ?>). Dans ce fichier, nous trouvons le code suivant:

Comme vous pouvez le voir, c’est ici que le titre et le contenu de la page sont appelés. Puisque nous voulons vraiment ceux sur notre site de portfolio, nous devrons copier les parties nécessaires de ce modèle dans notre fichier page.php. Le résultat ressemble à ceci:

Pour obtenir les éléments du portfolio sur notre page, nous ajouterons le code suivant juste sous l’appel the_content().

Cela fera apparaître le CPT sur la page:

Je suis sûr que nous sommes tous d’accord pour dire que cela semble moins que stellaire, donc un certain style est dans l’ordre.

Beaucoup mieux, tu ne trouves pas?

Et voici le code complet du modèle de page de portfolio:

4. Page de contributeur avec des images d’avatar

La prochaine étape dans nos cas d’utilisation de modèle de page est une page de contributeur. Nous voulons mettre en place une liste d’auteurs sur notre site Web, y compris leurs images et le nombre d’articles qu’ils ont publiés sous leur nom. Le résultat final ressemblera à ceci:

Nous recommencerons avec notre fichier hybride d’avant et y ajouterons le code de la liste des contributeurs. Mais que faire si vous ne savez pas comment créer une telle chose? Pas de soucis, vous pouvez vous en tirer avec le vol intelligent.

Vous voyez, le thème par défaut Twenty Fourteen est livré avec une page de contributeur par défaut. Vous pouvez trouver son modèle dans le dossier page-templates avec le nom contributors.php.

Cependant, lorsque vous regardez dans le fichier, vous ne trouverez que l’appel suivant: twentyfourteen_list_authors();. Heureusement, en tant qu’utilisateur avide de WordPress, vous concluez maintenant que cela fait probablement référence à une fonction du fichier function.php de Twenty Fourteen et vous auriez raison.

D’après ce que nous trouvons là-dedans, la partie qui nous intéresse est ceci:

Nous l’ajouterons à nouveau sous l’appel à the_content() avec le résultat suivant:

Maintenant, pour un peu de style:

Et ça devrait être tout. Merci vingt-quatorze!

5. Page d’archive personnalisée

Twenty Twelve est livré avec son propre modèle pour les pages d’archive. Cela passera à l’action, par exemple, lorsque vous tenterez d’afficher tous les messages passés d’une certaine catégorie.

Cependant, je veux quelque chose qui ressemble un peu plus à ce que Problogger a fait: une page qui permet aux gens de découvrir d’autres contenu sur mon site de plusieurs manières différentes. Cela, encore une fois, est fait avec un modèle de page.

En conservant notre modèle mixte d’avant, nous ajouterons ce qui suit sous l’appel the_content():

Plus, un peu de style pour la barre de recherche:

Et le résultat devrait ressembler un peu à ceci:

Pour terminer, voici le fichier entier:

N’oubliez pas de l’attribuer à un page!

Modèles de page WordPress en bref

Sur votre chemin vers la maîtrise de WordPress, apprendre à utiliser les modèles de page est une étape importante. Ils peuvent rendre la personnalisation de votre site Web très, très facile et vous permettre d’attribuer des fonctionnalités et un design uniques à autant de pages que vous le souhaitez. De l’ajout de zones de widgets à l’affichage de types d’articles personnalisés en passant par l’affichage d’une liste des contributeurs de votre site Web, les possibilités sont pratiquement infinies.

Que vous utilisiez des balises conditionnelles, exploitiez la hiérarchie de modèles WordPress ou créez des fichiers de modèle spécifiques à une page, cela dépend entièrement de vous et de ce que vous essayez de réaliser. Commencez petit et progressez vers des choses plus compliquées. Il ne faudra pas longtemps avant que chaque partie de votre site WordPress réponde à chacun de vos appels.