Comment afficher toutes les pages enfants d’une page parent WordPress

Diviser le contenu connexe sur plusieurs sous-pages associées relève autant de l’art que de la science. En tant que webmaster WordPress, vous pourriez être tenté de mettre beaucoup de contenu sur une seule page, mais vous devriez y résister ! Réduire l’encombrement augmentera la lisibilité de votre page. Et répartir votre contenu sur plusieurs pages est l’un des moyens les plus courants d’éviter un fouillis. Mais, vous devez toujours faire comprendre à vos visiteurs que la page d’origine et les sous-pages suivantes sont connectées. Et assurez-vous que ces sous-pages sont facilement accessibles.

Vous pouvez résoudre ce problème en incluant un index de toutes les sous-pages connectées sur la page d’origine. L’index aidera les utilisateurs du site Web à visualiser rapidement le contenu qu’ils recherchent et à choisir parmi le contenu, ou même à découvrir quelque chose de nouveau.

La création de sous-pages est assez simple car WordPress a une option intégrée pour vous aider à le faire. Cela fonctionne en affectant une page comme page parent d’une autre (appelée page enfant). Cependant, la difficulté consiste à insérer un index de pages enfants dans la page parent. Ainsi, dans cet article, nous verrons comment afficher un index des pages enfants appartenant à une page parent spécifique. Et nous allons vous montrer comment résoudre ce problème en le décomposant en plusieurs étapes plus petites :

Comment afficher toutes les pages enfants d’une page WordPress spécifique

Vous pouvez afficher un index de toutes les pages enfants attachées à une page WordPress spécifique en utilisant deux méthodes différentes. La première consiste à utiliser un plugin pratique et la seconde à activer cette fonctionnalité à l’aide d’un code personnalisé. Nous allons vous montrer les étapes pour les deux méthodes. Cependant, nous devons d’abord expliquer comment attribuer une page parent à une autre page WordPress.

Attribuer une page parent à une autre page dans WordPress

Commencez par décider quelle page sera la page enfant. Puis l’ouvrir pour l’éditer et accédez à la section Attributs de page sur la droite. Si vous utilisez le constructeur de pages WordPress par défaut – Gutenberg, la section sera située dans l’onglet Document. Puis, localiser le Page des parents option, sélectionnez une page dans le menu déroulant, et appuie sur le Mettre à jour bouton dans le coin supérieur droit de l’écran pour mettre à jour la page.

Cela définira la page que vous avez sélectionnée dans le menu déroulant comme parent de la page que vous étiez en train de modifier. La connexion réussie peut également être vue dans la liste des Toutes les pages. Les pages enfants sont affichées sous leur page parent correspondante et sont mises en retrait à l’aide d’un tiret devant leur nom.

Vous pouvez également affecter des pages parent à des pages parent déjà existantes. Cela crée des pages enfants de plusieurs profondeurs. Le niveau de profondeur enfant est alors noté par le nombre de tirets précédant le titre de la page.

Utiliser un plugin

En raison d’une abondance de plugins WordPress pour presque tous les usages, vous devriez toujours essayer de trouver d’abord un plugin pratique lors de l’ajout d’une nouvelle fonctionnalité ou fonctionnalité. Le plugin que nous utiliserons dans cet article est le Pages enfants CC brancher. Vous pouvez utiliser ce plugin de deux manières après l’avoir installé.

La première méthode nécessite l’utilisation de widgets. Insérez le widget CC Child Pages dans la zone de widget souhaitée puis ajuster les options de widget disponibles.

Vous trouverez le widget CC Child Pages près du haut de la liste de la section Widgets disponibles. Lorsque vous l’avez ajouté, vous pouvez choisir les options qui vous seront utiles. Par exemple, lorsqu’elle est cochée, l’option Afficher le titre de la page remplacera le titre statique du champ Titre par le nom de la page parent actuelle, de sorte que l’index de la page enfant aura un titre utile au lieu de simplement dire Pages enfants. Vous pouvez choisir les pages qui ne s’afficheront pas en ajoutant des identifiants de page dans le Exclure option.

