Jak nadpisywać i dodawać pliki JavaScript w WordPressie?
Opublikowano 11 maja 2016
Kategorie: Administracja, Tworzenie stron, WordPress, Wszystkie
0
Czasami zachodzi potrzeba nadpisania pliku JavaScript z motywu macierzystego w motywie potomnym WordPressa, bądź odniesienia się do niego przez stworzenie własnego pliku JS, ładowanego dopiero po innym pliku JS.
Dzisiaj wyjaśnię, jak to zrobić.
W tym celu najpierw trzeba poznać zaczep (handle) pliku oryginalnego JS - jest to ciąg znaków wymyślony przez autora szaty. Najprościej jest zainstalować wtyczkę Debug Bar oraz dodatkową wtyczkę Scripts Styles Debug Bar (czyli łącznie dwie). Następnie w górnym pasku administracyjnym WordPressa pojawi się opcja Debug i w niej będzie można poznać handle oryginalnego pliku JS.
Metody nie sprawdzałem, ale mając handle, zapewne wystarczy w motywie potomnym (np. functions.php) zarejestrować plik JS z motywu potomnego z tym samym handle, przez co gdy WordPress będzie próbował zarejestrować skrypt z motywu nadrzędnego, nie zrobi tego, bo handle ten będzie już zajęty (najpierw będzie wczytany functions.php motywu podrzędnego).
Jeśli zaś chcemy dodać kod, który będzie wykonywany po załadowaniu danego skryptu JS, np. pochodzącego z motywu nadrzędnego, to wystarczy podać handle oryginalnego skryptu jako niezbędnik przy rejestracji skryptu własnego. WordPress automatycznie ustawi wtedy kolejność tak, by skrypt niezbędny był załadowany najpierw, a nasz - później.
Przykładowy kod rejestrujący własny plik JS:
if(!function_exists('enqueue_my_js_file')){
function enqueue_my_js_file(){
//use the same handle as parent theme's to override it
wp_register_script('HANDLE', get_stylesheet_directory_uri() .'/js/MY_FILE.js', array('jquery'), '1.0', true);
wp_enqueue_script( 'HANDLE');
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_js_file' );
}
HANDLE i MY_FILE są do zastąpienia w powyższym kodzie.
get_stylesheet_directory_uri() zwraca folder motywu potomnego.
W tablicy, w której jest w powyższym kodzie tylko jquery, można zamieszczać wiele handle'ów, które mają być załadowane przed naszym skryptem - w tym przykładzie jest to jquery, ale można tu dodać także np. handle motywu nadrzędnego, do którego kodu chcemy się odnieść w naszym pliku.
True oznacza, że kod osadzenia JS pojawi się na końcu kodu HTML, zamiast w sekcji <head>.
1.0 to wersja skryptu - bez większego znaczenia, chyba, że coś się buforuje w przeglądarce.