WordPress ua kom zoo qhia JavaScript li cas?Kev cai thauj khoom ntawm JS thiab CSS cov ntaub ntawv

sivWordPress lub vev xaibprogrammers, txhim khoWordPress pluginLos yog thaum kho lub ntsiab lus WordPress, qee qhov JavaScript thiab CSS cov ntawv sau tau hais txog.

• Feem ntau, tib neeg siv qhov txuas, sau ntawv ncaj qha rau HTML.
• Qhov tseeb, WordPress muaj kev ua haujlwm zoo thiab cov txheej txheem rau kev xa cov ntawv sau.
• Yog li, siv WordPress 'built-in method refers is more professional and more extensible.

Txoj kev hais lus tsis zoo

Muaj ob txoj hauv kev hais lus zoo, nws zoo, nws tsuas yog tsis zoo tag nrho lossis tsim nyog.

Hom 1:link tags xa mus rau CSS cov ntaub ntawv

• Cov ntawv cim npe siv JS cov ntaub ntawv.Tsis paub meej ntawm no.

Hom 2:Siv wp_head muaj nuj nqi

• Lub wp_head muaj nuj nqi yog siv los tso tawm qee cov ntsiab lus kev cai lossis lub kaw lus-txhais.
• Qee zaum peb siv cov cai hauv qab no los siv cov ntaub ntawv no:

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

• Luam cov cai saum toj no rau hauv cov ntaub ntawv functions.php los siv cov ntaub ntawv sib xws.

WordPress Enqueue Scripts peev txheej mechanism

Raws li peb txhua tus paub, WordPress muaj ntau plugins:

• Yuav luag txhua lub plugin hais txog qee cov ntaub ntawv peev txheej.
• Inevitably, yuav muaj kev tsis sib haum xeeb ntawm cov peev txheej hais los ntawm ob lub plugins, uas yuav dhau los ua tsis ruaj khov thiab yuav cuam tshuam rau kev ua haujlwm.

Siv wp_enqueue_script muaj nuj nqi

• Txhawm rau siv cov peev txheej hauv WordPress koj yuav tsum sivwp_enqueue_scriptIb txoj haujlwm uas muaj lo lus enqueue nyob rau hauv lub npe ntawm lub enqueued los yog sorted muaj nuj nqi.
• Nrog rau qhov no WordPress txoj kev enqueueing cov peev txheej (Enqueue Scripts), cov ntaub ntawv pov thawj raug cais tawm ntawm cov ntaub ntawv sib xws thiab cov lej tseem ceeb.
• Yog tias tus neeg siv xav lov tes taw cov peev txheej, nws tuaj yeem tshem tawm, hloov kho thiab tawm tswv yim yam tsis tau hloov kho los ntawm cov lej tseem ceeb.

Tsis tas li ntawd, qee cov tsev qiv ntawv uas nquag siv xws li jQuery, jQuery UI, thiab lwm yam tau tsim rau hauv WordPress.

Peb tuaj yeem siv wp_enqueue_script muaj nuj nqi hu rau lub tsev qiv ntawv built-in ncaj qha, uas txuag cov lej thiab cov ntsiab lus huv dua.

Yog tias koj siv txoj haujlwm no los siv koj tus kheej JS thiab CSS cov ntaub ntawv, koj yuav tsum sivwp_register_scriptCov haujlwm sau npe tus cim (kho) thiab tom qab ntawd sivwp_enqueue_scriptLub luag haujlwm hu cov peev txheej sib raug rau tus chij no.

Yuav ua li cas kom import JS thiab CSS cov ntaub ntawv hauv WordPress?

WordPress muab txoj hauv kev tsim nyog rau JS thiab CSS txoj hauv kev.

Koj tuaj yeem siv cov cai hauv qab no los import cov ntaub ntawv plugin.css rau hauv 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' ); 
?>

Cov saum toj no siv wp_register_script muaj nuj nqi los tsim cov peev txheej nrog tus cim plugin_stylesheet.

Tom qab ntawd, ntxiv nws queued thov rauwp_enqueue_scriptskev nqis tes ua yog ua haujlwm.

Txawm hais tias lub npe ua haujlwm yog ib tsab ntawv, nws tsis muaj dab tsi ua nrog hom ntaub ntawv thiab siv tau rau ob qho tib si CSS thiab JS.

Lub wp_register_script muaj nuj nqi yog tiag tiag tsis yooj yim, nws muaj peev xwm muaj tsib yam tsis muaj:

1) $ tuav:Resource ID nkag mus.

• 由wp_enqueue_scripthloov.

2) $src:Qhov chaw ntawm cov peev txheej.

• Cov txheeb ze lossis qhov chaw nyob tsis zoo siv WordPress built-in functions kom tau txais chaw nyob, thiab lwm yam.
• NtauTxoj Haujlwmmuaj nuj nqiplugins_url,get_template_directory_uri。。。

3) $deps:vam.

• Yog tias koj xa mus rau jQuery plugin thiab xav tau kev vam khom rau jQuery tsim, koj yuav tsum tau sau rau hauv jQuery.
• Nco ntsoov tias nws dhau los ua ib qho array.

4) Nqe: $Resource version, xaiv tau.

5) $in_footer:Koj puas muab tso rau hauv qab?

• Nquag, JS cov ntaub ntawv yuav tsum tau muab tso rau hauv qab ntawm nplooj ntawv, koj tuaj yeem teeb tsa qhov ntsuas no mus rau Qhov Tseeb, tso nws dawb paug lossis False tso tawm rau saum.

Cia wb mus saib qhov ua tiav JavaScript cov ntaub ntawv siv piv txwv ▼

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

WordPress ntxhais siv wp_enqueue_script los import cov peev txheej

Programmers hauv WordPress ntsiab kev txhim kho, sivwp_enqueue_scriptNtshuam cov peev txheej.

• Cov piv txwv saum toj no yog cov piv txwv ntawm cov peev txheej siv rau WordPress plugin txhim kho.
• Txoj kev hais txog hauv lub ncauj lus zoo ib yam.

Qhov sib txawv tseem ceeb yog siv cov haujlwm sib thooj kom tau txais cov ntsiab lus qhia kom tau txais cov ntaub ntawv chaw nyob hauv qab lub ntsiab.

koj siv tauget_template_directory_urimuaj nuj nqi kom tau txais cov ntsiab lus tam sim no.

Yog tias koj siv lub ntsiab lus me me, koj yuav tau sivget_stylesheet_directory_uriCov haujlwm tau txais lub ntsiab lus niam txiv cov npe kom tau txais cov peev txheej sib xws.