WordPress, les menus

WordPress, les menus

Tech web
Cloche d'abonnement aux notifications | |
  • Recevoir les notifications

Si vous êtes déjà administrateur d’un site WordPress, vous avez probablement déjà créé ou modifié le menu de votre site depuis le panneau d’administration. En le créant, vous avez probablement dû décider où vous choisissiez de l’afficher

Le système de menus mis en place par WordPress fonctionne de la manière suivante: Un panneau permettant de gérer les éléments de son menu, et l’emplacement où afficher le menu précédemment créé sur le site internet.

  1. Ajouter un emplacement de menu
  2. Créer un menu avec le gestionnaire WordPress
  3. Afficher un menu
    1. Méthode « basique »
    2. Méthode « manuelle »
    3. Gérer l’entrée active
  4. Bonus
    1. Ajouter un lien vers la page d'accueil
    2. Ajouter un lien vers la page de login WordPress
    3. Menu Dashboard, enlever certaines entrées
  5. Rappel des fonctions WordPress importantes

 

Ajouter un emplacement de menu

Si vous utilisez un thème déjà tout fait, vous avez certainement accès à des emplacements de menu déjà pré-préparés. Les thèmes fournis par WordPress en proposent, par exemple Twentytwenty en possède 5, à savoir :

  • primary (Desktop Horizontal Menu)
  • expanded (Desktop Expanded Menu)
  • mobile (Mobile Menu)
  • footer (Footer Menu)
  • social (Social Menu)

Lorsque vous confectionnez un thème, vous allez devoir créer vos emplacements de menu vous-même. Cela vous permettra par la même occasion de créer des menus qui répondent parfaitement à vos besoins, et de ne pas vous encombrer avec une multitude d’emplacements de menu que vous n’allez finalement pas utiliser.

Bon, c’est parti ! Examinons comment créer ces emplacements de menu.

Dans functions.php, nous allons ajouter une fonction qui s’occupera de créer ces emplacements. Nous allons l’appeler karac_setup() et nous allons la hooker à after_setup_theme. A l’intérieur de celle-ci, nous allons utiliser la fonction WordPress registrer_nav_menus(), qui permet d’enregistrer un nouvel emplacement de menu.

add_action( 'after_setup_theme', 'karac_setup' );
function karac_setup() {
    register_nav_menus(
        array(
            'menu-haut' => __( 'Menu du haut', 'karac' ),
        )
    );
}

Dans cet exemple, nous avons créé un seul emplacement, à savoir menu-haut. A noter que vous pouvez très bien en créer plusieurs en les séparant par une virgule. Voici un exemple :

…
'menu-haut' => __( 'Menu du haut', 'karac' ),
'menu-bas' => __( 'Menu du bas', 'karac' ),
…

Maintenant que notre emplacement à menu est créé, nous allons pouvoir y insérer un menu.

 

Créer un menu avec le gestionnaire WordPress

Pour ce faire, nous allons utiliser le panneau de gestion des menus proposé par WordPress. Depuis le dashboard, rendons-nous dans Apparence, puis Menus.

Cliquons sur le bouton Créer le menu ou sur Créez un nouveau menu et choisissons un nom pour notre nouveau menu (par exemple Menu principal). Puisque précédemment nous avons créé un emplacement de menu (à savoir Menu du haut), nous devrions le voir apparaître en bas de la page. Il nous suffit de le cocher, puis d’enregistrer à l’aide du bouton Enregistrer le menu.

dashboard-creation-menu-wordpress

Et voilà ! Notre menu est opérationnel. Celui-ci apparaîtra à chaque fois que nous placerons l’emplacement de menu Menu du haut.

Notre menu est un peu vide comme ça. Nous pouvons bien évidemment lui ajouter des entrées (des pages, des liens personnalisés, etc) à l’aide de la colonne de gauche Ajouter des éléments de menu et du bouton Ajouter au menu.

Maintenant que notre menu est prêt, il nous faut encore l’afficher. Pour cela, rendez-vous au chapitre suivant :)

 

Afficher un menu

