Un site web WordPress ne serait pas grand-chose sans ses menus et ses sous-menus. La personnalisation de ces menus à votre convenance à partir de WordPress est également très simple. En tant que tel, votre menu WordPress est un outil de premier ordre pour obtenir un bon classement dans les moteurs de recherche et garder les visiteurs sur le site.
Les écrans dédiés au sein de WordPress démentent la complexité de vos menus. Vous êtes également en mesure d’afficher des menus dans plusieurs endroits sur votre site. Si vous avez les compétences en code, vous pouvez personnaliser votre menu WordPress avec des possibilités presque infinies.
Pour cet article, nous allons vous donner un guide approfondi de la création d’un menu WordPress. Nous allons également vous montrer comment prendre la fonctionnalité et l’améliorer de quelques façons différentes.
L’anatomie d’un menu WordPress
Pour les non-initiés, un menu WordPress est souvent une collection de liens (y compris des listes déroulantes). Il s’agit d’une fonctionnalité simple qui n’est qu’une « vertèbre » dans la colonne vertébrale de votre site web.
Nous verrons plus en détail dans la section suivante où vous verrez les menus sur un site web. Pour l’instant, sachez qu’ils peuvent s’insérer partout où vous souhaitez les afficher. Il se peut que vous n’ayez que quelques options pré-sélectionnées (en fonction des zones de widgets). D’un point de vue technique, cependant, un menu peut aller n’importe où.
Bien sûr, un menu WordPress est primordial pour la navigation sur un site web. Si vous disposez d’un menu de navigation clair et défini, cela aidera les utilisateurs à se déplacer sur votre site, et cela permettra de réduire votre taux de rebond.
Ils ont également un autre objectif : Vos menus contribuent à votre optimisation pour les moteurs de recherche (SEO). L’optimisation d’un menu WordPress pour le SEO dépend davantage de ce qu’il faut laisser de côté que de ce qu’il faut intégrer. Pour commencer, vous pouvez supprimer certains éléments – comme les nuages d’étiquettes – et limiter le nombre de liens que vous incluez.
Bien que Google vous autorise à ajouter jusqu’à 250 liens sur une page, il est essentiel de conserver une « valeur de lien » élevée. À ce titre, réduire le nombre de liens externes vous sera bénéfique à long terme.
Les différents types de structures de menu WordPress
Comme vous l’avez peut-être déjà compris, en fonction des besoins de votre application, vous pouvez opter pour différentes structures de menu WordPress.
Les menus d’en-tête, par exemple, sont les plus courants car ils traitent de la navigation principale du site. Vous verrez aussi souvent des menus plus petits au-dessus de la navigation principale, car il s’agit d’un excellent emplacement pour les icônes de réseaux sociaux, les barres de recherche, etc.
Le site web du partenaire Kinsta SAU/CAL dispose d’un menu « fly-in » qui comprend la navigation et les liens sociaux :
Ce menu montre qu’il existe d’autres cas d’utilisation d’un menu WordPress que la navigation d’un site. En utilisant les fonctionnalités intégrées de WordPress (nous y reviendrons plus tard), vous pouvez créer un menu pour presque tout ce dont vous avez besoin.
Le pied de page est tout aussi populaire que la navigation d’en-tête. Vous utiliserez souvent cette zone pour répéter votre navigation principale pour les utilisateurs qui font défiler le site vers le bas. C’est également un excellent endroit pour proposer des liens plus contextuels pour vos produits et services :
Vous verrez également des menus dans une colonne latérale si le site l’utilise :
Bien que la navigation principale ne soit pas souvent présente ici, c’est un endroit traditionnel pour les liens sociaux, les archives des articles de blog et bien d’autres choses encore.
Comment créer un menu WordPress personnalisé (3 méthodes)
La création d’un menu WordPress est un processus simple, quel que soit votre niveau d’expertise. Il y a trois façons principales de faire le travail : utiliser la fonctionnalité intégrée de WordPress, installer une extension adaptée ou mettre les mains dans le cambouis avec du code.
Ensuite, nous allons vous montrer comment créer un menu WordPress en utilisant ces trois approches.
1. Utilisez la fonctionnalité intégrée de WordPress pour créer votre menu
WordPress dispose d’outils intégrés pour vous aider à créer un menu. Un écran dédié dans l’administration de WordPress sera familier à tous, sauf aux utilisateurs les plus récents.
Bien sûr, l’utilisation de la fonctionnalité native pour créer votre menu WordPress présente de nombreux avantages. Pour commencer, vous bénéficiez d’une compatibilité totale avec votre site. De plus, vous pouvez créer vos menus en utilisant une interface familière et des outils natifs.
Pour y parvenir, rendez-vous sur la page Apparence > Menus de WordPress :
Cet écran se divise en plusieurs sections différentes. En haut, vous trouverez l’option de sélectionner un menu actuel ou d’en créer un nouveau :
Si vous décidez de créer un nouveau menu, donnez-lui un nom et consultez la section Réglages du menu :
Il y a beaucoup de cases à cocher ici, mais vous avez deux décisions principales à prendre :
- Ajouter automatiquement les pages de premier niveau au menu. Le terme « premier niveau » désigne ici les pages que vous créez dans WordPress et qui ne sont pas des pages enfants d’autres pages. Par exemple, un article de blog n’est pas une page de premier niveau parce qu’il aura une page d’archives parente dans de nombreux cas (par exemple /blog). D’un autre côté, une page de contact est souvent une page de premier niveau car elle n’a généralement pas de page parente.
- L’emplacement du menu. Chaque thème a ses propres emplacements de menu. À moins que vous ne modifiiez les fichiers du cœur de votre thème, les développeurs du thème ont codé en dur ces emplacements de menu. Certains thèmes peuvent vous permettre de les personnaliser par le biais de leurs réglages.
Une fois que vous êtes prêt, cliquez sur le bouton Créer un menu. L’écran se rafraîchit et indique que vous vous trouvez dans votre nouveau menu. Ensuite, jetez un coup d’œil à la partie gauche de l’écran :
Cet écran liste tous les articles, pages, taxonomies et autres ressources pouvant être liées sur votre site. Vous construisez votre menu en cochant les cases sur la gauche, puis en cliquant sur le bouton Ajouter au menu.
Cela les déplacera vers la section centrale de l’écran Menus :
Ici, vous pouvez faire glisser et déposer les éléments de menu en place. Si vous cliquez sur la flèche d’expansion située à côté de chaque élément, vous pouvez également définir un libellé pour votre élément de menu ou le supprimer :
Une fois que vous avez cliqué sur Enregistrer le menu, vous êtes prêt à commencer. Si vous développez le menu Options d’écran en haut de l’écran, vous pouvez faire plus avec votre menu WordPress :
Le groupe Éléments de l’écran vous permet d’afficher les boîtes méta de menu dans la colonne latérale de gauche. En revanche, le groupe Afficher les propriétés avancées du menu permet d’afficher les cibles des liens, les descriptions et les classes CSS des éléments de la liste.
Il y a un autre aspect de l’écran Menus qui mérite d’être souligné. La case Liens personnalisés vous permet de définir un lien de votre choix, plutôt qu’une page prédéfinie de votre site :
Cette option vous permet d’ajouter des liens vers des réseaux sociaux à votre menu WordPress. La plateforme récupérera l’icône correcte pour vous en fonction du site que vous sélectionnez, vous donnant la possibilité d’avoir des logos bien affichés pour les sites que vous choisissez.
2. Utiliser une extension pour créer votre menu WordPress personnalisé
La solution immédiate pour ajouter des fonctionnalités à WordPress est de recourir aux extensions. La section précédente a expliqué pourquoi l’option native de WordPress est presque tout ce dont vous avez besoin, mais les extensions peuvent étendre cette fonctionnalité.
La question se pose de savoir si vous avez besoin d’une extension dédiée (et supplémentaire) pour créer un menu WordPress, bien qu’il y ait de nombreuses bonnes raisons de le faire. Pour commencer, vous allez souvent créer un menu basé sur un style auquel vous ne pouvez pas accéder avec la configuration par défaut. Des designs réactifs spécifiques, des « méga-menus » et bien d’autres choses encore sont disponibles grâce aux extension.
De plus, vous pouvez créer des menus en utilisant un éditeur dédié et choisir parmi des modèles prédéfinis dans de nombreux cas. Associé à des options de personnalisation étendues, vous disposez d’une solution « sans code » qui fournira un menu WordPress qui fonctionne à votre site.
Par exemple, l’extension Max MegaMenu n’offre aucune surprise dans ce que vous pouvez réaliser :
Une fois qu’elle est installée et activée, vous trouverez un nouveau panneau Mega Menu dans WordPress :
Si vous regardez l’écran « Emplacements du menu », vous remarquerez qu’il y a plus de personnalisations disponibles pour vous :
Vous pouvez également appliquer des thèmes de menu et les modifier avec une portée similaire à celle de certains des meilleurs constructeurs de pages du marché :
Nous pourrions en dire beaucoup plus ici, mais nous risquerions de nous répéter. Nous vous encourageons à consulter notre précédent article sur les extension WordPress de menu. Nous y expliquons en détail comment choisir la bonne extension et comment l’utiliser.
3. Écrire le code pour créer votre menu WordPress personnalisé
Coder votre propre menu WordPress est un moyen fiable d’atteindre votre objectif pour les courageux (ou si vous êtes un développeur créant un nouveau thème WordPress). Bien sûr, vous n’allez pas ouvrir un éditeur de code au jour le jour pour ajouter un menu. Pour cela, vous utiliserez les outils natifs de WordPress (ou peut-être une extension).
Cela dit, apprendre à coder un menu WordPress est une condition essentielle si vous souhaitez développer des thèmes. Il y a quatre parties pour réussir :
- Enregistrez votre menu.
- Affichez le menu WordPress sur l’interface publique.
- Affichez du contenu supplémentaire dans votre menu ou ses éléments.
- Définir un callback.
Nous supposerons que vous êtes à l’aise avec un éditeur de code, que vous disposez d’un environnement de développement pour travailler et que vos compétences sont aiguisées. Si vous n’avez pas encore de thème avec lequel travailler, vous pouvez utiliser les options par défaut de WordPress ou en choisir un dans notre liste des thèmes WordPressles plus rapides.
Lorsque vous êtes prêt, vous devez ouvrir le fichier functions.php du thème. Notez que ce fichier est différent du fichier WordPress général du même nom. Ici, vous devez enregistrer votre menu. En d’autres termes, vous devez indiquer à WordPress ce qu’il doit afficher sur la page Apparence > Menus. Pour ce faire, vous utilisez la fonction register_nav_menus() :
function register_my_menus() {
register_nav_menus(
array(
'header' => __( 'Header Menu' ),
other' => __( 'Autre menu' )
)
) ;
}
add_action( 'init', 'register_my_menus' );
Ce code indique à l’onglet Gérer les emplacements de WordPress d’afficher deux menus : le Header Menu et Other Menu :
Ensuite, vous devez afficher votre menu à l’aide de la fonction wp_nav_menu(). Vous devez ajouter cette fonction dans le fichier de modèle qui correspond à l’endroit où vous souhaitez afficher le menu. Dans notre cas, il s’agit de l’en-tête, nous allons donc ajouter le code suivant au fichier header.php de notre thème :
wp_nav_menu( array( 'theme_location' => 'header' ) );Il se peut que ce code soit enveloppé dans une instruction if, tout comme certains de vos autres menus, et vous devrez donc respecter les conventions que vous trouverez.
À ce stade, vous pouvez travailler avec le menu de WordPress comme n’importe quel autre. Cependant, vous pouvez également envisager d’ajouter du contenu supplémentaire à vos éléments de menu. Par exemple, vous pouvez étendre le tableau défini pour inclure des balises HTML qui seront rendues à la sortie :
wp_nav_menu(
array(
'menu' => 'primary',
'link_before' => '',
'link_after' => '',
)
);
Votre dernière tâche ici est de définir un callback. Par défaut, WordPress affiche un menu rempli lorsque le menu spécifié n’est pas trouvé. Comme alternative, WordPress affichera un menu de pages quand aucun menu personnalisé n’est sélectionné. Si ce n’est pas l’action que vous souhaitez, vous pouvez définir un paramètre différent pour l’argument theme-location et ajouter également un argument fallback_cb :
wp_nav_menu(
array(
'menu' => 'primary',
// do not fall back to first non-empty menu
'theme_location' => '__no_such_location',
// do not fall back to wp_page_menu()
'fallback_cb' => false
)
);Une fois que vous avez compris comment créer un menu WordPress, vous pouvez commencer à améliorer ses fonctionnalités. Nous verrons cela dans notre dernière section pour créer une boîte méta de menu personnalisée pour WordPress.
Comment améliorer votre menu WordPress
Comme cette section est avancée, nous allons faire quelques hypothèses avant de continuer :
- Vous savez comment créer un menu WordPress à l’aide de PHP.
- Vos compétences en PHP sont suffisantes pour suivre certains sujets avancés.
- Vous savez comment enregistrer et initialiser une extension WordPress.
Cela dépasse le cadre de cet article, mais vous pouvez utiliser WordPress Plugin Boilerplate Generator pour créer un nouveau modèle d’extension standardisé.
Lorsque vous êtes prêt, créez et téléversez votre extension sur WordPress :
Ensuite, naviguez dans le dossier de l’extension et ouvrez le fichier principal. Ici, ajoutez le code suivant :
/**
* Add menu meta box
*
* @param object $object The meta box object
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*/
function custom_add_menu_meta_box( $object ) {
add_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );
return $object;
}
add_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);La fonction WordPress add_meta_box() permet d’enregistrer une boîte méta dans l’administration de WordPress. Il y a quelques arguments que vous voudrez référencer dans la documentation officielle. Nous utilisons également le filtre nav_menu_meta_box_object() parce qu’il n’y a pas d’action dans le fichier nav-menus.php. Cette instruction détermine si la fonction ajoute la boîte méta d’un élément de menu pour un type d’objet. Lorsque le filtre s’exécute, add_meta_box enregistre la boîte méta personnalisée.
Définition d’une fonction de rappel
Ensuite, nous pouvons définir une fonction de rappel (callback) pour produire le contenu HTML de la boîte méta :
/**
* Displays a metabox for an author menu item.
*
* @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu
*/
function custom_menu_meta_box(){
global $nav_menu_selected_id;
$walker = new Walker_Nav_Menu_Checklist();
...
}La variable globale se souvient de l’ID du menu actuel, tandis que $walker stocke une nouvelle instance de l’objet Walker_Nav_Menu_Checklist. Cela va permettre de construire la liste HTML des éléments du menu.
À partir de là, nous devons déterminer l’onglet actif dans la boîte méta personnalisée. Pour cela, nous définissons la valeur de $current_tab, en respectant les points de suspension définis dans le bloc de code précédent.
Nous utilisons ici deux onglets, mais vous pouvez en ajouter autant que vous le souhaitez :
$current_tab = 'all';
if ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'admins';
} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'all';
}La ligne suivante récupère tous les utilisateurs ayant des droits d’écriture et ajoute de nombreuses propriétés à l’objet $authors :
$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) ) ;
$admins = array() ;
/* Set values to required irem properties */
foreach ( $authors as &$author ) {
$author->classes = array() ;
$author->type = 'custom' ;
$author->object_id = $author->nickname ;
$author->title = $author->nickname . ' - ' . implode(', ', $author->roles) ;
$author->objet = 'custom' ;
$author->url = get_author_posts_url( $author->ID )
$author->attr_title = $author->displayname ;
if( $author->has_cap( 'edit_users' ){
$admins[] = $author ;
}
}
$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' ) ;
?>
Ici, get_users retourne un tableau d’objets $user sélectionnés par les paramètres spécifiés. Le paramètre who forcera WordPress à interroger la base de données pour les utilisateurs qui ont des droits d’écriture.
En outre, le tableau $admins stockera un tableau d’auteurs, tandis que $removed_args stockera une liste de variables de requête à supprimer.
Vous pouvez maintenant imprimer les balises de la boîte méta. Pour cela, construisons les libellés d’onglet et les liens.
<div id="authorarchive" class="categorydiv">
<ul id="authorarchive-tabs" class="authorarchive-tabs add-menu-item-tabs">
<li <?php echo ('all' == $current_tab ? ' class="tabs"' : '') ; ?>>
<a class="nav-tab-link" data-type="tabs-panel-authorarchive-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'all', remove_query_arg( $removed_args ) ) ) ; ?>#tabs-panel-authorarchive-all">
<?php _e( 'View All' ) ; ?>
</a>
</li>
<li <?php echo ('admins' == $current_tab ? ' class="tabs"' : '') ; ?>>
<a class="nav-tab-link" data-type="tabs-panel-authorarchive-admins" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'admins', remove_query_arg( $removed_args ) ) ) ; ?>#tabs-panel-authorarchive-admins">
<?php _e( 'Admins' ) ; ?>
</a>
</li>
</ul>N’oubliez pas d’attribuer les noms de classe, les ID et les attributs de données corrects aux éléments de la boîte méta, sinon le menu ne fonctionnera pas comme prévu.
Les fonctions add_query_arg et remove_query_arg définissent des valeurs spécifiques aux onglets pour la variable authorarchive-tabs et suppriment les variables inutiles.
À ce stade, nous avons une boîte méta avec des onglets définis :
L’étape suivante consiste à construire le contenu HTML des onglets.
Création du contenu HTML pour les onglets de la boîte méta
Vous voudrez suivre le code de la section précédente dans la fonction custom_menu_meta_box(). Pour construire le contenu, utilisez ce qui suit dans la balise <div> que vous avez écrite dans la dernière section :
<div id="tabs-panel-authorarchive-all" class="tabs-panel tabs-panel-view-all <?php echo ('all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive') ; ?>">
<ul id="authorarchive-checklist-all" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $authors), 0, (object) array( 'walker' => $walker) ) ;
?>
</ul>
</div>
<div id="tabs-panel-authorarchive-admins" class="tabs-panel tabs-panel-view-admins <?php echo ('admins' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ) ; ?>">
<ul id="authorarchive-checklist-admins" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $admins), 0, (object) array( 'walker' => $walker) ) ;
?>
</ul>
</div>En bref, chaque onglet contient une liste de cases à cocher. La fonction walk_nav_menu_tree() affiche la liste en utilisant trois arguments : $items, $depth, et $r – tous obligatoires.
Le tableau $items stocke un tableau d’utilisateurs administrateurs. La fonction array_map() applique la fonction wp_setup_nav_menu_item() à $admins et ajoute les propriétés des éléments de menu aux éléments du tableau.
À partir de là, nous pouvons ajouter les touches finales.
Ajout d’un bouton d’envoi
La majeure partie de la boîte méta personnalisée est terminée, bien que nous devions encore ajouter un bouton d’envoi et une icône de traitement « spinner ».
Voici un court morceau de code que vous pouvez placer directement après le bloc précédent :
<p class="button-controls wp-clearfix">
<span class="list-controls">
<a href="<?php echo esc_url( add_query_arg( array( 'authorarchive-tab' => 'all', 'selectall' => 1, ), remove_query_arg( $removed_args ) ) ; ?>#authorarchive" class="select-all"><?php _e('Select All') ; ?></a>
</span>
<span class="add-to-menu">
<input type="submit"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ) ; ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e('Add to Menu') ; ?>" name="add-authorarchive-menu-item" id="submit-authorarchive" />
<span class="spinner"></span>
</span>
</p>
</div>
<?php
}
Avec ces connaissances, vous pouvez ajouter presque n’importe quelle fonctionnalité à vos menus ! Notez qu’il y a également un Gist public de l’extension sur GitHub qui peut être téléchargé gratuitement.
Résumé
Un menu WordPress est un aspect crucial de votre site. Pour cette raison, la plateforme offre un panneau natif et puissant qui vous permettra de personnaliser chaque menu de votre site. Cependant, il ne fournira pas tout ce dont vous avez besoin par défaut.
Plusieurs options d’écran vous permettent d’ajouter des balises CSS, entre autres. De même, l’installation d’une extension vous permettra de transformer vos menus natifs en méga-menus et de travailler avec des fonctionnalités améliorées pour rendre le vôtre plus responsive (entre autres). Le codage est également une possibilité, et bien que ce soit une tâche difficile pour un codeur novice, c’est quelque chose que vous pouvez mettre en place en l’espace d’un après-midi.
Voulez-vous personnaliser votre menu WordPress, et si oui, quelle approche allez-vous adopter ? Partagez vos pensées et opinions dans la section des commentaires ci-dessous !
Salman Ravoof est un développeur web autodidacte, un écrivain, un créateur et un grand admirateur des logiciels libres. Outre la technologie, il est passionné par la science, la philosophie, la photographie, les arts, les chats et la nourriture. Apprenez-en plus sur son site web, et connectez-vous avec Salman sur X.
Laisser un commentaire