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

Wszystko WordPress zwykle składa się z plików PHP, HTML, CSS i JavaScript. JavaScript to popularny język programowania wśród programistów. WordPress. Jest to język, który sprawia, że ​​strona HTML jest interaktywna, a także 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 znaczników skryptu do pliku nagłówkowego lub stopki WordPress. WordPress wykorzystuje inteligentny mechanizm ł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 kolejkować skrypty w folderze motywu WordPress lub w WordPress Plugin. Oto kompletny kod zawierający 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 WordPress Plugin.
• 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);

 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 (

 '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 WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.

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

1. Premium SEO Pack

Premium SEO Pack to WordPress Plugin który optymalizuje SEO i kompresuje CSS, aby poprawić prędkość ładowania Twojej 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. 

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. 

• Jak naprawić błędy przekierowania w WordPress
• Jak utworzyć niestandardowy układ z Elementor
• Jak stworzyć intranet WordPress dla organizacji
• Jak utworzyć stronę logowania na 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.

...