Nous allons nous intéresser à deux méthodes, une basique et une plus manuelle mais offrant plus de liberté.

Méthode "basique"

La fonction WordPress wp_nav_menu() permet d’afficher un menu en y indiquant le nom de l’emplacement du menu.

En écrivant le code ci-dessous, nous allons faire apparaître le menu (ici notre Menu du haut). Vous pouvez l’insérer où vous le désirez. Puisque dans notre cas nous nous occupons d’un menu apparaissant en haut des pages, nous allons insérer le code dans header.php, après l’ouverture de la balise <body> et <header> par exemple.

wp_nav_menu( array(
    'menu'   => 'menu-haut',
) );

Et voilà ! Le menu s’affiche ! Alors oui, il n’est pas très beau comme ça… Mais rien ne vous empêche de le styliser avec du CSS 😊

La fonction wp_nav_menu() permet d’entrer d’autres paramètres. Vous pouvez par exemple ajouter une classe à votre menu, afin de pouvoir le manipuler plus facilement :

...
'menu_class'        =>'classe_de_votre_menu',
...

Lui ajouter un ID :

...
'menu_id'        =>'ID_de_votre_menu',
...

Ou encore lui définir un niveau de profondeur (mettre 0 pour tout afficher, dans l’exemple le 2 aura pour effet de n’afficher que les entrées du menu de premier et de second niveau) :

...
'depth'        =>'2',
...

Il existe encore des dizaines de paramètres, je ne vais pas tous vous les présenter ici. Néanmoins, Si ceux-ci vous intéressent, je vous invite à consulter le codex WordPress.

 

Méthode "manuelle"

Si vous ne vous sentez pas assez libre avec la méthode « basique », celle-ci devrait vous convaincre.

Voici le code que je vous propose :

$menu_name = 'menu-haut';
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );

if(!empty($menu)):
  $menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );
 
  foreach( $menuitems as $key => $item ):
    $title = $item->title;
    $link = $item->url;
    echo "<li class='nav-item'>";
    echo "<a class='nav-item nav-link' href=" . $link . ">" . $title . "<span class='nav-underline'></span></a>";
    echo "</li>";
  endforeach;
endif;

Rien de bien sorcier, nous entrons le nom de notre menu dans une variable, puis nous allons le chercher à l’aide de la fonction wp_get_nav_menu_object().

Nous contrôlons que le menu n’est pas vide, puis nous récupérons les différentes entrées avec la fonction wp_get_nav_menu_items(). C’est également à l’intérieur de cette fonction que nous pouvons définir l’ordre des entrées (dans notre exemple nous avons opter pour un ordre décroissant en choisissant comme paramètre de order DESC.

Ensuite, nous bouclons, à l’aide d’un foreach, à l’intérieur de chaque entrée pour l’afficher.

Avec cette méthode, vous aurez une liberté totale sur la structure HTML et sur la logique. Pratique non ?

 

Gérer l'entrée active

Pour gérer l’entrée active d’un menu, nous allons utiliser la méthode « manuelle » présentée dans le chapitre précédent. Nous allons modifier l’exemple comme ceci :

$menu_name = 'menu-haut';
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );

if(!empty($menu)):
  $menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );

  foreach( $menuitems as $key => $item ):
    $title = $item->title;
    $link = $item->url;
    $current = ( $item->object_id == get_queried_object_id() ) ? 'is-active' : '';
    echo "<li class='nav-item'>";
    echo "<a class='nav-item nav-link " . $current . "' href=" . $link . ">" . $title . "<span class='nav-underline'></span></a>";
    echo "</li>";
  endforeach;
endif;

Comme différence notoire, nous capturons l’état actif (is-active) que nous stockons dans une variable $current. Puis, nous l’ajoutons en tant que classe de notre balise <a>.

De cette manière, il nous suffit de définir une règle CSS spécifique à cette classe (par exemple un soulignement, ou un changement de couleur), et le tour est joué !

 

Bonus

Ajouter un lien vers la page d'accueil

La fonction home_url() permet d’obtenir l’URL de la page d’accueil de notre site WordPress.

