Créer une barre de navigation contextuelle dans WordPress

Parfois, je reçois un travail client qui nécessite un site entièrement construit sur des pages. Aucune requête de base de données sophistiquée, aucun fichier de modèle supplémentaire - juste un tas de pages dans une structure hiérarchique.

Un très grand site construit sur des pages peut devenir lourd et déroutant pour les utilisateurs si la navigation n’est pas faite correctement. Il est donc utile de fournir une liste de toutes les pages de la branche actuelle de la hiérarchie des pages sur chaque page.. 

Par exemple, si votre site est destiné à une organisation et que chacune de ses fonctions comporte une page de niveau supérieur avec des sous-pages pour des départements individuels, vous souhaiterez répertorier tous ces départements avec un lien vers la page de fonction de niveau supérieur. Vous voudrez le faire sur chacune de ces pages de département et sur toutes les sous-pages qu'ils pourraient avoir, ainsi que sur la page de niveau supérieur elle-même..

Pour ce faire, vous ne pourrez pas générer de listes de contenu lié en exécutant des requêtes sur le type de publication ou le terme de taxonomie en cours. Au lieu de cela, vous devrez identifier où se trouve la page actuelle dans la structure, puis afficher une liste de liens en conséquence..

Ici, je vais vous montrer comment faire exactement cela, en créant une fonction que vous pouvez ajouter à votre fichier de barre latérale ou peut-être au-dessus du contenu de vos fichiers de modèle (ou activer via un crochet si votre thème utilise ceux-ci).

Cela consiste en deux étapes:

  1. identification de l'emplacement de la page en cours dans la structure
  2. afficher une liste de pages

Ce dont vous aurez besoin

Pour compléter ce tutoriel, vous aurez besoin de:

  • une installation de WordPress
  • un éditeur de texte

Créer votre plugin

Je vais créer cette fonction dans un plugin pour que son thème soit indépendant. Donc, votre première étape consiste à créer un fichier plugin. Le mien s'appelle tutsplus-list-subpages.php.

Ouvrez votre fichier de plugin et ajoutez ce qui suit:

De toute évidence, votre code sera différent car l'auteur du plugin et l'URL changeront, et vous voudrez peut-être modifier la description.. 

Inclure le nom de la fonction dans la description est utile car cela signifie que lorsque vous installez votre plugin sur un site, vous n'avez pas besoin de vérifier le code pour vous rappeler comment l'utiliser..

Identifier la page actuelle dans la hiérarchie

Pour savoir où se trouve la page actuelle dans la hiérarchie des pages, vous devez procéder de quatre manières:

  1. Vérifiez qu'il s'agit bien d'une page
  2. Vérifiez si ce post a des parents
  3. Si non, alors vous savez que c'est l'ancêtre de premier niveau pour cette partie de la hiérarchie
  4. Si c'est le cas, vous devez identifier l'ancêtre de niveau supérieur à l'aide de get_post_ancestors ()

Alors faisons-le!

Créez une nouvelle fonction avec une balise conditionnelle pour vérifier que nous sommes sur une page:

Maintenant, à l'intérieur du is_page () balise conditionnelle, commencez par définir le $ post variable globale:

Ensuite, vous devez identifier si la page actuelle a des parents, ce que vous faites en utilisant si (& post-> post_parent):

post_parent) ?>

Si la page a des ancêtres, vous devez identifier les plus importants d'entre eux, ce que vous faites à l'aide de get_post_ancestors ():

post_parent) // récupère la liste des ancêtres $ parents = array_reverse (get_post_ancestors ($ post-> ID)); // récupère l'ancêtre de premier niveau return $ parents [0]; ?>

Ceci définit une nouvelle variable de $ parents dont la valeur est l'ID de la page la plus haute de la branche actuelle de la hiérarchie. La ligne retourne $ parents [0]; affiche cette valeur pour que vous puissiez l'utiliser dans une fonction ultérieure.

Enfin, vous devez définir ce qui se passe si la page en cours n’a pas de parents, c’est-à-dire s’il s’agit de l’ancêtre le plus élevé. Dans ce cas, vous souhaitez générer l'ID de la page actuelle et ajouter les éléments suivants à votre fonction:

