Jak kolejkować JavaScript w wtyczce

14

Tym razem bardzo się staram, włączając pliki JavaScript w folderze wtyczek.

Próbuję utworzyć wtyczkę, przesyłając pliki widgetów z katalogu motywów. Skopiowałem plik widgetu, ale ten plik widgetu był zależny od pliku JavaScript, więc utworzyłem folder / js / w katalogu wtyczek. gdzie hostowane są te pliki „jquery.repeatable.js”

Użyłem tego kodu, ale wydaje się, że nie zawiera on pliku js -

function Zumper_widget_enqueue_script()
{   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js' );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

Przeszukałem to na forum- /programming/31489615/call-a-js-file-from-a-plugin-directory

Ale nadal nie było to pomocne.

Podsumowuję moje pytanie. W moim katalogu wtyczek znajduje się plik js w tym folderze - / js /

Chcę dołączyć to, co jest poprawne, czy muszę coś zarejestrować?

Czy coś jest nie tak z tą porcją - 'admin_enqueue_scripts'?

WP Intermediate
źródło

Odpowiedzi:

30

Twój kod wydaje się poprawny, ale załaduje skrypt tylko w obszarze administracyjnym, ponieważ kolejkujesz skrypt w admin_enqueue_scriptsakcji .

Aby załadować skrypt w interfejsie, użyj wp_enqueue_scriptsakcji (która nie jest tą samą wp_enqueue_script()funkcją ):

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js' );
}
add_action('wp_enqueue_scripts', 'Zumper_widget_enqueue_script');

Wydaje się również, że ten skrypt zależy od jQuery, dlatego powinieneś zadeklarować, że skrypt zależności może zostać załadowany przed jQuery i nie będzie działać. Ponadto zdecydowanie zalecam zadeklarowanie wersji scripot. W ten sposób, jeśli zaktualizujesz skrypt do nowej wersji, przeglądarka ponownie go załaduje i odrzuci kopię, którą może mieć w pamięci podręcznej.

Na przykład, jeśli wersja skryptu to 1.0:

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0' );
}
add_action('wp_enqueue_scripts', 'Zumper_widget_enqueue_script');

Jeśli chcesz załadować go w obszarze administracyjnym:

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0' );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');
cybmeta
źródło
1

AKTUALIZACJA:

Zamiast tego użyj tego kodu

function Zumper_widget_enqueue_script()
{   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0.0', false );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

Trzeci parametr to deklaracja zależności, a czwarty to określenie wersji.

Ustaw 5. parametr wp_enqueue_script()na true. To znaczy, ten plik zostanie załadowany w stopce.

mukto90
źródło
Trzecim parametrem wp_enqueue_script()jest deklarowanie zależności skryptu. Piąty parametr jest tym, który ma wybrać, czy chcesz załadować skrypt w stopce, czy w nagłówku. W każdym razie nie sądzę, żeby miejsce do załadowania miało jakąkolwiek różnicę.
cybmeta
Dzięki. Czytałem gdzieś w innej wtyczce, że ktoś tak robi - wp_enqueue_script ('zumper', get_template_directory_uri (). '/ / Js/jquery.zumper.min.js', tablica('jquery'),false,true); Powiedziałeś, że ustawienie wartości true na 3 oznacza, że ​​zostanie załadowane w stopce, a co oznacza ta fałszywa, prawdziwa kombinacja?
WP Średnio zaawansowany
Zaktualizowałem swoją odpowiedź. Czy to działa?
mukto90
1

Zwykle używam metody plugins_url () w celu uzyskania kolejki.

function Zumper_widget_enqueue_script()
{   
    wp_enqueue_script( 'my_custom_script', plugins_url('js/jquery.repeatable.js', __FILE__ ), '1.0.0', false );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');
Zaheer Abbas
źródło