{"id":229247,"date":"2022-10-28T16:29:00","date_gmt":"2022-10-28T13:29:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229247"},"modified":"2022-11-09T06:08:20","modified_gmt":"2022-11-09T03:08:20","slug":"manipulando-estilos-da-barra-de-administracao-do-wp-com-eventos","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/manipulando-estilos-da-barra-de-administracao-do-wp-com-eventos\/","title":{"rendered":"Manipulando estilos da barra de administra\u00e7\u00e3o do WP com eventos"},"content":{"rendered":"\n<p>Eu tenho sentimentos mistos sobre a <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Admin_Bar\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra de administra\u00e7\u00e3o do WordPress<\/a>, mas isso tem a ver com a forma como as solu\u00e7\u00f5es de terceiros adicionam suas op\u00e7\u00f5es a ela (al\u00e9m disso, ela pode ser desabilitada se voc\u00ea n\u00e3o for um grande f\u00e3 dela).<\/p>\n<p>Recentemente, publiquei <a href=\"https:\/\/tommcfarlin.com\/wordpress-admin-notices\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">um pequeno plugin<\/a> \u2013 destinado principalmente a desenvolvedores \u2013 que permite que os usu\u00e1rios alternem os avisos do administrador sempre que estiverem trabalhando com o WordPress (de prefer\u00eancia em seu ambiente local, embora possa ser instalado em qualquer lugar onde o WordPress esteja instalado).<\/p>\n<p>O plug-in \u00e9 simples:<\/p>\n<ul>\n<li>Ele introduz um item na barra de administra\u00e7\u00e3o do WP,<\/li>\n<li>Quando voc\u00ea clica em um item, ele alterna quaisquer avisos ou mensagens que s\u00e3o exibidos,<\/li>\n<li>Quando voc\u00ea clicar nele novamente, ele alternar\u00e1 sua visibilidade.<\/li>\n<\/ul>\n<p>Mas h\u00e1 uma pequena nuance que acho que vale a pena cobrir e que tem a ver com a manipula\u00e7\u00e3o dos estilos da barra de administra\u00e7\u00e3o do WP usando o c\u00f3digo do lado do cliente.<\/p>\n<p>Tudo isso \u00e9 abordado no post inicial, mas um aspecto do c\u00f3digo que acho que vale a pena compartilhar para aqueles que trabalham com a barra de administra\u00e7\u00e3o e aqueles que trabalham com JavaScript.<\/p>\n<h2>Estilos da barra de administra\u00e7\u00e3o do WP<\/h2>\n<p>Se voc\u00ea der uma olhada no c\u00f3digo-fonte do JavaScript inclu\u00eddo no plug-in, ver\u00e1 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a867844aeb9b32efbe3e38b43e19bb52\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">o seguinte<\/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 um modo geral, sempre que um usu\u00e1rio clicar em um item na WP Admin Bar, ele ir\u00e1 redirecion\u00e1-lo para outra p\u00e1gina [servidor] ou exibir\u00e1 um item de submenu que faz o mesmo. No caso deste plugin, por\u00e9m, ele funciona no lado do cliente, ent\u00e3o \u00e9 tudo 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=\"Manipulando estilos da barra de administra\u00e7\u00e3o do WP com eventos\" ><\/a><\/p>\n<p>Isso significa que temos que estar cientes dos eventos que est\u00e3o vinculados ao item para que possamos manipul\u00e1-los. E \u00e9 nesse ponto que quero chegar neste post.<\/p>\n<p>Resumidamente:<\/p>\n<p>Os itens de menu t\u00eam um evento de desfoque anexado a eles que nos permite acionar para que possamos manipular os estilos da barra de administra\u00e7\u00e3o do WP.<\/p>\n<p>Concedido, isso n\u00e3o precisa ser isolado para a funcionalidade do lado do cliente, mas se voc\u00ea quiser manipular os estilos do item de menu ao passar o mouse sobre o item antes de carregar outra p\u00e1gina, este \u00e9 o evento que voc\u00ea deseja usar (em pelo menos no momento de escrever este post).<\/p>\n<p>Se voc\u00ea est\u00e1 trabalhando em um plug-in que se integra \u00e0 barra de menus e deseja manipular os estilos da barra de administra\u00e7\u00e3o do WP com JavaScript, o evento blur \u00e9 aquele que voc\u00ea deseja usar sempre que seu item espec\u00edfico da barra de menus acionar o evento.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>H\u00e1 uma pequena nuance que acho que vale a pena cobrir e que tem a ver com a manipula\u00e7\u00e3o dos estilos da barra de administra\u00e7\u00e3o do WP usando o c\u00f3digo do lado do cliente.<\/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":[898,753,722,733,920,867],"tags":[1170],"class_list":["post-229247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-codigo-aberto","category-desenvolvedor","category-javascript-8","category-outro","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=229247"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229247\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=229247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=229247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=229247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}