वर्डप्रेस थीम पर jquery और कस्टम स्क्रिप्ट जोड़ना

Question

Google के माध्यम से कुछ खोज करना, मैं एक स्क्रैच वर्डप्रेस थीम में jQuery जोड़ने के लिए कोड के समान कोड में आया था।

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11); 
function my_jquery_enqueue() { 
    wp_deregister_script('jquery'); 
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null); 
    wp_enqueue_script('jquery'); 
    wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', true); 
} 

मैं अपने functions.php फ़ाइल के लिए इस कोड को जोड़ दिया है, और मैं एक js फ़ोल्डर बनाया और उस में निम्न सिंटैक्स का उपयोग कर एक theme.js फ़ाइल बनाया: जब मैं ताज़ा

jQuery(function ($) { 
    /* You can safely use $ in this code block to reference jQuery */ 
}); 

मेरी WP साइट, theme.js फ़ाइल को प्रतीत नहीं होता है। क्रोम देव टूल्स में, यह जेएस फाइलों के बीच सूचीबद्ध नहीं है।

क्या मैं पुरानी दृष्टिकोण का उपयोग कर रहा हूं? मैं jquery का उपयोग करके, मेरी थीम के लिए काम कर सकते हैं, मेरी /js/theme.js फ़ाइल कैसे बना सकता हूं?

Answer 1

पहला, wp_enqueue_scripts केवल फ्रंटेंड पर चलता है, इसलिए आपको is_admin() चेक की आवश्यकता नहीं है।

दूसरा, केवल डिफ़ॉल्ट jQuery (WP के साथ बंडल) if you really know what you are doing को पंजीकृत करें। आपके उदाहरण में, आप Google से पुराना संस्करण लोड कर रहे हैं (वर्तमान 1.8.3 है, न कि 1.7.1)। साथ ही, देखें: Don’t Dequeue WordPress’ jQuery

तीसरा, आपको get_stylesheet_directory_uri का उपयोग करना चाहिए, जो सही कार्य है जो माता-पिता और बाल थीम फ़ोल्डर्स के लिए गिना जाएगा।

अंत में, इस कोड /themes/my-theme/functions.php में ठीक काम करता है:

add_action("wp_enqueue_scripts", "my_js_so_14864221", 11); 

function my_js_so_14864221() 
{ 
    wp_enqueue_script( 
     'my_script', 
     get_stylesheet_directory_uri() . '/js/theme.js', 
     array('jquery'), 
     '1.0', 
     true 
    ); 
} 

और theme.js में अपने jQuery कोड की तरह समझाया जाना चाहिए:

jQuery(document).ready(function($) { 
    // $('#your-stuff').animate().hide().whatever(); 
});