{"id":640,"date":"2023-11-30T15:15:25","date_gmt":"2023-11-30T15:15:25","guid":{"rendered":"https:\/\/www.dafap.fr\/blog\/?p=640"},"modified":"2023-11-30T15:18:42","modified_gmt":"2023-11-30T15:18:42","slug":"personnaliser-la-barre-de-menu-de-wordpress","status":"publish","type":"post","link":"https:\/\/www.dafap.fr\/blog\/howto\/personnaliser-la-barre-de-menu-de-wordpress","title":{"rendered":"Personnaliser la barre de menu de WordPress"},"content":{"rendered":"\n<p>Lorsqu'un utilisateur s'est identifi\u00e9, une barre de menu apparait en haut de son \u00e9cran, comme le montre la capture d'\u00e9cran ci-dessous :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-barre-de-menu-initial.png\"><img loading=\"lazy\" decoding=\"async\" width=\"971\" height=\"160\" src=\"https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-barre-de-menu-initial.png\" alt=\"Barre menu de WordPress\" class=\"wp-image-642 colorbox-640\" srcset=\"https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-barre-de-menu-initial.png 971w, https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-barre-de-menu-initial-300x49.png 300w, https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-barre-de-menu-initial-768x127.png 768w, https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-barre-de-menu-initial-624x103.png 624w\" sizes=\"auto, (max-width: 971px) 100vw, 971px\" \/><\/a><figcaption class=\"wp-element-caption\">Barre menu de WordPress pour un utilisateur identifi\u00e9.<\/figcaption><\/figure>\n\n\n\n<p>Comme on le voit, il y a un menu \u00e0 3 options :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>TEST TEST (nom de l'utilisateur) donne acc\u00e8s \u00e0 sa page de profil<\/li>\n\n\n\n<li>Modifier le profil donne aussi acc\u00e8s \u00e0 sa page de profil<\/li>\n\n\n\n<li>Se d\u00e9connecter<\/li>\n<\/ul>\n\n\n\n<p>L'acc\u00e8s \u00e0 le page de profil de l'utilisateur est redondante. Mais ce n'est pas le seul inconv\u00e9nient : la page de profil va permettre d'acc\u00e9der au Tableau de bord.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-profil-initial.png\"><img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"206\" src=\"https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-profil-initial.png\" alt=\"Page de profil d'un utilisateur\" class=\"wp-image-643 colorbox-640\" srcset=\"https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-profil-initial.png 970w, https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-profil-initial-300x64.png 300w, https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-profil-initial-768x163.png 768w, https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-profil-initial-624x133.png 624w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/><\/a><figcaption class=\"wp-element-caption\">Page de profil d'un utilisateur. Sur la gauche, un lien permet d'acc\u00e9der au Tableau de bord.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-tableau-de-bord.png\"><img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"185\" src=\"https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-tableau-de-bord.png\" alt=\"Tableau de bord\" class=\"wp-image-644 colorbox-640\" srcset=\"https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-tableau-de-bord.png 970w, https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-tableau-de-bord-300x57.png 300w, https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-tableau-de-bord-768x146.png 768w, https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-tableau-de-bord-624x119.png 624w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/><\/a><figcaption class=\"wp-element-caption\">Tableau de bord pour un utilisateur identifi\u00e9.<\/figcaption><\/figure>\n\n\n\n<p>Ces acc\u00e8s sont \u00e0 la fois inutiles et d\u00e9routants. Il serait pr\u00e9f\u00e9rable de permettre la modification du profil en utilisant une page personnalis\u00e9e, par exemple la page \"<em>Mettre \u00e0 jour son profil<\/em>\" ayant pour adresse <code>https:\/\/monsite.fr\/profil<\/code> .<\/p>\n\n\n\n<p>La modification propos\u00e9e va le permettre et on obtiendra la barre de menu ci-dessous :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-barre-de-menu-final.png\"><img loading=\"lazy\" decoding=\"async\" width=\"971\" height=\"116\" src=\"https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-barre-de-menu-final.png\" alt=\"Barre de menu modifi\u00e9e\" class=\"wp-image-641 colorbox-640\" srcset=\"https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-barre-de-menu-final.png 971w, https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-barre-de-menu-final-300x36.png 300w, https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-barre-de-menu-final-768x92.png 768w, https:\/\/www.dafap.fr\/blog\/wp-content\/uploads\/2023\/11\/wordpress-barre-de-menu-final-624x75.png 624w\" sizes=\"auto, (max-width: 971px) 100vw, 971px\" \/><\/a><figcaption class=\"wp-element-caption\">Barre de menu modifi\u00e9e<\/figcaption><\/figure>\n\n\n\n<p>Ceci est possible en personnalisant le th\u00e8me utilis\u00e9.<\/p>\n\n\n\n<p>On va, dans le th\u00e8me customis\u00e9, ouvrir le fichier <code>functions.php<\/code> et on ajoute les lignes suivantes :<\/p>\n\n\n\n<p>add_action( 'admin_bar_menu', 'modify_admin_bar' );<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function modify_admin_bar( $wp_admin_bar ){\n  $user_info = $wp_admin_bar->get_node('user-info');\n  \/\/ supprime l'option TEST TEST inutile\n  if ($user_info) {\n    $wp_admin_bar->remove_node('user-info');\n  }\n  \/\/ r\u00e9cup\u00e8re l'appel de la page Modifier le profil\n  $edit_profile = $wp_admin_bar->get_node('edit-profile');\n  if ($edit_profile) {\n    \/\/ remplace cet appel par la nouvelle page\n    $wp_admin_bar->remove_node('edit-profile');\n    $wp_admin_bar->add_menu([\n        'id' => $edit_profile->id, \n        'title' => $edit_profile->title, \n        'parent' => $edit_profile->parent, \n        'href' => 'https:\/\/monsite.fr\/profil', \n        'group' => $edit_profile->group, \n        'meta' => $edit_profile->meta]);\n  }\n  \/\/ r\u00e9cup\u00e8re l'\u00e9l\u00e9ment \"Bonjour TEST TEST\"\n  $my_account = $wp_admin_bar->get_node('my-account');\n  if ($my_account) {\n   \/\/ remplace cet \u00e9l\u00e9ment par le m\u00eame sans lien\n    $wp_admin_bar->remove_node('my-account');\n    $wp_admin_bar->add_menu([\n        'id' => $my_account->id, \n        'title' => $my_account->title, \n        'parent' => $my_account->parent, \n        'href' => '',\n        'group' => $my_account->group, \n        'meta' => $my_account->meta]);\n  }\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Lorsqu&rsquo;un utilisateur s&rsquo;est identifi\u00e9, une barre de menu apparait en haut de son \u00e9cran, comme le montre la capture d&rsquo;\u00e9cran ci-dessous : Comme on le voit, il y a un menu \u00e0 3 options : L&rsquo;acc\u00e8s \u00e0 le page de profil de l&rsquo;utilisateur est redondante. Mais ce n&rsquo;est pas le seul inconv\u00e9nient : la page [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41,47],"tags":[],"class_list":["post-640","post","type-post","status-publish","format-standard","hentry","category-howto","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.dafap.fr\/blog\/wp-json\/wp\/v2\/posts\/640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dafap.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dafap.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dafap.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dafap.fr\/blog\/wp-json\/wp\/v2\/comments?post=640"}],"version-history":[{"count":2,"href":"https:\/\/www.dafap.fr\/blog\/wp-json\/wp\/v2\/posts\/640\/revisions"}],"predecessor-version":[{"id":647,"href":"https:\/\/www.dafap.fr\/blog\/wp-json\/wp\/v2\/posts\/640\/revisions\/647"}],"wp:attachment":[{"href":"https:\/\/www.dafap.fr\/blog\/wp-json\/wp\/v2\/media?parent=640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dafap.fr\/blog\/wp-json\/wp\/v2\/categories?post=640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dafap.fr\/blog\/wp-json\/wp\/v2\/tags?post=640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}