Cet article est pour vous qui g\u00e9rez un site WordPress qui a beaucoup de contenu, \u00e9ventuellement de nombreuses pages structur\u00e9es en hi\u00e9rarchie, et souhaitez une meilleure navigation en dehors du menu principal. Afin d’aider \u00e0 naviguer sur le site, un menu personnalis\u00e9 li\u00e9 \u00e0 la publication actuelle vous aidera \u00e9norm\u00e9ment. Le probl\u00e8me avec le placement d’un widget de menu dans la barre lat\u00e9rale (ou o\u00f9 vous voulez) est que la barre lat\u00e9rale est commune. Dans cet article, nous apprendrons comment afficher un menu personnalis\u00e9 suppl\u00e9mentaire dans la barre lat\u00e9rale, en autorisant les articles, les pages ou les types d’articles personnalis\u00e9s \u00e0 choisir un menu.<\/p>\n
Ajoutez le code ci-dessous dans votre th\u00e8me La cr\u00e9ation de menus dans WordPress est simple et vous pouvez utiliser le widget Menu pour afficher un menu dans la barre lat\u00e9rale. Le probl\u00e8me est que la barre lat\u00e9rale est globale et le m\u00eame menu sera affich\u00e9 partout. Que faire si vous souhaitez que des menus sp\u00e9cifiques soient affich\u00e9s sur des pages sp\u00e9cifiques\u00a0? Vous apprendrez \u00e9galement comment vous assurer que le menu choisi est h\u00e9rit\u00e9 par les pages enfants. De cette fa\u00e7on, il vous suffit de s\u00e9lectionner le menu sur la page parent. Toutes les sous-pages afficheront \u00e9galement le m\u00eame menu sans qu’il soit n\u00e9cessaire de toutes les modifier.<\/p>\n La premi\u00e8re \u00e9tape consiste \u00e0 cr\u00e9er une m\u00e9tabox sur les articles ou les pages o\u00f9 nous avons la possibilit\u00e9 de choisir un menu. Nous utilisons la fonction Ajustez le code ci-dessus au titre et aux types de publication que vous souhaitez. L’exemple ci-dessus ajoutera la m\u00e9tabox aux publications et aux pages. Le troisi\u00e8me param\u00e8tre, que j’ai appel\u00e9 Nous pouvons obtenir un tableau avec tous les menus enregistr\u00e9s dans WordPress avec Dans la sortie HTML, j’imprime une \u00e9tiquette. S’il n’y a aucun menu enregistr\u00e9 dans WordPress, il affichera simplement un paragraphe. Sinon, une s\u00e9lection est g\u00e9n\u00e9r\u00e9e avec les ID de menu comme valeurs et les noms de menu comme \u00e9tiquette. J’ajoute \u00e9galement un choix vide pour permettre aux publications de ne pas afficher de menu. J’utilise la fonction d’assistance de WordPress Si vous modifiez un article ou une page, vous devriez voir la m\u00e9tabox appara\u00eetre en bas, indiquant votre s\u00e9lection. Impressionnant! Cependant, \u00e0 ce stade, votre choix de menu ne sera pas enregistr\u00e9 lorsque vous enregistrerez la publication. C’est la prochaine \u00e9tape.<\/p>\n Nous utilisons le crochet D\u00e9sormais, lorsque vous mettez \u00e0 jour les publications, votre choix de menu sera \u00e9galement enregistr\u00e9.<\/p>\n Et c’est tout pour la partie choix de poste. L’\u00e9tape suivante consiste en fait \u00e0 afficher le menu si un menu a \u00e9t\u00e9 s\u00e9lectionn\u00e9.<\/p>\n J’ajoute la sortie dans la barre lat\u00e9rale, mais vous pouvez la sortir n’importe o\u00f9 dans les mod\u00e8les de votre th\u00e8me. Nous avons juste besoin d’un crochet pr\u00e9d\u00e9fini ou de d\u00e9finir le n\u00f4tre. \u00c0 titre d’exemple, j’ajoute un crochet personnalis\u00e9 en haut de la barre lat\u00e9rale, afin que je puisse cr\u00e9er une fonction accroch\u00e9e \u00e0 cela.<\/p>\n Vous pouvez simplement appeler Dans mon th\u00e8me, j’\u00e9dite functions.php<\/code>ou dans le code de votre plugin.<\/p>\nAutoriser les publications ou les pages \u00e0 choisir un menu<\/h2>\n
Ajout d’une m\u00e9tabox pour choisir le menu<\/h3>\n
add_meta_box()<\/code>et d\u00e9cidons pour quels types de publication nous voulons l’afficher.<\/p>\nadd_action('add_meta_boxes', function() {\n add_meta_box('metabox-sidebar-menu', __('Sidebar Menu', 'txtdomain'), 'awp_sidebar_menu_metabox_callback', ['post', 'page']);\n});<\/code><\/pre>\nawp_sidebar_menu_metabox_callback<\/code>, est la fonction responsable du rendu du contenu de la m\u00e9tabox. D\u00e9finissons cela ensuite. Voici ce que nous devrons faire dans notre metabox\u00a0:<\/p>\nfunction awp_sidebar_menu_metabox_callback($post) {\n \/\/ Get all menus\n\u00a0\n \/\/ Get the current saved menu, if set\n\u00a0\n \/\/ Output HTML with a select showing all menus, and mark the currently saved one as selected\n}<\/code><\/pre>\nwp_get_nav_menus()<\/code>. En ce qui concerne la r\u00e9cup\u00e9ration du menu actuel choisi, nous stockons le menu choisi en tant que post-m\u00e9ta dans awp_sidebar_menu<\/code>(appelez-le comme vous le souhaitez), et nous allons simplement r\u00e9cup\u00e9rer la valeur en fonction du courant $post<\/code>qui 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\u00e9lection qui parcourt les menus. La sortie HTML de la m\u00e9tabox d\u00e9pend vraiment de vous, ci-dessous est un exemple. J’ai \u00e9galement inclus une fonctionnalit\u00e9 nonce pour la s\u00e9curit\u00e9.<\/p>\nfunction awp_sidebar_menu_metabox_callback($post) {\n \/\/ Get all menus\n $menus = wp_get_nav_menus();\n\u00a0\n \/\/ Get the current saved menu, if set\n $current_selected = get_post_meta($post->ID, 'awp_sidebar_menu', true);\n\u00a0\n \/\/ Output HTML with a select showing all menus, and mark the currently saved one as selected\n wp_nonce_field('awp_sidebar_menu_metabox_nonce', 'awp_sidebar_menu_nonce');\n ?><div class=\"awp-metabox-item\">\n <div class=\"awp-metabox-label\"><label><?php _e('Choose menu', 'txtdomain'); ?><\/label><\/div>\n <div class=\"awp-metabox-input\"><?php\n if (empty($menus)) {\n echo '<p>'. __('No menus created.', 'txtdomain'). '<\/p>';\n } else { ?>\n <select name=\"awp-sidebar-menu\" id=\"awp-sidebar-menu\">\n <?php \n echo '<option value=\"\">'. __('Choose menu', 'txtdomain'). '<\/option>';\n foreach ($menus as $menu) { \n echo '<option value=\"'. $menu->term_id. '\" '.selected($current_selected, $menu->term_id).'>'.$menu->name.'<\/option>';\n } ?>\n <\/select>\n <?php } ?>\n <\/div>\n <\/div><?php\n}<\/code><\/pre>\n[selected](https:\/\/developer.wordpress.org\/reference\/functions\/selected\/)()<\/code>pour g\u00e9rer le marquage de l’option enregistr\u00e9e actuelle comme s\u00e9lectionn\u00e9e.<\/p>\nEnregistrement du choix de menu<\/h3>\n
save_post<\/code>pour cr\u00e9er une fonction qui enregistre tout choix que nous avons ajout\u00e9 dans notre m\u00e9tabox. Le save_post<\/code>crochet est d\u00e9clench\u00e9 chaque fois qu’un article est enregistr\u00e9 ou mis \u00e0 jour. Nous allons d’abord v\u00e9rifier les nonces (si vous n’\u00eates pas s\u00fbr de ce que sont les nonces, consultez ce guide WordPress sur les nonces<\/a> ). Nous v\u00e9rifions ensuite si l’utilisateur est autoris\u00e9 \u00e0 mettre \u00e0 jour les publications et mettons \u00e0 jour notre m\u00e9ta de publication avec le choix.<\/p>\nadd_action('save_post', function($post_id) {\n if (!isset($_POST['awp_sidebar_menu_nonce']) || !wp_verify_nonce($_POST['awp_sidebar_menu_nonce'], 'awp_sidebar_menu_metabox_nonce')) {\n return;\n }\n\u00a0\n if (!current_user_can('edit_post', $post_id)) {\n return;\n }\n\u00a0\n update_post_meta($post_id, 'awp_sidebar_menu', $_POST['awp-sidebar-menu']);\n});<\/code><\/pre>\nChoisir une position pour le menu personnalis\u00e9<\/h3>\n
wp_nav_menu()<\/code>directement dans le mod\u00e8le, mais je vous recommande plut\u00f4t de cr\u00e9er un crochet personnalis\u00e9 car nous ajouterons pas mal de code et cela peut sembler compliqu\u00e9.<\/p>\nsidebar.php<\/code>et juste avant dynamic_sidebar()<\/code>avec la barre lat\u00e9rale est appel\u00e9e (o\u00f9 les widgets sont ajout\u00e9s), j’ajoute mon crochet personnalis\u00e9 avec do_action()<\/code>et un nom donn\u00e9. Vous pouvez l’appeler comme vous le souhaitez, mais il doit \u00eatre unique dans WordPress. Alors au moins pr\u00e9fixez-le avec quelque chose d’unique pour vous.<\/p>\n<aside class=\"sidebar\">\n <?php \n do_action('awp_before_sidebar');\n dynamic_sidebar('left-sidebar'); \n ?>\n<\/aside><\/code><\/pre>\nRendu du menu<\/h3>\n