Celle-ci pourrait vous être pratique. Vous ne voyez pas ? Vous pouvez par exemple l’utiliser avant le foreach bouclant dans les entrées de votre menu. De cette manière, vous ne serez plus obligé d’ajouter l’entrée de la page d’accueil via le gestionnaire de menu WordPress. Mieux encore, vous pourrez lui définir une classe afin de ne l’afficher qu’en mobile par exemple. Bref, les possibilités sont infinies :)

...
echo "<li class='nav-item'>";
echo "<a class='nav-item nav-link' href=" .home_url(). ">Accueil<span class='nav-underline'></span></a>";
echo "</li>";
...
foreach( $menuitems as $key => $item ):
...

 

Ajouter un lien vers la page de login WordPress

La fonction wp_login_url() permet d’obtenir l’URL de la page de login.

Comme pour home_url(), libre à vous de l’utiliser avant/après votre foreach bouclant dans les entrées de votre menu.

...
endforeach;
...
echo "<li class='nav-item'>";
echo "<a class='nav-item nav-link' href=" .wp_login_url(). ">Se connecter<span class='nav-underline'></span></a>";
echo "</li>";
...

Si vous désirez qu’après s’être logué, l’utilisateur soit automatiquement redirigé sur la page qu’il consultait, vous pouvez utiliser la fonction de cette manière-là :

wp_login_url(get_permalink())

Super pratique non ?

 

Menu Dashboard, enlever certaines entrées

Pour ce dernier bonus, intéressons-nous à la personnalisation du menu de notre dashboard WordPress (panneau de gestion Backend).

En effet, à l’aide de la fonction remove_menu_page(), nous pouvons supprimer certaines entrées qui ne nous seraient point utiles.

Pour ce faire, ajoutons dans notre fichier functions.php le code suivant :

add_action('admin_menu', 'karac_nettoyage_du_menu');
function karac_nettoyage_du_menu() {
    remove_menu_page('edit-comments.php');
    remove_menu_page('edit.php');
}

Dans cet exemple, nous supprimons l’entrée Commentaires (edit-comments.php) ainsi que l’entrée Articles (edit.php).

Voici une liste non exhaustive d’entrées que vous pourriez supprimer :

  • index.php - Dashboard
  • edit.php - Articles
  • upload.php - Médias
  • edit.php?post_type=page - Pages
  • edit-comments.php - Commentaires
  • themes.php - Apparence
  • plugins.php - Extensions
  • users.php - Utilisateurs
  • tools.php - Outils
  • options-general.php - Réglages

Pour cacher les entrées inutiles de votre menu du panneau de gestion, il existe une seconde méthode. Celle-ci utilise la règle CSS display:none;. Cette manière de procéder est peut-être un petit peu moins propre que la précédente, mais elle offre une bien plus grande liberté. A noter que si un utilisateur entre le lien direct dans sa barre d’URL du menu caché, il pourra quand-même y accéder.

Passons au code. Dans functions.php, ajoutons les lignes suivantes :

add_action('admin_head', 'karac_css_dashboard');
function karac_css_dashboard() {
  echo '<style>
    #menu-appearance{
        display:none;
    }
  </style>';
}

Notre fonction karac_css_dashboard() permet d’écrire du CSS qui sera interprété au niveau du backend. A l’intérieur de celle-ci, nous avons ajouté une règle CSS qui cache l’élément ayant pour ID menu-appearence (qui correspond à l’entrée du menu Apparence). Libre à vous d’inspecter le menu de votre dashboard avec les outils fournis par votre navigateur pour obtenir les ID des entrées que vous désirez camoufler.

 

Rappel des fonctions WordPress importantes

  • register_nav_menus() : Permet de créer un emplacement dédié à un/des menu/s
  • wp_nav_menu() : Permet d’afficher un menu
  • home_url() : Permet d’obtenir l’URL de la page d’accueil
  • wp_login_url() : Permet d’obtenir l’URL de la page de login du dashboard

 

Catégories :
Tech web

Tags :
PHP Wordpress

Vous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !