Zaufane samouczki WordPress, kiedy ich najbardziej potrzebujesz.
Przewodnik dla początkujących po WordPressie
WPB Cup
25 milionów+
Witryny korzystające z naszych wtyczek
16+
Lata doświadczenia z WordPressem
3000+
Samouczki WordPress od ekspertów

Jak łatwo dodać JavaScript do stron lub wpisów w WordPress (2 metody)

Dodawanie JavaScript do stron lub postów WordPress może poprawić funkcjonalność i zaangażowanie użytkowników. Jednak WordPress domyślnie nie pozwala na bezpośrednie wstawianie JavaScript do treści.

Rozumiemy, że to ograniczenie może być frustrujące, zwłaszcza jeśli chcesz dostosować swoją witrynę za pomocą interaktywnych funkcji lub skryptów śledzących.

Na szczęście istnieją proste sposoby na dodanie JavaScript do Twojej witryny WordPress. Możesz zastosować go do konkretnych stron lub postów, a nawet do całej witryny. Co więcej, możesz użyć wtyczki do fragmentów kodu, takiej jak WPCode, tak jak my w WPBeginner, aby wszystko ułatwić.

W tym artykule przeprowadzimy Cię przez dwie proste metody implementacji JavaScript na stronach lub wpisach WordPress.

Jak łatwo dodać JavaScript do stron lub wpisów w WordPress (3 metody)

Czym jest JavaScript?

JavaScript to język programowania, który działa w przeglądarce użytkownika, a nie na Twoim serwerze. To programowanie po stronie klienta pozwala programistom robić wiele fajnych rzeczy bez spowalniania Twojej witryny.

Jeśli chcesz osadzić odtwarzacz wideo, dodać kalkulatory lub jakąkolwiek inną usługę strony trzeciej, często będziesz proszony o skopiowanie i wklejenie fragmentu kodu JavaScript do swojej witryny WordPress.

Typowy fragment kodu JavaScript może wyglądać tak:

<script type="text/javascript"> 
// Some JavaScript code
</script>

<!-- Another Example: --!>  
<script type="text/javascript" src="/path/to/some-script.js"></script>

Ale jeśli dodasz fragment kodu JavaScript do posta lub strony, WordPress usunie go, gdy spróbujesz go zapisać.

Mając to na uwadze, pokażemy Ci, jak łatwo dodać JavaScript do stron lub postów WordPress bez psucia Twojej witryny. Możesz użyć poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć.

Zacznijmy!

Metoda 1. Dodaj JavaScript w dowolnym miejscu na swojej stronie WordPress za pomocą WPCode (zalecane)

Czasami wtyczka lub narzędzie wymaga od Ciebie skopiowania i wklejenia fragmentu kodu JavaScript do Twojej witryny, aby działało poprawnie.

Zazwyczaj te skrypty trafiają do sekcji nagłówka lub stopki bloga WordPress, dzięki czemu kod jest ładowany przy każdym wyświetleniu strony.

Na przykład, gdy instalujesz Google Analytics, kod musi być uruchamiany na każdej stronie Twojej witryny, aby mógł śledzić odwiedzających.

Możesz ręcznie dodać kod do plików header.php lub footer.php, ale te zmiany zostaną nadpisane po zaktualizowaniu lub zmianie motywu.

Dlatego polecamy używać WPCode do dodawania JavaScript w dowolnym miejscu na całej stronie WordPress.

WPCode to najpotężniejszy dostępny wtyczka do fragmentów kodu dla WordPress. Pozwala łatwo dodawać niestandardowy kod do dowolnego obszaru Twojej witryny, a co najlepsze, jest darmowa.

Najpierw musisz zainstalować i aktywować darmową wtyczkę WPCode. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji musisz przejść do Fragmenty kodu » Nagłówki i stopka.

Tutaj zobaczysz trzy oddzielne pola oznaczone jako „Nagłówek”, „Treść” i „Stopka”.

