Comment créer une page personnalisée sous WordPress ?

Les thèmes WordPress peuvent être hautement personnalisables, vous le savez… Et la création d’une page personnalisée ou template de page ou modèle de page va encore une fois le prouver. Dans cet article nous allons voir pourquoi et comment créer une page personnalisée pour votre thème WordPress.

 

Qu’est-ce qu’une page personnalisée ou modèle de page ?

Un thème, que vous le téléchargiez sur le répertoire officiel ou que vous l’achetiez sur des marketplaces dédiées, est composé de plusieurs fichiers. Dans tous les cas, si vous jetez un œil aux fichiers qui composent votre thème, vous repèrerez certainement un fichier nommé page.php. Ce dernier, composé de code PHP et HTML, va permettre à votre thème d’afficher les pages de votre site selon une disposition qui aura été imaginée par les développeurs du thème. Le fichier page.php est donc le modèle de page par défaut. On pourrait envisager de créer plusieurs modèles de page dans un même thème : arriveraient alors les pages personnalisées…

 

Pourquoi diversifier les pages personnalisées de son thème ?

L’organisation d’un site est très subjectif et une liberté dans son design peut passer par la création de nouveaux templates de page. Vous pouvez alors envisager de diversifier vos modèles de page si :

• Votre site couvre divers types de contenus et vous avez envie de les afficher de différentes manières. Par exemple : une page spécifique pour votre page À Propos, une autre pour la page Contact, encore une autre pour la page des Services et ainsi de suite.
• Vous avez besoin de créer régulièrement des pages avec une présentation spécifique.
• Vous développez des thèmes ou des thèmes enfant pour vos clients.
• Et bien d’autres raisons encore…

Bien entendu, vous pourriez vous dire que c’est inutile puisque vous utilisez un page builder qui est déjà prévu pour diversifier vos présentations… C’est en partie vrai. Toutefois, un page builder ne vous permettra pas d’effectuer certaines présentations bien spécifiques. Nous verrons justement cela un peu plus loin dans cet article.

 

Comment créer un nouveau modèle de page ?

Vous allez voir qu’il est très facile de créer une page personnalisée. Pour passer à l’action, vous aurez besoin :

• du thème parent : on se basera sur son modèle de page par défaut (le fichier page.php)
• d’un thème enfant : évidemment, nous ne ferons pas de modifications directement dans le thème parent, c’est trop risqué (voir comment le créer)
• d’un éditeur de texte : tel que SublimText par exemple ou celui de votre choix

À présent, voici la procédure :

1. Ouvrez le répertoire de votre thème parent et repérez le fichier nommé page.php.
2. Dupliquez ce fichier et insérez-le dans le répertoire de votre thème enfant.
3. Renommez ce fichier comme vous le souhaitez : page-personnalisee.php ou bien page-services.php par exemple.
4. Ouvrez ce nouveau fichier à l’aide d’un éditeur de texte.
5. Modifiez l’entête de ce fichier : supprimez les éléments placés entre /* et */ pour les remplacer par Template name: Page Personnalisée (par exemple). Ne mettez pas d’espace entre name et les deux points (cela donne name: et non name :).
6. Enregistrez vos modifications.
7. Retournez dans l’administration de votre site, créez une nouvelle page ou ouvrez une page existante : un nouveau menu déroulant nommé Modèle est apparu dans l’encart Attributs de Page.
8. À présent, vous allez pouvoir sélectionner un modèle de page pour chacune de vos pages.

 

Et maintenant que faire ?

Eh oui, vous avez créé votre page personnalisée, vous avez assigné ce nouveau modèle à une page existante mais vous notez que rien ne se passe, votre page a toujours la même présentation…

C’est normal, pour l’instant, votre nouveau modèle de page s’appuie sur la présentation du modèle par défaut puisque nous l’avons dupliqué.

Cette première étape de création était plutôt simple mais maintenant il va falloir modifier le design de cette nouvelle page personnalisée. Pour cela, vous aurez besoin :

• d’un éditeur de texte
• d’un peu d’imagination
• de quelques connaissances HTML, CSS et PHP

