Kumaha WordPress leres ngenalkeun JavaScript?Loading custom tina file JS jeung CSS

pikeunramatloka WordPressprogramer, ngembangkeunplugin WordPressAtanapi nalika ngarobih téma WordPress, sababaraha sumber skrip JavaScript sareng CSS dirujuk.

• Biasana, jalma nganggo tautan, tag naskah langsung pikeun HTML.
• Nyatana, WordPress ngagaduhan fungsi sareng metode anu canggih pikeun ngarujuk naskah.
• Janten, ngagunakeun rujukan metode anu diwangun WordPress langkung profésional sareng langkung éksténsif.

Métode cutatan flawed

Aya dua metode kutipan anu umum, henteu kunanaon, ngan teu sampurna atanapi wajar.

Tipe 1:tag link nujul kana file CSS

• Tag skrip nerapkeun file JS.Teu diwincik di dieu.

Tipe 2:Paké fungsi wp_head

• Fungsi wp_head dipaké pikeun kaluaran sababaraha eusi custom atawa sistem-diartikeun.
• Kadang-kadang urang nganggo kodeu ieu pikeun ngarujuk file ieu:

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

• Salin kodeu di luhur kana file functions.php pikeun ngarujuk kana file anu aya.

WordPress Enqueue Scripts mékanisme sumberdaya

Sakumaha urang terang, WordPress ngagaduhan seueur plugins:

• Ampir unggal plugin ngarujuk sababaraha file sumberdaya.
• Inevitably, bakal aya bentrok antara sumberdaya referenced ku dua plugins, nu bakal jadi teu stabil sarta bisa mangaruhan efisiensi.

Paké fungsi wp_enqueue_script

• Pikeun ngarujuk sumber dina WordPress anjeun kedah nganggowp_enqueue_scriptFungsi nu mibanda kecap enqueue dina ngaran fungsi enqueued atawa diurutkeun.
• Kalawan cara WordPress ieu enqueueing sumberdaya (Enqueue Scripts), rujukan nu dipisahkeun tina file pakait jeung kode inti.
• Upami pangguna hoyong nganonaktipkeun sumberdaya, anjeunna tiasa ngahapus, ngarobih sareng mairan tanpa ngarobih tina kode inti.

Ogé, sababaraha perpustakaan ilahar dipaké kawas jQuery, jQuery UI, jsb diwangun kana WordPress.

Urang tiasa nganggo fungsi wp_enqueue_script pikeun nelepon perpustakaan diwangun-di langsung, nu ngahemat kode sarta spésifikasi jelas.

Upami anjeun nganggo fungsi ieu pikeun ngarujuk file JS sareng CSS anjeun nyalira, anjeun kedah nganggowp_register_scriptFungsi registers hiji identifier (cecekelan) lajeng ngagunakeunwp_enqueue_scriptFungsina nyauran sumber daya anu cocog sareng bandéra ieu.

Kumaha leres ngimpor file JS sareng CSS dina WordPress?

WordPress nyayogikeun padika impor anu wijaksana pikeun metode JS sareng CSS.

Anjeun tiasa nganggo kode di handap ieu pikeun ngimpor file plugin.css kana 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 luhur ngagunakeun fungsi wp_register_script pikeun nyieun sumberdaya jeung identifier plugin_stylesheet.

Lajeng, tambahkeun pamundut antrian nawp_enqueue_scriptslampah aya dina operasi.

Sanaos nami fungsina mangrupikeun naskah, éta henteu aya hubunganana sareng jinis file sumberdaya sareng valid pikeun CSS sareng JS.

Fungsi wp_register_script saleresna henteu saderhana, éta tiasa gaduh lima parameter:

1) $cekelan:Identifier sumberdaya.

• 由wp_enqueue_scriptmindahkeun.

2) $src:Lokasi sumberdaya.

• Alamat rélatif atawa mutlak ngagunakeun WordPress diwangun-di fungsi pikeun meunangkeun alamat, jsb.
• BiasaPosisifungsi bogaplugins_url,get_template_directory_uriAntosan.

3) $deps:ngandelkeun.

• Upami anjeun ngarujuk kana plugin jQuery sareng kedah ngandelkeun ngawangun jQuery, anjeun kedah ngeusian jQuery.
• Catet yén éta diliwatan salaku Asép Sunandar Sunarya.

4) $ver:Vérsi sumberdaya, pilihan.

5) $in_footer:Dupi anjeun nempatkeun eta di handap?

• Biasana, file JS kedah disimpen di handapeun halaman, anjeun tiasa nyetél parameter ieu leres, tinggalkeun kosong atanapi Palsu pikeun kaluaran ka luhur.

Hayu urang tingali conto rujukan file JavaScript anu langkung lengkep ▼

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

Téma WordPress ngagunakeun wp_enqueue_script pikeun ngimpor sumberdaya

Programer dina ngembangkeun tema WordPress, pamakéanwp_enqueue_scriptsumberdaya impor.

• Conto di luhur mangrupikeun conto sumber rujukan pikeun pangwangunan plugin WordPress.
• Métode anu dirujuk dina topikna sami.

Beda utama nyaéta ngagunakeun fungsi anu saluyu pikeun meunangkeun diréktori téma pikeun meunangkeun alamat file sumberdaya dina téma.

anjeun tiasa nganggoget_template_directory_urifungsina pikeun meunangkeun diréktori téma ayeuna.

Upami anjeun nganggo téma budak, anjeun kedah nganggoget_stylesheet_directory_uriFungsina kéngingkeun diréktori téma indungna pikeun kéngingkeun sumber daya anu saluyu.