Bagaimanakah WordPress memperkenalkan JavaScript dengan betul?Muatan tersuai fail JS dan CSS

Gunalaman web WordPresspengaturcara, membangunPemalam WordPressAtau apabila menyesuaikan tema WordPress, beberapa sumber skrip JavaScript dan CSS dirujuk.

• Biasanya, orang menggunakan pautan, tag skrip terus untuk HTML.
• Malah, WordPress mempunyai fungsi dan kaedah canggih terbina dalam untuk merujuk skrip.
• Jadi, menggunakan rujukan kaedah terbina dalam WordPress adalah lebih profesional dan lebih meluas.

Kaedah petikan yang cacat

Terdapat dua kaedah petikan biasa, tidak mengapa, cuma tidak sempurna atau munasabah.

Jenis 1:tag pautan merujuk kepada fail CSS

• Teg skrip menggunakan fail JS.Tidak terperinci di sini.

Jenis 2:Gunakan fungsi wp_head

• Fungsi wp_head digunakan untuk mengeluarkan beberapa kandungan tersuai atau ditakrifkan sistem.
• Kadangkala kami menggunakan kod berikut untuk merujuk fail ini:

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

• Salin kod di atas ke dalam fail functions.php untuk merujuk fail yang sepadan.

Mekanisme sumber Skrip Enqueue WordPress

Seperti yang kita sedia maklum, WordPress mempunyai banyak pemalam:

• Hampir setiap pemalam merujuk beberapa fail sumber.
• Tidak dapat dielakkan, akan terdapat konflik antara sumber yang dirujuk oleh dua pemalam, yang akan menjadi tidak stabil dan boleh menjejaskan kecekapan.

Gunakan fungsi wp_enqueue_script

• Untuk merujuk sumber dalam WordPress anda harus gunakanwp_enqueue_scriptFungsi yang mempunyai perkataan enqueue dalam nama fungsi enqueue atau disusun.
• Dengan cara WordPress untuk memasukkan sumber (Skrip Enqueue), rujukan dipisahkan daripada fail dan kod teras yang sepadan.
• Jika pengguna ingin melumpuhkan sumber, dia boleh memadam, mengubah suai dan mengulasnya tanpa mengubahnya daripada kod teras.

Selain itu, beberapa perpustakaan yang biasa digunakan seperti jQuery, UI jQuery, dll. dibina ke dalam WordPress.

Kita boleh menggunakan fungsi wp_enqueue_script untuk memanggil perpustakaan terbina dalam secara langsung, yang menyimpan kod dan spesifikasi yang lebih bersih.

Jika anda menggunakan fungsi ini untuk merujuk fail JS dan CSS anda sendiri, anda perlu menggunakannyawp_register_scriptFungsi ini mendaftarkan pengecam (pemegang) dan kemudian menggunakanwp_enqueue_scriptFungsi ini memanggil sumber yang sepadan dengan bendera ini.

Bagaimana untuk mengimport fail JS dan CSS dengan betul dalam WordPress?

WordPress menyediakan kaedah import yang wajar untuk kaedah JS dan CSS.

Anda boleh menggunakan kod berikut untuk mengimport fail 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 mencipta sumber dengan plugin_stylesheet pengecam.

Kemudian, tambahkan permintaan beraturnya padawp_enqueue_scriptstindakan sedang beroperasi.

Walaupun nama fungsi ialah skrip, ia tiada kaitan dengan jenis fail sumber dan sah untuk kedua-dua CSS dan JS.

Fungsi wp_register_script sebenarnya tidak semudah itu, ia boleh mempunyai lima parameter:

1) $handle:Pengecam sumber.

• 由wp_enqueue_scriptpemindahan.

2) $src:Lokasi sumber.

• Alamat relatif atau mutlak menggunakan fungsi terbina dalam WordPress untuk mendapatkan alamat, dsb.
• BiasaKedudukanfungsi mempunyaiplugins_url,get_template_directory_uriTunggu.

3) $deps:bergantung harap.

• Jika anda merujuk kepada pemalam jQuery dan perlu bergantung pada jQuery untuk membina, anda perlu mengisi jQuery.
• Ambil perhatian bahawa ia diluluskan sebagai tatasusunan.

4) $ver:Versi sumber, pilihan.

5) $in_footer:Adakah anda meletakkannya di bahagian bawah?

• Biasanya, fail JS harus diletakkan di bahagian bawah halaman, anda boleh menetapkan parameter ini kepada Benar, biarkan kosong atau Palsu untuk mengeluarkannya ke atas.

Mari lihat contoh rujukan fail 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 mengimport sumber

Pengaturcara dalam pembangunan tema WordPress, gunakanwp_enqueue_scriptMengimport sumber.

• Contoh di atas adalah contoh sumber rujukan untuk pembangunan pemalam WordPress.
• Kaedah yang dirujuk dalam topik adalah serupa.

Perbezaan utama ialah menggunakan fungsi yang sepadan untuk mendapatkan direktori tema untuk mendapatkan alamat fail sumber di bawah tema.

anda boleh gunakanget_template_directory_uriberfungsi untuk mendapatkan direktori tema semasa.

Jika anda menggunakan tema kanak-kanak, anda perlu menggunakannyaget_stylesheet_directory_uriFungsi ini mendapat direktori tema induk untuk mendapatkan sumber yang sepadan.