વર્ડપ્રેસ કેવી રીતે જાવાસ્ક્રિપ્ટને યોગ્ય રીતે રજૂ કરે છે?JS અને CSS ફાઇલોનું કસ્ટમ લોડિંગ

વેબસાઇટ બનાવવા માટે WordPress નો ઉપયોગ કરતા પ્રોગ્રામરો WordPress પ્લગઇન્સ વિકસાવતી વખતે અથવા WordPress થીમ્સને કસ્ટમાઇઝ કરતી વખતે કેટલાક JavaScript અને CSS સ્ક્રિપ્ટ સંસાધનોનો સંદર્ભ લેશે.

• સામાન્ય રીતે, લોકો સીધા જ HTML માટે લિંક, સ્ક્રિપ્ટ ટૅગ્સનો ઉપયોગ કરે છે.
• હકીકતમાં, વર્ડપ્રેસમાં બિલ્ટ-ઇન અત્યાધુનિક કાર્યો અને સ્ક્રિપ્ટ્સને સંદર્ભિત કરવાની પદ્ધતિઓ છે.
• તેથી, વર્ડપ્રેસના બિલ્ટ-ઇન મેથડ રેફરન્સનો ઉપયોગ કરવો વધુ પ્રોફેશનલ અને વધુ એક્સટેન્સિબલ છે.

અપૂર્ણ અવતરણ પદ્ધતિ

ત્યાં બે સામાન્ય અવતરણ પદ્ધતિઓ છે, તે સારું છે, તે સંપૂર્ણ અથવા વાજબી નથી.

પદ્ધતિ ૧: 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 ફંક્શનનો ઉપયોગ કરો

• WordPress માં સંસાધનનો સંદર્ભ આપવા માટે તમારે ઉપયોગ કરવો જોઈએwp_enqueue_scriptએક ફંક્શન કે જેમાં enqueueed અથવા sorted function ના નામ પર enqueue શબ્દ હોય.
• વર્ડપ્રેસના સંસાધનો (એન્ક્યુ સ્ક્રિપ્ટ્સ) એન્ક્યૂ કરવાની રીત સાથે, સંદર્ભોને અનુરૂપ ફાઇલો અને કોર કોડથી અલગ કરવામાં આવે છે.
• જો વપરાશકર્તા સંસાધનને અક્ષમ કરવા માંગે છે, તો તે કોર કોડમાંથી તેને સંશોધિત કર્યા વિના તેને કાઢી, સંશોધિત અને ટિપ્પણી કરી શકે છે.

ઉપરાંત, 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 ફંક્શન ખરેખર એટલું સરળ નથી, તેમાં પાંચ પરિમાણો હોઈ શકે છે:

૧) $handle: સંસાધન ઓળખકર્તા.

• 由wp_enqueue_scriptટ્રાન્સફર

૨) $src: સંસાધનનું સ્થાન.

• સંબંધિત અથવા સંપૂર્ણ સરનામાં, સરનામાંઓ વગેરે મેળવવા માટે વર્ડપ્રેસ બિલ્ટ-ઇન ફંક્શનનો ઉપયોગ કરે છે.
• સામાન્યસ્થિતિકાર્ય ધરાવે છેplugins_url,get_template_directory_uri等

૩) $deps: નિર્ભરતા.

• જો તમે jQuery પ્લગઇનનો ઉલ્લેખ કરી રહ્યાં છો અને બિલ્ડ કરવા માટે jQuery પર આધાર રાખવાની જરૂર છે, તો તમારે jQuery ભરવાની જરૂર છે.
• નોંધ કરો કે તે એરે તરીકે પસાર થાય છે.

૪) $ver: રિસોર્સ વર્ઝન, વૈકલ્પિક.

૫) $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ફંક્શનને અનુરૂપ સંસાધનો મેળવવા માટે પિતૃ થીમની ડિરેક્ટરી મળે છે.