Pour référence, un ID de page est un numéro que vous pouvez trouver dans le lien permanent d’une page, après la partie contenant ?post=. Dans notre cas, par exemple, l’ID du Nous contacter la page est 1114.

Aussi, en cochant la Afficher les pages sœurs vous afficherez les pages qui ont le même parent et sont sur la même profondeur d’enfant.

Voici un exemple de l’apparence du contenu du widget sur un site Web créé avec le thème Powerlift.

La deuxième façon d’utiliser le plugin CC Child Pages est d’insérer directement le shortcode. Nous vous guiderons à travers les étapes à l’aide du générateur de page Gutenberg. Nous vous suggérons fortement d’étudier notre article sur les shortcodes personnalisés si vous n’êtes pas certain de ce qu’ils sont et sous quelle forme les utiliser lors de leur insertion dans votre page. L’article couvre également l’insertion d’un shortcode personnalisé dans votre page si vous utilisez Elementor ou WPBakery comme constructeurs de page de votre choix.

Pour insérer le shortcode personnalisé dans une page, cliquez sur le signe + ajouter un bloc Gutenberg et sélectionnez un Petit code bloquer. Puis insérer le nom du shortcode en son sein et appuie sur le Mettre à jour bouton. Le nom du shortcode est pages_enfants, vous pouvez donc simplement insérer [child_pages]. Ce faisant, chaque paramètre de fonction possible sera défini sur sa valeur par défaut, qui est définie dans le fichier de plug-in correspondant. Mais, vous pouvez également insérer vos arguments pour spécifier certains des paramètres. Comme la liste des arguments possibles est définie comme un tableau associatif, vous devez insérer les arguments au format suivant : key=’value’. Si vous effectuez plusieurs entrées, vous devez les séparer par un espace vide.

À titre d’exemple, nous avons défini les éléments suivants :

[child_pages cols=’2’ depth=’0’]

Cela fait que notre liste d’index s’affiche sur 2 colonnes (cols=’2′) et présente le parent et toutes les pages enfants dans une liste hiérarchique et en retrait (depth=’0′). Si vous souhaitez en savoir plus sur les arguments disponibles et comment les inclure, nous vous suggérons de parcourir en détail la page officielle du plugin.

Après avoir inséré l’exemple de shortcode, nous avons obtenu le résultat suivant, illustré ci-dessous.

L’inconvénient de ce plugin est qu’il a très peu d’options supplémentaires. À des fins de style, vous pouvez choisir d’utiliser ou non les styles de plugin prédéfinis. Cela se fait en cochant la Oui ou Non case à cocher à côté de Mettre la peau en file d’attente CSS option dans Paramètres > Pages enfants.

Pour améliorer la stylisation des résultats de votre page enfant vous pouvez également inclure des suppléments sur mesure, CSS dans le CSS personnalisé option ci-dessous.

Après avoir apporté des modifications aux paramètres, n’oubliez pas d’appuyer sur le bouton Options de mise à jour bouton ci-dessous, pour que ces modifications s’appliquent.

Utiliser un code personnalisé

Une autre façon possible de créer un index de pages enfants consiste à utiliser un code personnalisé. L’avantage de cette méthode est la liberté de personnalisation. Vous pouvez modifier la section d’index des pages enfants exactement selon vos besoins sans dépendre d’un plugin. Cependant, la création de code personnalisé est une méthode principalement destinée aux utilisateurs WordPress plus expérimentés.

Avant de nous plonger dans les étapes nécessaires à cette méthode, nous aimerions faire quelques suggestions. Tout d’abord, nous vous proposons de parfaire vos connaissances sur l’utilisation du FTP. Deuxièmement, il est judicieux de faire une sauvegarde de vos fichiers WordPress à l’avance, car une mauvaise utilisation du code peut endommager votre site Web.

Cela dit, passons à la description de cette méthode. Tout d’abord, vous auriez besoin de connectez-vous à votre serveur en utilisant vos identifiants FTP et accédez à votre répertoire racine WordPress, souvent appelé public_html.

