Comment concevoir un modèle de page personnalisée WordPress [MISE À JOUR 2021]

Les thèmes WordPress sont tout simplement géniaux. Ils rendent la conception de sites Web WordPress si facile.

Mais que se passe-t-il lorsque vous voulez aller au-delà du thème choisi?

Que faire si vous souhaitez utiliser une mise en page WordPress personnalisée sur une page particulière?

Eh bien, certains thèmes ne vous permettront pas de modifier leurs mises en page.

Mais il existe des solutions de contournement pour cela.

Suivez-moi pour le savoir.

Qu’est-ce qu’un Modèle de Page personnalisé et Comment en attribuer un ?

La mise en page des pages et des publications WordPress est contrôlée par un fichier modèle nommé « page.php ». Les modèles sont des fichiers qui indiquent à WordPress comment afficher différents types de contenu.

Maintenant, vous ne voudrez peut-être pas que toutes les pages et les publications se ressemblent. C’est à ce moment que vous avez besoin d’un modèle de page personnalisé.

Quels modèles de page WordPress utilisez-vous?

Vous voulez savoir quel modèle de page vous utilisez ou comment basculer entre les modèles?

C’est facile, vous aurez besoin de:

1. Rendez-vous sur votre tableau de bord d’administration WordPress,
2. Dans le menu de gauche, sélectionnez « Pages »,
3. Survolez le titre d’une page,
4. Dans le menu situé sous le titre, sélectionnez « Édition rapide »,
5. Dans le  » Fenêtre « Édition rapide », allez dans la liste déroulante « Modèle ».

Ici vous pouvez voir tous les modèles de thème disponibles, et vous pouvez attribuer un modèle différent à votre page actuelle.

Par exemple, il existe une option pour changer votre page en pleine largeur, si vous le souhaitez. Mais il n’y a pas d’option pour un modèle qui ajoute une deuxième barre latérale.

C’est pourquoi les modèles WordPress personnalisés peuvent être utiles. Chaque fois que vous enregistrez un nouveau modèle, il sera également disponible aux côtés des anciens.

Maintenant, vous pouvez également assigner cette affectation à l’intérieur de la page. Lorsque vous choisissez de modifier une page, sur le côté droit, rendez-vous sur « Attributs de page » – Modèle >.

Comment créer un thème enfant

Maintenant, avant de nous salir les mains avec la création d’un modèle de page personnalisé WordPress, il y a une chose à garder à l’esprit: apporter les modifications sur un thème enfant. Vous ne voudriez pas provoquer de modifications irréversibles du thème parent.

Un thème enfant WordPress est un sous-thème qui hérite de toutes les fonctionnalités et styles du thème parent. Maintenant, si le thème parent reçoit une mise à jour, votre thème enfant ne sera pas affecté et vos modifications ne seront pas écrasées.

Maintenant, comment créer un thème enfant? Voici les étapes:

1. Connectez-vous à votre cPanel,
2. Accédez au Gestionnaire de fichiers,
3. Rendez-vous dans public_html-> wp-content-> dossier thèmes,
4. Dans le dossier « Thèmes », ajoutez un nouveau dossier à partir de « + Dossier » dans le menu du haut. Donnez-lui un nom. Une pratique optimale consiste à utiliser le nom du thème, auquel vous ajoutez « -child ». Utilisez également des tirets au lieu de l’espace. Dans mon cas, je vais utiliser mesmerize-child, car j’utilise le thème Mesmerize,
5. Dans le dossier, créez un nouveau fichier et appelez-le « style.css »,
6. . Faites un clic droit sur le fichier et sélectionnez l’option « Modifier ».

   /* Theme Name: Your Theme Child Theme URL: http://yourdomain.comDescription: Your Theme Child Theme Author: Your NameAuthor URL: http://yourdomain.comTemplate: yourtheme Version: 1.0.0 Text Domain: yourtheme-child */

   Ici, vous pouvez coller une partie du code dans le fichier CSS parent ou ajouter votre propre style.

7. Modifiez le thème et les noms de domaine, puis cliquez sur « Enregistrer »,
8. Créez un autre fichier dans le même dossier. Cette fois, nommez-le « fonctions.php ». Collez le code suivant:

   <?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}?>

9. Accédez au tableau de bord WordPress, Thème Apparence – >. Votre thème enfant sera là, il vous suffit de l’activer.

Et vous avez terminé.

Ensuite, faisons un nouveau modèle, d’accord?

Comment créer un modèle de Page personnalisé WordPress?

Vous pouvez partir du code de thème existant et effectuer les ajustements nécessaires.

Voici les étapes:

1. Accédez à cPanel- > Gestionnaire de fichiers,
2. Accédez à public_html-> wp-content- > dossier thèmes,
3. Ouvrez votre dossier thème principal,
4. Identifiez la page.fichier php. Cela ressemblera à ceci:

   <?php mesmerize_get_header(); ?> <div class="page-content"> <div class="<?php mesmerize_page_content_wrapper_class(); ?>"> <?php while (have_posts()) : the_post(); get_template_part('template-parts/content', 'page'); endwhile; ?> </div> </div><?php get_footer(); ?>

5. Sélectionnez le fichier puis choisissez « Copier »,
6. Dans la fenêtre qui apparaît, changez le chemin du fichier, à celui de votre dossier enfant de thème,
7. Renommez le nouveau fichier afin que vous puissiez facilement identifier ce qu’il fait.
8. Ajoutez un commentaire dans le fichier afin que vous puissiez dire à WordPress qu’il s’agit d’un nouveau modèle personnalisé. Pour ce faire, sélectionnez « modifier » et insérez ce texte:

   /* * Template Name: Your custom TEmplate's name * description: >- Explain what your new templates does */

   Votre nouveau fichier devrait ressembler à ceci:

   <?php /* * Template Name: Custom Full Width * description: >- Page template without sidebar */mesmerize_get_header(); ?> <div class="page-content"> <div class="<?php mesmerize_page_content_wrapper_class(); ?>"> <?php while (have_posts()) : the_post(); get_template_part('template-parts/content', 'page'); endwhile; ?> </div> </div><?php get_footer(); ?>

Vous pouvez également ajouter ici des copies d’autres fichiers. Par exemple, vous pouvez personnaliser le single.fichier php, qui changera l’apparence des articles de blog.

Ensuite, vous devrez retrousser vos manches et écrire du code.

Et si vous souhaitez modifier le style CSS, vous pouvez le faire dans le personnalisateur de thème enfant, dans un CSS supplémentaire ou dans le style.fichier css.

Cependant, il existe une solution plus simple –

Avec un constructeur de site comme Colibri, tout le code « se tient » derrière et ne bloque pas un créateur de site non technique. Chaque ajout ou modification d’une page personnalisée est visuellement reflété dans le personnalisateur. Ainsi, le créateur du site a plus de contrôle sur la conception. La jolie page personnalisée sera prête en un clin d’œil, sans se soucier du code derrière la page.