Comment créer des modèles de page WordPress personnalisés

Les modèles de page dans les thèmes WordPress aident à déterminer la disposition des pages dans un site Web. Cependant, modifier ces modèles peut parfois être intimidant, en particulier pour les débutants. Heureusement, WordPress offre une certaine flexibilité en ce qui concerne les modèles de page en vous permettant de créer des modèles de page personnalisés dans votre thème.

La création de modèles de page personnalisés pour votre site vous permet de modifier facilement les mises en page et les conceptions de votre site selon vos préférences. Il vous permet également d'ajouter des exigences personnalisées telles que l'utilisation de différents en-têtes pour différentes pages. Ces modifications peuvent en fait être appliquées sur différentes pages ou sur une seule page.

Dans cet article, nous examinerons ce que sont les modèles de page WordPress personnalisés, la hiérarchie des modèles de page par défaut, ainsi que la façon de créer des modèles de page WordPress personnalisés dans votre thème.

Table des matières

Qu'est-ce qu'un modèle de page WordPress personnalisé

La hiérarchie des modèles de page WordPress

Création d'un modèle de page personnalisé

• Comment créer un modèle personnalisé global
• Création d'un modèle de page unique

Conclusion

Qu'est-ce qu'un modèle de page WordPress personnalisé

Un modèle de page WordPress personnalisé est un fichier de modèle qui vous permet d'avoir une conception et une convivialité distinctes de votre site Web.

Par exemple, si vous avez un thème de blog sur votre site, vous pouvez créer un modèle personnalisé pour votre site, qui n'affiche pas de barre latérale ni de commentaires. Vous pouvez également créer un modèle pour les pages où vous avez un contenu de rendu de modèle dans une mise en page en boîte et un autre dans une mise en page pleine largeur. Le nombre de modèles de page que vous pouvez créer n'est pas limité.

Le rendu des pages est contrôlé par le fichier page.php dans WordPress. Ce fichier constitue donc une base par défaut pour le rendu du contenu de votre page et se trouve à la racine de vos fichiers de thème, comme illustré ci-dessous.

S'il existe des modèles de page plus spécifiques en place, la hiérarchie des modèles entre en jeu.

La hiérarchie des modèles de page WordPress

La hiérarchie des modèles de page détermine quel fichier de modèle WordPress sélectionne lors de l'affichage d'une page, en fonction de la nature de la demande effectuée ainsi que de son existence dans le thème.

La hiérarchie des modèles WordPress par défaut est la suivante :

Modèle de page : WordPress recherche un modèle attribué à la page et utilise ce modèle dans la page

page-{slug}.php : si aucun modèle n'est attribué à la page, WordPress recherche alors un modèle avec le slug à la page et l'applique s'il est trouvé.

Un slug est une partie de l'URL de la page après le nom de domaine et peut être modifié. Vous trouverez ci-dessous un exemple d'illustration à ce sujet.

page-{id}.php : WordPress vérifiera alors l'existence d'un modèle de page avec l'ID de page de la page en cours de rendu si aucun modèle avec le slug n'est trouvé.

page.php : Si aucun modèle avec un identifiant de page n'est trouvé, WordPress utilisera alors le modèle standard page.php pour afficher la page.

singular.php : Dans le cas où le fichier page.php n'est pas trouvé, WordPress utilisera le fichier singular.php quel que soit le type de publication.

index.php : si aucun des modèles ci-dessus n'est disponible, WordPress affiche par défaut les pages à l'aide du fichier index.php.

Le rendu des pages dans votre environnement WordPress peut donc être effectué par l'un des modèles de page ci-dessus. C'est donc à vous de déterminer le niveau de priorité que vous souhaitez mettre en place.

Création d'un modèle de page personnalisé

La création de modèles de page personnalisés dans votre thème est assez simple. Vous devez cependant déterminer si les modèles de page seront destinés à une seule page ou à n'importe quelle page.

Dans ce guide, nous verrons comment créer manuellement un modèle de page global dans le thème Stax ainsi qu'un modèle de page unique sur l'une de nos pages.

Comment créer un modèle personnalisé global

Parfois, vous souhaitez créer un modèle de page qui peut être utilisé globalement sur n'importe quelle page de votre site Web.

Pour ce faire, vous devrez d'abord identifier un éditeur de texte à utiliser tel que Notepad, Notepad ++, texte sublime ou tout autre éditeur de votre choix.

Une fois cela fait, vous pouvez alors commencer à créer votre fichier modèle en procédant comme suit :

Etape 1 : Créez un nouveau fichier et ajoutez le code suivant :

 <?php /* Template Name: PageWithNoFooter */ ?>

Nous vous recommandons d'utiliser un nom de modèle qui n'est pas utilisé dans les autres modèles de page que vous pourriez avoir sur votre site Web, ainsi qu'un nom que vous pouvez facilement identifier et associer aux pages de votre site.

Une fois cela fait, enregistrez votre nouveau modèle de page avec l'extension .php. Dans notre cas ici, nous nommerons le fichier template pagewithnofooter.php . Vous pouvez utiliser n'importe quel nom de votre choix, mais il est plus recommandé d'utiliser un nom similaire au nom de votre modèle.

Étape 2 : Ajoutez le code souhaité au fichier

Dans cette étape, vous pouvez ajouter votre code préféré au fichier, que ce soit en PHP ou en PHP et HTML.

À des fins d'illustration, dans notre cas ici, nous allons utiliser le contenu du fichier par défaut right-sidebar.php dans le fichier pagewithnofooter.php mais le personnaliser et ajouter le code pour afficher un texte de bienvenue HTML personnalisé ainsi que désactiver le pied de page. Si vous utilisez un autre thème WordPress, vous pouvez également copier le contenu de page.php dans le thème ou tout autre modèle de page défini par thème que votre thème pourrait avoir en place.

Notre code sera donc le suivant :

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

Étape 3 : chargez le modèle de page dans vos fichiers de thème .

A l'aide d'un programme FTP tel que Filezilla ou via votre panel d'hébergement, téléchargez votre fichier personnalisé à la racine de vos fichiers de thème. Dans notre cas ici, ce sera soit dans les chemins de répertoire suivants :

i) wp-content > Thèmes > Stax

ii) Recommandé : wp-content > Thèmes > stax-child

Ceci est applicable lors de l'utilisation d'un thème enfant sur votre site, et stax-child est votre thème enfant.

Nous vous recommandons d'utiliser le thème enfant lors de la personnalisation des modèles de page ou de toute autre personnalisation de fichier dans votre thème afin d'éviter de perdre des personnalisations lors des mises à jour du thème.

Étape 4 : Créez une nouvelle page et attribuez-lui le modèle "PageWithNoFooter"

Pour ce faire, accédez à la section Pages > Ajouter un nouveau dans votre tableau de bord WordPress et créez votre page.

Une fois que vous avez créé la page, attribuez-lui le modèle "PageWithNoFooter" et enregistrez vos modifications.

Ci-dessous un exemple d'illustration de ceci :

Maintenant, lors de la prévisualisation de la page sur le front-end, notre page n'aura pas de pied de page rendu dans votre page. Vous aurez également le code HTML personnalisé que nous avons ajouté.

Ci-dessous une capture d'écran à ce sujet :

Vous pouvez utiliser le modèle dans n'importe quelle page où vous souhaitez appliquer sa mise en page ou bien dans n'importe quelle page pour laquelle vous n'avez pas l'intention d'avoir un pied de page.

Création d'un modèle de page unique

Les modèles de page personnalisés sur des pages uniques sont davantage spécifiques à la page. Comme mentionné précédemment, ces modèles sont pris en compte pour la sélection si aucun "modèle de page" n'est attribué à une page.

En ce qui concerne ces modèles, vous pouvez cibler la page par slug ou par ID de page. Il est également important de prendre en compte les perspectives d'avenir de votre site Web pour déterminer s'il convient d'utiliser un slug de page ou un identifiant. Par exemple, si vous avez l'intention de migrer votre site vers un autre domaine, l'utilisation d'un ID de page ne serait pas appropriée lors de la création de votre fichier de modèle. Au lieu de cela, l'utilisation du slug serait considérée comme une meilleure option. Si, d'autre part, votre site est géré par plusieurs personnes et que vous pensez qu'il est possible qu'elles modifient le slug de page, il serait préférable d'utiliser un ID de page lors de la création du modèle de page.

Dans notre cas ici, nous allons créer un modèle de page personnalisé pour notre page de contact et désactiver le pied de page de la page. Pour créer un tel modèle, vous devrez effectuer les opérations suivantes :

Étape 1 : Copiez le contenu de la page.php

Dans cette étape, vous devrez d'abord localiser le page.php dans vos fichiers de thème.

Une fois que vous avez localisé le fichier, sélectionnez pour le modifier et copier son contenu.

Étape 2 : Créer un nouveau modèle pour la page

Dans la racine de vos fichiers de thème, créez le modèle de page pour la page de contact. Vous pouvez utiliser le fichier page-{id}.php ou page-{slug}.php. Dans notre cas ici, nous utiliserons le slug, nous nommerons donc notre template page-contact.php puisque « contact » est notre slug de page comme on le voit ci-dessous :

Vous trouverez également ci-dessous une illustration de l'emplacement du fichier :

Étape 3 : Collez le contenu du fichier page.php

Vous devrez maintenant coller le contenu du fichier page.php que nous avons copié à l'étape 1 ci-dessus dans notre nouveau fichier page-contact.php. Ce faisant, vous pouvez ensuite personnaliser le fichier pour incorporer les modifications de code souhaitées et enregistrer vos modifications. Dans notre cas, nous désactiverons le pied de page dans la page de contact afin que notre code final se lise comme suit :

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

En prévisualisant maintenant votre page de contact, vous vous rendrez compte que la page n'intègre pas de pied de page.

Vous trouverez ci-dessous une comparaison de capture d'écran sur la page initialement et après l'application du nouveau modèle.

Page de contact avec pied de page

Page de contact sans pied de page

Conclusion

La création de modèles de page personnalisés pour votre site Web est relativement facile. Dans ce guide, nous avons spécifiquement examiné comment créer manuellement des modèles personnalisés dans votre thème WordPress. Nous avons utilisé le thème Stax gratuit comme cas d'utilisation ici. Vous pouvez cependant appliquer la même technique sur tous les autres thèmes WordPress qui suivent les normes de codage WordPress. Il existe cependant d'autres moyens de créer des modèles de page personnalisés, tels que l'utilisation de constructeurs de pages comme Elementor.

Nous espérons que cet article fournira les informations nécessaires sur la façon dont vous pouvez créer manuellement des modèles de page personnalisés. N'hésitez pas à commenter ci-dessous en cas de questions ou de suggestions.