Bagaimana WordPress memperkenalkan JavaScript dengan benar?Pemuatan kustom file JS dan CSS

penggunaanSitus web WordPressprogrammer, mengembangkanplugin WordPressAtau saat menyesuaikan tema WordPress, beberapa sumber daya skrip JavaScript dan CSS direferensikan.

• Biasanya, orang menggunakan tautan, tag skrip langsung untuk HTML.
• Faktanya, WordPress memiliki fungsi dan metode canggih bawaan untuk skrip referensi.
• Jadi, menggunakan referensi metode bawaan WordPress lebih profesional dan dapat diperluas.

Metode kutipan yang cacat

Ada dua metode kutipan umum, tidak apa-apa, hanya saja tidak sempurna atau masuk akal.

Tipe 1:tag tautan merujuk ke file CSS

• Tag skrip menerapkan file JS.Tidak rinci di sini.

Tipe 2:Gunakan fungsi wp_head

• Fungsi wp_head digunakan untuk menampilkan beberapa konten khusus atau yang ditentukan sistem.
• Kami terkadang menggunakan kode berikut untuk mereferensikan file ini:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Salin kode di atas ke dalam file functions.php untuk referensi file yang sesuai.

Mekanisme sumber daya Script Enqueue WordPress

Seperti yang kita semua tahu, WordPress memiliki banyak plugin:

• Hampir setiap plugin mereferensikan beberapa file sumber daya.
• Tak pelak, akan ada konflik antara sumber daya yang direferensikan oleh dua plugin, yang akan menjadi tidak stabil dan dapat mempengaruhi efisiensi.

Gunakan fungsi wp_enqueue_script

• Untuk referensi sumber daya di WordPress Anda harus menggunakanwp_enqueue_scriptSebuah fungsi yang memiliki kata enqueue dalam nama fungsi enqueued atau diurutkan.
• Dengan cara WordPress mengantrekan sumber daya (Enqueue Scripts), referensi dipisahkan dari file dan kode inti yang sesuai.
• Jika pengguna ingin menonaktifkan sumber daya, ia dapat menghapus, memodifikasi, dan mengomentarinya tanpa memodifikasinya dari kode inti.

Juga, beberapa perpustakaan yang umum digunakan seperti jQuery, jQuery UI, dll. dibangun ke dalam WordPress.

Kita dapat menggunakan fungsi wp_enqueue_script untuk memanggil pustaka bawaan secara langsung, yang menyimpan kode dan spesifikasi yang lebih bersih.

Jika Anda menggunakan fungsi ini untuk mereferensikan file JS dan CSS Anda sendiri, Anda perlu menggunakanwp_register_scriptFungsi mendaftarkan pengidentifikasi (pegangan) dan kemudian menggunakanwp_enqueue_scriptFungsi memanggil sumber daya yang sesuai dengan flag ini.

Bagaimana cara mengimpor file JS dan CSS dengan benar di WordPress?

WordPress menyediakan metode impor yang masuk akal untuk metode JS dan CSS.

Anda dapat menggunakan kode berikut untuk mengimpor file plugin.css ke dalam plugin

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

Di atas menggunakan fungsi wp_register_script untuk membuat sumber daya dengan pengidentifikasi plugin_stylesheet.

Kemudian, tambahkan permintaan antriannya kewp_enqueue_scriptstindakan sedang beroperasi.

Meskipun nama fungsi adalah skrip, itu tidak ada hubungannya dengan jenis file sumber daya dan valid untuk CSS dan JS.

Fungsi wp_register_script sebenarnya tidak sesederhana itu, ia dapat memiliki lima parameter:

1) $ menangani:Pengidentifikasi sumber daya.

• 由wp_enqueue_scripttransfer.

2) $src:Lokasi sumber daya.

• Alamat relatif atau absolut menggunakan fungsi bawaan WordPress untuk mendapatkan alamat, dll.
• UmumPenentuan posisifungsi memilikiplugins_url,get_template_directory_uriTunggu.

3) $dep:mengandalkan.

• Jika Anda mengacu pada plugin jQuery dan perlu mengandalkan build jQuery, Anda harus mengisi jQuery.
• Perhatikan bahwa itu dilewatkan sebagai array.

4) $ver:Versi sumber daya, opsional.

5) $in_footer:Apakah Anda meletakkannya di bawah?

• Biasanya, file JS harus ditempatkan di bagian bawah halaman, Anda dapat mengatur parameter ini ke True, biarkan kosong atau False untuk menampilkan ke atas.

Mari kita lihat contoh referensi file JavaScript yang lebih lengkap

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

Tema WordPress menggunakan wp_enqueue_script untuk mengimpor sumber daya

Pemrogram dalam pengembangan tema WordPress, gunakanwp_enqueue_scriptImpor sumber daya.

• Contoh di atas adalah contoh sumber referensi untuk pengembangan plugin WordPress.
• Metode yang dirujuk dalam topik serupa.

Perbedaan utama adalah menggunakan fungsi yang sesuai untuk mendapatkan direktori tema untuk mendapatkan alamat file sumber daya di bawah tema.

Kamu dapat memakaiget_template_directory_uriberfungsi untuk mendapatkan direktori tema saat ini.

Jika Anda menggunakan tema anak, Anda harus menggunakanget_stylesheet_directory_uriFungsi mendapatkan direktori tema induk untuk mendapatkan sumber daya yang sesuai.