Dodawanie fragmentów kodu nagłówka i stopki za pomocą WPCode

Możesz teraz dodać swój kod JavaScript do jednego z tych pól, a następnie po prostu kliknąć przycisk „Zapisz”. WPCode automatycznie załaduje dodany kod na każdej stronie Twojej witryny.

Możesz również dodawać fragmenty kodu w dowolnym innym miejscu na swojej stronie, na przykład w postach lub stronach.

Aby to zrobić, przejdź do Fragmenty kodu » + Dodaj fragment, a następnie kliknij „Utwórz własny”.

Stwórz własny fragment kodu za pomocą WPCode

Następnie wybierz „Fragment JavaScript” jako typ kodu z listy opcji, które pojawią się na ekranie.

Wybierz Fragment JavaScript jako typ kodu

Zobaczysz teraz stronę „Utwórz niestandardowy fragment”, na której możesz dodać tytuł dla swojego kodu. Może to być cokolwiek, co pomoże Ci zapamiętać, do czego służy kod.

Następnie wklej swój kod do pola „Podgląd kodu”.

Wprowadź fragment jQuery/JavaScript w WPCode

Następnie przewiń w dół, aż znajdziesz sekcję „Wstawianie”.

Teraz wystarczy wybrać „Lokalizację” dla kodu z menu rozwijanego. Znajdź „Strona, Post, Niestandardowy typ postu” i wybierz, gdzie chcesz, aby kod pojawił się na stronie lub w poście.

Wstaw fragment przed postem w WPCode

Jeśli zdecydujesz się na wstawienie fragmentu kodu przez WPCode przed lub po akapicie, będziesz mógł wybrać, przed lub po którym konkretnym akapicie w poście ma się on pojawić.

Na przykład, jeśli wpiszesz 1 w polu „Wstaw liczbę”, fragment kodu pojawi się przed lub po pierwszym akapicie. Użyj 2 dla drugiego akapitu i tak dalej.

Po tym wystarczy kliknąć przełącznik u góry ekranu, aby przełączyć się na „Aktywny”, a następnie kliknąć przycisk „Zapisz fragment” obok niego.

Aktywuj i zapisz fragment w WPCode

To wszystko, czego potrzeba, aby Twój fragment kodu był dostępny na stronie!

Metoda 2. Ręczne dodawanie kodu JavaScript do WordPress za pomocą kodu (zaawansowane)

Uwaga: Poniższe metody są przeznaczone dla początkujących i właścicieli stron internetowych. Jeśli uczysz się tworzenia motywów lub wtyczek WordPress, musisz prawidłowo dodawać JavaScript i arkusze stylów do swoich projektów.

Za pomocą tej metody musisz dodać kod do swoich plików WordPress. Jeśli nigdy tego nie robiłeś, zapoznaj się z naszym przewodnikiem jak kopiować i wklejać kod w WordPressie.

Najpierw pokażemy Ci, jak dodać kod do nagłówka Twojej witryny WordPress. Musisz skopiować poniższy kod i dodać go do swojego pliku functions.php.

function wpb_hook_javascript() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

Dodawanie JavaScript do konkretnego posta WordPress za pomocą kodu

Jeśli chcesz dodać JavaScript tylko do pojedynczego wpisu WordPress, będziesz musiał dodać logikę warunkową do kodu.

Spójrzmy najpierw na poniższy fragment kodu:

