Créer un modèle de page personnalisé dans un thème WordPress

L'un des arguments de vente les plus importants de WordPress est l'idée de thèmes. Un seul thème ajoute une grande valeur à la conception et à la fonctionnalité du site Web. Cependant, il existe des sites Web qui ont des conceptions différentes sur différentes pages.

Malheureusement, plusieurs thèmes WordPress empêchent les utilisateurs de modifier les mises en page et les fonctionnalités d'une page différente de la hiérarchie. Le modèle de page personnalisée WordPress permet aux utilisateurs d'intégrer des exigences personnalisées telles que la barre latérale droite/gauche sur une page particulière, une fonctionnalité d'appel à l'action supplémentaire ou peut-être un en-tête unique pour une page de destination particulière. Plongeons plus loin pour voir comment le modèle de page personnalisé WordPress affiche différents types de contenu.

Un modèle de page WordPress personnalisé peut être utilisé à plusieurs fins. Certaines idées incluent :

• Afficher les messages récents de chaque catégorie
• Intégrer Google Map ou tout autre script
• Liste de tous les auteurs.
• Images récemment téléchargées
• Page de conception personnalisée pour le portfolio
• Page de contact

L'apparence de toutes les pages et publications créées sur un site Web WordPress est gérée par un fichier modèle nommé page.php . La création ou la modification d'un modèle de page personnalisé dans WordPress nécessite des connaissances de base en HTML, CSS et PHP.

Ouvrez simplement n'importe quel éditeur de texte et collez-y le code suivant.

 <?php /* Nom du modèle : PageWithoutSidebar */ ?>

La ligne de code ci-dessus indique à WordPress qu'il s'agit d'un fichier modèle appelé PageWithoutSidebar . Vous pouvez utiliser n'importe quel nom que vous voulez. Enregistrez maintenant ce fichier sous le nom PageWithoutSidebar.php . Encore une fois, vous pouvez utiliser n'importe quel autre nom pour le fichier. Mais n'oubliez pas de garder l'extension en .php

Maintenant, nous allons tester notre fichier modèle nouvellement créé.

Connectez-vous à votre panneau d'hébergement. Dans cet exemple, j'utilise Cloudways - Un hébergement WordPress géré le plus rapide. Cloudways prend en charge les applications WordPress avec les options de fournisseur pour AWS, DigitalOcean, GCP, Linode et Vultr. Accédez au dossier /wp-content/themes . Ouvrez votre dossier de thème actuel et téléchargez- y le fichier PageWithoutSidebar.php .

Allez dans Panneau d'administration WordPress > Pages > Ajouter un nouveau . Vous pouvez voir le nouveau modèle de page personnalisé répertorié sur le côté droit.

Créez une nouvelle page et définissez son modèle sur PageWithoutSidebar. Une fois terminé, publiez- le.

Ouvrez la page nouvellement créée. Comme il n'y a pas encore d'éléments de conception dans le modèle, une page vierge comme l'image ci-dessous s'affiche.

Cela montre que le modèle de page personnalisé dans WordPress est implémenté avec succès, vous pouvez donc créer un thème WordPress réactif personnalisé

Il est maintenant temps d'ajouter quelques lignes de code pour afficher le contenu de la page.

Pour cette démo, je vais expliquer comment vous pouvez personnaliser le modèle de page par défaut Twenty Sixteen.

L'apparence par défaut des pages est générée par le fichier page.php situé dans le dossier /wp-contents/themes/YOUR THEME/ . Ouvrez page.php et copiez ce code.

 <?php get_header(); ?>

<div class="zone de contenu">
                <main class="site-main" role="main">
                                <?php
                                // Lancer la boucle.
                                while ( have_posts() ) : the_post();

                                                // Inclut le modèle de contenu de page.
                                                get_template_part( 'template-parts/content', 'page' );

                                                // Si les commentaires sont ouverts ou si nous avons au moins un commentaire, chargez le modèle de commentaire.
                                                if ( comments_open() || get_comments_number() ) {
                                                                comments_template();
                                                }

                                                // Fin de la boucle.
                                à la fin ;
                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Collez ce code dans PageWithoutSidebar.php juste en dessous de cette ligne de code.

 <?php /* Nom du modèle : PageWithoutSidebar */ ?>

Sauvegarde le!

Votre fichier complet PageWithoutSidebar.php ressemblera à ci-dessous.

 <?php /* Nom du modèle : PageWithoutSidebar */ ?>

<?php get_header(); ?>

<div class="zone de contenu">

                <main class="site-main" role="main">

                                <?php

                                // Lancer la boucle.
                                while ( have_posts() ) : the_post();

                                                // Inclut le modèle de contenu de page.
                                                get_template_part( 'template-parts/content', 'page' );

                                                // Si les commentaires sont ouverts ou si nous avons au moins un commentaire, chargez le modèle de commentaire.
                                                if ( comments_open() || get_comments_number() ) {

                                                                comments_template();

                                                }

                                                // Fin de la boucle.
                                à la fin ;

                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Retournez à votre page et actualisez-la. Vous constaterez que tout fonctionne comme sur le thème par défaut de WordPress Twenty Sixteen.

Maintenant, personnalisons-le. Comme vous pouvez le voir, il y a une barre latérale sur le côté droit. Je vais le supprimer de cette page uniquement. Toutes les autres pages auront l'apparence par défaut du thème Twenty Sixteen.

Ouvrez le fichier PageWithoutSidebar.php . Faites défiler jusqu'à la fin du fichier et supprimez :

 <?php get_sidebar(); ?>

C'est la ligne de code qui obtient la barre latérale sur la page. Après avoir supprimé la ligne, enregistrez-la . Ouvrez l'URL de la page et la barre latérale n'existe plus !

Comme vous pouvez le voir, la barre latérale a été supprimée avec succès de cette page. Cependant, l'alignement du texte n'est pas bon. Il y a un espace vide sur le côté droit. Le correctif consiste à justifier et à étendre le texte pour remplir l'écran.

Retournez à PageWithoutSidebar.php et trouvez :

 <div class="zone de contenu">

Changez simplement « content-area » en « site-content-fullwidth » et vous avez terminé. Actualisez la page et le contenu est en pleine largeur.

Toujours curieux de savoir pourquoi j'ai créé un modèle de page personnalisé alors que j'aurais pu facilement éditer le fichier page.php ? Il est assez évident que si le fichier page.php est modifié, toutes les pages du site Web afficheront les modifications. Afin d'appliquer une apparence personnalisée sur des pages spécifiques, le modèle de page personnalisé dans WordPress est pratique. Vous pouvez également définir un rôle d'utilisateur personnalisé dans WordPress afin d'attribuer différents privilèges aux utilisateurs.

Si vous avez des questions, n'hésitez pas à les poser en publiant dans la section commentaires ci-dessous.