skip to Main Content

Comment mettre à jour automatiquement les menus sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Lorsque le système du menu de navigation a été publié avec WordPress 3.0, ce fut l’un des facteurs qui ont transformé WordPress d’une plate-forme de blogging en un CMS.

Cela signifiait que vous pouvez ajouter n’importe quel contenu que vous vouliez aux menus de navigation de votre site, y compris les liens personnalisés. L’interface « drag and drop » signifiait que n’importe qui pouvait créer son propre menu personnalisé sans aucune compétence de codage.

Mais parfois, vous ne souhaitez pas compter sur cela. Si vous développez un site pour un client qui va ajouter des pages à son site, il est peu probable qu’il mette à jour le(s) menu(s) de navigation quand il le fait ou ne possède pas les compétences nécessaires. C’est donc là qu’un menu de navigation automatisé devient utile.

Dans ce tutoriel, je vais vous montrer comment créer un menu de navigation automatisé qui affiche toutes les pages de votre site, avec les pages enfant affichées comme entrées de deuxième niveau dans le menu de navigation.

Vous pouvez ensuite ajouter ce code à l’en-tête de la page de votre thème, à votre barre latérale ou votre pied de page si vous le souhaitez, et cela affichera à vos utilisateurs des liens qui se mettent automatiquement à jour lorsqu’un nouveau contenu est ajouté à votre site.

Ce dont vous aurez besoin pour automatiser les menus de navigation WordPress. Pour suivre cette publication, vous aurez besoin de:

  • Une installation de développement ou de test de WordPress, avec quelques pages et sous-pages ajoutées, et
  • Un éditeur de code.

Configuration du code

Je vais ajouter ce code à un plugin afin qu’il soit permanent, même si je change de thème. De cette façon, je peux ajouter la fonction de mon plugin dans mon thème pour ajouter le menu de navigation où je le souhaite. Si votre thème comporte des « hooks », vous pouvez utiliser un ou plusieurs pour injecter votre code.

Si vous travaillez avec un thème tiers qui n’a pas de crochets, vous devrez ajouter un code au thème. Ne le codez pas directement dans le thème: créez plutôt un thème enfant et ajoutez votre code à cela. Créez simplement un duplicata du fichier de modèle de thème à partir du thème principal que vous souhaitez modifier, ajoutez-le à votre thème enfant et modifiez-le.

La première étape consiste à créer le plugin. Je crée un dossier pour le mien dans mon dossier « wp-content/plugins ». La création d’un dossier signifie que je peux ajouter plus de fichiers au plugin à l’avenir si je le dois, comme une feuille de style ou des fichiers d’inclusion.

D’abord, vous devez ajouter le code d’ouverture à votre plugin, dans les commentaires, pour dire à WordPress ce que c’est:

<?php
/**
 * Plugin Name: Plugin
 * Plugin URI: http://blogpascher.com
 * Description: Plugin WordPress
 * Version: 1.0
 * Author: Herve
 * Author URI: http://blogpascher.com
 *
 */

Activez maintenant votre plugin.

Démarrez la promotion de votre blog

Téléchargez des dizaines de Logos, bannières, modèles de sites web et de nombreux autres outils marketing pour faire connaître votre Blog WordPress. [Recommandé]

Ensuite, si vous utilisez un thème enfant, configurez-le. J’utilise un thème enfant du thème Twenty Seventeen – voici ma feuille de style:

<?php
/**
 * Plugin Name: Plugin
 * Plugin URI: http://blogpascher.com
 * Description: Plugin WordPress
 * Version: 1.0
 * Author: Herve
 * Author URI: http://blogpascher.com
 *
 */

@import url( " ../twentyseventeen/style.css " );

Une fois que vous avez fait cela, si votre site n’a pas encore de pages, ajoutez-en quelques-unes. Elles doivent avoir une structure à plusieurs niveaux. Voici à quoi ressemblent mes fausses pages:

Maintenant, commençons à ajouter le code au plugin.

Création d’une fonction pour répertorier toutes les pages hiérarchiquement

Nous allons utiliser la fonction « wp_list_pages() » pour récupérer toutes les pages et les répertorier avec des liens. Mais d’abord, nous devons définir certains arguments pour cela. Commencez par créer votre fonction et ajoutez ces arguments :

