Giunsa ang husto nga pagpaila sa WordPress sa JavaScript?Custom loading sa JS ug CSS files

paggamitWebsite sa WordPressprogrammer, pagpalamboWordPress pluginO kung mag-customize sa usa ka tema sa WordPress, pipila ka mga kapanguhaan sa JavaScript ug CSS scripting ang gi-refer.

• Kasagaran, ang mga tawo naggamit link, script tag direkta alang sa HTML.
• Sa tinuud, ang WordPress adunay built-in nga sopistikado nga mga gimbuhaton ug pamaagi alang sa paghisgot sa mga script.
• Mao nga, ang paggamit sa mga reperensiya sa built-in nga pamaagi sa WordPress labi ka propesyonal ug labi ka mapalapad.

Ang sayop nga paagi sa pagkutlo

Adunay duha ka komon nga paagi sa pagkutlo, kini maayo, kini dili perpekto o makatarunganon.

Type 1:link tags nagtumong sa CSS files

• Ang mga tag sa script magamit ang mga file sa JS.Dili detalyado dinhi.

Type 2:Gamita ang wp_head function

• Ang wp_head function gigamit sa pag-output sa pipila ka kostumbre o gitino sa sistema nga sulud.
• Usahay atong gamiton ang mosunod nga kodigo sa paghisgot niini nga payl:

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

• Kopyaha ang kodigo sa ibabaw ngadto sa functions.php file aron i-refer ang katugbang nga mga file.

Ang mekanismo sa kapanguhaan sa WordPress Enqueue Scripts

Sama sa nahibal-an namong tanan, ang WordPress adunay daghang mga plugins:

• Hapit ang matag plugin nag-refer sa pipila ka resource file.
• Dili kalikayan, adunay mga panagsumpaki tali sa mga kahinguhaan nga gi-refer sa duha ka mga plugin, nga mahimong dili lig-on ug mahimong makaapekto sa kahusayan.

Gamita ang wp_enqueue_script function

• Sa paghisgot sa usa ka kapanguhaan sa WordPress kinahanglan nimong gamitonwp_enqueue_scriptUsa ka function nga adunay pulong nga enqueue sa ngalan sa gi-enqueued o gisunud nga function.
• Uban sa paagi sa WordPress sa pag-enqueue sa mga kapanguhaan (Enqueue Scripts), ang mga reperensiya gibulag gikan sa katugbang nga mga file ug core code.
• Kung gusto sa user nga dili paganahon ang kapanguhaan, mahimo niyang papason, usbon ug ikomento kini nga dili usbon kini gikan sa core code.

Usab, ang pipila nga kasagarang gigamit nga mga librarya sama sa jQuery, jQuery UI, ug uban pa gitukod sa WordPress.

Mahimo natong gamiton ang wp_enqueue_script function aron direkta nga tawagan ang built-in nga librarya, nga makatipig sa code ug mas limpyo nga detalye.

Kung imong gamiton kini nga function sa paghisgot sa imong kaugalingon nga JS ug CSS nga mga file, kinahanglan nimo gamitonwp_register_scriptAng function nagrehistro sa usa ka identifier (handle) ug dayon gigamitwp_enqueue_scriptAng function nagtawag sa kapanguhaan nga katumbas sa kini nga bandila.

Giunsa ang husto nga pag-import sa mga file sa JS ug CSS sa WordPress?

Naghatag ang WordPress og makatarunganon nga mga pamaagi sa pag-import alang sa mga pamaagi sa JS ug CSS.

Mahimo nimong gamiton ang mosunod nga code sa pag-import sa plugin.css file ngadto sa 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' ); 
?>

Ang naa sa ibabaw naggamit sa wp_register_script function aron makahimo usa ka kapanguhaan nga adunay identifier plugin_stylesheet.

Unya, idugang ang gipila nga mga hangyo niiniwp_enqueue_scriptsnaglihok na ang mga aksyon.

Bisan kung ang ngalan sa function usa ka script, wala kini kalabotan sa klase sa resource file ug balido alang sa CSS ug JS.

Ang wp_register_script function dili gyud ingon ka yano, mahimo kini adunay lima ka mga parameter:

1) $handle:Resource identifier.

• 由wp_enqueue_scriptpagbalhin.

2) $src:Ang lokasyon sa kapanguhaan.

• Ang mga paryente o hingpit nga mga adres naggamit sa mga built-in nga function sa WordPress aron makakuha mga adres, ug uban pa.
• KasagaranPagbutang sa posisyonadunay functionplugins_url,get_template_directory_uriPaghulat.

3) $deps:mosalig.

• Kung ang imong gipasabut sa jQuery plugin ug kinahanglan nga mosalig sa jQuery build, kinahanglan nimo nga pun-on ang jQuery.
• Timan-i nga kini gipasa isip array.

4) $ver:Resource nga bersyon, opsyonal.

5) $in_footer:Gibutang ba nimo kini sa ilawom?

• Kasagaran, ang mga file sa JS kinahanglan ibutang sa ilawom sa panid, mahimo nimong itakda kini nga parameter sa Tinuod, ibilin nga blangko o Bakak aron ma-output sa taas.

Atong tan-awon ang usa ka mas kompleto nga JavaScript file reference example ▼

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

Ang mga tema sa WordPress naggamit sa wp_enqueue_script aron maka-import og mga kapanguhaan

Ang mga programmer sa pagpalambo sa tema sa WordPress, gamitonwp_enqueue_scriptImport nga mga kapanguhaan.

• Ang mga pananglitan sa ibabaw mao ang mga pananglitan sa mga reperensya nga mga kapanguhaan alang sa pag-uswag sa plugin sa WordPress.
• Ang pamaagi nga gihisgotan sa hilisgutan parehas.

Ang panguna nga kalainan mao ang paggamit sa katugbang nga function aron makuha ang direktoryo sa tema aron makuha ang adres sa file sa kapanguhaan sa ilawom sa tema.

magamit nimoget_template_directory_urifunction aron makuha ang kasamtangan nga direktoryo sa tema.

Kung naggamit ka ug tema sa bata, kinahanglan nimo nga gamitonget_stylesheet_directory_uriGikuha sa function ang direktoryo sa tema sa ginikanan aron makuha ang katugbang nga mga kapanguhaan.