{"id":228609,"date":"2022-10-28T16:28:00","date_gmt":"2022-10-28T13:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228609"},"modified":"2022-11-09T03:15:15","modified_gmt":"2022-11-09T00:15:15","slug":"manipulowanie-stylami-paska-administracyjnego-wp-za-pomoca-zdarzen","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/manipulowanie-stylami-paska-administracyjnego-wp-za-pomoca-zdarzen\/","title":{"rendered":"Manipulowanie stylami paska administracyjnego WP za pomoc\u0105 zdarze\u0144"},"content":{"rendered":"\n<p>Mam mieszane uczucia co do <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Admin_Bar\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">paska administracyjnego WordPressa<\/a>, ale ma to zwi\u0105zek z tym, jak rozwi\u0105zania innych firm dodaj\u0105 do niego swoje opcje (plus, mo\u017cna go wy\u0142\u0105czy\u0107, je\u015bli nie jeste\u015b jego wielkim fanem).<\/p>\n<p>Niedawno opublikowa\u0142em <a href=\"https:\/\/tommcfarlin.com\/wordpress-admin-notices\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ma\u0142\u0105 wtyczk\u0119<\/a> \u2013 przeznaczon\u0105 g\u0142\u00f3wnie dla programist\u00f3w \u2013 kt\u00f3ra pozwala u\u017cytkownikom prze\u0142\u0105cza\u0107 powiadomienia administratora za ka\u017cdym razem, gdy pracuj\u0105 z WordPressem (najlepiej w ich lokalnym \u015brodowisku, cho\u0107 mo\u017cna go zainstalowa\u0107 w dowolnym miejscu, w kt\u00f3rym jest zainstalowany WordPress).<\/p>\n<p>Wtyczka jest prosta:<\/p>\n<ul>\n<li>Wprowadza element do paska administracyjnego WP,<\/li>\n<li>Klikni\u0119cie elementu spowoduje prze\u0142\u0105czenie wszystkich wy\u015bwietlanych powiadomie\u0144 lub wiadomo\u015bci,<\/li>\n<li>Gdy ponownie go klikniesz, prze\u0142\u0105czy ich widoczno\u015b\u0107.<\/li>\n<\/ul>\n<p>Ale jest ma\u0142y niuans, kt\u00f3ry moim zdaniem jest wart om\u00f3wienia i ma to zwi\u0105zek z manipulowaniem stylami paska administracyjnego WP za pomoc\u0105 kodu po stronie klienta.<\/p>\n<p>Wszystko to zosta\u0142o om\u00f3wione w pocz\u0105tkowym po\u015bcie, ale jeden aspekt kodu, kt\u00f3ry moim zdaniem jest wart udost\u0119pnienia osobom pracuj\u0105cym z paskiem administracyjnym i pracuj\u0105cym z JavaScript.<\/p>\n<h2>Style paska administracyjnego WP<\/h2>\n<p>Je\u015bli spojrzysz na kod \u017ar\u00f3d\u0142owy JavaScript, kt\u00f3ry jest do\u0142\u0105czony do wtyczki, zobaczysz <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a867844aeb9b32efbe3e38b43e19bb52\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">:<\/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>Og\u00f3lnie rzecz bior\u0105c, za ka\u017cdym razem, gdy u\u017cytkownik kliknie element na pasku administracyjnym WP, przekieruje go na inn\u0105 stron\u0119 [serwera] lub wy\u015bwietli element podmenu, kt\u00f3ry robi to samo. Jednak w przypadku tej wtyczki dzia\u0142a ona po stronie klienta, wi\u0119c wszystko to jest 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=\"Manipulowanie stylami paska administracyjnego WP za pomoc\u0105 zdarze\u0144\" ><\/a><\/p>\n<p>Oznacza to, \u017ce musimy by\u0107 \u015bwiadomi wydarze\u0144 zwi\u0105zanych z przedmiotem, aby m\u00f3c nimi manipulowa\u0107. I do tego w\u0142a\u015bnie zmierzam w tym po\u015bcie.<\/p>\n<p>W skr\u00f3cie:<\/p>\n<p>Pozycje menu maj\u0105 do\u0142\u0105czone zdarzenie rozmycia, kt\u00f3re pozwala nam wyzwala\u0107, aby\u015bmy mogli manipulowa\u0107 stylami paska administracyjnego WP.<\/p>\n<p>To prawda, nie musi to by\u0107 izolowane od funkcji po stronie klienta, ale je\u015bli chcesz manipulowa\u0107 stylami elementu menu po najechaniu kursorem myszy na element przed za\u0142adowaniem kolejnej strony, to jest to zdarzenie, kt\u00f3rego chcesz u\u017cy\u0107 (w przynajmniej w momencie pisania tego posta).<\/p>\n<p>Je\u015bli pracujesz nad wtyczk\u0105, kt\u00f3ra integruje si\u0119 z paskiem menu i chcesz manipulowa\u0107 stylami paska administracyjnego WP za pomoc\u0105 JavaScript, zdarzenie rozmycia jest tym, kt\u00f3rego chcesz u\u017cy\u0107, gdy konkretny element paska menu wyzwala zdarzenie.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jest ma\u0142y niuans, kt\u00f3ry moim zdaniem jest wart om\u00f3wienia i ma to zwi\u0105zek z manipulowaniem stylami paska administracyjnego WP za pomoc\u0105 kodu po stronie klienta.<\/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":[721,919,732,897,752,866],"tags":[1169],"class_list":["post-228609","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-inny","category-javascript-7","category-kod","category-otwarte-zrodlo","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228609"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228609\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}