WordPress නිවැරදිව JavaScript හඳුන්වා දෙන්නේ කෙසේද?JS සහ CSS ගොනු අභිරුචි පූරණය කිරීම

වෙබ් අඩවි තැනීම සඳහා WordPress භාවිතා කරන ක්‍රමලේඛකයින් WordPress ප්ලගීන සංවර්ධනය කිරීමේදී හෝ WordPress තේමා අභිරුචිකරණය කිරීමේදී සමහර JavaScript සහ CSS ස්ක්‍රිප්ට් සම්පත් යොමු කරයි.

WordPress HTML විසින් JavaScript (JS) සහ CSS ගොනු පැටවීම හඳුන්වා දෙයි

  • සාමාන්‍යයෙන්, මිනිසුන් HTML සඳහා සෘජුවම සබැඳි, ස්ක්‍රිප්ට් ටැග් භාවිතා කරයි.
  • ඇත්ත වශයෙන්ම, වර්ඩ්ප්‍රෙස් සතුව ස්ක්‍රිප්ට් යොමු කිරීම සඳහා සංකීර්ණ කාර්යයන් සහ ක්‍රම තිබේ.
  • එබැවින්, වර්ඩ්ප්‍රෙස් හි බිල්ට් ක්‍රම යොමු භාවිතා කිරීම වඩාත් වෘත්තීය සහ වඩා විස්තීරණ වේ.

දෝෂ සහිත උපුටා දැක්වීමේ ක්‍රමය

පොදු උපුටා දැක්වීමේ ක්රම දෙකක් තිබේ, එය හොඳයි, එය පරිපූර්ණ හෝ සාධාරණ නොවේ.

ක්‍රමය 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 යන වචනය ඇති ශ්‍රිතයක්.
  • වර්ඩ්ප්‍රෙස් හි සම්පත් පෙළගැස්වීමේ ක්‍රමය සමඟ (එන්කියු ස්ක්‍රිප්ට්), යොමු කිරීම් අනුරූප ගොනු සහ මූලික කේතයෙන් වෙන් කරනු ලැබේ.
  • පරිශීලකයාට සම්පත අක්‍රිය කිරීමට අවශ්‍ය නම්, ඔහුට එය මූලික කේතයෙන් වෙනස් නොකර මකා දැමීමට, වෙනස් කිරීමට සහ අදහස් දැක්වීමට හැකිය.

එසේම, jQuery, jQuery UI වැනි බහුලව භාවිතා වන පුස්තකාල කිහිපයක් WordPress තුළ ගොඩනගා ඇත.

අපට wp_enqueue_script ශ්‍රිතය භාවිතා කර බිල්ට් පුස්තකාලය කෙලින්ම ඇමතීමට හැකිය, එය කේතය සහ පැහැදිලි පිරිවිතර සුරකියි.

නිර්වචන පුස්තකාල සහ හඳුනාගැනීම් (හැන්ඩ්ල්) ලැයිස්තුවක් මෙහි සපයා ඇත

ඔබ ඔබේම JS සහ CSS ගොනු යොමු කිරීමට මෙම ශ්‍රිතය භාවිතා කරන්නේ නම්, ඔබ භාවිතා කළ යුතුයwp_register_scriptශ්‍රිතය හඳුනාගැනීමක් (හැන්ඩ්ල්) ලියාපදිංචි කර පසුව භාවිතා කරයිwp_enqueue_scriptශ්‍රිතය මෙම ධජයට අනුරූප සම්පත් ලෙස හඳුන්වයි.

WordPress හි JS සහ CSS ගොනු නිසි ලෙස ආනයනය කරන්නේ කෙසේද?

වර්ඩ්ප්‍රෙස් 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' ); 
?>

හඳුනාගැනීමේ plugin_stylesheet සමඟ සම්පතක් සෑදීමට ඉහත wp_register_script ශ්‍රිතය භාවිතා කරයි.

