कैसे फ़ंक्शन में सही ढंग से जावास्क्रिप्ट जोड़ने के लिए

Question

मैं कुछ बदसूरत दिखने वाले तीरों को हटाना चाहूंगा जो WooCommerce में कार्ट बटन पर मानक हैं। इसे प्राप्त करने के लिए, मुझे निम्नलिखित कोड को जोड़ने का एक टिप मिला, जिसे दस्तावेज़ को लोड करने पर तीर को हटा देना चाहिए।

मुझे लगता है कि मैं इसे अपने कार्यों में लगाने जा रहा हूं। मैं वास्तव में ऐसा कैसे करूंगा?

$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});

संपादित करें

ठीक है। मैंने इस दृष्टिकोण की कोशिश की है:

'RemoveArrows.js' नाम से एक फ़ाइल बनाई और इसे मेरे प्लगइन फ़ोल्डर में रखा। इसमें मूल कोड के समान सामग्री है, $ jQuery के अलावा। फिर मैंने निम्न को जोड़ दिया।

function wpb_adding_scripts() {
      wp_register_script('my_amazing_script', plugins_url('removeArrows.js', FILE), array('jquery'),'1.1', true);
     wp_enqueue_script('my_amazing_script');
 } 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

मैं यह पता नहीं लगा सकता कि कोड को ठीक से कैसे प्रदर्शित किया जाए। यह काम नहीं किया। इस काम को करने के लिए कोई सुझाव?

jQuery स्निपेट स्रोत

Comments

वह पागल है: क्या आप उस कोड में तीर को संपादित नहीं कर सकते जो उन्हें उत्पन्न करता है? (या क्या इसे किसी बाहरी स्रोत से डाउनलोड किया गया है?) किसी भी स्थिति में आप दोनों HTML को कार्ट ब्लॉक के अंदर दो बार पढ़ने और लिखने से बचने के लिए एक ही फ़ंक्शन में कर सकते हैं। मुझे सीधे तौर पर उस पेज को इंजेक्ट करने का कोई तरीका नहीं पता है। फ़ंक्शन से पृष्ठ में। लेकिन आप इसे एक अलग स्क्रिप्ट फ़ाइल में सहेज सकते हैं (यदि आपके पास पहले से कोई ऐसा नहीं है जिसे आप इसे जोड़ सकते हैं) और फिर wp-enqueue-scriptइसे। आपको $एस को भी बदलना होगा jQuery(उस पेज सेक्शन 7 को देखें)

— Rup

नहीं, मुझे पूरा यकीन है कि इसे डालने से पहले हटाया नहीं जा सकता। यदि यह हो सकता है, तो मैं इसे करने का एक तरीका नहीं खोज पाया। एकल फ़ंक्शन में इसे जोड़ने के बारे में अच्छा बिंदु। क्या यह इस तरह दिखेगा? $ (दस्तावेज़)। "," ");});}); मैं एनक्यू लिपि में देखूंगा। थोड़ा जटिल लगता है, हालांकि .. धन्यवाद!

— user2806026

