Cum să incluzi fișiere JavaScript într-un plugin

Question

Cum să incluzi fișiere JavaScript într-un plugin

6 feb. 2016, 14:31:54

Vizualizări: 60.9K

Voturi: 21

Mă confrunt cu multe dificultăți în încercarea de a include fișiere JavaScript în directorul plugin-ului.

Încerc să creez un plugin transferând fișierele widget din directorul temei. Am copiat fișierul widget, dar acest fișier widget depindea de un fișier JavaScript, așa că am creat un folder /js/ în directorul plugin-ului, unde este găzduit fișierul "jquery.repeatable.js"

Am folosit acest cod, dar se pare că nu include fișierul 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');

Am căutat asta pe forum - https://stackoverflow.com/questions/31489615/call-a-js-file-from-a-plugin-directory

Dar tot nu a fost de ajutor.

Îmi rezum din nou întrebarea. În directorul plugin-ului meu există un fișier js în acest folder - /js/

Doresc să-l includ, care este procesul corect, trebuie să înregistrez și altceva?

Este ceva în neregulă cu această porțiune - 'admin_enqueue_scripts'?

WordCent

1.88K

dezvoltare de plugin wp enqueue script

Comentarii

Posibil duplicat al Acest lucru nu funcționează pentru Plugin get_template_directory_uri()

Milo

6 feb. 2016 19:47:28

Toate răspunsurile la întrebare

În mod normal folosesc metoda plugins_url() pentru a încărca scripturile.

function Zumper_widget_enqueue_script()
{   
    // Încarcă scriptul jQuery repeatable în panoul de administrare
    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

96

8 aug. 2019 09:28:12

Comentarii

Acesta este un răspuns mai bun decât cel acceptat, deoarece plugin_dir_url() folosește plugins_url(); reprezintă o suprasolicitare inutilă prin apelarea unei funcții suplimentare

Lovor

19 sept. 2023 00:34:20

ACTUALIZAT:

Folosește acest cod în schimb

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');

Al treilea parametru declară dependențele, iar al patrulea definește versiunea.

Setează al 5-lea parametru al wp_enqueue_script() la true. Asta înseamnă că acest fișier va fi încărcat în footer.

mukto90

1.6K

6 feb. 2016 15:19:34

Comentarii

Al treilea parametru al funcției wp_enqueue_script() este folosit pentru a declara dependințele scriptului. Al cincilea parametru este cel care determină dacă scriptul se încarcă în footer sau în header. Oricum, nu cred că locul în care se încarcă face vreo diferență.

cybmeta

6 feb. 2016 15:22:35

Mulțumesc. Am citit undeva într-un alt plugin că cineva face astfel -

wp_enqueue_script('zumper',get_template_directory_uri() . '/js/jquery.zumper.min.js',array('jquery'),false,true);

Ai spus că setarea celui de-al treilea parametru la true înseamnă că se va încărca în footer, dar ce înseamnă atunci combinația false,true?

WordCent

6 feb. 2016 15:22:50

Am actualizat răspunsul meu. Funcționează?

mukto90

6 feb. 2016 15:31:22

cybmeta 20.6K · Accepted Answer · 2016-02-06T15:29:27Z

Codul tău pare corect, dar va încărca scriptul doar în zona de administrare deoarece folosești acțiunea admin_enqueue_scripts.

Pentru a încărca scriptul în frontend, folosește acțiunea wp_enqueue_scripts (care nu este același lucru cu wp_enqueue_script()):

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');

De asemenea, acel script pare să depindă de jQuery, așa că ar trebui să declari acea dependență, altfel scriptul s-ar putea încărca înaintea jQuery și nu va funcționa. De asemenea, recomand să declari versiunea scriptului. Astfel, dacă actualizezi scriptul la o versiune nouă, browserul va descărca din nou scriptul și va renunța la copia pe care o poate avea în cache.

De exemplu, dacă versiunea scriptului este 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');

Dacă vrei să-l încarci în zona de administrare:

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');