Guide complet pour créer une page personnalisée dans WordPress

💡 En résumé : Dans cet article, nous allons explorer comment créer des pages personnalisées dans WordPress. Nous aborderons les concepts fondamentaux, la nécessité de diversifier vos pages, ainsi que les étapes précises pour réaliser cette personnalisation, et bien plus encore.

Qu’est-ce qu’une page personnalisée dans WordPress ?

Une page personnalisée, également connue sous le nom de modèle de page, vous permet de modifier l’apparence et les fonctionnalités d’une page au sein de votre site WordPress. Chaque thème WordPress est équipé d’un fichier de modèle de page par défaut, souvent nommé page.php. Ce fichier détermine comment les pages standard s’affichent. En créant des pages personnalisées, vous pouvez donc adapter le design et la structure de votre site afin qu’ils correspondent mieux à vos besoins spécifiques.

Pourquoi diversifier ses pages personnalisées ?

Il existe plusieurs raisons de créer des pages personnalisées dans votre thème :

Affichage de divers types de contenus : Par exemple, vous pourriez vouloir un format spécifique pour votre page À Propos, une autre pour Contact, ainsi qu’une autre pour vos Services.
Besoins récurrents : Certaines entreprises nécessitent de créer régulièrement des pages ayant un format spécifique.
Projets Clients : Vous développez peut-être des thèmes pour des clients, et une variété de modèles peut répondre à leurs besoins uniques.

Étapes pour créer un nouveau modèle de page

Créer une page personnalisée dans WordPress est un processus relativement simple. Voici les éléments dont vous aurez besoin :

Un thème parent : Cela sert de base pour le modèle de page par défaut.
Un thème enfant : Pour éviter toute modification directe dans le thème parent, ce qui pourrait entraîner une perte de vos personnalisations lors des mises à jour.
Un éditeur de texte : Utilisez des éditeurs comme Sublime Text ou VS Code pour modifier vos fichiers.

Voici la procédure détaillée :

Accédez au répertoire de votre thème parent et localisez le fichier page.php.
Dupliquez ce fichier et placez-le dans le répertoire de votre thème enfant.
Renommez le fichier ? par exemple, en page-personnalisee.php.
Ouvrez le fichier nouvellement créé dans votre éditeur de texte.
Modifiez l’en-tête du fichier, en remplaçant le code existant par Template name: Page Personnalisée.
Enregistrez ensuite vos modifications.
Allez dans l’administration de votre site, créez ou éditez une page existante. Un nouveau menu déroulant nommé Modèle apparaîtra dans la section Attributs de Page.
Sélectionnez désormais le modèle de page que vous venez de créer pour la page choisie.

Modifier le design de votre nouvelle page

À cette étape, bien que vous ayez créé votre page personnalisée, celle-ci est encore basée sur le modèle par défaut. Pour vraiment la personnaliser, vous devez apporter des modifications à son design. Vous aurez besoin de :

Un éditeur de texte
Un brin de créativité
Des connaissances en HTML, CSS et PHP

Voici trois exemples concrets de personnalisation :

=> Créer une page personnalisée avec une sidebar différente

Une sidebar est essentielle pour afficher des contenus pertinents. Certains thèmes premium permettent de créer plusieurs sidebars, mais beaucoup d’entre eux n’en proposent qu’une seule. Pour mon exemple, je vais créer une sidebar spécifique pour mes services. Voici comment procéder :

Ajoutez le code ci-dessous dans le fichier functions.php de votre thème enfant pour créer une nouvelle sidebar :

function services_widgets_init() { 
                    register_sidebar( array( 
                        'name' => 'Mes services', 
                        'id' => 'services-widget-area', 
                        'before_widget' => '<div class="services-sidebar">', 
                        'after_widget' => '</div>', 
                        'before_title' => '<h3 class="services-sidebar-title">', 
                        'after_title' => '</h3>', 
                    ) ); 
                } 
                add_action( 'widgets_init', 'services_widgets_init' );

Créez votre modèle de page, par exemple page-services.php.
Dans ce fichier, intégrez votre nouvelle sidebar :

<?php if ( is_active_sidebar( 'services-widget-area' ) ) : ?> 
                <div id="services-widget-area" class="container-services-sidebar" role="complementary"> 
                <?php dynamic_sidebar( 'services-widget-area' ); ?> 
                </div> 
                <?php endif; ?>

Accédez à l’administration de votre site et allez dans Apparence > Widget pour gérer votre nouvelle sidebar.
Créez une nouvelle page et assignez-lui le modèle créé.
Enfin, personnalisez la sidebar avec des règles CSS dans le fichier style.css de votre thème enfant.

=> Créer une page personnalisée avec une navigation différente

Il est parfois nécessaire d’avoir une navigation différente pour certains types de pages. Voici comment créer un modèle de page avec une séparation de navigation :

Créez un second menu en ajoutant ce code à votre functions.php :

function register_my_menu() { 
                    register_nav_menu('private-menu',__( 'Menu Privé' )); 
                } 
                add_action( 'init', 'register_my_menu' );

Dans l’administration, créez votre menu via Apparence > Menu.
Ajoutez des éléments à ce nouveau menu et dupliquez header.php pour votre thème enfant.
Insérez votre nouveau menu dans le header.php :

<?php wp_nav_menu( array( 'theme_location' => 'private-menu' ) ); ?>

Ajoutez une condition d’affichage :

<?php if( is_page_template( 'page-private.php' ) ) { ?> 
                <div class="navigation-private"> 
                <?php wp_nav_menu( array( 'theme_location' => 'private-menu' ) ); ?> 
                </div> 
                <?php } else { ?> 
                <div class="navigation-top"> 
                <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?> 
                </div> 
                <?php } ?>

Comme pour la sidebar, ajoutez des règles CSS pour votre nouveau menu dans le style.css.

=> Créer une page personnalisée avec un second encart de contenu

Pour cet exemple, nous allons intégrer un second éditeur Wysiwyg via le plugin ACF afin d’ajouter un contenu promotionnel :

Créez votre modèle, par exemple page-promotion.php.
Installez et activez le plugin Advanced Custom Fields.
Créez un groupe de champs, disons nommé « Promotion », avec un champ de type « éditeur Wysiwyg ».
Assignez une logique conditionnelle pour ce champ uniquement sur le modèle « Promotion ».
Intégrer le champ dans votre modèle :

if (!function_exists('get_field')) return; 
                <div class="promo"><?php the_field('promotion'); ?></div>

Enfin, créez une nouvelle page et assignez-lui le modèle correspondant.
Appliquez également du CSS pour optimiser l’affichage du contenu.

Perspectives sur la création de pages personnalisées

En somme, créer un modèle de page personnalisée est un processus accessible qui vous aidera à rendre votre site WordPress plus dynamique. Vous pouvez concevoir une page qui présente une image à la une de manière unique, intégrer des polices customisées pour des utilisateurs spécifiques, ou créer une page distincte pour différentes sections de votre site.

Liens utiles pour approfondir vos connaissances :

Conclusion

Les pages personnalisées offrent une flexibilité inestimable pour les utilisateurs de WordPress. Avec quelques compétences en codage et de l’imagination, les possibilités de personnalisation des pages sont presque infinies. N’hésitez pas à explorer ces fonctionnalités et à les appliquer pour améliorer l’expérience utilisateur sur votre site.