wpmu_list_pages() {wpmu_list_pages() {  $args = array( 'depth' => 2 );
}

Les arguments sont très simples – il n’y a qu’un seul pour le niveau de pages que nous souhaitons faire. Définir « 2 » signifie que les pages de haut niveau et leurs sous-pages seront affichées, mais pas plus.

Maintenant, ajoutons la fonction « wp_list_pages() » après les arguments:

wp_list_pages( $args );

Voici la fonction complète:

wpmu_list_pages() {wpmu_list_pages() {  $args = array( 'depth' => 2 );
 wp_list_pages( $args );
}

Ajout de la fonction au thème

À l’heure actuelle, la fonction ne montre rien sur mon site. Pour changer cela, nous devons ajouter une copie de l’en-tête du thème principal au thème enfant et éditer cela.

Commencez par copier votre fichier d’en-tête dans votre thème enfant et ouvrez-le. Dans Twenty Seventeen, le code du menu de navigation se trouve dans le « templates-parts/navigation/navigation-top.php », ce qui signifie que je dois ajouter une copie de ce fichier au même endroit dans mon thème enfant. Dans votre thème, il peut s’agir du fichier header.php lui-même qu’il faut copier.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Selon votre thème, le code du menu sera différent. Dans vingt-dix-sept, c’est le code que je dois remplacer:

<?php wp_nav_menu( array(<?php wp_nav_menu( array( 'theme_location' => 'top', 'menu_id'        => 'top-menu', ) ); ?>

Modifiez votre code de menu de navigation pour ajouter une nouvelle fonction, avec le code existant dans une déclaration « else{} » :

<?php  if ( function_exists( 'wpmu_list_pages' ) ) { wpmu_list_pages(); } else { wp_nav_menu( array( 'theme_location' => 'top', 'menu_id'        => 'top-menu', ) ); }  ?>

Les énoncés conditionnels sont importants: d’abord, il vérifie si la fonction que vous avez ajoutée à votre plugin est présente (c’est-à-dire si le plugin est activé) et, dans l’affirmative, il exécute la fonction à partir de cela. Sinon, il fonctionne normalement.

Observons maintenant mon site:

Les liens apparaissent, mais il y a quelques problèmes. Je ne veux pas que soit affiché « Pages » en haut (ce qui est par défaut pour la fonction wp_list_pages() ) et je souhaite ordonner les pages plus efficacement. Vous verrez que la page d’accueil se trouve au milieu de la liste, ce qui n’est pas idéal.

Améliorer la fonction

Revenons au code du plugin et adaptons-le pour corriger ces problèmes.

Trouvez les arguments que vous avez déjà définis pour wp_list_pages():

$args = array(
 'depth' => 2
);

Et éditez-le:

$args = array($args = array( 'depth' => 2, 'title_li' => '<h3>' . __( 'Menu', 'bpc' ) . '</h3>', 'sort_column' => 'menu-order');

Cela ajoute deux arguments supplémentaires:

  • Le balisage avant la liste, qui indique maintenant « Menu » au lieu de « Pages ».
  • L’ordre dans lequel les pages sont affichées.

Vous devez revenir aux écrans d’édition de vos pages et définir l’ordre des pages pour chacune d’elles. Donnez à votre page d’accueil une valeur « 0 » et les autres pages de niveau supérieur sont supérieures à celles-ci.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Maintenant, lorsque vous affichez le menu, il ressemblera à ceci:

Vous pouvez également modifier l’ordre du menu des pages du deuxième niveau. Celui-ci n’apparaîtra jamais au-dessus des pages de niveau supérieur, ainsi vous pourrez commencer à 0 ou 1 pour chaque ensemble des sous-pages.

C’est tout pour ce tutoriel, j’espère qu’il vous permettra d’ajouter des pages automatiquement à vos menus.

Cet article comporte 2 commentaires
  1. Bonjour,

    Merci pour l’article

    Mon problème est que je ne comprends pas vraiment la procédure à suivre dans la partie « Ajout de la fonction au thème », dois-je modifier le fichier « navigation-top.php » directement ? Dois-je le dupliquer dans mon thème enfant ? Dois je modifier la partie indiquée et l’ajouter dans mon fichier function.php ?
    Ou une autre solution x)
    Merci de m’éclairer sur ce point

    PS : le lien github nous amène vers un répertoire vide

    1. Bonsoir, il s’agit en effet de dupliquer le fichier dans le thème enfant. WordPress se charge du reste. Car il tentera de vérifier si le fichier existe sur le thème enfant et chargera donc le fichier du thème parent s’il n’existe pas.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
19 Partages
Partagez14
Tweetez3
Enregistrer2