{"id":228812,"date":"2022-10-28T16:30:00","date_gmt":"2022-10-28T13:30:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228812"},"modified":"2022-11-09T04:22:09","modified_gmt":"2022-11-09T01:22:09","slug":"manipulacion-de-estilos-de-la-barra-de-administracion-de-wp-con-eventos","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/manipulacion-de-estilos-de-la-barra-de-administracion-de-wp-con-eventos\/","title":{"rendered":"Manipulaci\u00f3n de estilos de la barra de administraci\u00f3n de WP con eventos"},"content":{"rendered":"\n<p>Tengo sentimientos encontrados sobre la <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Admin_Bar\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra de administraci\u00f3n de WordPress<\/a>, pero eso tiene que ver con la forma en que las soluciones de terceros le agregan sus opciones (adem\u00e1s, se puede deshabilitar si no eres un gran admirador de ella).<\/p>\n<p>Recientemente, publiqu\u00e9 <a href=\"https:\/\/tommcfarlin.com\/wordpress-admin-notices\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">un peque\u00f1o complemento<\/a>, destinado principalmente a desarrolladores, que permite a los usuarios alternar los avisos de administraci\u00f3n cada vez que trabajan con WordPress (idealmente en su entorno local, aunque se puede instalar en cualquier lugar donde est\u00e9 instalado WordPress).<\/p>\n<p>El complemento es simple:<\/p>\n<ul>\n<li>Introduce un elemento en la barra de administraci\u00f3n de WP,<\/li>\n<li>Cuando hace clic en un elemento, cambiar\u00e1 cualquier aviso o mensaje que se muestre,<\/li>\n<li>Cuando vuelva a hacer clic en \u00e9l, cambiar\u00e1 su visibilidad.<\/li>\n<\/ul>\n<p>Pero hay un peque\u00f1o matiz que creo que vale la pena cubrir y que tiene que ver con la manipulaci\u00f3n de los estilos de la barra de administraci\u00f3n de WP usando el c\u00f3digo del lado del cliente.<\/p>\n<p>Todo esto est\u00e1 cubierto en la publicaci\u00f3n inicial, pero hay un aspecto del c\u00f3digo que creo que vale la pena compartir para aquellos que trabajan con la barra de administraci\u00f3n y aquellos que trabajan con JavaScript.<\/p>\n<h2>Estilos de la barra de administraci\u00f3n de WP<\/h2>\n<p>Si observa el c\u00f3digo fuente del JavaScript que se incluye con el complemento, ver\u00e1 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a867844aeb9b32efbe3e38b43e19bb52\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lo siguiente<\/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>En t\u00e9rminos generales, cada vez que un usuario hace clic en un elemento en la barra de administraci\u00f3n de WP, lo redirigir\u00e1 a otra p\u00e1gina [servidor] o mostrar\u00e1 un elemento de submen\u00fa que hace lo mismo. Sin embargo, en el caso de este complemento, funciona en el lado del cliente, por lo que todo es 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=\"Manipulaci\u00f3n de estilos de la barra de administraci\u00f3n de WP con eventos\" ><\/a><\/p>\n<p>Esto significa que tenemos que ser conscientes de los eventos que est\u00e1n vinculados al elemento para que podamos manipularlos. Y ese es el punto al que quiero llegar en este post.<\/p>\n<p>En breve:<\/p>\n<p>Los elementos del men\u00fa tienen un evento de desenfoque adjunto que nos permite activarlos para que podamos manipular los estilos de la barra de administraci\u00f3n de WP.<\/p>\n<p>Por supuesto, esto no tiene que estar aislado de la funcionalidad del lado del cliente, pero si desea manipular los estilos del elemento del men\u00fa al pasar el mouse sobre el elemento antes de cargar otra p\u00e1gina, este es el evento que desea usar (en menos en el momento de escribir este post).<\/p>\n<p>Si est\u00e1 trabajando en un complemento que se integra con la barra de men\u00fa y desea manipular los estilos de la barra de administraci\u00f3n de WP con JavaScript, el evento de desenfoque es el que desea usar cada vez que su elemento particular de la barra de men\u00fa active el evento.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hay un peque\u00f1o matiz que creo que vale la pena cubrir y que tiene que ver con la manipulaci\u00f3n de los estilos de la barra de administraci\u00f3n de WP usando el c\u00f3digo del lado del 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":[892,716,747,727,914,861],"tags":[1172],"class_list":["post-228812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-fuente-abierta","category-javascript-2","category-otro","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=228812"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228812\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}