Comment afficher une liste de pages enfants pour une page parente dans WordPress

Récemment, l'un de nos lecteurs nous a demandé comment afficher les pages enfants d'une page WordPress ? C'est une question que nous recevons assez souvent chez WPBeginner, et elle met en évidence un besoin courant d'améliorer la navigation sur le site et l'expérience utilisateur. 

Si vous organisez votre site WordPress avec des pages parentes et enfants, vous voudrez peut-être afficher vos pages enfants ou sous-pages sur la page parente principale. Cela aide les utilisateurs à voir facilement toutes les informations disponibles dans une section spécifique et à naviguer rapidement vers des sous-sujets pertinents.

Vous pourriez également vouloir afficher le lien de la page parente principale sur chaque sous-page pour faciliter la navigation, créant ainsi un effet de type fil d'Ariane. Cette navigation simplifiée empêche les utilisateurs de se perdre dans les profondeurs de votre site et améliore leur expérience de navigation globale.

Dans cet article, nous vous montrerons comment afficher facilement une liste de pages enfants pour une page parente dans WordPress.

Quand avez-vous besoin d'afficher une liste de pages enfants ?

WordPress est livré avec deux types de publication par défaut appelés articles et pages. Les articles sont du contenu de blog, et ils sont généralement organisés avec des catégories et des étiquettes.

Les pages sont du contenu unique ou autonome qui est pérenne, comme une page « À propos » ou une page « Contact », par exemple.

Dans WordPress, les pages peuvent être hiérarchiques, ce qui signifie que vous pouvez les organiser avec des pages parentes et des pages enfants. Par exemple, vous pourriez vouloir créer une page Produit avec des pages enfants pour les Fonctionnalités, les Tarifs et le Support.

Pour créer une page enfant, suivez notre guide sur comment créer une page enfant dans WordPress.

Après avoir créé vos pages parentes et enfants, vous pourriez vouloir lister les pages enfants sur la page parente principale.

Désormais, une façon simple de le faire est d'éditer manuellement la page parente et d'ajouter une liste de liens individuellement.

Cependant, vous devrez éditer manuellement la page parente chaque fois que vous ajoutez ou supprimez une page enfant.

Ne serait-il pas plus agréable si vous pouviez simplement créer une page enfant, et qu'elle apparaisse automatiquement comme un lien sur la page parente ?

Cela étant dit, examinons d'autres moyens dynamiques pour afficher rapidement une liste de pages enfants sur la page parente dans WordPress. Nous vous montrerons trois méthodes, afin que vous puissiez choisir celle qui vous convient le mieux :

• Méthode 1. Afficher les pages enfants sur la page parente à l'aide d'un plugin
• Méthode 2. Lister les pages enfants pour une page parente à l'aide de code
• Méthode 3. Afficher dynamiquement les pages enfants sans aucun shortcode

Méthode 1. Afficher les pages enfants sur la page parente à l'aide d'un plugin

Cette méthode est le moyen le plus simple d'afficher les pages enfants sur une page parente, et elle est recommandée pour tous les utilisateurs.

Tout d'abord, vous devez installer et activer le plugin Page-list. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Une fois activé, vous devez modifier la page parente et simplement ajouter le shortcode suivant à l'endroit où vous souhaitez afficher la liste des pages enfants.

[sous-pages]

Vous pouvez maintenant enregistrer votre page et la prévisualiser dans un nouvel onglet de navigateur. Vous remarquerez qu'elle affiche une simple liste à puces de toutes les pages enfants.

Si vous le souhaitez, vous pouvez ajouter du CSS personnalisé pour modifier l'apparence de la liste.

Voici quelques exemples de CSS que vous pouvez utiliser comme point de départ.

ul.page-list.subpages-page-list {
    list-style: none;
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #CCC;
    padding: 20px;
}

Après avoir appliqué votre CSS personnalisé, vous pouvez prévisualiser la page parente.

Voici à quoi cela ressemblait sur notre site WordPress de test :

Le plugin fournit un ensemble de paramètres de shortcode qui vous permettent de définir la profondeur, d'exclure des pages, le nombre d'éléments, et plus encore.

Pour plus de détails, veuillez consulter la page du plugin pour une documentation détaillée.

Méthode 2. Lister les pages enfants pour une page parente à l'aide de code

Cette méthode est un peu avancée et nécessite l'ajout de code à votre site WordPress. Si vous ne l'avez jamais fait auparavant, consultez notre guide sur comment copier et coller du code dans WordPress.

