{"id":244680,"date":"2022-04-03T16:55:00","date_gmt":"2022-04-03T13:55:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=244680"},"modified":"2022-05-16T12:35:25","modified_gmt":"2022-05-16T09:35:25","slug":"najlatwiejszy-sposob-na-dodanie-kodu-javascript-do-witryny-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/najlatwiejszy-sposob-na-dodanie-kodu-javascript-do-witryny-wordpress\/","title":{"rendered":"Naj\u0142atwiejszy spos\u00f3b na dodanie kodu JavaScript do witryny WordPress"},"content":{"rendered":"<p>Ciesz\u0119 si\u0119 \u017ce tu jeste\u015b.<\/p>\n<p>Je\u015bli nie jeste\u015b do\u015bwiadczonym programist\u0105 WordPress, dodanie JavaScript do swojej witryny mo\u017ce by\u0107 do\u015b\u0107 onie\u015bmielaj\u0105ce. Nawet gorzej\u2026<\/p>\n<p>Mo\u017cesz powa\u017cnie zepsu\u0107 swoj\u0105 stron\u0119, je\u015bli nie b\u0119dziesz ostro\u017cny.<\/p>\n<p>W tym samouczku poznasz najszybszy i najbezpieczniejszy spos\u00f3b dodawania nowego kodu JavaScript do witryny WordPress.<\/p>\n<h2>Dodaj nowy Javascript do WordPress<\/h2>\n<p>Zwykle dodajesz <a href=\"https:\/\/themewp.inform.click\/pl\/jak-dokonywac-dostosowan-za-pomoca-motywu-potomnego\/\" title=\"motyw podrz\u0119dny\">motyw podrz\u0119dny<\/a> lub wtyczk\u0119, kt\u00f3ra nast\u0119pnie \u0142aduje nowy plik JavaScript w Twojej witrynie.<\/p>\n<p>Jest to jednak du\u017co pracy, je\u015bli potrzebujesz tylko doda\u0107 jeden lub dwa fragmenty kodu JS. Naj\u0142atwiejszym rozwi\u0105zaniem jest u\u017cycie wtyczki <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Simple Custom CSS i JS<\/a>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179553-616f51a315e38.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179553-616f51a315e38.png\" alt=\"Naj\u0142atwiejszy spos\u00f3b na dodanie kodu JavaScript do witryny WordPress\"><\/a><\/p>\n<p>Zainstaluj i aktywuj t\u0119 wtyczk\u0119 w swojej witrynie, a zobaczysz nowy element niestandardowego menu CSS i JS dodany do pulpitu nawigacyjnego. Najed\u017a kursorem na nowy element menu i kliknij opcj\u0119 \u201eDodaj niestandardowy JS&quot;, \u200b\u200baby rozpocz\u0105\u0107 dodawanie kodu JavaScript.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179553-616f51a540dbd.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179553-616f51a540dbd.png\" alt=\"Naj\u0142atwiejszy spos\u00f3b na dodanie kodu JavaScript do witryny WordPress\"><\/a><\/p>\n<h3>Dodaj JavaScript<\/h3>\n<p>Na nast\u0119pnej stronie zobaczysz edytor kodu, w kt\u00f3rym mo\u017cesz wprowadzi\u0107 plik JS, kt\u00f3ry chcesz doda\u0107 do swojej witryny.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179553-616f51a702c67.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179553-616f51a702c67.png\" alt=\"Naj\u0142atwiejszy spos\u00f3b na dodanie kodu JavaScript do witryny WordPress\"><\/a><\/p>\n<p>Bardzo pomocne s\u0105 r\u00f3wnie\u017c komentarze w edytorze<\/p>\n<p>Nadaj swojemu JS tytu\u0142, aby \u0142atwo zapami\u0119ta\u0107, dlaczego go doda\u0142e\u015b, a nast\u0119pnie wprowad\u017a sw\u00f3j kod w edytorze poni\u017cej. Pami\u0119taj, aby najpierw usun\u0105\u0107 komentarze, poniewa\u017c nie musisz ich dodawa\u0107 do swojej witryny.<\/p>\n<h3>Przetestuj JavaScript<\/h3>\n<p>Je\u015bli chcesz si\u0119 upewni\u0107, \u017ce dzia\u0142a, mo\u017cesz doda\u0107 ten JS do swojej witryny:<\/p>\n<pre><code>jQuery(document).ready(function( $ ){\n    $('.logged-in').on('click', function(){\n        alert('The code is working!'); \n    });\n});<\/code><\/pre>\n<p>Oto jak b\u0119dzie wygl\u0105da\u0107 w edytorze.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179553-616f51a8bacaf.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179553-616f51a8bacaf.png\" alt=\"Naj\u0142atwiejszy spos\u00f3b na dodanie kodu JavaScript do witryny WordPress\"><\/a><\/p>\n<p>Wszystko, co robi ten kod, to wy\u015bwietlanie okna alertu po klikni\u0119ciu w dowolnym miejscu witryny, na przyk\u0142ad:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179553-616f51aad6245.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179553-616f51aad6245.png\" alt=\"Naj\u0142atwiejszy spos\u00f3b na dodanie kodu JavaScript do witryny WordPress\"><\/a><\/p>\n<p>Dotyczy tylko zalogowanych u\u017cytkownik\u00f3w, wi\u0119c nie b\u0119dzie przeszkadza\u0107 odwiedzaj\u0105cym, gdy dodasz go do testu.<\/p>\n<p>Gdy masz pewno\u015b\u0107, \u017ce dzia\u0142a, mo\u017cesz zamieni\u0107 fragment kodu testowego na prawdziwy JS, kt\u00f3ry chcesz doda\u0107 do swojej witryny.<\/p>\n<h3>Skonfiguruj opcje JS<\/h3>\n<p>Prosty niestandardowy CSS i JS zawiera kilka przydatnych opcji do decydowania o tym, w jaki spos\u00f3b Tw\u00f3j JavaScript zostanie dodany do witryny.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179553-616f51acc7b90.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179553-616f51acc7b90.png\" alt=\"Naj\u0142atwiejszy spos\u00f3b na dodanie kodu JavaScript do witryny WordPress\"><\/a><\/p>\n<p>Po pierwsze, je\u015bli dodajesz tylko troch\u0119 kodu, zachowaj typ linkowania jako \u201eWewn\u0119trzny&#8221;, co po prostu dodaje kod do strony. Jest to prostsze ni\u017c \u0142adowanie innego pliku i nie wp\u0142ywa na czas \u0142adowania witryny.<\/p>\n<p>Nast\u0119pnie, je\u015bli dodajesz skrypt analityczny, prawdopodobnie powiedz\u0105, czy powiniene\u015b doda\u0107 go do nag\u0142\u00f3wka lub stopki. W przeciwnym razie najlepiej jest domy\u015blnie u\u017cywa\u0107 stopki.<\/p>\n<p>Na koniec, je\u015bli Javascript ma wp\u0142ywa\u0107 na odwiedzaj\u0105cych, pozostaw zaznaczon\u0105 opcj\u0119 \u201eIn Frontend&#8221; dla ustawienia Gdzie w witrynie. Opcja \u201eW administratorze&#8221; dotyczy tylko sytuacji, gdy chcesz za\u0142adowa\u0107 JavaScript podczas przegl\u0105dania stron na pulpicie nawigacyjnym WP, i oczywi\u015bcie opcja \u201eNa stronie logowania&#8221; dotyczy tylko strony logowania cz\u0142onka.<\/p>\n<h2>Wniosek<\/h2>\n<p>Takie podej\u015bcie jest DU\u017bO \u0142atwiejsze ni\u017c tworzenie nowej wtyczki lub motywu potomnego.<\/p>\n<p>Nie wspominaj\u0105c o tym, \u017ce Simple Custom CSS i JS to niesamowita wtyczka i prawdopodobnie znajdziesz dla niej wi\u0119cej zastosowa\u0144 w przysz\u0142o\u015bci. Dost\u0119pna jest r\u00f3wnie\u017c wersja pro, kt\u00f3ra jest zdolna do imponuj\u0105cych dostosowa\u0144, je\u015bli potrzebujesz wi\u0119kszej elastyczno\u015bci.<\/p>\n<p>Je\u015bli masz pytania lub uwagi dotycz\u0105ce tego posta, zostaw komentarz poni\u017cej.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nie psuj swojej witryny! Post\u0119puj zgodnie z tym prostym samouczkiem, aby dowiedzie\u0107 si\u0119, jak naj\u0142atwiej i najbezpieczniej doda\u0107 JavaScript do swojej witryny WordPress.<\/p>\n","protected":false},"author":1,"featured_media":21627,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[572],"tags":[847],"class_list":["post-244680","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-podstawy-wordpressa","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/244680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/comments?post=244680"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/244680\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media\/21627"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media?parent=244680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/categories?post=244680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/tags?post=244680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}