Jak prawidłowo dodawać skrypty JavaScript i style w WordPressie

W tym artykule zobaczymy, jak poprawnie dodać JavaScript i style w WordPressie .

Jest wielu nowych programistów WordPress, którzy lubią pisać kod i tworzyć wtyczki wyłącznie dla własnych stron internetowych lub sprzedawać je na różnych rynkach i uzyskiwać atrakcyjny zwrot.

Istnieją różne sposoby pisania kodu, ale są tylko wybrane sposoby efektywnego pisania kodu.

Jeśli możesz napisać kod w dwóch liniach zamiast dziesięciu, oszczędzasz dużo przetwarzania i pamięci.

Jeśli nie ma to znaczenia dla małej i lekkiej witryny, ale dla ciężkiej witryny, może to znaczyć wiele.

Jeśli nie napiszesz wyraźnego kodu i efektywnie wykorzystasz dostępne zasoby, stworzysz wiele konfliktów dla innych programów.

Na przykład istnieje wiele sposobów na załadowanie zewnętrznego gotowego kodu JavaScript w WordPressie dla Twojej wtyczki.

Ale jeśli nie zastosujesz się do odpowiedniego standardu, wszystkie aktywowane wtyczki mogą się mocno zaciąć.

Ten artykuł jest przeznaczony głównie dla nowych programistów WordPress, którzy chcą tworzyć motywy i wtyczki WordPress.

Jeśli nie zakodujesz poprawnie, Twój kod będzie nieprofesjonalny, a każdy produkt, który stworzysz, bez względu na to, jak dobry jest koncept, nigdy nie zostanie zaakceptowany.

Dlatego lepiej wiedzieć, jak poprawnie dodać JavaScript i Style w WordPressie .

Błędy przy dodawaniu JavaScript

Niektórzy z was mogą być świadomi faktu, że WordPress ma funkcję o nazwie wp_head, która pomaga załadować cokolwiek w sekcji nagłówka witryny.

Wszystko, co musisz zrobić, to dodać następujące wiersze kodu do pliku skryptu, a wszystko i wszystko pojawi się w nagłówku.

add_action('wp_head', 'wpb_bad_script');
funkcja wpb_bad_script() {
echo 'jQuery idzie tutaj';
}

To raczej skrót do dodawania rzeczy, ale nie jest to najlepszy sposób. Trzeba trzymać się odpowiedniego standardu, rezygnując ze skrótów i to jest cały sens tej ilustracji.

Na przykład ładujesz JQuery ręcznie we wtyczce, a inny programista również ładuje to samo JQuery ręcznie lub przez odpowiedni standard. Jeśli ktoś aktywował obie twoje wtyczki, JQuery zostanie załadowane dwukrotnie do pamięci, co jest marnotrawstwem.

Co więcej, jeśli załadowane JQuery różni się wersją, to we wtyczkach pojawi się wiele usterek z powodu konfliktów. Musisz wiedzieć, jak poprawnie dodać JavaScript i style w WordPressie przed napisaniem jakiegokolwiek kodu.

Jak uniknąć takich błędów – koncepcja funkcji kolejki?

Jak zapewne wiesz, społeczność programistów WordPress jest duża i silna. Istnieją dosłownie tysiące programistów, którzy codziennie opracowują nowe motywy i wtyczki.

Ale to, co robią, aby upewnić się, że nigdy nie ma konfliktu ze swoimi metodami kodowania, to funkcja skryptu w kolejce.

Jest to funkcja odpowiedzialna za prawidłowe dodawanie skryptów JavaScript i stylów w WordPressie, aby nigdy nie było żadnych konfliktów i niepotrzebnego blokowania pamięci.

Zapewnia systematyczny sposób ładowania skryptów JavaScript i stylów. Funkcja qp_enquque_function mówi Wordless, kiedy załadować te JavaScript i Style, gdzie je załadować, a zwłaszcza w jakich warunkach.

Z ich pomocą nie musisz ręcznie ładować JQuery i tego typu rzeczy, dzięki czemu nigdy nie wystąpi stan zablokowania pamięci z powodu ciągłego ładowania tych samych plików.

Powodem tego jest fakt, że funkcja Enqueue umożliwia korzystanie z wbudowanych bibliotek, które są dostarczane z samym WordPressem. Zmniejszy to również obciążenie związane z wolnym czasem ładowania strony ze względu na brak ręcznego ładowania skryptów JavaScript.

Kroki, aby poprawnie dodać skrypty JavaScript i style w WordPress-

1. Umieszczaj skrypty w kolejce w WordPress

Poniższe wiersze kodu ładują wbudowany pakiet JavaScript dostarczany z WordPress. Musisz umieścić te linie w pliku wtyczek podczas tworzenia wtyczek lub musisz umieścić je w functions.php, jeśli tworzysz motyw.

funkcja wpb_adding_scripts() {
wp_register_script('mój_niesamowity_skrypt', plugins_url('niesamowity_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('mój_niesamowity_skrypt');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Wyjaśnienie Kodeksu

Skrypt jest rejestrowany za pomocą funkcji wp_register_script(), która ma pięć różnych parametrów.

1. $handle – To unikalna nazwa skryptu. Oto „mój_niesamowity_skrypt”.

2. $src – Określa lokalizację twojego skryptu. Funkcja biblioteki plugins_url pobiera właściwy adres URL folderu wtyczek. Po pobraniu zacznie szukać w nim pliku amazing_script.js.

3. $deps – definiuje zależność. Musisz go dodać, gdy prosisz WordPress o załadowanie skryptu biblioteki, takiego jak Jquery.

Jeśli skrypty są już wczytane do pamięci, nie zostaną one ponownie załadowane i nastąpi ponowne wczytanie. Gwarantuje to brak konfliktów, blokad pamięci i straty czasu.

4. $ver – Określa numer wersji skryptu. Nie jest to obowiązkowe.

5. $in_footer – Służy do ładowania skryptu w stopce. Jeśli chcesz załadować skrypt w nagłówku, powinieneś ustawić go jako false.

Gdy wszystko jest zdefiniowane, po prostu wywołujesz skrypt za pomocą wp_enqueue_script().

2. Umieszczaj w kolejce style w WordPressie

Podobnie jak JavaScript, musisz kolejkować arkusze stylów. Użyj następującego fragmentu kodu w pliku wtyczki lub pliku functions.php do tworzenia motywu.

funkcja wpb_dodawanie_style () {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('mój_arkusz stylów');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); 

Powyższe kody są odpowiednie podczas tworzenia wtyczki. Kiedy tworzysz motyw, musisz zmienić plugins_url() na get_template_directory_uri(). Reszta rzeczy pozostanie dokładnie taka sama.

funkcja wpb_adding_scripts() {
wp_register_script('mój_niesamowity_skrypt', get_template_directory_uri() . '/js/niesamowity_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('mój_niesamowity_skrypt');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Jeśli tworzysz motyw potomny, musisz użyć get_stylesheet_direcroy_uri() zamiast get_template_directory_uri().

Jest to standardowy sposób prawidłowego dodawania skryptów JavaScript i stylów w WordPress.

Jeśli twoja wtyczka lub motyw napotyka jakieś usterki, powinieneś zmodyfikować ich kod za pomocą wyżej wymienionych linii kodu, a być może usterki zostaną rozwiązane.

Zawsze przestrzegaj standardów kodowania stosowanych na całym świecie, aby być na tej samej stronie z innymi odnoszącymi sukcesy programistami.