Ինչպե՞ս է WordPress-ը ճիշտ ներկայացնում JavaScript-ը:JS և CSS ֆայլերի անհատական ​​բեռնում

用WordPress կայքըծրագրավորողներ, զարգացողWordPress pluginԿամ WordPress-ի թեման հարմարեցնելիս հղում են արվում JavaScript-ի և CSS-ի սկրիպտավորման որոշ ռեսուրսների վրա:

• Սովորաբար մարդիկ օգտագործում են հղումներ, սցենարի պիտակներ ուղղակիորեն HTML-ի համար:
• Փաստորեն, WordPress-ն ունի ներկառուցված բարդ գործառույթներ և մեթոդներ՝ սկրիպտների հղումների համար:
• Այսպիսով, WordPress-ի ներկառուցված մեթոդի հղումների օգտագործումն ավելի պրոֆեսիոնալ է և ավելի ընդարձակելի:

Թերի մեջբերման մեթոդը

Գոյություն ունեն մեջբերումների երկու սովորական եղանակ, դա լավ է, դա պարզապես կատարյալ կամ ողջամիտ չէ:

Տիպ 1:Հղման պիտակները վերաբերում են CSS ֆայլերին

• Script պիտակները կիրառվում են JS ֆայլեր:Այստեղ մանրամասն չէ:

Տիպ 2:Օգտագործեք wp_head ֆունկցիան

• Wp_head ֆունկցիան օգտագործվում է հատուկ կամ համակարգով սահմանված բովանդակություն դուրս բերելու համար:
• Մենք երբեմն օգտագործում ենք հետևյալ կոդը՝ այս ֆայլին հղում կատարելու համար.

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

• Պատճենեք վերը նշված կոդը functions.php ֆայլում՝ համապատասխան ֆայլերին հղում տալու համար:

WordPress Enqueue Scripts ռեսուրսների մեխանիզմ

Ինչպես բոլորս գիտենք, WordPress-ն ունի բազմաթիվ պլագիններ.

• Գրեթե յուրաքանչյուր փլագին հղում է անում որոշ ռեսուրսների ֆայլին:
• Անխուսափելիորեն, երկու պլագինների կողմից հղված ռեսուրսների միջև հակասություններ կլինեն, որոնք կդառնան անկայուն և կարող են ազդել արդյունավետության վրա:

Օգտագործեք wp_enqueue_script ֆունկցիան

• WordPress-ում ռեսուրսին հղում կատարելու համար դուք պետք է օգտագործեքwp_enqueue_scriptԳործառույթ, որը հերթագրված կամ տեսակավորված ֆունկցիայի անվան մեջ ունի enqueue բառը:
• WordPress-ի ռեսուրսների հերթագրման այս եղանակով (Enqueue Scripts) հղումները բաժանվում են համապատասխան ֆայլերից և հիմնական կոդից:
• Եթե ​​օգտատերը ցանկանում է անջատել ռեսուրսը, նա կարող է ջնջել, փոփոխել և մեկնաբանել այն՝ առանց հիմնական կոդից փոփոխելու։

Բացի այդ, որոշ սովորաբար օգտագործվող գրադարաններ, ինչպիսիք են jQuery, jQuery UI և այլն, ներկառուցված են WordPress-ում:

Մենք կարող ենք օգտագործել wp_enqueue_script ֆունկցիան՝ ուղղակիորեն ներկառուցված գրադարանը կանչելու համար, որը պահպանում է կոդը և ավելի մաքրող հատկանիշը:

Եթե ​​դուք օգտագործում եք այս գործառույթը ձեր սեփական JS և CSS ֆայլերը հղում կատարելու համար, դուք պետք է օգտագործեքwp_register_scriptՖունկցիան գրանցում է նույնացուցիչ (բռնակ), այնուհետև օգտագործում էwp_enqueue_scriptՖունկցիան կանչում է այս դրոշին համապատասխան ռեսուրսը։

Ինչպե՞ս ճիշտ ներմուծել JS և CSS ֆայլեր WordPress-ում:

WordPress-ը տրամադրում է խելամիտ ներմուծման մեթոդներ JS և CSS մեթոդների համար:

Դուք կարող եք օգտագործել հետևյալ կոդը՝ plugin.css ֆայլը ▼ ներմուծելու համար

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

Վերևում օգտագործվում է wp_register_script ֆունկցիան՝ նույնացուցիչ plugin_stylesheet-ով ռեսուրս ստեղծելու համար:

Այնուհետև ավելացրեք իր հերթագրված հարցումներըwp_enqueue_scriptsգործողությունները գործում են.

Չնայած ֆունկցիայի անունը սկրիպտ է, այն կապ չունի ռեսուրսի ֆայլի տեսակի հետ և վավեր է ինչպես CSS-ի, այնպես էլ JS-ի համար:

Wp_register_script ֆունկցիան իսկապես այնքան էլ պարզ չէ, այն կարող է ունենալ հինգ պարամետր.

1) $ handle:Ռեսուրսի նույնացուցիչ:

• 由wp_enqueue_scriptփոխանցում.

2) $src:Ռեսուրսի գտնվելու վայրը.

• Հարաբերական կամ բացարձակ հասցեները օգտագործում են WordPress-ի ներկառուցված գործառույթները հասցեներ ստանալու համար և այլն:
• ԸնդհանուրԴիրքավորումգործառույթ ունիplugins_url,get_template_directory_uri。

3) $deps:ապավինել

• Եթե ​​դուք նկատի ունեք jQuery հավելվածը և պետք է ապավինեք jQuery կառուցմանը, ապա պետք է լրացնեք jQuery:
• Նշենք, որ այն փոխանցվում է որպես զանգված:

4) $ver:Ռեսուրսի տարբերակ, ընտրովի:

5) $in_footer:Դուք այն դնում եք ներքևում:

• Սովորաբար, JS ֆայլերը պետք է տեղադրվեն էջի ներքևի մասում, կարող եք այս պարամետրը դնել True, թողնել դատարկ կամ False, որպեսզի դուրս բերվի վերև:

Եկեք դիտարկենք ավելի ամբողջական JavaScript ֆայլի տեղեկանքի օրինակ ▼

<?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-ի թեմաներն օգտագործում են wp_enqueue_script ռեսուրսները ներմուծելու համար

Ծրագրավորողներ WordPress-ի թեմաների մշակման մեջ, օգտագործումwp_enqueue_scriptՆերմուծման ռեսուրսներ.

• Վերոնշյալ օրինակները WordPress հավելվածի մշակման համար հղումային ռեսուրսների օրինակներ են:
• Թեմայում հիշատակված մեթոդը նման է.

Հիմնական տարբերությունն այն է, որ օգտագործեք համապատասխան գործառույթը՝ թեմայի գրացուցակը ստանալու համար՝ թեմայի տակ գտնվող ռեսուրսի ֆայլի հասցեն ստանալու համար:

դուք կարող եք օգտագործելget_template_directory_uriգործառույթ՝ ընթացիկ թեմայի գրացուցակը ստանալու համար:

Եթե ​​դուք օգտագործում եք մանկական թեմա, ապա ձեզ հարկավոր է օգտագործելget_stylesheet_directory_uriՖունկցիան ստանում է մայր թեմայի գրացուցակը համապատասխան ռեսուրսները ստանալու համար: