வேர்ட்பிரஸ் ஜாவாஸ்கிரிப்டை எவ்வாறு சரியாக அறிமுகப்படுத்துகிறது?JS மற்றும் CSS கோப்புகளைத் தனிப்பயனாக்குதல்

க்குவேர்ட்பிரஸ் இணையதளம்புரோகிராமர்கள், வளரும்வேர்ட்பிரஸ் செருகுநிரல்அல்லது ஒரு வேர்ட்பிரஸ் தீம் தனிப்பயனாக்கும்போது, ​​சில ஜாவாஸ்கிரிப்ட் மற்றும் CSS ஸ்கிரிப்டிங் ஆதாரங்கள் குறிப்பிடப்படுகின்றன.

வேர்ட்பிரஸ் HTML ஜாவாஸ்கிரிப்ட் (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 கோப்பில் நகலெடுக்கவும்.

வேர்ட்பிரஸ் என்கியூ ஸ்கிரிப்ட்கள் வள பொறிமுறை

நாம் அனைவரும் அறிந்தபடி, வேர்ட்பிரஸ் நிறைய செருகுநிரல்களைக் கொண்டுள்ளது:

  • ஏறக்குறைய ஒவ்வொரு சொருகியும் சில ஆதாரக் கோப்பைக் குறிப்பிடுகிறது.
  • தவிர்க்க முடியாமல், இரண்டு செருகுநிரல்களால் குறிப்பிடப்பட்ட வளங்களுக்கு இடையே முரண்பாடுகள் இருக்கும், இது நிலையற்றதாகி செயல்திறனைப் பாதிக்கலாம்.

wp_enqueue_script செயல்பாட்டைப் பயன்படுத்தவும்

  • வேர்ட்பிரஸ்ஸில் ஒரு ஆதாரத்தைக் குறிப்பிட நீங்கள் பயன்படுத்த வேண்டும்wp_enqueue_scriptவரிசைப்படுத்தப்பட்ட அல்லது வரிசைப்படுத்தப்பட்ட செயல்பாட்டின் பெயரில் என்கியூ என்ற வார்த்தையைக் கொண்ட ஒரு செயல்பாடு.
  • வேர்ட்பிரஸ்ஸின் ஆதாரங்களை வரிசைப்படுத்துவதன் மூலம் (என்கியூ ஸ்கிரிப்டுகள்), குறிப்புகள் தொடர்புடைய கோப்புகள் மற்றும் கோர் குறியீட்டிலிருந்து பிரிக்கப்படுகின்றன.
  • பயனர் ஆதாரத்தை முடக்க விரும்பினால், அவர் அதை மையக் குறியீட்டிலிருந்து மாற்றாமல் நீக்கலாம், மாற்றலாம் மற்றும் கருத்து தெரிவிக்கலாம்.

மேலும், jQuery, jQuery UI போன்ற சில பொதுவாகப் பயன்படுத்தப்படும் நூலகங்கள் வேர்ட்பிரஸ்ஸில் கட்டமைக்கப்பட்டுள்ளன.

உள்ளமைக்கப்பட்ட நூலகத்தை நேரடியாக அழைக்க wp_enqueue_script செயல்பாட்டைப் பயன்படுத்தலாம், இது குறியீடு மற்றும் தெளிவான விவரக்குறிப்பைச் சேமிக்கிறது.

உள்ளமைக்கப்பட்ட வரையறை நூலகங்கள் மற்றும் அடையாளங்காட்டிகள் (கைப்பிடிகள்) பட்டியல் இங்கே கொடுக்கப்பட்டுள்ளது

உங்கள் சொந்த JS மற்றும் CSS கோப்புகளைக் குறிப்பிட இந்தச் செயல்பாட்டைப் பயன்படுத்தினால், நீங்கள் பயன்படுத்த வேண்டும்wp_register_scriptசெயல்பாடு ஒரு அடையாளங்காட்டியை (கைப்பிடி) பதிவுசெய்து பின்னர் பயன்படுத்துகிறதுwp_enqueue_scriptசெயல்பாடு இந்த கொடியுடன் தொடர்புடைய வளத்தை அழைக்கிறது.

வேர்ட்பிரஸில் 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' ); 
?>

மேலே உள்ளவை wp_register_script செயல்பாட்டைப் பயன்படுத்தி, அடையாளங்காட்டி plugin_stylesheet மூலம் ஒரு ஆதாரத்தை உருவாக்குகிறது.

பின்னர், அதன் வரிசையில் உள்ள கோரிக்கைகளைச் சேர்க்கவும்wp_enqueue_scriptsநடவடிக்கைகள் செயல்பாட்டில் உள்ளன.

செயல்பாட்டின் பெயர் ஸ்கிரிப்டாக இருந்தாலும், இது ஆதாரக் கோப்பு வகையுடன் எந்த தொடர்பும் இல்லை மற்றும் CSS மற்றும் JS இரண்டிற்கும் செல்லுபடியாகும்.

wp_register_script செயல்பாடு உண்மையில் அவ்வளவு எளிதல்ல, இது ஐந்து அளவுருக்களைக் கொண்டிருக்கலாம்:

1) $கைப்பிடி:வள அடையாளங்காட்டி.

  • wp_enqueue_scriptபரிமாற்றம்.

2) $src:வளத்தின் இடம்.

  • தொடர்புடைய அல்லது முழுமையான முகவரிகள் முகவரிகள் போன்றவற்றைப் பெற வேர்ட்பிரஸ் உள்ளமைக்கப்பட்ட செயல்பாடுகளைப் பயன்படுத்துகின்றன.
  • பொதுவானதுநிலைப்படுத்தல்செயல்பாடு உள்ளதுplugins_url,get_template_directory_uri等.

3) $deps:நம்பி.

  • நீங்கள் jQuery செருகுநிரலைக் குறிப்பிடுகிறீர்கள் மற்றும் jQuery கட்டமைப்பை நம்பியிருக்க வேண்டும் என்றால், நீங்கள் jQuery ஐ நிரப்ப வேண்டும்.
  • இது ஒரு வரிசையாக அனுப்பப்பட்டது என்பதை நினைவில் கொள்க.

4) $ver:ஆதார பதிப்பு, விருப்பமானது.

5) $in_footer:நீங்கள் அதை கீழே வைக்கிறீர்களா?

  • பொதுவாக, JS கோப்புகள் பக்கத்தின் கீழே வைக்கப்பட வேண்டும், நீங்கள் இந்த அளவுருவை True என அமைக்கலாம், அதை வெறுமையாகவோ அல்லது தவறானதாகவோ விடவும்.

இன்னும் முழுமையான ஜாவாஸ்கிரிப்ட் கோப்பு குறிப்பு உதாரணத்தைப் பார்ப்போம் ▼

<?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

மேலும் மறைக்கப்பட்ட தந்திரங்களைத் திறக்க🔑, எங்கள் டெலிகிராம் சேனலில் சேர வரவேற்கிறோம்!

பிடித்திருந்தால் லைக் செய்து பகிருங்கள்! உங்களின் ஷேர்களும் லைக்குகளும் எங்களின் தொடர் உந்துதலாகும்!

 

发表 评论

உங்கள் மின்னஞ்சல் முகவரி வெளியிடப்படாது. தேவையான புலங்கள் பயன்படுத்தப்படுகின்றன * லேபிள்

டாப் உருட்டு