Tutoriel WordPress : Menu personnalisé pour les publications ou les pages dans la barre latérale
Cet article est pour vous qui gérez un site WordPress qui a beaucoup de contenu, éventuellement de nombreuses pages structurées en hiérarchie, et souhaitez une meilleure navigation en dehors du menu principal. Afin d’aider à naviguer sur le site, un menu personnalisé lié à la publication actuelle vous aidera énormément. Le problème avec le placement d’un widget de menu dans la barre latérale (ou où vous voulez) est que la barre latérale est commune. Dans cet article, nous apprendrons comment afficher un menu personnalisé supplémentaire dans la barre latérale, en autorisant les articles, les pages ou les types d’articles personnalisés à choisir un menu.
Ajoutez le code ci-dessous dans votre thème functions.phpou dans le code de votre plugin.
La création de menus dans WordPress est simple et vous pouvez utiliser le widget Menu pour afficher un menu dans la barre latérale. Le problème est que la barre latérale est globale et le même menu sera affiché partout. Que faire si vous souhaitez que des menus spécifiques soient affichés sur des pages spécifiques ? Vous apprendrez également comment vous assurer que le menu choisi est hérité par les pages enfants. De cette façon, il vous suffit de sélectionner le menu sur la page parent. Toutes les sous-pages afficheront également le même menu sans qu’il soit nécessaire de toutes les modifier.
La première étape consiste à créer une métabox sur les articles ou les pages où nous avons la possibilité de choisir un menu. Nous utilisons la fonction add_meta_box()et décidons pour quels types de publication nous voulons l’afficher.
add_action('add_meta_boxes', function() {
add_meta_box('metabox-sidebar-menu', __('Sidebar Menu', 'txtdomain'), 'awp_sidebar_menu_metabox_callback', ['post', 'page']);
});Ajustez le code ci-dessus au titre et aux types de publication que vous souhaitez. L’exemple ci-dessus ajoutera la métabox aux publications et aux pages. Le troisième paramètre, que j’ai appelé awp_sidebar_menu_metabox_callback, est la fonction responsable du rendu du contenu de la métabox. Définissons cela ensuite. Voici ce que nous devrons faire dans notre metabox :
function awp_sidebar_menu_metabox_callback($post) {
// Get all menus
// Get the current saved menu, if set
// Output HTML with a select showing all menus, and mark the currently saved one as selected
}Nous pouvons obtenir un tableau avec tous les menus enregistrés dans WordPress avec wp_get_nav_menus(). En ce qui concerne la récupération du menu actuel choisi, nous stockons le menu choisi en tant que post-méta dans awp_sidebar_menu(appelez-le comme vous le souhaitez), et nous allons simplement récupérer la valeur en fonction du courant $postqui nous est fourni dans la fonction metabox. Nous enregistrerons les identifiants de menu car c’est tout ce dont nous avons besoin pour afficher un menu. Et puis nous produisons du HTML pour une sélection qui parcourt les menus. La sortie HTML de la métabox dépend vraiment de vous, ci-dessous est un exemple. J’ai également inclus une fonctionnalité nonce pour la sécurité.
function awp_sidebar_menu_metabox_callback($post) {
// Get all menus
$menus = wp_get_nav_menus();
// Get the current saved menu, if set
$current_selected = get_post_meta($post->ID, 'awp_sidebar_menu', true);
// Output HTML with a select showing all menus, and mark the currently saved one as selected
wp_nonce_field('awp_sidebar_menu_metabox_nonce', 'awp_sidebar_menu_nonce');
?><div class="awp-metabox-item">
<div class="awp-metabox-label"><label><?php _e('Choose menu', 'txtdomain'); ?></label></div>
<div class="awp-metabox-input"><?php
if (empty($menus)) {
echo '<p>'. __('No menus created.', 'txtdomain'). '</p>';
} else { ?>
<select name="awp-sidebar-menu" id="awp-sidebar-menu">
<?php
echo '<option value="">'. __('Choose menu', 'txtdomain'). '</option>';
foreach ($menus as $menu) {
echo '<option value="'. $menu->term_id. '" '.selected($current_selected, $menu->term_id).'>'.$menu->name.'</option>';
} ?>
</select>
<?php } ?>
</div>
</div><?php
}Dans la sortie HTML, j’imprime une étiquette. S’il n’y a aucun menu enregistré dans WordPress, il affichera simplement un paragraphe. Sinon, une sélection est générée avec les ID de menu comme valeurs et les noms de menu comme étiquette. J’ajoute également un choix vide pour permettre aux publications de ne pas afficher de menu. J’utilise la fonction d’assistance de WordPress [selected](https://developer.wordpress.org/reference/functions/selected/)()pour gérer le marquage de l’option enregistrée actuelle comme sélectionnée.
Si vous modifiez un article ou une page, vous devriez voir la métabox apparaître en bas, indiquant votre sélection. Impressionnant! Cependant, à ce stade, votre choix de menu ne sera pas enregistré lorsque vous enregistrerez la publication. C’est la prochaine étape.
Nous utilisons le crochet save_postpour créer une fonction qui enregistre tout choix que nous avons ajouté dans notre métabox. Le save_postcrochet est déclenché chaque fois qu’un article est enregistré ou mis à jour. Nous allons d’abord vérifier les nonces (si vous n’êtes pas sûr de ce que sont les nonces, consultez ce guide WordPress sur les nonces ). Nous vérifions ensuite si l’utilisateur est autorisé à mettre à jour les publications et mettons à jour notre méta de publication avec le choix.
add_action('save_post', function($post_id) {
if (!isset($_POST['awp_sidebar_menu_nonce']) || !wp_verify_nonce($_POST['awp_sidebar_menu_nonce'], 'awp_sidebar_menu_metabox_nonce')) {
return;
}
if (!current_user_can('edit_post', $post_id)) {
return;
}
update_post_meta($post_id, 'awp_sidebar_menu', $_POST['awp-sidebar-menu']);
});Désormais, lorsque vous mettez à jour les publications, votre choix de menu sera également enregistré.
Et c’est tout pour la partie choix de poste. L’étape suivante consiste en fait à afficher le menu si un menu a été sélectionné.
J’ajoute la sortie dans la barre latérale, mais vous pouvez la sortir n’importe où dans les modèles de votre thème. Nous avons juste besoin d’un crochet prédéfini ou de définir le nôtre. À titre d’exemple, j’ajoute un crochet personnalisé en haut de la barre latérale, afin que je puisse créer une fonction accrochée à cela.
Vous pouvez simplement appeler wp_nav_menu()directement dans le modèle, mais je vous recommande plutôt de créer un crochet personnalisé car nous ajouterons pas mal de code et cela peut sembler compliqué.
Dans mon thème, j’édite sidebar.phpet juste avant dynamic_sidebar()avec la barre latérale est appelée (où les widgets sont ajoutés), j’ajoute mon crochet personnalisé avec do_action()et un nom donné. Vous pouvez l’appeler comme vous le souhaitez, mais il doit être unique dans WordPress. Alors au moins préfixez-le avec quelque chose d’unique pour vous.
<aside class="sidebar">
<?php
do_action('awp_before_sidebar');
dynamic_sidebar('left-sidebar');
?>
</aside>Maintenant, nous pouvons revenir à functions.php, définir une fonction accrochée à awp_before_sidebaret sa sortie sera affichée dans la barre latérale avant les widgets. La fonction utilisera les balises conditionnelles WordPress pour vérifier si nous affichons actuellement ou non un seul article ou une seule page. Et si c’est le cas, je vais chercher notre post méta. Si la post-méta a été définie, nous publions le menu en appelant [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()et en fournissant l’ID de menu enregistré comme menuparamètre.
add_action('awp_before_sidebar', function() {
if (is_singular()) {
global $post;
$sidebar_menu = get_post_meta($post->ID, 'awp_sidebar_menu', true);
}
if (!empty($sidebar_menu)) {
?><section class="widget awp-sidebar-menu">
<?php wp_nav_menu(['menu' => $sidebar_menu]); ?>
</section><?php
}
});Vous devez ajuster le code HTML autour du menu pour l’adapter au reste du contenu. Dans le code ci-dessus, j’enveloppe le menu dans le même code HTML que tous les widgets de la barre latérale, de sorte que le style de widget du thème s’applique à notre menu personnalisé.
C’est ça! Chaque fois que vous choisissez un menu dans un article ou une page, le menu s’affichera au-dessus de la barre latérale lors de l’affichage de cet article ou de cette page.
Nous pouvons cependant aller plus loin. Si vous souhaitez que les pages enfants affichent le même menu de barre latérale défini dans l’un des parents, lisez la suite.
Cette fonctionnalité supplémentaire a du sens si vous avez beaucoup de pages dans une hiérarchie ou un type de publication personnalisé avec une hiérarchie activée. Il serait trop fastidieux de modifier chaque page enfant et de choisir le même menu. Dans ce cas, il serait préférable de choisir le menu sur la page parente et de laisser automatiquement toutes les sous-pages "hériter" de ce choix de menu. Si une sous-page choisit un autre menu, ce menu sera affiché à la place de "hérité" une fois.
À l’intérieur de notre fonction accrochée à awp_before_sidebar, nous ajouterons un morceau de code, à l’intérieur de la vérification si nous visualisons un seul article ou une seule page :
...
$sidebar_menu = get_post_meta($post->ID, 'awp_sidebar_menu', true);
if (!empty($sidebar_menu)) {
$parents = get_post_ancestors($post->ID);
if (!empty($parents)) {
// go step by step up the parents tree
for ($i = 0; $i < count($parents); $i++) {
$sidebar_menu = get_post_meta($post->ID, 'awp_sidebar_menu', true);
if (!empty($sidebar_menu)) {
break;
}
}
}
}
}
if (!empty($sidebar_menu)) {
...Ce que fait le code ci-dessus si aucun menu n’a été trouvé sur la page actuelle récupère tous les parents avec [get_post_ancestors](https://developer.wordpress.org/reference/functions/get_post_ancestors/)(). Cette fonction renvoie un tableau d’ID de publication parent triés par le parent le plus proche en premier. Si la page n’a pas de parents (par exemple s’il s’agit d’un article), un tableau vide est renvoyé. Et s’il y a des parents, nous parcourons chaque parent un par un et vérifions s’ils ont défini notre méta post. Si un a été trouvé, nous interrompons la traversée des parents et $sidebar_menunous le définissons et le menu sera affiché plus tard avec wp_nav_menu().
Et voilà pour la fonctionnalité «héritage» !