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.
Denise
Pour les pages de troisième niveau (petit-enfant), je souhaite afficher le même menu que celui visible sur les pages enfants (tous les liens enfants du parent). Avec cet extrait, lorsque je suis sur une page de petit-enfant, je ne vois que les autres pages de petit-enfant dans le menu. Comment ce code devrait-il être modifié pour afficher tous les liens enfants, même lorsque je suis sur des pages de petit-enfant ?
vicky
comment obtenir les identifiants des pages enfants et non ceux des petits-enfants…………….aidez-moi svp je suis un débutant
Meredith L
Je suis relativement nouvelle dans le blogging et j'ai récemment adopté le thème Kale pour WordPress. J'ai essayé de créer des pages d'attributs de page (sous la page parente Recettes) afin d'avoir des catégories distinctes pour les apéritifs, les desserts, etc. Tout semble fonctionner dans la partie administration, mais ensuite sur le site lui-même, il n'y a pas d'attributs de page/menu déroulant à partir de la catégorie Recettes. Qu'est-ce que je fais de mal ? Tout est réglé sur public, donc je ne suis pas sûre du problème.
Daves
Merci pour ce code. Mais je ne veux pas que cela soit affiché sur la page d'accueil (page statique), seulement sur les pages parentes. Comment faire s'il vous plaît ?
Merci.
Boris Budeck
J'utilise le thème Generatepress (j'ai créé un thème enfant à partir de celui-ci pour la personnalisation) et je n'arrive pas à faire fonctionner cela. Le shortcode est affiché dans la page de sortie, il semble qu'il ne soit même pas reconnu comme un shortcode. J'utilise des widgets Elementor et ni les widgets texte ni shortcode ne fonctionnent.
Une idée de comment le faire fonctionner lorsque j'utilise des widgets Elementor ?
Support WPBeginner
Salut Boris,
Veuillez essayer d'ajouter ce code au fichier functions.php de votre thème ou à un plugin spécifique au site.
add_filter('widget_text', 'do_shortcode');1-click Use in WordPress
Admin
Frederic
un super article, c'est exactement ce que je cherchais depuis des heures ! et ça marche à merveille, il suffit d'ajouter le code dans le fichier function.php du thème puis d'ajouter le shortcode sur la page où je veux que les sous-pages apparaissent, et voilà !!!
magnifique, merci beaucoup pour votre générosité !!
Support WPBeginner
Salut Frederic,
Glad you found it useful
You may also want to subscribe to our YouTube Channel for more WordPress video tutorials.
Admin
Mariano
Salut !
Merci pour le code. Comment puis-je afficher l'image mise en avant de chaque sous-page ?
Ron
Comme pour tant de snippets que l'on trouve, il faut parcourir tous les commentaires pour que cela fonctionne. Qu'est-ce qui ne va pas avec le test de ce que vous écrivez ?
Alicia
Pouvez-vous faire un menu déroulant pour les pages parent/enfant sur wordpress.com, ou faut-il la version .org ?
Razvan
Et si je veux afficher des articles enfants, pas des pages enfants ?
Rudy
L'utilisation de ce code affiche finalement la page parente ainsi que les pages enfants, ce qui est redondant. D'après ce que je comprends, ce dont nous avons vraiment besoin, c'est d'afficher uniquement les pages enfants, pas la page parente. Une modification suggérée pour y parvenir ?
Michael Feske
Great, but it works not
add_shortcode est-il correct ou doit-il être add_filter https://www.wpbeginner.com/wp-tutorials/how-to-use-shortcodes-in-your-wordpress-sidebar-widgets/ ?
avec add_shortcode, il y a une erreur Fatal error: Uncaught Error: Call to undefined function add_shortcode()
avec add_filter, il n'y a pas d'erreur mais cela ne fonctionne pas
Milos
Lors de la mise à jour des plugins, pour une raison étrange, j'obtiens toujours une erreur :
Fatal error: Cannot redeclare wpb_list_child_pages() (previously declared in …/wp-content/themes/pagelines/functions.php:25) in …/wp-content/themes/pagelines/functions.php on line 34
Jeffrey Fry
Comment peut-on également afficher la date de la page enfant ?
ethann
Bonjour excellent article,
Pouvez-vous m'aider à créer une liste déroulante de pages enfants sur une page parente. J'ai besoin de cette fonctionnalité pour l'un de mes projets WordPress et je suis totalement novice sur WordPress.
Alex
Suis-je le seul à ne pas y arriver ?
J'ai la structure suivante
À propos
— Page 1
— Page 2
— Page 3
Lorsque je suis sur la page « À propos » ou une page enfant (1, 2 ou 3), j'aimerais avoir une liste avec ma page parente (À propos) et tous les enfants (1, 2, 3) – Quelqu'un a-t-il réussi à faire cela ?
Thanks!
Kendra
OMG, désolé, c'est énervant. Veuillez ignorer mes autres messages. Je n'avais pas réalisé qu'on ne pouvait pas coller de code dans les commentaires.
Je n'ai PAS réussi à le faire fonctionner avec wpb_list_child_pages();
J'ai réussi à le faire fonctionner avec echo do_shortcode( '[wpb_childpages]')
Et pour obtenir le titre de la page parente, j'ai inséré ceci au-dessus de la liste des pages enfants :
$current = $post->ID;
$parent = $post->post_parent;
$grandparent_get = get_post($parent);
$grandparent = $grandparent_get->post_parent;
PHP if ($root_parent = get_the_title($grandparent) !== $root_parent = get_the_title($current)) {echo get_the_title($grandparent); }else {echo get_the_title($parent);
Jean Bishop
J'utilise ce code et il fonctionne très bien. Est-il possible d'afficher également les catégories dans les menus avec les pages ?
Michelle
Bonjour,
Je veux faire ce qui suit
La page parente doit être soit à vendre, soit à louer.
Ensuite, je veux que l'enfant, par exemple une province (gauteng), soit lié aux parents "à vendre" et "à louer".
Comment faire ?
Michelle
Zakhar
Comment puis-je créer un shortcode avec un paramètre, par exemple, [wpb_childpages id=”1″], où id=”1″ est l'identifiant de la page parente ?
Strand
Bonjour,
Est-il possible de limiter les liens à un nombre spécifique tel qu'un maximum de 12 pages enfants ?
Merci
Aander
Merci,
Pourriez-vous m'expliquer, s'il vous plaît, comment organiser les pages enfants dans une liste déroulante accessible via la page parente ? (Je ne veux pas que les visiteurs voient toutes les pages enfants sous forme de blogroll.)
Autrement dit, sur la page parente, je veux créer une liste déroulante (boîte de liste) à laquelle les pages enfants seraient ajoutées dans un ordre prédéfini (par exemple, par ordre alphabétique). Après avoir lu l'introduction, un visiteur peut continuer en choisissant n'importe quelle page de la liste à sa guise (les pages enfants n'ont pas de lien logique, donc dans tous les cas, il recherchera la page exacte).
Mon rêve est-il réalisable ?
Merci encore.
Quantum-mecha
Comment ajouter la pagination pour les pages enfants ?
Merci !
Astrid
Bonjour l'équipe WPBeginner,
J'ai utilisé le code que vous avez fourni avec l'« option shortcode » et cela a fonctionné (liens vers les pages enfants). Cependant, je voulais utiliser l'option permanente, et cela n'a pas fonctionné.
Lorsque j'ai ajouté cette ligne de code [ ], la page parente renvoie une erreur 500 et aucune page enfant ne s'affiche du tout.
Qu'est-ce que je fais de mal ?
Par ailleurs, si je voulais afficher un extrait avec son image respective, comment devrais-je m'y prendre ? Merci !
Astrid
J'ai réussi à résoudre ce problème.
J'ai ajouté l'extrait de code puis j'ai ajouté ce shortcode [wpb_childpages] à la page parente où je voulais afficher les pages enfants. Génial !
Maintenant, pour afficher des extraits et une image, utiliserais-je les mêmes requêtes – tout comme les articles sous une catégorie ?
Thanks in advance
Jade
Salut, je me demandais ce que tu voulais dire par « requête » ? Comment as-tu fait exactement pour afficher les extraits et les images sur la page parente ?
Merci !
Mehar
Très utile. Merci.
Pradeep
Quelqu'un pourrait-il confirmer si la page d'exemple utilisée dans ce tutoriel http://optinmonster.com/how-it-works/ utilise cette fonctionnalité ou non ? Il me semble qu'ils utilisent des onglets, au lieu de pages enfants.
Si j'ai bien compris, quelqu'un pourrait-il me diriger vers une ressource pour obtenir cette fonctionnalité, car je cherche désespérément une solution fluide comme celle qu'ils ont sur cette page ?
Merci beaucoup,
Pradeep
Andrew Roberts
Pour l'option non-shortcode, vous voudrez peut-être informer les utilisateurs qu'ils doivent soit changer
return $string;enecho $string;oudans leur modèle de page, faire un echo de la fonction
echo page_list_child_pages();Merci à Erik d'avoir signalé cela ci-dessus
Meredith Adams
Merci !
Gaby
Merci ! Je me demandais pourquoi le code ne fonctionnait pas...
Howard
Bonjour, j'arrive à faire fonctionner cela lorsque je visite mon domaine avec un sous-répertoire (par exemple – example.com/home) mais lorsque je consulte le site sans cela (example.com), la liste des sous-pages n'est pas affichée. Quelqu'un peut-il m'indiquer où je me trompe ?
Merci d'avance – très nouveau sur Wordpress.
Emily Jennewein
Comment faire pour que cette fonction affiche la page parente elle-même en haut de la liste, ainsi que la liste des pages enfants et petites-filles ? Sur les pages enfants, la page parente n'est pas listée.
Michael
comment puis-je personnaliser cela pour n'afficher que la page enfant d'une page spécifique ?
Yester
Comment ajouter une classe active sur la page actuelle ?
Jenny
Existe-t-il maintenant un plugin qui peut faire la même chose ?
et pouvons-nous également décider où la boîte avec les sous-menus des pages va, dans n'importe quelle zone de la page, pas seulement en haut de la page ? Utilisation d'un plugin
L'équipe de WPBeginner
Oui, cela peut être utilisé pour les types de publication personnalisés. Comme ceci :
function wpb_list_child_pages() {
global $post;
if ( 'movie' == get_post_type() && $post->post_parent )
$childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
$childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
if ( $childpages ) {
$string = '' . $childpages . '';
}
return $string;
}
add_shortcode('wpb_childpages', 'wpb_list_child_pages');
Daniela
C'est super ! Y a-t-il un moyen de faire la même chose pour les types de publication personnalisés qui ont des publications enfants ?
Caroline
Je me pose la question aussi !
Si quelqu'un sait, aidez-moi s'il vous plaît !
dpc
Y a-t-il un moyen de modifier cela afin d'afficher les publications enfants d'un type de publication personnalisé sur la page d'une publication de type de publication personnalisé ? Merci, c'est très pratique !
Sokeara
C'est très bien pour moi ! Quoi qu'il en soit, j'aimerais savoir comment afficher le titre et la miniature de la page enfant sur la page parente.
Ashley Bell
Bonjour, j'ai la même question. J'aime vraiment la façon dont la liste est stylisée sur la page Beginners Blueprint, mais je n'ai aucune idée de comment commencer. Quelqu'un peut-il recommander un article à lire ou donner quelques conseils, merci.
Razvan Zamfir
Bonjour !
Bon extrait, mais comment puis-je lister uniquement les pages petites-filles ?
Merci !
amitabha197
Il y a une erreur dans les pages qui n'ont pas de pages enfants, j'ai donc légèrement modifié
if( count($childpages) != 0 ) {
$string = ” . $childpages . ”;
}
au lieu de
if( $childpages ){
$string = ” . $childpages . ”;
}
L'équipe de WPBeginner
Pour exécuter un shortcode dans les modèles WordPress, vous devez l'ajouter comme ceci :
Matt Rock
Je n'ai pas réussi à faire fonctionner le code du modèle « wpb_list_child_pages(); », mais echo shortcode a fait l'affaire. Merci !
Erik
Changez simplement « return $string » en « echo $string » (cela affichera les pages).
fariha
merci, ça a marché
Coen Siebenheller
J'ai ajouté le code à functions.php et quand j'ajoute le shortcode [wpb_childpages] dans mon texte, ça fonctionne. Mais quand j'essaie de l'ajouter à l'un de mes modèles, rien ne s'affiche. Quelqu'un sait ce que je fais de mal ?
Elena Rapisardi
Super explication !!
Y a-t-il un moyen d'afficher toujours les pages parentes ?
Quin
C'est génial, merci.
Existe-t-il un moyen de l'adapter pour que le Parent affiche le Petit-enfant, et non l'Enfant ?
Dejan
Super fonction, merci !
Richelly Italo
La super idée, merci mec.
Steph
Pouvez-vous nous dire comment arrêter la liste au premier niveau ? J'aimerais afficher toutes les sous-pages de ce parent, mais pas les enfants des sous-pages. Merci.
Stefan
Ajoutez simplement &depth=1
sort_column=menu_order&title_li=&child_of=’ . $post->post_parent . ‘&echo=0&depth=1
Martin Capodici
Super. J'adore cette idée de plugin de site et de voir le code que vous ajoutez (pour savoir qu'il est propre et ne fait rien de mal) plutôt que de dépendre d'un plugin qui pourrait installer n'importe quoi.
Pour quelque chose d'aussi simple que de lister les pages enfants, je suis d'accord que cela devrait faire partie d'un plugin plus large plutôt que d'un seul plugin, sinon vous vous retrouvez avec tellement de plugins qu'il est difficile de s'y retrouver.
Rishi Gangoly
This is great. I had a page on my website called “Services” and was manually linking the sub-pages, but not any more. Awesome. Thanks for this tip. Worked like a charm and did exactly what I was doing manually.
Bojan
C'est génial ! Le mettre dans un plugin est une excellente fonctionnalité et une excellente opportunité d'étendre les fonctionnalités en ajoutant :
– image mise en avant de la page enfant (comme miniature)
– titre de la page enfant
– le reste des métadonnées (auteur, date, nombre de commentaires)
– stylisation en colonnes peut-être
et ainsi de suite
De cette façon, nous aurions un plugin Portfolio presque complet – des portfolios faits de Pages plutôt que juste de types de publication personnalisés.
Merci..
Ivica
Le meilleur plugin pour afficher les pages enfants dans une barre latérale pour ceux qui veulent une navigation encore plus rapide et "plus propre" des pages enfants :
http://wordpress.org/plugins/child-page-navigation/
yousef mayeli
salut
merci c'était très utile. mais si vous pouviez le montrer en vidéo, ce serait beaucoup plus utilisable. comme le ferait tyler moor
merci
yousef
Nancy
C'est génial ! J'ai beaucoup de liens ajoutés manuellement vers des pages enfants, et cela va rendre la maintenance de notre site BEAUCOUP plus facile. Je viens de tester dans mon environnement de développement, et j'aimerais modifier un peu la fonction, de sorte que sur une page enfant, lorsque le shortcode est inclus, tous les enfants du même parent soient listés, À L'EXCEPTION de la page actuellement affichée. J'apprends encore vraiment le PHP, donc bien que j'essaie de résoudre ce problème par moi-même, toute aide pour apporter cette modification au code serait la bienvenue.