Jaki jest najlepszy sposób na dodanie niestandardowego zewnętrznego js do wordpress

Jak twierdzi wiodąca społeczność CMS, 25% Internetu korzysta z WordPress. Widząc trendy, nie mamy innej opcji, jak tylko w to uwierzyć, prawie co drugi blog i co ^czwarta strona wydaje się używać najwydajniejszego i najbardziej przyjaznego dla użytkownika systemu CMS. Czekając na to, ludzie i programiści zaczęli przenosić swoje witryny na platformę WordPress.

Starając się przekształcić słodką i prostą stronę internetową w złożoną, wysokowydajną witrynę CMS, ludzie utkną w bardzo prostym kroku i zadają pytanie: Na miłość, jak mogę uzyskać ten zewnętrzny plik JavaScript (.js) pracujesz w tym motywie WordPress? Czy to ty zadajesz to samo pytanie? Cóż, amigos, w końcu jesteś we właściwym miejscu: jestem tutaj, aby poprowadzić Cię krok po kroku przez najprostszy możliwy sposób na osiągnięcie tego zadania!

Teraz zakładając, że masz zainstalowany WordPress i uruchomiony z zewnętrznym JS, przejdźmy do zadania dołączenia pliku!

Uwaga: w tym samouczku używam następującego pliku (testrun.js), a tematem, nad którym pracuję, jest Twenty Sixteen WordPressa .

alert („Cześć”);

Zaczynajmy!

Wszystkie skrypty i arkusze stylów są ładowane z funkcji.php . Jest to właściwy sposób na załadowanie ich w WordPress, aby uniknąć konfliktu z innymi skryptami ładowanymi przez sam WordPress lub używane wtyczki. Jeśli pozwalasz WordPressowi zarządzać wszystkimi zawartymi plikami, musisz poinformować, że chcesz, aby ten plik był dołączony do nagłówka (początek) lub stopki (koniec) części pliku. Każdy szablon / motyw ma swoje własne funkcje.php, więc trudno byłoby uogólnić dokładną nazwę funkcji, która zawiera wszystkie dołączane pliki. Ponieważ biorę dwadzieścia szesnaście za motyw, poniżej znajduje się migawka tego, jak moje funkcje.php (używane do dołączania plików). Twój powinien w pewnym stopniu przypominać to:

Funkcja wp_enqueue_script łączy plik skryptu z wygenerowaną stroną w odpowiednim czasie, zgodnie z zależnościami skryptu, jeśli skrypt nie został jeszcze dołączony i wszystkie zależności zostały zarejestrowane. Możesz albo połączyć skrypt z uchwytem wcześniej zarejestrowanym za pomocą funkcji wp_register_script (), albo dostarczyć tej funkcji wszystkie parametry niezbędne do połączenia skryptu.

Skrypt wp_enqueue_script ($ uchwyt, $ src, $ deps, $ ver, $ in_footer) przyjmuje następujące parametry:

uchwyt $

(ciąg) (wymagane) Nazwa skryptu.

$ src

(string | bool) (Opcjonalnie) Ścieżka do skryptu z katalogu głównego WordPress. Przykład: „/js/myscript.js”.

Wartość domyślna: false

$ deps

(tablica) (Opcjonalnie) Tablica zarejestrowanych uchwytów, od których zależy ten skrypt.

Wartość domyślna: array ()

$ ver

(string | bool) (Opcjonalnie) Ciąg znaków określający numer wersji skryptu, jeśli taki istnieje. Ten parametr służy do upewnienia się, że poprawna wersja jest wysyłana do klienta bez względu na buforowanie, dlatego należy go uwzględnić, jeśli numer wersji jest dostępny i ma sens dla skryptu.

Wartość domyślna: false

$ in_footer

(bool) (Opcjonalnie) Czy kolejkować skrypt wcześniej lub przed . Domyślnie „fałsz”. Akceptuje „fałsz” lub „prawda”.

Wartość domyślna: false

W tym samouczku możesz zignorować funkcję wp_register_script (). Naszym celem jest uwzględnienie tylko zewnętrznego JS. Bez tego powinno działać dobrze!

Dlatego jeśli chcę nazwać mój skrypt jako „test”, pamiętaj, że ten parametr (uchwyt $) niekoniecznie musi być nazwą rzeczywistego pliku, a mój plik ma zewnętrzną zależność od jquery, a wersja ma wartość 1.0 i ładuje się przed załadowaniem strony wtedy moja funkcja wyglądałaby następująco:

wp_enqueue_script ('tutorial', get_template_directory_uri (). '/js/testrun.js', tablica ('jquery'), '1.0', false);

Jeśli zauważysz, użyłem get_template_directory_uri (), więc łańcuch konkatenowany po funkcji, to znaczy „ /js/testrun.js ” jest w rzeczywistości ścieżką pliku do pliku indeksu szablonu .

Tak więc atrybut $ src, który jest źródłem pliku js, brzmi : get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Dlatego końcowe funkcje. Php wygląda następująco:

Trzymaj się, prawie skończyliśmy! Po prostu zapisz to teraz i odśwież stronę na swojej stronie… powinieneś zobaczyć JS działające! Tu jest moje:

Ponieważ ustawiliśmy opcję $ in_footer na false, skrypt ładuje się przed załadowaniem strony, ale po załadowaniu JQuery, ponieważ został dodany jako zależność!

I .. Voila! Proszę bardzo. Z powodzeniem umieściłeś zewnętrzny niestandardowy plik JS w motywie WP!

Happy Coding !!

Odniesienie: Kolejkuj Funkcja: Kodeks WordPress