Il est certain que cette étape s’avère être un peu plus délicate que la précédente, c’est pourquoi je vous ai préparé trois exemples :

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

Une sidebar est l’endroit idéal pour afficher des contenus ou informations importantes. Il existe certains thèmes premiums qui vous offrent la possibilité d’afficher plusieurs types de sidebar : une pour les pages, une pour les articles, une pour le porfolio etc. Toutefois, de nombreux thèmes ne vous proposeront qu’une seule sidebar. Voilà une motivation pour créer un nouveau modèle de page ! Pour mon exemple, j’ai créé une sidebar pour mes services…

1. Dans un premier temps vous devrez créer une nouvelle sidebar, pour cela, rendez-vous dans le fichier functions.php de votre thème enfant et ajoutez le code suivant :

   function services_widgets_init() {
    
    register_sidebar( array(
   
    'name' => 'Mes services', // c'est le nom de la sidebar qui apparaitra dans le backoffice
    'id' => 'services-widget-area', // ceci est l'identifiant de la sidebar
    'before_widget' => '<div class="services-sidebar">', // ouverture d'une div avant le widget avec une class pour agir dessus en CSS
    'after_widget' => '</div>', // fermeture de la div après le widget
    'before_title' => '<h3 class="services-sidebar-title">', // action sur le titre de chaque widget avec un tag H3 et une class pour le CSS
    'after_title' => '</h3>',
    ) );
   }
   
   add_action( 'widgets_init', 'services_widgets_init' );

   

2. Créez ensuite une page personnalisée, pour mon exemple, j’ai créé le fichier page-services.php
3. Dans ce nouveau modèle de page, intégrez votre nouvelle sidebar fraichement créée grâce à ce bout de code que vous placerez à l’endroit adéquat :

   <!-- ajout de la sidebar services -->
   <?php if ( is_active_sidebar( 'services-widget-area' ) ) : ?> <!-- cela vérifie si la sidebar "service" est utilisée -->
   <div id="services-widget-area" class="container-services-sidebar" role="complementary">
   <?php dynamic_sidebar( 'services-widget-area' ); ?> <!-- si la sidebar "service" est utilisée, alors elle s'affiche ici -->
   </div>
   <?php endif; ?>
   <!-- fin ajout de la sidebar services -->

   

4. Ensuite, allez dans l’administration de votre site, à l’onglet Apparence > Widget, où vous pourrez voir un nouvel emplacement de sidebar. Pour mon exemple, ma nouvelle sidebar se nomme “Mes services”.
5. Ajoutez les éléments que vous souhaitez faire apparaitre dans cette nouvelle sidebar
6. Créez une nouvelle page (onglet Page > Ajouter) et assignez-lui le modèle associé
7. Côté front-end, vérifiez l’apparence de votre nouvelle sidebar : aïe, elle n’est pas tout à fait comme vous l’espériez, n’est-ce pas ?
8. Modifiez l’apparence de votre nouvelle sidebar grâce à des règles CSS que vous ajouterez dans le fichier style.css de votre thème enfant.

 

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

Voici encore une bonne raison de créer un nouveau modèle de page. Selon votre site, vous pourriez avoir besoin d’afficher une navigation qui diffère en fonction des pages que l’internaute visite. Il existe des plugins qui peuvent se charger de cela, mais voyons comment faire via les templates de pages. Pour mon exemple, j’ai créé une navigation privée que j’assignerai uniquement aux modèles de page “Privé”.

1. Tout d’abord, commencez par créer votre seconde navigation (menu) de thème en ajoutant ce bout de code dans le fichier functions.php de votre thème enfant :

   // enregistrement de ma seconde navigation
   function register_my_menu() {
   register_nav_menu('private-menu',__( 'Menu Privé' )); // mon nouveau menu s'appellera "Menu Privé" dans mon back-office
   }
   add_action( 'init', 'register_my_menu' );

   

