តើ WordPress ណែនាំ JavaScript ឱ្យបានត្រឹមត្រូវយ៉ាងដូចម្តេច?ការផ្ទុកឯកសារ JS និង CSS ផ្ទាល់ខ្លួន

ប្រើគេហទំព័រ WordPressអ្នកសរសេរកម្មវិធី, ការអភិវឌ្ឍន៍កម្មវិធីជំនួយ WordPressឬនៅពេលប្ដូរប្រធានបទ WordPress តាមបំណង ធនធានស្គ្រីប JavaScript និង CSS មួយចំនួនត្រូវបានយោង។

• ជាធម្មតា មនុស្សប្រើតំណភ្ជាប់ ស្លាកស្គ្រីបដោយផ្ទាល់សម្រាប់ HTML ។
• តាមពិត ប្លក, រូបភាពមានមុខងារ និងវិធីសាស្ត្រស្មុគ្រស្មាញដែលភ្ជាប់មកជាមួយសម្រាប់ការយោងស្គ្រីប។
• ដូច្នេះ ការប្រើប្រាស់ឯកសារយោងវិធីសាស្រ្តដែលភ្ជាប់មកជាមួយ WordPress គឺមានលក្ខណៈវិជ្ជាជីវៈ និងអាចពង្រីកបានកាន់តែច្រើន។

វិធីសាស្រ្តដកស្រង់កំហុស

មានវិធីសាស្រ្តដកស្រង់ទូទៅពីរ វាមិនអីទេ វាគ្រាន់តែមិនល្អឥតខ្ចោះ ឬសមហេតុផល។

ប្រភេទទី 1៖ស្លាកតំណសំដៅលើឯកសារ CSS

• ស្លាកស្គ្រីបអនុវត្តឯកសារ 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 នៃធនធាន enqueueing (Enqueue Scripts) ឯកសារយោងត្រូវបានបំបែកចេញពីឯកសារដែលត្រូវគ្នា និងកូដស្នូល។
• ប្រសិនបើអ្នកប្រើចង់បិទធនធាននោះ គាត់អាចលុប កែប្រែ និងបញ្ចេញមតិដោយមិនចាំបាច់កែប្រែវាចេញពីកូដស្នូល។

ផងដែរ បណ្ណាល័យដែលប្រើជាទូទៅមួយចំនួនដូចជា jQuery, jQuery UI ជាដើម ត្រូវបានបង្កើតឡើងនៅក្នុង WordPress ។

យើង​អាច​ប្រើ​មុខងារ wp_enqueue_script ដើម្បី​ហៅ​ទៅ​បណ្ណាល័យ​ដែល​ភ្ជាប់​មក​ជាមួយ​ដោយ​ផ្ទាល់ ដែល​រក្សា​ទុក​កូដ និង​ការ​បញ្ជាក់​ច្បាស់​ជាង។

ប្រសិនបើអ្នកប្រើមុខងារនេះដើម្បីយោងឯកសារ JS និង CSS ផ្ទាល់ខ្លួនរបស់អ្នក អ្នកត្រូវប្រើwp_register_scriptមុខងារចុះឈ្មោះឧបករណ៍កំណត់អត្តសញ្ញាណ (ចំណុចទាញ) ហើយបន្ទាប់មកប្រើwp_enqueue_scriptមុខងារហៅធនធានដែលត្រូវគ្នានឹងទង់នេះ។

តើធ្វើដូចម្តេចដើម្បីនាំចូលឯកសារ JS និង CSS ឱ្យបានត្រឹមត្រូវនៅក្នុង 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 ដើម្បីបង្កើតធនធានជាមួយ identifier plugin_stylesheet ។

បន្ទាប់មក បន្ថែមសំណើដែលបានដាក់ជាជួររបស់វាទៅwp_enqueue_scriptsសកម្មភាពកំពុងដំណើរការ។

ខណៈពេលដែលឈ្មោះមុខងារជាស្គ្រីប វាមិនមានអ្វីទាក់ទងនឹងប្រភេទនៃឯកសារធនធាន ហើយមានសុពលភាពសម្រាប់ទាំង CSS និង JS ។

មុខងារ wp_register_script គឺពិតជាមិនសាមញ្ញនោះទេ វាអាចមានប៉ារ៉ាម៉ែត្រប្រាំ៖

1) $ handle:ឧបករណ៍កំណត់អត្តសញ្ញាណធនធាន។

• 由។wp_enqueue_scriptផ្ទេរ។

២) $src៖ទីតាំងនៃធនធាន។

• អាសយដ្ឋានដែលទាក់ទង ឬដាច់ខាតប្រើមុខងារដែលភ្ជាប់មកជាមួយ WordPress ដើម្បីទទួលបានអាសយដ្ឋាន។ល។
• ធម្មតាទីតាំងមុខងារមានplugins_url,get_template_directory_uriរង់ចាំ។

៣) $deps៖ពឹងផ្អែក។

• ប្រសិនបើអ្នកកំពុងយោងទៅកម្មវិធីជំនួយ jQuery ហើយត្រូវការពឹងផ្អែកលើ jQuery ដើម្បីបង្កើត អ្នកត្រូវបំពេញ jQuery ។
• ចំណាំថាវាត្រូវបានឆ្លងកាត់ជាអារេ។

៤) $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មុខងារទទួលបានថតប្រធានបទមេ ដើម្បីទទួលបានធនធានដែលត្រូវគ្នា។