{"id":229096,"date":"2022-10-28T16:57:00","date_gmt":"2022-10-28T13:57:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229096"},"modified":"2022-11-09T05:30:48","modified_gmt":"2022-11-09T02:30:48","slug":"manipulation-des-styles-de-barre-dadministration-wp-avec-des-evenements","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/manipulation-des-styles-de-barre-dadministration-wp-avec-des-evenements\/","title":{"rendered":"Manipulation des styles de barre d&rsquo;administration WP avec des \u00e9v\u00e9nements"},"content":{"rendered":"\n<p>J&rsquo;ai des sentiments mitig\u00e9s \u00e0 propos de la <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Admin_Bar\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barre d&rsquo;administration de WordPress<\/a>, mais cela a \u00e0 voir avec la fa\u00e7on dont les solutions tierces y ajoutent leurs options (de plus, elle peut \u00eatre d\u00e9sactiv\u00e9e si vous n&rsquo;en \u00eates pas un grand fan).<\/p>\n<p>R\u00e9cemment, j&rsquo;ai publi\u00e9 <a href=\"https:\/\/tommcfarlin.com\/wordpress-admin-notices\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">un petit plugin<\/a> &#8211; destin\u00e9 principalement aux d\u00e9veloppeurs &#8211; qui permet aux utilisateurs de basculer les avis d&rsquo;administration chaque fois qu&rsquo;ils travaillent avec WordPress (id\u00e9alement dans leur environnement local, bien qu&rsquo;il puisse \u00eatre install\u00e9 partout o\u00f9 WordPress est install\u00e9).<\/p>\n<p>Le plugin est simple :<\/p>\n<ul>\n<li>Il introduit un \u00e9l\u00e9ment dans la barre d&rsquo;administration WP,<\/li>\n<li>Lorsque vous cliquez sur un \u00e9l\u00e9ment, il basculera les avis ou les messages qui sont affich\u00e9s,<\/li>\n<li>Lorsque vous cliquez \u00e0 nouveau dessus, cela basculera leur visibilit\u00e9.<\/li>\n<\/ul>\n<p>Mais il y a une petite nuance qui, \u00e0 mon avis, m\u00e9rite d&rsquo;\u00eatre abord\u00e9e et qui concerne la manipulation des styles de barre d&rsquo;administration WP \u00e0 l&rsquo;aide de code c\u00f4t\u00e9 client.<\/p>\n<p>Tout cela est couvert dans le message initial, mais un aspect du code qui, \u00e0 mon avis, m\u00e9rite d&rsquo;\u00eatre partag\u00e9 pour ceux qui travaillent avec la barre d&rsquo;administration et ceux qui travaillent avec JavaScript.<\/p>\n<h2>Styles de barre d&rsquo;administration WP<\/h2>\n<p>Si vous regardez le code source du JavaScript qui est inclus avec le plugin, vous verrez <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a867844aeb9b32efbe3e38b43e19bb52\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ce qui suit<\/a> :<\/p>\n<pre><code>(function( $) {\n    'use strict';\n\n    \/**\n     * Hide all of the messages when the option is include and restore the menu items'\n     * default hover state style.\n     *\/\n    var hide_menu_notices = function() {\n\n        \/\/ Setup references to the plugin menu item and all admin notices.\n        var $admin_button = $( '#wp-admin-bar-toggle-admin-notices a' ),\n            $messages     = $( '.notice, .warning, .error' );\n\n        $admin_button.on( 'click', function( evt) {\n            evt.preventDefault();\n\n            $messages.toggle( 'medium' );\n            $( this ).trigger( 'blur' );\n        });\n    };\n\n    $(function() {\n    hide_admin_notices();\n    });\n})( jQuery );\n<\/code><\/pre>\n<p>De mani\u00e8re g\u00e9n\u00e9rale, chaque fois qu&rsquo;un utilisateur clique sur un \u00e9l\u00e9ment de la barre d&rsquo;administration WP, il le redirige vers une autre page [serveur] ou affiche un \u00e9l\u00e9ment de sous-menu qui fait la m\u00eame chose. Dans le cas de ce plugin, cependant, il fonctionne c\u00f4t\u00e9 client, donc tout est en JavaScript.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167472-61e7a43266814.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167472-61e7a43266814.png\" alt=\"Manipulation des styles de barre d&#039;administration WP avec des \u00e9v\u00e9nements\" ><\/a><\/p>\n<p>Cela signifie que nous devons \u00eatre conscients des \u00e9v\u00e9nements li\u00e9s \u00e0 l&rsquo;\u00e9l\u00e9ment afin de pouvoir les manipuler. Et c&rsquo;est le point auquel je veux en venir dans ce post.<\/p>\n<p>Bref:<\/p>\n<p>Les \u00e9l\u00e9ments de menu sont associ\u00e9s \u00e0 un \u00e9v\u00e9nement de flou qui nous permet de d\u00e9clencher afin que nous puissions manipuler les styles de la barre d&rsquo;administration WP.<\/p>\n<p>Certes, cela ne doit pas \u00eatre isol\u00e9 de la fonctionnalit\u00e9 c\u00f4t\u00e9 client, mais si vous souhaitez manipuler les styles de l&rsquo;\u00e9l\u00e9ment de menu lorsque vous passez la souris sur l&rsquo;\u00e9l\u00e9ment avant de charger une autre page, c&rsquo;est l&rsquo;\u00e9v\u00e9nement que vous souhaitez utiliser (\u00e0 du moins au moment o\u00f9 j&rsquo;\u00e9cris cet article).<\/p>\n<p>Si vous travaillez sur un plugin qui s&rsquo;int\u00e8gre \u00e0 la barre de menus et que vous souhaitez manipuler les styles de barre d&rsquo;administration WP avec JavaScript, l&rsquo;\u00e9v\u00e9nement de flou est celui que vous souhaitez utiliser chaque fois que votre \u00e9l\u00e9ment de barre de menu particulier d\u00e9clenche l&rsquo;\u00e9v\u00e9nement.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il y a une petite nuance qui, \u00e0 mon avis, m\u00e9rite d&rsquo;\u00eatre abord\u00e9e et qui concerne la manipulation des styles de barre d&rsquo;administration WP \u00e0 l&rsquo;aide de code c\u00f4t\u00e9 client.<\/p>\n","protected":false},"author":1,"featured_media":220825,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,717,728,748,862],"tags":[1167],"class_list":["post-229096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-javascript-3","category-open-source-projektmanagement-2","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=229096"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229096\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=229096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=229096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=229096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}