Jak zastąpić pliki JavaScript w motywie potomnym?

35

Ładuję niektóre pliki JavaScript w motywie nadrzędnym. Ścieżka w kompozycji nadrzędnej to:

scripts > custom.js

W motywie potomnym tworzę tę samą ścieżkę ( scripts > custom.js) i zmieniam część jQuery w custom.jspliku.

Problem polega na tym, że zmiany nie są stosowane. Czy to zły sposób wprowadzania zmian w tych plikach w motywie potomnym?

Chris Molitor
źródło
1
Co to jest motyw nadrzędny? Jak skrypty są wywoływane przez motyw nadrzędny?
Chip Bennett

Odpowiedzi:

51

Motywy potomne zastępują tylko pliki php (takie jak header.php), które są zawarte w funkcjach takich jak get_template_part lub get_header itp.

Prawidłowy sposób dodawania skryptów do WordPress to użycie wp_enqueue_script . Jeśli używa tego motyw nadrzędny, możesz przesłonić pliki JS, używając wp_dequeue_script i umieszczając w kolejce własne.

Tak jak ...

<?php
// hook in late to make sure the parent theme's registration 
// has fired so you can undo it. Otherwise the parent will simply
// enqueue its script anyway.
add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 100);
function wpse26822_script_fix()
{
    wp_dequeue_script('parent_theme_script_handle');
    wp_enqueue_script('child_theme_script_handle', get_stylesheet_directory_uri().'/scripts/yourjs.js', array('jquery'));
}

Jeśli motyw nadrzędny nie używa skryptu wp_enqueue_script, prawdopodobnie podłącza się do wp_head (lub wp_footer), aby wysłać tam echa skryptów. Więc byłoby użyć remove_action , aby pozbyć się tych funkcji echo skrypty na zewnątrz, a następnie enqueue własnego scenariusza.

Jeśli skrypt jest zakodowany na stałe w pliku szablonu, wystarczy zastąpić ten plik szablonu w motywie podrzędnym bez znacznika script.

Jeśli użyli wywołań wp_enqueue_script, które wykorzystują get_stylesheet_directory_uri , nie powinieneś nic robić. Ponieważ tak się nie dzieje, musisz po prostu pogrzebać i zobaczyć, co zrobił autor motywu.

chrisguitarguy
źródło
2
jeśli motyw nadrzędny używa polecenia get_stylesheet_directory_uri do kolejkowania skryptów, wówczas motyw potomny będzie musiał powielić wszystkie skolejkowane w ten sposób kolejki, ponieważ w przeciwnym razie nie można ich znaleźć. W get_stylesheet_directory_uri nie ma mechanizmu zastępczego, który sprawdzałby, czy w kompozycji potomnej istnieje pojedynczy plik i w razie potrzeby wracał do pliku motywu macierzystego.
Z Kodeksu: „wp_print_scripts nie powinien być używany do kolejkowania stylów lub skryptów na stronie głównej. Zamiast tego użyj skryptów wp_enqueue_scripts. ” Codex.wordpress.org/Plugin_API/Action_Reference/…
Christian Lescuyer
Pamiętaj, kiedy to zostało napisane: dwa lata temu. Wcześniej wp_enqueue_scriptsmożna go było używać tylko do kolejkowania skryptów w interfejsie użytkownika. Zaktualizowano Jeśli zauważysz coś nieaktualnego, możesz go edytować.
chrisguitarguy
4
Należy pamiętać, że może być konieczne ustawienie późnego priorytetu (na przykład 100), aby mieć pewność, że dequeue nastąpi po kolejce motywu nadrzędnego. add_action( 'wp_enqueue_scripts', 'wpse26822_script_fix', 100 ); from codex.wordpress.org/Function_Reference/wp_dequeue_script
Spone
4
Aktualizacja na 2016: zgodnie z stackoverflow.com/questions/23507179/... musimy również użyć wp_deregister_script('parent-script-handle');do całkowitego usunięcia skryptu nadrzędnego. Rzeczywiście bez niego to nie działałoby. WP 4.6.1
PhiLho,
1

W niektórych przypadkach ważne jest, aby nadać priorytet zarówno wywołaniom funkcji add_action, jak i wp_enqueue_script:

add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 20120207);
function wpse26822_script_fix()
{
    wp_dequeue_script('storefront-navigation');
    wp_enqueue_script('my_storefront-navigation', get_stylesheet_directory_uri().'/js/navigation.min.js', array('jquery'),20151110,true);
}

W tym przypadku obiekt nadrzędny wp_enqueue_scripts został wywołany z priorytetem 20120206 (data), więc akcja ta jest dodawana z priorytetem niewiele większym, aby można ją było natychmiast usunąć z kolejki. Następnie następująca po nim instrukcja kolejki jest tak naprawdę traktowana priorytetowo, aby upewnić się, że ładuje się po usunięciu kolejnej starej. Prawda, w tym przypadku jest również ważna, ponieważ określa, że ​​należy ją umieszczać w kolejce w stopce, czyli w miejscu, w którym skrypt nadrzędny został po raz pierwszy umieszczony w kolejce.

Nie potrafię też tego całkowicie wyjaśnić, ale zauważam, że jeśli jesteś ostrożny w usuwaniu z kolejki początkowego skryptu natychmiast po kolejce, wydaje się, że możesz skutecznie zapobiec jego załadowaniu.

damiankaelgreen
źródło
1
Funkcja wp_enqueue_scriptnie ma parametru priorytetu, jest to tylko numer wersji, który jest konkatenowany do końca ścieżki jako ciąg zapytania. Ten parametr służy do zapewnienia, że ​​poprawna wersja zostanie wysłana do klienta bez względu na buforowanie [...]
Emile Bergeron,
1

wywołaj wp_deregister_script przed zarejestrowaniem własnej wersji

Mohamed Abo Badawy
źródło
1
Czemu? Jest to potrzebne tylko wtedy, gdy używasz tego samego uchwytu - czegoś, czego nie musisz robić. Prawdopodobnie nawet nie powinieneś, ponieważ łatwiej jest debugować kod, którego źródło jest jasne.
fuxia
1
// enqueue your required script file
add_action('wp_enqueue_scripts', 'your_child_theme_js_file_override');
function your_child_theme_js_file_override(){
    wp_enqueue_script( 'child_theme_script_handle', get_stylesheet_directory_uri() . '/assets/js/your-file.js', array('jquery' ) );
}

// dequeue your required script file
function your_child_theme_js_file_dequeue() {
   wp_dequeue_script( 'parent_theme_script_handle' );
}
add_action( 'wp_print_scripts', 'your_child_theme_js_file_dequeue', 100 );
Zabid Ahmed
źródło