2. Depuis l’administration de votre site, à l’onglet Apparence > Menu, votre nouveau menu apparait. Vous allez pouvoir gérer les emplacements de vos menus, c’est à dire créer de nouveaux menus et les assigner.
3. Ajoutez des éléments à votre nouveau menu ainsi créé.
4. Votre nouvelle navigation est prête à fonctionner, vous allez devoir la faire apparaitre… La navigation d’un thème se trouve généralement dans le fichier header.php. Dupliquez donc ce fichier depuis le thème parent et insérez-le dans le répertoire de votre thème enfant.
5. Pour insérer votre nouveau menu, ajoutez ce simple bout de code à l’endroit adéquat de votre fichier header.php :

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

   Toutefois, cela ne suffira pas puisque, pour le cas de mon exemple, on ne veut pas voir apparaitre les deux menus en même temps… Vous devrez alors ajouter une condition d’affichage qui dirait “si ma page est issue du modèle de page privée, affiche la navigation privée, sinon, affiche la navigation standard”. Cette condition ressemblerait à cela :

   <!-- condition pour afficher le menu selon le template de page choisi -->
   <!-- si page privée, alors -->
   <?php if( is_page_template( 'page-private.php' ) ) { ?>
   <div class="navigation-private">
   <div class="wrap">
   <?php wp_nav_menu( array( 'theme_location' => 'private-menu' ) ); ?>
   </div><!-- .wrap -->
   </div><!-- .navigation-private -->
   <!-- si autres templates de page, alors -->
   <?php } else { ?>
   <div class="navigation-top">
   <div class="wrap">
   <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
   </div><!-- .wrap -->
   </div><!-- .navigation-top -->
   <?php } ?>

6. Pour finir, vous devrez certainement améliorer l’apparence de votre nouveau menu par l’ajout de règles CSS que vous insèrerez dans le fichier style.css de votre thème enfant.

Voici le rendu en vidéo :

 

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

Dans cet exemple, j’ai fait apparaitre un deuxième éditeur Wysiwyg dans un nouveau modèle de page afin d’afficher un contenu promotionnel par exemple mais vous pourrez afficher n’importe quel type de contenu grâce au plugin ACF…

1. Commencez par créer un nouveau modèle de page. Pour mon exemple, j’ai créé un fichier nommé page-promotion.php.
2. Ensuite, installez et activez le plugin Advanced Custom Fields
3. Créez un nouveau groupe de champs. Pour mon exemple, j’ai créé un groupe de champs nommé “promotion” et j’ai ajouté un champ de type “éditeur Wysiwyg”.
4. Assignez maintenant une logique conditionnelle pour ce type de champ : pour mon exemple, ce type de champ doit apparaitre uniquement sur le modèle de page nommé “promotion”.
5. Faites ensuite apparaitre votre nouveau champ dans la template de page créée pour l’occasion. Pour mon exemple, ma template page-promotion.php fait appel à un contenu séparé dans lequel j’ai placé le code suivant :

   // vérifier l'activation de ACF
   if (!function_exists('get_field')) return;
   ?>
   <div class="promo"><?php the_field('promotion'); ?></div> <!-- afficher le champ personnalisé créé dans ACF -->

   

6. Créez une nouvelle page depuis l’administration de votre site (onglet Pages > Ajouter) et assignez-lui le nouveau modèle. Vérifiez le rendu visuel du côté visiteur.
7. N’hésitez pas à ajouter un peu de code CSS afin d’améliorer l’affichage de votre nouveau contenu.

Pour voir plus en détail cette procédure, je vous invite à lire cet article dédié au plugin ACF.

 

Une page personnalisée qui déborde d’imagination…

Vous l’aurez compris, créer un nouveau modèle de page est très facile et permettra de diversifier votre thème. C’est un vrai “plus”, surtout si vous débordez d’imagination… Par exemple, vous pourriez créer une page personnalisée pour afficher l’image à la une différemment des autres pages, une page personnalisée avec des polices ou des couleurs différentes pour les utilisateurs connectés, une page pour afficher un header ou un footer différent etc.

Pour aller plus loin, voici quelques pages qui pourraient vous aider :

• des ressources pour comprendre le CSS
• la hiérarchie des pages de WordPress
• les conditional tags pour afficher une page selon des conditions spécifiques
• des ressources sur les modèles de page