Pour lister les pages enfants sous une page parente, vous devez ajouter le code suivant dans un plugin d'extraits de code ou dans le fichier functions.php de votre thème :

function wpb_list_child_pages() { 
 
global $post; 
 
if ( is_page() && $post->post_parent )
 
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
 
if ( $childpages ) {
 
    $string = '<ul class="wpb_page_list">' . $childpages . '</ul>';
}
 
return $string;
 
}
 
add_shortcode('wpb_childpages', 'wpb_list_child_pages');

Chez WPBeginner, nous recommandons toujours d'ajouter du code dans WordPress avec le plugin WPCode.

WPCode vous permet d'ajouter facilement du code personnalisé sans modifier les fichiers de votre thème, vous n'avez donc pas à vous soucier de casser votre site.

Tout d'abord, vous devez installer et activer le plugin gratuit WPCode. Pour des instructions étape par étape, consultez ce guide sur comment installer un plugin WordPress.

Une fois le plugin activé, accédez à Extraits de code » Ajouter un extrait depuis votre tableau de bord WordPress.

De là, placez votre souris sur l’option ‘Ajouter votre code personnalisé (Nouveau extrait)’ et cliquez sur le bouton ‘Ajouter un extrait personnalisé’.

Ensuite, vous devez choisir ‘Extrait PHP’ comme type de code dans la liste des options qui apparaissent à l’écran.

Ensuite, ajoutez un titre pour votre extrait, qui peut être n’importe quoi pour vous aider à vous souvenir de l’utilité du code.

Maintenant, collez simplement le code ci-dessus dans la boîte ‘Aperçu du code’.

Après cela, basculez simplement le commutateur de ‘Inactif’ à ‘Actif’ et cliquez sur le bouton ‘Enregistrer l’extrait’ en haut de la page.

Ce code vérifie d’abord si une page a un parent ou si la page elle-même est un parent.

S’il s’agit d’une page parente, il affiche les pages enfants qui lui sont associées. S’il s’agit d’une page enfant, il affiche toutes les autres pages enfants de sa page parente.

Enfin, s’il s’agit simplement d’une page sans page enfant ou parente, le code ne fera rien. Dans la dernière ligne du code, nous avons ajouté un shortcode, vous pouvez donc facilement afficher les pages enfants sans modifier vos modèles de page.

Pour afficher les pages enfants, ajoutez simplement le shortcode suivant dans une page ou un widget de texte dans la barre latérale :

[wpb_childpages]

N’oubliez pas d’enregistrer vos modifications et de les prévisualiser dans un onglet de navigateur. Voici comment cela apparaît sur notre site de test.

Vous pouvez maintenant styliser cette liste de pages en utilisant du CSS personnalisé.

Voici un exemple de code CSS que vous pouvez utiliser comme point de départ :

ul.wpb_page_list {
    list-style: none;
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #CCC;
    padding: 20px;
}

Méthode 3. Afficher dynamiquement les pages enfants sans aucun shortcode

L’utilisation de shortcodes est pratique, mais le problème est que vous devrez ajouter des shortcodes dans toutes les pages qui ont des pages parentes ou enfants.

Vous pourriez finir par avoir des shortcodes dans de nombreuses pages, et parfois vous pourriez même oublier de l’ajouter.

Une meilleure approche serait de modifier le fichier de modèle de page dans votre thème, afin qu’il puisse afficher automatiquement les pages enfants.

Pour ce faire, vous devez modifier le modèle principal page.php, ou créer un modèle de page personnalisé dans votre thème.

Vous pouvez modifier votre thème principal, mais ces modifications disparaîtront si vous changez ou mettez à jour votre thème. C'est pourquoi il serait préférable de créer un thème enfant, puis d'apporter vos modifications dans le thème enfant.

Dans votre fichier de modèle de page, vous devez ajouter cette ligne de code là où vous souhaitez afficher les pages enfants.

<?php wpb_list_child_pages(); ?>

C'est tout. Votre thème détectera désormais automatiquement les pages enfants et les affichera dans une liste simple.

Vous pouvez personnaliser les styles avec CSS et le formatage.

Voici un exemple de la façon dont le site OptinMonster affiche la page parente et les sous-pages :

Nous espérons que cet article vous a aidé à lister les pages enfants d'une page parente dans WordPress. Vous pourriez également consulter notre guide sur les pages les plus importantes à créer sur un nouveau site WordPress, et notre comparaison des meilleurs constructeurs de pages WordPress glisser-déposer pour créer des mises en page personnalisées sans aucun code.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.