Przejdź do głównej treści

Jak załadować JavaScript na WordPress

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Chcesz dowiedzieć się, jak załadować JavaScript na WordPress?

Każdy motyw WordPress zwykle składa się z plików PHP, HTML, CSS i JavaScript. JavaScript jest bardzo znanym językiem programowania wśród twórców motywów WordPress. Jest to język, który sprawia, że ​​strona HTML jest interaktywna i może również umożliwiać interakcję z serwerem.

Wiedza o tym, jak go używać na swojej stronie internetowej, będzie ogromną zaletą.

Aby faktycznie korzystać z JavaScript, musisz wiedzieć, jak go załadować na swoją stronę.

Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu 

Wróćmy do tego, dlaczego tu jesteśmy.

Jak załadować skrypty JavaScript na WordPressie

Cofnijmy się o krok i przyjrzyjmy się najpierw, jak WordPress ładuje skrypty i style. Dowiedziałeś się, że podczas tworzenia plików JavaScript możesz dodać je do swojej strony w sekcji nagłówka lub w stopce.

Odkryj także nasz samouczek na temat Jak skompresować pliki CSS, HTML i JavaScript

WordPress robi dokładnie to samo, ale nie możesz po prostu upuścić tych tagów skryptów do pliku nagłówka lub stopki motywu WordPress. WordPress używa inteligentnego mechanizmu ładowania o nazwie „ skolejkowania ".

Ten mechanizm jest niezbędny do nadania znaczenia zależnościom. Jeśli piszesz kod jQuery dla motywu WordPress, najpierw należy załadować sam jQuery.

Piszesz kod oparty na wtyczce jQuery. W takim przypadku najpierw należy załadować jQuery, następnie wtyczkę jQuery, a następnie kod.

Jak „kolejkować” skrypty (dodawać do kolejki)

Możesz dodać skrypty do kolejki motywu WordPress lub wtyczki WordPress. Oto pełny kod, który zawiera skrypt oparty na jQuery:

my_theme_scripts of function () {

 wp_enqueue_script ('mój-skrypt', get_template_directory_uri (). '/js/my-script.js', tablica ('jquery'), '1.0.0', prawda);

}

add_action („wp_enqueue_scripts”, „my_theme_scripts”);

Przede wszystkim funkcja musi być „ haczykowaty Na WordPress (Korzystanie z haczyków WordPress). Pierwszy argument funkcji add_action () informuje WordPress, gdzie należy umieścić te skrypty:

  • W przestrzeni publicznej
  • Na desce rozdzielczej

Jeśli użyjesz „ Wp_enqueue_scripts Zostaną załadowane w przestrzeni publicznej, jeśli użyjesz „ admin_enqueue_scripts Zostaną załadowane na desce rozdzielczej.

W funkcji « add_action Możesz użyć „ wp_enqueue_script Aby dodać potrzebne skrypty. Funkcja przyjmuje wymagany parametr i cztery parametry opcjonalne:

  • Pierwszy parametr to nazwa skryptu. Możesz wybrać, co chcesz, ale pamiętaj, aby użyć unikalnej nazwy.
  • Drugi parametr powinien zawierać lokalizację pliku w motywie WordPress lub wtyczce WordPress.
  • Trzeci parametr zawiera tablicę zależności. W powyższym przykładzie powiedziałem, że jQuery jest zależnością. Wszystkie zależności są ładowane przed danym skryptem.
  • Czwarty parametr to numer wersji
  • Piąty i ostatni parametr wskazuje, czy chcesz załadować skrypt w nagłówku czy stopce. Użyj „true”, aby załadować w stopce, lub „false”, aby załadować skrypt w nagłówku (nie możesz również wypełnić tego parametru).

Zależności

WordPress oferuje kopię jQuery, dlatego możesz dodać ją jako zależność bez żadnych kłopotów. Istnieje wiele innych skryptów i wtyczek jQuery, które oferuje WordPress. Jeśli twój kod zależy od jednej z nich, nie musisz używać jednej z twoich kopii, po prostu dodajesz ją jako zależność. tutaj jest lista skryptów oferowanych przez WordPress.

Jeśli dołączysz wiele niezależnych skryptów, możesz dodać je jako zależności w dokładnie taki sam sposób. Spójrz na poniższy przykład:

my_theme_scripts of function () {

 wp_enqueue_script ("my-base script", get_template_directory_uri (). '/js/my-base-script.js', array ('jquery'), '1.0.0', true);

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

 wp_enqueue_script ("moje-rozszerzenie-skryptu", get_template_directory_uri (). '/js/my-script-extension.js', array ("my-script-base '),' 1.0.0 ', true);

}

add_action („wp_enqueue_scripts”, „my_theme_scripts”);

Ponieważ pierwszy skrypt zależy od jQuery, następny skrypt również od niego zależy. Nie musisz więc dodawać jQuery jako zależności dla obu. Ułatwia to zarządzanie zależnościami.

Ładunek warunkowy

Czasami będziesz chciał użyć swojego skryptu na każdej stronie, ale często będziesz chciał załadować skrypt na określonej stronie. Jest to szczególnie ważne, gdy rozważa się dodanie skryptów do dashboardu. Dobry przykład to stosowanie skrótów. Skróty umożliwiają użytkownikom tworzenie zaawansowanych obrazów w wizualnym edytorze tekstu za pomocą kilku prostych sztuczek.

my_theme_scripts of function () {

 wp_register_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ('mój-skrypt');

}

add_action („wp_enqueue_scripts”, „my_theme_scripts”);

Zapisaliśmy skrypt, aby WordPress dowiedział się o skrypcie, ale używamy „ kolejkować ”. W ten sposób skrypt jest dodawany do strony tylko wtedy, gdy na tej stronie używany jest krótki kod.

Inną metodą ładowania skryptów z warunkami jest użycie funkcji warunkowych. Jeśli chcesz załadować skrypt na wszystkich stronach archiwum kategorii, możesz użyć funkcji Is_category ().

Na przykład możesz utworzyć karuzelę obrazów, które użytkownicy będą mogli dodawać do artykułu w następujący sposób: [identyfikatory karuzeli = '42,124,123,331,90, XNUMX ′]. Karuzela zostanie utworzona na stronie artykułu z obrazów oznaczonych ich identyfikatorami.

Aby to zrobić, musisz utworzyć plik „ carousel.js Który oparty jest na jQuery. Oto kod, aby się tam dostać (nie tworzy karuzeli, ale pozwala zobaczyć, jak przebiega proces ładowania):

add_action („wp_enqueue_scripts”, „my_theme_scripts”);

my_theme_scripts of function () {

 wp_register_script ('my-carousel', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', true);

}

add_shortcode ('carousel', 'my_carousel');

funkcja my_carousel ($ args) {

 $ atts = shortcode_atts (tablica (

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

 'Ids' => ",

 ), $ Atts, 'karuzela');

 wp_enqueue_script ('my-carousel');

 // Kod do wyświetlenia karuzeli tutaj

}

Usuwanie i zastępowanie skryptów

Jest to zdecydowanie częsty scenariusz, ale czasami może być konieczne usunięcie lub zastąpienie skryptu. Wpadłem w sytuacje, w których skrypt dodany przez wtyczkę (ale nieużywany przez motyw) powodowało problemy ze zgodnością. „Wypłata” była najlepszą opcją, ponieważ błąd całkowicie zniknął.

Możesz również zastąpić jQuery nowszą wersją, jeśli testujesz coś, aby upewnić się, że będzie kompatybilne z nowszymi wersjami.

W takich sytuacjach funkcje wp_deregister_script () "A" wp_dequeue_script () Są przydatne. Oto jak edytować kod już dodany do WordPress.

my_theme_scripts of function () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', true);

 wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

}

add_action („wp_enqueue_scripts”, „my_theme_scripts”);

Ostateczne myśli

Ta metoda przesyłania do WordPressa jest świetna, ponieważ umożliwia dodawanie skryptów w sposób modułowy. Pozwoli to upewnić się, że zależności są dodawane w sposób modułowy.

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych wtyczek WordPress, aby nadać nowoczesny wygląd i zoptymalizować chwyt swojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. Premium SEO Pack

Premium SEO Pack to wtyczka WordPress, która optymalizuje SEO i kompresuje CSS, aby poprawić szybkość ładowania witryny.

Wtyczka umożliwia również zarządzanie projektem witryny za pomocą kilku kliknięć. Jego funkcjonalności to między innymi: kompresja CSS i JS, integracja z mapą strony wideo i snippet, formatowanie plików HTML i XML, przekierowywanie stron 404 i 301, udostępnianie w sieciach społecznościowych, udostępnianie Etykieta ALT, wysoce konfigurowalny układ

Pobierz | Demo | hosting

2. Selekcja czasu dostawy Woocommerce do wysyłki

Woocommerce Delivery Time Picker for Shipping to rozszerzenie WooCommerce, które pozwala klientom wybrać datę i godzinę dostawy na stronie kasy. 

Klienci będą mogli wybrać czas dostawy paczki w domu. Czas dostawy będzie widoczny dla administratorów strony internetowej, a także zostanie wysłany pocztą elektroniczną do administratorów strony internetowej lub sklepu internetowego.

Pobierz | Demo | hosting

3. Menu Bohaterów

Ta wtyczka umożliwia utworzenie własnego niestandardowego menu WordPress w kilku dość prostych krokach. W szczególności pozwala w łatwy i intuicyjny sposób stworzyć eleganckie i profesjonalne menu WordPress. 

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Od najbardziej złożonego mega menu pełnego funkcji, po najprostsze menu z rozwijanym menu, wtyczka WordPress HeroMenu konfiguruje dowolny rodzaj menu i uruchamia je w ciągu kilku minut.

Pod względem funkcji oferuje między innymi: doskonałą obsługę na PC, tablecie i smartfonie, z Niestandardowy CSS aby dodać własne style do menu, narzędzie do tworzenia megamenu, kilka obsługiwanych przeglądarek: Chrome, Firefox, Safari, Opera, IE9 i inne.

Pobierz | Demo | hosting

Polecane zasoby

Sprawdź inne zalecane zasoby, które pomogą Ci rozwiązać inne typowe błędy WordPress. 

Wnioski

Tutaj jest ! To wszystko w tym samouczku, mam nadzieję, że dzięki temu zrozumiesz, jak ładować JavaScript na WordPress. Nie wahaj się udostępnić go znajomym na swoim sieci społeczne korzystne. 

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.

Ale tymczasem opowiedz nam o swoim commentaires i sugestie w dedykowanej sekcji.

...

Ten artykuł zawiera 1 komentarz

  1. Wielkie dzięki za informacje na tej stronie:
    <>

    Długo walczyłem z pcq. Nigdy nie widziałem moich skryptów JS na desce rozdzielczej, ponieważ pierwszy argument add_action () został ustawiony na wp, a nie admin.

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
13 akcji
udział8
ćwierkanie2
Enregistrer3