Come accodare file JavaScript in un plugin

Question

Come accodare file JavaScript in un plugin

6 feb 2016, 14:31:54

Visualizzazioni: 60.9K

Voti: 21

Sto avendo molte difficoltà questa volta nel tentativo di includere file JavaScript nella cartella del plugin.

Sto cercando di creare un plugin trasferendo i file dei widget dalla directory dei temi. Ho copiato il file del widget, ma questo dipendeva da un file JavaScript quindi ho creato una cartella /js/ nella directory del plugin, dove è posizionato il file "jquery.repeatable.js"

Ho usato questo codice, ma sembra non includere il file 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');

Ho cercato sul forum - https://stackoverflow.com/questions/31489615/call-a-js-file-from-a-plugin-directory

Ma non è stato comunque d'aiuto.

Sto riepilogando la mia domanda. Nella directory del mio plugin c'è un file js sotto questa cartella - /js/

Desidero includerlo, qual è il processo corretto, devo registrare anche qualcosa?

C'è qualcosa di sbagliato in questa parte - 'admin_enqueue_scripts'?

WordCent

1.88K

sviluppo plugin wp enqueue script

Commenti

Possibile duplicato di Questo non funziona per Plugin get_template_directory_uri()

Milo

6 feb 2016 19:47:28

Tutte le risposte alla domanda

Normalmente utilizzo il metodo plugins_url() per ottenere l'enqueue.

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

96

8 ago 2019 09:28:12

Commenti

Questa è una risposta migliore di quella accettata, poiché plugin_dir_url() utilizza plugins_url(); è un sovraccarico inutile di un'ulteriore chiamata di funzione

Lovor

19 set 2023 00:34:20

AGGIORNATO:

Utilizza questo codice invece

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

Il 3° parametro serve a dichiarare le dipendenze e il 4° a definire la versione.

Imposta il 5° parametro di wp_enqueue_script() su true. Questo significa che il file verrà caricato nel footer.

mukto90

1.6K

6 feb 2016 15:19:34

Commenti

Il terzo parametro di wp_enqueue_script() serve per dichiarare le dipendenze dello script. Il quinto parametro è quello che permette di scegliere se caricare lo script nel footer o nell'header. Comunque, non credo che il punto in cui viene caricato faccia differenza.

cybmeta

6 feb 2016 15:22:35

Grazie. Ho letto da qualche parte in un altro plugin che qualcuno fa così -

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

Hai detto che impostare il terzo parametro a true significa che verrà caricato nel footer, allora cosa significa questa combinazione false,true?

WordCent

6 feb 2016 15:22:50

Ho aggiornato la mia risposta. Funziona?

mukto90

6 feb 2016 15:31:22

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

Il tuo codice sembra corretto, ma caricherà lo script solo nell'area di amministrazione perché stai accodando lo script nell'azione admin_enqueue_scripts.

Per caricare lo script nel frontend, usa l'azione wp_enqueue_scripts (che non è la stessa cosa della wp_enqueue_script() funzione):

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

Inoltre, quello script sembra dipendere da jQuery, quindi dovresti dichiarare quella dipendenza altrimenti lo script potrebbe essere caricato prima di jQuery e non funzionerà. Inoltre, consiglio vivamente di dichiarare la versione dello script. In questo modo, se aggiorni lo script a una nuova versione, il browser lo scaricherà nuovamente e scarterà la copia che potrebbe avere in cache.

Ad esempio, se la versione dello script è 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');

Se vuoi caricarlo nell'area di amministrazione:

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