ඉන්පසු, එහි පෝලිම් ඉල්ලීම් එකතු කරන්නwp_enqueue_scriptsක්රියාවන් ක්රියාත්මක වේ.

ශ්‍රිත නාමය ස්ක්‍රිප්ට් එකක් වුවද, එය සම්පත් ගොනු වර්ගය සමඟ සම්බන්ධයක් නැති අතර CSS සහ JS යන දෙකටම වලංගු වේ.

wp_register_script ශ්‍රිතය ඇත්ත වශයෙන්ම එතරම් සරල නැත, එයට පරාමිති පහක් තිබිය හැක:

1) $handle: සම්පත් හඳුනාගැනීම.

  • 由wp_enqueue_scriptමාරු.

2) $src: සම්පතේ පිහිටීම.

  • සාපේක්ෂ හෝ නිරපේක්ෂ ලිපින ලිපින ලබා ගැනීම සඳහා වර්ඩ්ප්‍රෙස් බිල්ට්-ඉන් ක්‍රියාකාරකම් භාවිතා කරයි.
  • පොදුස්ථානගත කිරීමකාර්යය ඇත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' ); 
?>

වර්ඩ්ප්‍රෙස් තේමා සම්පත් ආයාත කිරීමට wp_enqueue_script භාවිතා කරයි

වර්ඩ්ප්‍රෙස් තේමා සංවර්ධනයේ ක්‍රමලේඛකයින්, භාවිතා කරන්නwp_enqueue_scriptසම්පත් ආනයනය කරන්න.

  • ඉහත උදාහරණ වර්ඩ්ප්‍රෙස් ප්ලගින සංවර්ධනය සඳහා යොමු කළ සම්පත් සඳහා උදාහරණ වේ.
  • මාතෘකාවෙහි සඳහන් කර ඇති ක්රමය සමාන වේ.

ප්රධාන වෙනස වන්නේ තේමාව යටතේ ඇති සම්පත් ගොනු ලිපිනය ලබා ගැනීම සඳහා තේමා නාමාවලිය ලබා ගැනීමට අනුරූප ශ්රිතය භාවිතා කිරීමයි.

ඔයාට පාවිච්චි කරන්න පුළුවන්get_template_directory_uriවත්මන් තේමා නාමාවලිය ලබා ගැනීමට කාර්යය.

ඔබ ළමා තේමාවක් භාවිතා කරන්නේ නම්, ඔබට භාවිතා කිරීමට අවශ්‍ය වනු ඇතget_stylesheet_directory_uriශ්‍රිතයට අනුරූප සම්පත් ලබා ගැනීම සඳහා මාපිය තේමාවේ නාමාවලිය ලැබේ.

චෙන් වෙයිලියැන්ග්ගේ බ්ලොග් අඩවියේ ( https://www.chenweiliang.com/ ) බෙදාගත් "WordPress හි JavaScript නිසි ලෙස හඳුන්වා දෙන්නේ කෙසේද? JS සහ CSS ගොනු අභිරුචි පූරණය කිරීම" යන ලිපිය ඔබට ප්‍රයෝජනවත් වනු ඇතැයි අපි බලාපොරොත්තු වෙමු.

මෙම ලිපියේ සබැඳිය බෙදා ගැනීමට නිදහස් වන්න: https://www.chenweiliang.com/cwl-950.html

තවත් සැඟවුණු උපක්‍රම අගුළු ඇරීමට🔑, අපගේ ටෙලිග්‍රාම් නාලිකාවට සම්බන්ධ වීමට සාදරයෙන් පිළිගනිමු!

ඔබ එයට කැමති නම් Share කර Like කරන්න! ඔබගේ කොටස් සහ කැමැත්ත අපගේ අඛණ්ඩ අභිප්‍රේරණයයි!

 

发表

您的邮箱地址不会被公开。必填项已用*标注

අනුචලන ඉහළට