return $ post-> ID;

Votre fonction entière va maintenant ressembler à ceci:

post_parent) // récupère la liste des ancêtres $ parents = array_reverse (get_post_ancestors ($ post-> ID)); // récupère l'ancêtre de premier niveau return $ parents [0];  // retourne l'id - ce sera le plus ancien ancêtre s'il en existe un, ou la page en cours si elle ne retourne pas $ post-> ID; ?>

Produire une liste de sous-pages

Maintenant que vous connaissez l'ID de la page la plus haute de la branche actuelle de la hiérarchie, la sortie d'une liste de ses sous-pages est relativement simple. Tu utilises get_pages () pour identifier les pages enfants de la page dont vous avez identifié l'ID. Vous aurez également besoin de générer un lien vers la page d'ancêtre au début de la liste..

Utilisation de list_pages () pour identifier des sous-pages

Commencez par créer une nouvelle fonction en vérifiant que nous sommes sur une page:

Notez que si vous allez ajouter cette fonction à votre page.php modèle, vous pouvez laisser de côté la vérification qu'une page est affichée.

La première chose à faire à l'intérieur de cette balise conditionnelle est d'extraire l'ID de page que vous avez identifié dans la liste. tutsplus_check_for_page_tree () fonction que vous faites avec cette ligne de code:

$ ancestor = tutsplus_check_for_page_tree ();

Ci-dessous, définissez les arguments de la get_pages () une fonction:

$ args = array ('child_of' => $ ancêtre, 'depth' => '-1', 'title_li' => ",);

Regardons rapidement les arguments que j'ai utilisés:

  • 'child_of' => $ ancêtre identifie les pages qui sont un enfant du $ ancêtre page
  • 'profondeur' => '-1' indique à la fonction d'accéder à autant de niveaux de la hiérarchie qu'il y a dans le site. Vous pouvez changer cela si vous voulez juste afficher un ou deux niveaux.
  • 'title_li' => " veille à ce que la sortie ne soit pas encapsulée dans des balises HTML - comme je les ajouterai plus tard.

Ensuite, vous devez exécuter le list_pages () une fonction:

$ list_pages = get_pages ($ args);

Sortie de la liste de pages

Maintenant que vous avez vos pages, vous devez les éditer avec des liens. Pour ce faire, vérifiez d'abord que list_pages () n'a pas renvoyé de tableau vide:

if ($ list_pages) 

À l'intérieur de cette vérification, le premier lien est la page de niveau supérieur:

  • ">

Et puis en dessous de ce premier

  • élément mais toujours à l'intérieur du
      , Utilisez le wp_list_pages () fonction pour afficher une liste des pages entourées d’hyperliens:

      wp_list_pages ($ args);

      Cela affichera une liste des titres de pages sous forme de liens.

      L'ensemble de votre tutsplus_list_subpages () la fonction va maintenant ressembler à ceci:

       $ ancestor, 'depth' => '-1', 'title_li' => ",); // définit une valeur pour get_pages afin de vérifier si elle est vide $ list_pages = get_pages ($ args); // vérifie si $ list_pages a values ​​if ($ list_pages) // ouvre une liste avec la page d'ancêtre en haut?> 
      • ">

      Activer la fonction

      Vous pouvez activer la fonction de deux manières:

      • En appelant tutsplus_list_subpages () dans l'un des fichiers de modèle de votre thème, tels que le sidebar.php fichier
      • En l'attachant à un crochet dans votre thème.

      Par exemple, si votre thème a un tutsplus_sidebar accrocher dans le sidebar.php fichier, vous ajouteriez ce qui suit à votre functions.php fichier:

      Résumé

      Le code que j'ai démontré vous permet d'ajouter automatiquement une liste de pages liées à une page n'importe où dans la hiérarchie de votre site..

      Si vous l'utilisez pour des sites clients, vous devez vous assurer que le client comprend comment créer des pages de manière hiérarchique, mais cela ne signifie pas pour autant qu'il doit y réfléchir du tout..

      Si vous voulez rendre le code encore plus convivial pour les clients, vous pouvez créer un widget (ou peut-être un shortcode) pour afficher la liste des pages, mais c'est un sujet pour un autre jour.!