{"id":228545,"date":"2022-10-28T16:09:00","date_gmt":"2022-10-28T13:09:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228545"},"modified":"2022-11-09T02:56:51","modified_gmt":"2022-11-08T23:56:51","slug":"manipulera-wp-admin-bar-styles-med-events","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/manipulera-wp-admin-bar-styles-med-events\/","title":{"rendered":"Manipulera WP Admin Bar Styles med Events"},"content":{"rendered":"<p>Jag har blandade k\u00e4nslor om <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Admin_Bar\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress admin bar<\/a>, men det har att g\u00f6ra med hur tredjepartsl\u00f6sningar l\u00e4gger till sina alternativ till den (pluss att den kan inaktiveras om du inte \u00e4r ett stort fan av det).<\/p>\n<p>Nyligen publicerade jag <a href=\"https:\/\/tommcfarlin.com\/wordpress-admin-notices\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ett litet plugin<\/a> \u2013 fr\u00e4mst avsett f\u00f6r utvecklare \u2013 som l\u00e5ter anv\u00e4ndare v\u00e4xla adminmeddelanden n\u00e4r de arbetar med WordPress (helst i sin lokala milj\u00f6, \u00e4ven om det kan installeras var som helst WordPress \u00e4r installerat).<\/p>\n<p>Insticksprogrammet \u00e4r enkelt:<\/p>\n<ul>\n<li>Det introducerar ett objekt i WP admin bar,<\/li>\n<li>N\u00e4r du klickar p\u00e5 ett objekt v\u00e4xlar det alla meddelanden eller meddelanden som visas,<\/li>\n<li>N\u00e4r du klickar p\u00e5 den igen kommer den att v\u00e4xla deras synlighet.<\/li>\n<\/ul>\n<p>Men det finns en liten nyans som jag tycker \u00e4r v\u00e4rd att t\u00e4cka och som har att g\u00f6ra med att manipulera WP-administrat\u00f6rsf\u00e4ltstilarna med kod p\u00e5 klientsidan.<\/p>\n<p>Allt detta tas upp i det f\u00f6rsta inl\u00e4gget, men en aspekt av koden som jag tycker \u00e4r v\u00e4rd att dela f\u00f6r de som arbetar med admin-f\u00e4ltet och de som arbetar med JavaScript.<\/p>\n<h2>WP Admin Bar Styles<\/h2>\n<p>Om du tittar p\u00e5 k\u00e4llkoden f\u00f6r JavaScript som ing\u00e5r i plugin-programmet, ser du <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a867844aeb9b32efbe3e38b43e19bb52\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">f\u00f6ljande<\/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>Generellt sett, n\u00e4r en anv\u00e4ndare klickar p\u00e5 ett objekt i WP Admin Bar, kommer den att omdirigera dem till en annan [server]-sida eller visar ett undermenyobjekt som g\u00f6r detsamma. I fallet med detta plugin fungerar det dock p\u00e5 klientsidan, s\u00e5 allt \u00e4r 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=\"Manipulera WP Admin Bar Styles med Events\" ><\/a><\/p>\n<p>Detta inneb\u00e4r att vi m\u00e5ste vara medvetna om de h\u00e4ndelser som \u00e4r bundna till f\u00f6rem\u00e5let s\u00e5 att vi kan manipulera dem. Och det \u00e4r det jag kommer fram till i det h\u00e4r inl\u00e4gget.<\/p>\n<p>Kortfattat:<\/p>\n<p>Menyalternativ har en osk\u00e4rpa h\u00e4ndelse kopplad till dem som g\u00f6r att vi kan trigga s\u00e5 att vi kan manipulera WP admin bar stilar.<\/p>\n<p>Visst, detta beh\u00f6ver inte vara isolerat till klientsidans funktionalitet, men om du vill manipulera menyobjektets stilar n\u00e4r du h\u00e5ller musen \u00f6ver objektet innan du laddar en annan sida, \u00e4r detta h\u00e4ndelsen du vill anv\u00e4nda (p\u00e5 \u00e5tminstone n\u00e4r jag skriver detta inl\u00e4gg).<\/p>\n<p>Om du arbetar med ett plugin som integreras med menyraden och du vill manipulera WP admin bar stilar med JavaScript, \u00e4r osk\u00e4rpa h\u00e4ndelsen den du vill anv\u00e4nda n\u00e4r ditt s\u00e4rskilda menyradsobjekt utl\u00f6ser h\u00e4ndelsen.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Det finns en liten nyans som jag tycker \u00e4r v\u00e4rd att t\u00e4cka och som har att g\u00f6ra med att manipulera WP-administrat\u00f6rsf\u00e4ltstilarna med kod p\u00e5 klientsidan.<\/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":[734,901,755,922,724,868],"tags":[1173],"class_list":["post-228545","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-9","category-koda","category-oeppen-kaella","category-oevrig","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228545"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228545\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}