ठीक है। मैंने इस दृष्टिकोण की कोशिश की; 'RemoveArrows.js' नाम से एक फ़ाइल बनाई और इसे मेरे प्लगइन फ़ोल्डर में रखा। इसमें मूल कोड के समान सामग्री है, $ jQuery के अलावा। फिर मैंने निम्नलिखित को फ़ंक्शन में जोड़ दिया। एफपी; `फ़ंक्शन wpb_adding_scripts () {wp_register_script ('my_amazing_script', plugins_url ('removeArrows.js', FILE ), सरणी ('jquery'), '1.1', true); wp_enqueue_script ( 'my_amazing_script'); } add_action ('wp_enqueue_scripts', 'wpb_adding_scripts'); (क्षमा करें, मुझे पता है कि कोड को ठीक से कैसे प्रदर्शित किया जाए) यह काम नहीं किया। क्या आप इसे ठीक करने में मेरी मदद कर सकते हैं?

— user2806026

कृपया संपादित करें और सभी प्रासंगिक जानकारी को सीधे अपने प्रश्न में शामिल करें कोड जोड़ने के लिए टिप्पणी अनुभाग का उपयोग न करें

— पीटर गोयनर

Answer 1

आपका $scrअपने में wp_register_script()समारोह गलत है। यह देखते हुए कि आपके functions.php आपके plugin के अंदर है, और आपका removeArrows.js आपके plugin के root में है, आपका काम $scrइस तरह दिखना चाहिए

plugins_url( '/removeArrows.js' , __FILE__ )

ध्यान देने की एक और बात, आपकी स्क्रिप्ट और शैलियों को अंतिम रूप से लोड करना हमेशा अच्छा होता है। यह सुनिश्चित करेगा कि यह अन्य लिपियों और शैलियों से अलग नहीं होगा। ऐसा करने के लिए, बस अपने प्राथमिकता पैरामीटर ( $priority) के लिए बहुत कम प्राथमिकता (बहुत अधिक संख्या) जोड़ें add_action।

 add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

और हमेशाwp_enqueue_scripts एक्शन हुक के माध्यम से स्क्रिप्ट और शैलियों को लोड / एनक्यू करें , क्योंकि यह उपयोग करने के लिए उचित हुक है। स्क्रिप्ट और शैलियों को सीधे या पर लोड न करेंwp_headwp_footer

संपादित करें

थीम के लिए, जैसा कि आपने संकेत दिया है कि आपने अब अपने विषय में अपना सब कुछ स्थानांतरित कर दिया है, तो यह आपके $scrलिए बदल जाएगा

 get_template_directory_uri() . '/removeArrows.js'

मूल विषयों और इस के लिए

get_stylesheet_directory_uri() . '/removeArrows.js'

बाल विषयों के लिए। आपका पूरा कोड इस तरह दिखना चाहिए

function wpb_adding_scripts() {
    wp_register_script('my_amazing_script', get_template_directory_uri() . '/removeArrows.js', array('jquery'),'1.1', true);
    wp_enqueue_script('my_amazing_script');
} 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

Comments

आपकी महान सलाह के लिए बहुत बहुत धन्यवाद। यह उपयोग करने के लिए दृष्टिकोण की तरह लगता है। एक सवाल हालांकि; functions.php मेरे theme folder में है। अगर यह सिर्फ एक ही है, विषय रूट फ़ोल्डर में मैं js-file को कैसे लिंक करूंगा?

— user2806026

आपको सब कुछ एक प्लगइन या थीम में रखना चाहिए, उन्हें विभाजित न करें। यदि आप एक विषय में हैं, तो अपने $scrहोगा get_template_directory_uri() . '/removeArrows.js'माता पिता विषयों के लिए, और get_templatestylesheet_directory_uri() . '/removeArrows.js'childthemes के लिए

— पीटर गूसेन

फिर से कोशिश की, इस बार विषय फ़ोल्डर में सीधे removeArrows.js को जोड़ने और फ़ंक्शन में निम्न का उपयोग कर रहा है। function wpb_adding_scripts () {wp_register_script ('my_amazing_script', get_template_directory_uri ()। '/removeArrows.js', FILE ), सरणी ('jquery'), '1.1', सच); wp_enqueue_script ( 'my_amazing_script'); } add_action ('wp_enqueue_scripts', 'wpb_adding_scripts', 999); यह मुझे पार्स त्रुटि देता है: वाक्यविन्यास त्रुटि, अप्रत्याशित ',' wp_register_script लाइन पर।

— user2806026

get_template_directory_uri() . '/removeArrows.js', FILE)बस होना चाहिएget_template_directory_uri() . '/removeArrows.js'

— पीटर गोयन

नहीं। अपने मूल कोड के तल में आपके द्वारा संपादित पूरी तरह से कोड का उपयोग किया। सामग्री को देखते समय केवल कार्ट पेज को फ्रीज करना है। मुझे लगता है कि मैं बस छोड़ दूंगा :-) एक आखिरी उपाय हालांकि; आपने यह उल्लेख करके शुरू किया कि get_template_directory_uri () मूल विषयों के लिए है, और फिर अंतिम पूर्ण कोड में यह है कि यह बच्चे के विषयों के लिए है। यह किसका है? मेरा विषय एक अभिभावक है :-)

— user2806026

Answer 2

मैं एक और बाहरी js फ़ाइल नहीं जोड़ूंगा, इसके अतिरिक्त और अनावश्यक संसाधन लाने के लिए और यह कुछ ऐसा है जिसे हम पृष्ठ लोडिंग समय के संदर्भ में काट देना चाहते हैं।

मैं इस jQuery स्निपेट को wp_headहुक का उपयोग करके आपकी वेबसाइटों के प्रमुखों में शामिल करूंगा । आप अपनी थीम या प्लगइन्स फ़ंक्शन फ़ाइल में निम्न पेस्ट करेंगे। मैंने यह भी सुनिश्चित किया है कि jQuery नो-संघर्ष मोड में है जैसा कि आप नीचे देख सकते हैं।

add_action('wp_head','woocommerce_js');

function woocommerce_js()
{ // break out of php ?>

jQuery(document).ready(function($) {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
<?php } // break back into php

एक बार जब आप ऐसा कर लेते हैं और अपने पृष्ठ को ताज़ा कर लेते हैं, तो यह सुनिश्चित करने के लिए पृष्ठ स्रोत की जाँच करें कि यह jQuery स्निपेट वास्तव में आपके पृष्ठ में लोड हो रहा है या नहीं। यदि ऐसा है तो यह तब तक काम करना चाहिए जब तक कि वास्तविक jQuery स्निपेट आप उपयोग नहीं कर रहे हैं।

Comments

हालांकि, जावास्क्रिप्ट लोड करने के लिए यह वर्डप्रेस तरीका नहीं है। wp_enqueue_script()अधिक जानकारी के लिए देखें ।

— पाट जे

हाय @PJJ, मैं सहमत हूं, इसमें आपके सभी जावास्क्रिप्ट कार्यों के साथ एक बाहरी जेएस लाइब्रेरी या जेएस फ़ाइल लोड करने के लिए, फिर हाँ बिल्कुल सही तरीका होगा। हालाँकि, यदि आप जावास्क्रिप्ट का एक स्निपेट लोड कर रहे हैं, तो इसका मतलब यह नहीं है कि एक पूरी नई JS फाइल बनाई जाए और इसके लिए एक अतिरिक्त HTTP अनुरोध जोड़ा जाए। उदाहरण के लिए Google Analytics को लें, 99% थीम या कस्टम बिल्ड में, JS को थीम विकल्प या फ़ंक्शंस फ़ाइल के माध्यम से हेडर या फ़ूटर में जोड़ा जाएगा। जेएस या यहां तक ​​कि सीएसएस स्निपेट को इस तरह शामिल करने के लिए इसका सामान्य अभ्यास।

— मैट रॉयल

"सामान्य अभ्यास" हालांकि इसे सही नहीं बनाता है। wp_enqueue_script()डॉक्स भी राज्य यह एक वर्डप्रेस उत्पन्न पेज में JavaScript जोड़ने की सिफारिश की विधि है ।

— पैट जे

यदि आप WordPress default बीसfourteen विषय लेते हैं, तो यह शीर्षलेख में HTML5.js को लोड करता है। php। इस कारण से अपने डो को इस तरह से समझा दिया ताकि ब्राउज़र की जांच IE <9 होने की स्थिति को पूरा कर सके, लेकिन मेरा कहना यह है कि समझ में आना, अनुशंसित और पसंदीदा तरीका है, लेकिन आपके आसपास के अन्य सभी चर / परिस्थितियों पर निर्भर करता है यह हमेशा सबसे व्यावहारिक नहीं हो सकता है और मुझे लगता है कि कुछ विवेक का उपयोग किया जाना चाहिए। देखो, मैं इस दृश्य में पूरी तरह से गलत हो सकता हूं, मुझे यह सुनने में दिलचस्पी है कि वास्तव में अनुभवी लोगों में से कुछ को क्या कहना है :-)

— मैट रॉयल

आपके महान सुझाव के लिए धन्यवाद। हालांकि मुझे यह काम करने के लिए नहीं मिल सकता है; यदि मैं अपने कोड को </ php टैग के अंदर अपने कोड को जोड़ता हूं। अगर मैं इसे <? Php के बाहर जोड़ता हूं, तो यह पृष्ठ के शीर्ष में दिए गए कोड को प्रतिध्वनित करता है। मुझे यहां क्या समझ नहीं आ रहा है?

— user2806026

Answer 3

जैसा कि उत्तर पहले ही स्वीकार कर लिया गया है, मैं बस यह कहना चाहता हूं कि पाद लेख में जावास्क्रिप्ट कोड को एनक्यू करने का एक और तरीका है जो मैंने कई बार किया है।

functions.php फ़ाइल में:

function load_script_to_remove_arrow(){
?>
<script>
$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
</script>
<?php
}
add_action( 'wp_footer', 'load_script_to_remove_arrow' );

आप केवल शर्त का उपयोग करके इस स्क्रिप्ट को विशेष पेज टेम्पलेट में लोड कर सकते हैं

if( is_page_template( 'page-template.php' ) ):

//put above code (or just add_action part) inside this condition to load file only if the condition is true 

endif;

यदि पृष्ठ-template.php डायरेक्टरी में है (अपने थीम के रूट डायर में टेम्प्लेट डायरेक्टरी कहें) तो आप इस तरह लिख सकते हैं:

is_page_template( 'templates/page-template.php' );

Comments

मैं इस तरह से पाद लेख में जावास्क्रिप्ट को "बेकिंग" करने की सिफारिश नहीं करूंगा। यह इसे अनहूक या मोडिफायेबल (कम से कम, आसानी से) होने से रोकता है जो कि प्लगइन और थीम डेवलपमेंट में बेहद महत्वपूर्ण है। यदि आप किसी साइट के अंतिम उपयोगकर्ता हैं और उसे त्वरित स्क्रिप्ट या कुछ और चाहिए, तो उसके लिए जाएं - लेकिन फिर भी wp_enqueue_script()लगभग हमेशा सार्वभौमिक रूप से बेहतर और अधिक लचीला होता है।

— Xhynk

Answer 4

प्रश्न का उत्तर देने के लिए हमें पहले जावास्क्रिप्ट और JQuery के बीच अंतर करना चाहिए।

इसे सरल अंदाज में बताने के लिए:

• जावास्क्रिप्ट ECMAScript पर आधारित है
• JQuery जावास्क्रिप्ट के लिए एक पुस्तकालय है

तो वास्तव में आप दो अलग-अलग प्रश्न पूछते हैं:

• आपका शीर्षक जावास्क्रिप्ट को लागू करने के लिए एक समाधान के बारे में बोलता है
• आपका प्रश्न JQuery को लागू करने के समाधान के बारे में बोलता है

क्योंकि Google परिणाम आपके शीर्षक को दिखाते हैं और पृष्ठ की सभी सामग्री JQuery के बारे में बात करती है, इसलिए यह उन लोगों के लिए बहुत निराशाजनक हो सकता है जो एक जावास्क्रिप्ट समाधान की खोज करते हैं।

और अब JQuery समाधान के लिए:

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

और जावास्क्रिप्ट समाधान:

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );

यह कोड आपके फ़ंक्शन में जोड़ा जा सकता है। यदि दोनों मामलों में स्क्रिप्ट का स्थान है wp-content/themes/theme-name/js/script.js

हैप्पी कोडिंग!

Comments

लगभग उस समय जब ओपी ने पोस्ट किया था, देवों ने जक्वरी और जावास्क्रिप्ट का उपयोग किया था। यह बिल्कुल सटीक नहीं है, लेकिन यह था कि कैसे लोकप्रिय jquery थी और जावास्क्रिप्ट कितनी गायब थी सुविधाएँ।

— रॉकी केव