function wpb_hook_javascript() {
  if (is_single ('5')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

Powyższy kod uruchomi JavaScript tylko wtedy, gdy identyfikator posta będzie odpowiadał ’5’. Upewnij się, że zastąpisz ’5’ własnym identyfikatorem posta.

Aby znaleźć identyfikator posta, po prostu otwórz post, w którym chcesz uruchomić kod JavaScript. Następnie w adresie URL strony znajdziesz identyfikator posta.

Znajdź identyfikator posta WordPress

Dodawanie kodu JavaScript do konkretnej strony WordPress za pomocą kodu

Jeśli chcesz dodać JavaScript tylko do jednej strony WordPress, musisz dodać logikę warunkową do kodu, tak jak powyżej.

Spójrz na poniższy przykład:

function wpb_hook_javascript() {
  if (is_page ('10')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

Powyższy kod uruchomi JavaScript tylko wtedy, gdy ID strony będzie wynosić ’10’. Pamiętaj, aby zastąpić ’10’ własnym ID strony.

Identyfikator strony można znaleźć, stosując tę samą metodę, co powyżej. Po prostu otwórz stronę, na której chcesz uruchomić kod JavaScript, i zanotuj identyfikator strony w adresie URL.

Dodawanie JavaScript do konkretnego posta lub strony WordPress za pomocą kodu w stopce

Jeśli chcesz, aby JavaScript działał w stopce Twojej witryny zamiast w nagłówku, możesz dodać następujący fragment kodu do swojej witryny.

function wpb_hook_javascript_footer() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

Ten fragment kodu podłącza się do wp_footer zamiast do wp_head. Możesz również dodać tagi warunkowe, aby dodać JavaScript do konkretnych postów i stron, tak jak w powyższych przykładach.

Dodatkowa wskazówka: Więcej przewodników po niestandardowych fragmentach kodu

Teraz, gdy już wiesz, jak łatwo dodawać JavaScript do stron lub wpisów WordPress, zobaczmy kilka dodatkowych fragmentów kodu, aby jeszcze bardziej rozszerzyć funkcjonalność Twojej witryny!

Dodawanie akordeonu FAQ w jQuery w WordPress

jQuery, przydatna biblioteka JavaScript, dodaje interaktywne funkcje do Twojej witryny.

Użycie akordeonu FAQ w jQuery w WordPressie pomaga utrzymać porządek w treści. Wyświetla pytania i odpowiedzi w rozwijanym formacie, ułatwiając odwiedzającym znalezienie informacji bez przewijania długich tekstów.

Podgląd akordeonu FAQ SeedProd

Ale to nie wszystko.

Akordeon FAQ może zwiększyć Twoje rankingi w wyszukiwarkach, strukturyzując treść w sposób, który lubią wyszukiwarki. W WPBeginner uznaliśmy również akordeony jQuery FAQ za pomocne w rozwiązywaniu częstych pytań, przyciąganiu większej liczby odwiedzających i poprawie SEO.

Więcej informacji można znaleźć w naszym artykule na temat jak dodać akordeon FAQ jQuery w WordPressie.

Osadzanie kodu iFrame w WordPress

iFrame, czyli ramka wbudowana, pozwala na osadzanie filmów lub innych treści na Twojej stronie internetowej bez konieczności hostowania plików. Oszczędza to przepustowość i miejsce na dysku, co czyni go lepszym wyborem niż przesyłanie filmów bezpośrednio do WordPressa, czego nigdy nie powinieneś robić.

Używanie iFrame może również przyspieszyć działanie Twojej witryny, ponieważ pobiera treści z zewnętrznego źródła.

Aby dowiedzieć się więcej, możesz przejrzeć nasz poradnik na temat jak łatwo osadzić kod iframe w WordPressie.

Tworzenie oddzielnego kanału RSS dla każdego niestandardowego typu posta w WordPress

WordPress pozwala na tworzenie niestandardowych typów postów dostosowanych do Twoich specyficznych potrzeb, takich jak recenzje filmów, produkty czy referencje. Ta funkcja pomaga lepiej organizować witrynę i poprawia doświadczenie użytkownika.

Pamiętaj, że możesz skonfigurować kanały RSS dla każdego niestandardowego typu posta, zapewniając odwiedzającym specjalistyczne kanały, które umożliwiają bardziej spersonalizowane zaangażowanie w Twoje treści.

Dodawanie określonego niestandardowego typu posta do kanału RSS

Jeśli chcesz uzyskać więcej informacji, możesz przeczytać nasz poradnik na temat jak utworzyć osobny kanał RSS dla każdego niestandardowego typu posta w WordPressie.

Więcej pomysłów na niestandardowe fragmenty kodu znajdziesz w naszych eksperckich wyborach najprzydatniejszych fragmentów kodu WordPress dla początkujących.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodawać JavaScript do stron lub wpisów WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat jak prawidłowo dodawać skrypty JavaScript i style w WordPress oraz naszymi ekskluzywnymi wyborami niezwykle przydatnych sztuczek dla pliku functions WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz w niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak finansowany jest WPBeginner, dlaczego to ważne i jak możesz nas wesprzeć. Oto nasz proces redakcyjny.

Ostateczny zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi – kolekcji produktów i zasobów związanych z WordPress, które powinien mieć każdy profesjonalista!

Interakcje czytelników

62 CommentsLeave a Reply

  1. Zarządzam wieloma stronami klientów, a WPCode jest moim ulubionym narzędziem. Jest niezwykle niezawodne, gdy muszę dodać skrypty śledzące lub niestandardowe funkcje do stron internetowych klientów.
    Jedną z rzeczy, którą muszę zrobić podczas dodawania kodu, jest zawsze wykonanie kopii zapasowej witryny przed użyciem WPCode. Wszystko testuję najpierw na stagingu. Zaufaj mi, uratowało mnie to przed wieloma problemami! Zwłaszcza gdy skrypty kolidują z funkcjami motywu.
    A najlepsze jest to, że jeśli coś pójdzie nie tak, możesz po prostu wyłączyć problematyczny fragment kodu. Tak proste!

  2. WPCode uratował mi całą stronę w ten sposób, którą już ukończyłem, ale ostatecznie okazało się, że menu działa bardzo słabo na urządzeniach mobilnych. Znalazłem rozwiązanie w postaci JavaScript, ale nie wiedziałem, gdzie ani jak wstawić je na stronę. To zaoszczędziło mi całą pracę i rozwiązało problem z zamykaniem menu na urządzeniach mobilnych.

  3. Zastanawiam się, dlaczego nie użyć najprostszego sposobu, po prostu bezpośrednio użyć bloku WordPress „Niestandardowy HTML” do wstawienia kodu JavaScript do posta lub strony. Próbowałem i testowałem. Bez problemu. Bardzo, bardzo, bardzo prosty sposób.

    • Zależałoby to od konkretnego kodu, metody, które pokazujemy w tym przewodniku, polegają na dodaniu kodu do sekcji nagłówka, ponieważ większość JavaScript chce być uruchamiana w sekcji nagłówka.

      Admin

  4. Mam aktywne motyw potomny i użyłem wtyczki „Insert Headers and Footer”, aby dodać kod JavaScript dla usługi marketingu e-mailowego. Działało! Ale niestety musiałem anulować moje konto w tej usłudze i teraz chciałbym usunąć kod JavaScript. Jak to zrobić, gdy używam motywu potomnego? Czy jest jakiś łatwy sposób lub inna wtyczka do tego?

    • You would remove the code from the Insert Headers and Footers plugin and it would remove the code from your site :)

      Admin

    • Powinno być na górze strony edycji. jeśli używasz klasycznego edytora, znajdowałoby się to w Opcjach ekranu.

      Admin

  5. Nie widzę opcji Pola niestandardowe w zakładce Opcje ekranu. Używam samodzielnie hostowanej witryny i zainstalowałem oraz aktywowałem wtyczkę Code Embed

    • Jeśli używasz edytora blokowego, ustawienie zostało przeniesione do obszaru preferencji.

      Admin

  6. Ta strona jest NIESAMOWITA!!! To trzeci post z rzędu, w którym trafiłem w dziesiątkę, zdobywając to, czego potrzebowałem, i zrobiłem to w najłatwiejszy możliwy sposób. Dziękuję!!

  7. Hej, świetna robota, WPbeginners! Druga metoda zadziałała jak marzenie. Miałem jednak pytanie. Jeśli chciałbym dodać kolejny kod JS do innego celu, jak powinien zacząć się kod? Ponieważ wszystko, co dodam po kodzie, jest wyszarzone. Jestem w kropce. Chcę, aby robił to samo, ale dla innej strony. Jakieś pomysły będą mile widziane.

    • To w dużej mierze zależy od używanego kodu, ale chcesz upewnić się, że kod znajduje się przed tagiem /script

      Admin

  8. Dziękuję. Ten artykuł był niezwykle pomocny. Wybrałem opcję functions.php. Działało dobrze.

  9. Pytanie dotyczące Metody 3:

    Po wprowadzeniu wartości i kliknięciu przycisku „dodaj niestandardowe pole”, jak mogę sprawić, by kod wyświetlał się na mojej stronie internetowej?

    Czy powinienem wstawić „{{CODEmyjscode}}” za pomocą widżetu shortcode czy edytora tekstu na stronie?

  10. Kiedy zaczynałem pracę z WordPress, JavaScript wydawał mi się niemożliwy. Ale szybko do dzisiaj piszę ten język każdego dnia; często w powiązaniu z WordPress.

    Szkoda, że nie było dla mnie jaśniejsze, jak łatwo byłoby pisać JavaScript, kiedy zaczynałem tę podróż. Dziękuję za narzędzia i wskazówki. Muszę tego spróbować.

  11. Próbowałem dodać niestandardowy JS do mojego posta, ale nic się nie dzieje. Postępowałem zgodnie z Twoimi dokładnymi instrukcjami dla Metody 3, ale kiedy przechodzę do podglądu strony, jest tam puste miejsce tam, gdzie powinien być JS. Czy masz pomysł, dlaczego?

    • Warto zajrzeć do sekcji FAQ wtyczki, aby poznać najczęstsze przyczyny tego problemu i sposoby jego rozwiązania.

      Admin

  12. Jak to działa z nowym systemem bloków WordPress?

    Próbuję osadzić to na stronie, ale w podglądzie pokazuje się tylko jako {{code1}}

    • Zależałoby to od metody, której używasz na swojej stronie dla wtyczki, mają oni aktualizację w swojej sekcji FAQ dotyczącą tego, jak jej obecnie używać.

      Admin

  13. Hej, świetny przewodnik! Problem w tym, że nie mam „Pól niestandardowych” w opcjach ekranu… Czy masz jakiś pomysł, dlaczego?

  14. Cześć. Zatrudniłem programistę do stworzenia narzędzia, które wykonał w języku JavaScript. Używałem Weebly, ale Weebly przestał odpowiadać na prośby o pomoc, czego dowodzą setki blogów. Rozglądam się więc za alternatywami dla Weebly. Czy WordPress poradziłby sobie z narzędziem JavaScript o rozmiarze 2 MB?

    Dzięki,

    • Twoje hosting określiłby, czy takie narzędzie mogłoby być używane, a nie platforma Twojej strony internetowej, a w zależności od tego, jak narzędzie zostało skonfigurowane, określiłoby, czy możesz przenieść narzędzie.

      Admin

  15. Co jeśli potrzebuję dodać skrypt tylko na jednej stronie, ale w nagłówku, a nie w treści? Próbuję dodać piksel konwersji Google tylko na stronie podziękowania za przesłanie formularza.

    • You would want to take a look at the section of the article called: Adding JavaScript to a Specific WordPress Post or Page Using Code :)

      Admin

  16. Dziękuję za ten bardzo pomocny post.

    Moje pytanie brzmi: Jak mogę zaimplementować „Metodę 2” na wielu wpisach? Czy muszę dodać ID wpisu każdego pojedynczego wpisu oddzielonego przecinkiem?

    • tak, musiałbyś umieścić przecinki poza pojedynczymi cudzysłowami i rozpocząć nowy zestaw cudzysłowów dla tej metody

      Admin

  17. Dziękuję za udostępnienie trzech metod, których użytkownicy WordPress mogą użyć do dodawania JavaScript do wpisów lub stron. Z tego, co przeczytałem na stronie wtyczki Insert Headers and Footers w repozytorium, wtyczka nie używa metody enqueue do dodawania skryptów. Która jest zalecaną metodą dodawania skryptów w WordPress.

    Czy źle zrozumiałem? Czy wtyczka Insert Headers and Footers używa enqueue do dodawania skryptów? Jeśli nie używa enqueue, czy wiesz, kiedy wtyczka zostanie zaktualizowana, aby używać enqueue?

    • Wtyczka obecnie nie enqueue skryptów dodanych do niej, ponieważ nie wszystko dodane za pomocą naszej wtyczki może chcieć być enqueued. Jeśli chcesz enqueue dodany kod, powinieneś użyć innej metody.

      Admin

  18. Miło, dzięki za to. Tak się składa, że ​​dokładnie potrzebowałem ID posta, na którym miałem uruchomić javascript, był to numer 16. “`if (is_single (’16’)) { “`

    Jesteś z przyszłości?

    :)

  19. Muszę dodać skrypt do wszystkich postów na moim blogu. Mam wtyczkę do każdego pojedynczego posta. Problem w tym, że są tysiące postów i musimy dodać skrypt do wszystkich z nich. Jakieś sugestie? Z góry dziękuję.

    • Opcja Wstaw nagłówki i stopki umieści kod na każdym poście i stronie, jeśli używają tego samego kodu.

      Admin

      • Dziękuję za szybką odpowiedź.

        Chcemy, aby skrypt działał tylko w Postach. Nie chcemy, aby działał na wszystkich stronach.

        • Jeśli masz widżet, który jest dodawany tylko do postów, możesz spróbować dodać kod w widżecie.

  20. Próbowałem używać skryptów Headers and Footers i jQuery po prostu nie działa poprawnie.

    • Zależałoby to od konkretnego kodu, który dodajesz do strony, odnośnie możliwych powodów, dla których mógłby nie działać. Możesz upewnić się u osoby, od której wziąłeś kod, że sam kod działa.

      Admin

  21. Dziękuję za ten świetny post!
    Czy jest możliwe zaimplementowanie danych strukturalnych na stronach WooCommerce tą metodą (JSON-LD)?

    • Prawdopodobnie mógłbyś, ale jeśli używasz wtyczki SEO, powinieneś sprawdzić z tą wtyczką, czy ona już tego nie robi.

      Admin

  22. Dobrze przedstawione podsumowanie bardziej znanych opcji dla czegoś, co staje się powszechną potrzebą. Jednak wielu użytkowników WordPressa nie jest (i nie chce być) programistami. Dla nich JavaScript w jakiejkolwiek formie jest zbyt przerażający; dlatego używają WordPressa z obietnicą „nie wymaga programowania”.

    Istnieje inna możliwość; użycie niestandardowych skryptów zamiast JavaScript i osadzenie ich bezpośrednio na stronie. Możesz umieścić je w dowolnym komponencie, chociaż ja preferuję .

    Wszystko, czego potrzebujesz, to coś, co potrafi kompilować i uruchamiać skrypt. Trudno znaleźć wtyczki, które potrafią to zrobić; moje własne poszukiwania jeszcze niczego nie przyniosły. Jednak jako programista JavaScript sam byłem w stanie napisać jedną i umieścić ją w bibliotece jako EasyCoder. Skrypty przypominają angielski, mają mniej więcej taką samą złożoność jak SQL i potrafią wykonać większość rzeczy powszechnie wymaganych do zarządzania treścią i interaktywnością na stronie internetowej. EasyCoder jest również w pełni rozszerzalny, dzięki czemu inni programiści mogą sami dodawać moduły.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszą polityką komentowania, a Twój adres e-mail NIE zostanie opublikowany. Prosimy NIE używać słów kluczowych w polu nazwy. Prowadźmy osobistą i znaczącą rozmowę.