Bagaimana cara enqueue JavaScripts dalam sebuah plugin

14

Saya banyak kesulitan saat ini bekerja termasuk memasukkan file JavaScript dalam folder plugin.

Saya mencoba membuat plugin dengan mentransfer file widget dari direktori tema. Saya menyalin file widget, tetapi file widget itu tergantung pada file JavaScript jadi saya membuat folder / js / di direktori plugin. tempat file ini dihosting "jquery.repeatable.js"

Saya menggunakan kode ini, tetapi sepertinya tidak termasuk 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');

Saya mencari ini di forum- /programming/31489615/call-a-js-file-from-a-plugin-directory

Tapi tetap saja ini tidak membantu.

Saya meringkas kembali pertanyaan saya. Di direktori plugin saya ada file js di bawah folder ini - / js /

Saya ingin memasukkannya apa proses yang benar, apakah saya perlu mendaftarkan sesuatu juga?

Apakah ada yang salah dengan bagian ini - 'admin_enqueue_scripts'?

WP Menengah
sumber

Jawaban:

29

Kode Anda tampaknya benar, tetapi itu akan memuat skrip hanya di area admin karena Anda sedang membuat skrip admin_enqueue_scriptsberaksi .

Untuk memuat skrip di frontend, gunakan wp_enqueue_scriptstindakan (yang tidak sama dengan wp_enqueue_script()fungsinya ):

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

Selain itu, skrip itu tampaknya tergantung pada jQuery, jadi Anda harus menyatakan bahwa dependencie atau skrip dapat dimuat sebelum jQuery dan itu tidak akan berfungsi. Juga, saya sangat menyarankan untuk mendeklarasikan versi skrip. Dengan cara ini, jika Anda memperbarui skrip ke versi baru, browser akan donwload lagi dan membuang salinan yang mungkin ada di cache.

Misalnya, jika versi skrip adalah 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');

Jika Anda ingin memuatnya di area admin:

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
sumber
1

DIPERBARUI:

Gunakan kode ini sebagai gantinya

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

Parameter ke-3 adalah mendeklarasikan dependensi dan parameter ke-4 adalah menentukan versi.

Setel parameter wp_enqueue_script()ke -5 menjadi true. Itu artinya, file ini akan dimuat di footer.

mukto90
sumber
Parameter ketiga wp_enqueue_script()adalah mendeklarasikan dependensi skrip. Paramater kelima adalah yang harus dipilih jika Anda ingin memuat skrip di footer atau di header. Lagi pula, saya tidak berpikir tempat untuk memuat membuat perbedaan.
cybmeta
Terima kasih. Saya membaca di suatu tempat di beberapa plugin lain yang dilakukan seseorang seperti ini - wp_enqueue_script ('zumper', get_template_directory_uri (). '/Js/jquery.zumper.min.js',array('jquery'),false, benar); Anda bilang pengaturan ke-3 ke true berarti akan dimuat di footer, lalu apa arti kombinasi yang salah dan benar ini?
WP Menengah
Saya telah memperbarui jawaban saya. Apakah itu bekerja?
mukto90
1

Saya biasanya menggunakan metode plugins_url () untuk mencapai 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
sumber