Puis, accédez au répertoire /wp-content/themes et cliquez sur le répertoire de votre thème actuel pour l’ouvrir.

Trouvez le fichier functions.php dans, clic droit dessus, et sélectionnez le Voir la modification option.

Ouvrir le fichier en utilisant votre éditeur de texte préféré et insérer le code ci-dessous à la fin du fichier.

function qode_children_list() {
global $id;
$child_pages = wp_list_pages( array(
'title_li' => '',
'child_of' => $id,
'sort_column' => 'post_date',
'sort_order' => 'desc',
'echo' => 0
) );
if ( $child_pages){
$output="<ul>" . $child_pages . '</ul>';
}
else
$output="";
return $output;
}
add_shortcode( 'children_list', 'qode_children_list', 11 );

Regardons de plus près le code inclus ci-dessus.

Ce code est un petit shortcode personnalisé appelé liste_enfants. Il affiche une liste non ordonnée de liens menant aux pages enfants correspondantes d’une page sur laquelle le shortcode est utilisé. Si cette page n’a pas de pages enfants, le code ne fera rien (le HTML de sortie serait vide).

Le code repose entièrement sur le wp_list_pages() fonction. Cette fonction peut prendre de nombreux paramètres possibles bien que nous en ayons utilisé très peu. Les plus notables sont les deux que nous avons utilisés pour trier les liens appropriés. Plus précisément, les liens sont triés par ordre décroissant suivant les dates de publication des pages filles. Par conséquent, les entrées de la liste commenceront par la plus récente et descendront jusqu’à la plus ancienne.

Nous vous suggérons fortement de parcourir la documentation concernant la fonction wp_list_pages() pour plus d’informations sur ses paramètres et son utilisation. Cela étant dit, voyons comment nous pouvons utiliser ce shortcode sur notre site Web.

Si vous souhaitez ajouter le shortcode à votre page, vous pouvez le faire utiliser Gutenberg comme constructeur de pages. Simplement appuyez sur le signe + pour ajouter un nouveau bloc, sélectionnez le Petit code bloquer, et insérer [children_list]. Finalement, appuie sur le Mettre à jour bouton dans le coin supérieur droit de la page. Si vous préférez Elementor ou WPBakery comme constructeurs de pages, vous pouvez trouver les étapes requises pour eux dans notre article sur l’utilisation de shortcodes personnalisés.

Si vous avez utilisé le même shortcode que nous avons donné comme exemple dans le contenu de votre page, vous obtiendrez le résultat suivant :

Vous pouvez également placer le shortcode dans un widget texte et afficher l’index de la page enfant dans votre zone de widget préférée. Cette utilisation est également décrite plus en détail dans notre article sur les shortcodes personnalisés. Pour l’instant, vous pouvez simplement ajouter [children_list] dans le widget Texte et appuie sur le sauvegarder bouton. Vous pouvez même ajouter un titre pour l’index de votre page enfant, bien que nous ayons choisi de ne pas le faire dans notre exemple.

Voici à quoi ressemblait le shortcode dans le thème Powerlift après avoir été inséré dans la zone de la barre latérale.

Vous pouvez choisir de styliser davantage l’apparence de cette liste. Cela peut être fait en créant des CSS personnalisés. Si vous choisissez de le faire, nous vous conseillons de l’ajouter sous CSS supplémentaire, qui se trouve dans la section Apparence > Personnaliser de votre tableau de bord d’administration.

Dernières pensées

L’affichage de toutes les pages enfants d’une page parent spécifique a de nombreuses utilisations. Faciliter la navigation sur votre site Web et améliorer l’expérience utilisateur, pour n’en nommer que quelques-uns. Même si afficher les pages enfants d’une page parent WordPress peut sembler facile à réaliser, cela est un peu compliqué par le manque d’options intégrées dans WordPress. Cependant, si vous suivez les étapes décrites dans l’article, vous pouvez gérer cela rapidement et avec un minimum d’effort. De plus, nous avons fait de notre mieux pour fournir une explication complète des deux méthodes. À vous maintenant de choisir celui que vous préférez utiliser.