कैसे सही ढंग से वर्डप्रेस पर jquery-ui प्रभाव शामिल हैं

Question

मैं अपने वर्डप्रेस विषय पर jquery ui प्रभाव (अधिक विशेष रूप से हिला प्रभाव) को शामिल करने की कोशिश कर रहा हूं। अब तक, मैं केवल jQuery स्क्रिप्ट को शामिल करने में सक्षम रहा हूं, लेकिन मुझे वास्तव में कोई सुराग नहीं है कि कहां कहां ui स्क्रिप्ट्स रखनी हैं और कैसे उन्हें संलग्न करना है।

यह मेरे पास कोड है। यह स्पष्ट रूप से काम नहीं करता है:

    <?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("#manita-imagen").mouseover(function(){
            //$j(this).animate({ opacity: "hide" })
            // alert('asd');
            $j(this).effect("shake", { times:3 }, 300);
        });
    });

 </script>

आपकी सहायताके लिए धन्यवाद!

Comments

एक नोट: आपको jquery के बारे में बताने की आवश्यकता नहीं है, क्योंकि यह पहले से ही jquery-ui-core की निर्भरता के रूप में सूचीबद्ध है।

— गोल्डनप्लस

Answer 1

जबकि वर्डप्रेस में jQuery UI लाइब्रेरी शामिल है, इसमें UI / इफेक्ट्स लाइब्रेरी शामिल नहीं है। वह लाइब्रेरी अलग और स्टैंडअलोन है। आपको effect.core.js फ़ाइल की एक प्रति शामिल करनी होगी और इसे अलग से संलग्न करना होगा।

ध्यान दें कि आपको नामकरण-प्रभाव-कोर का नाम देना चाहिए जब इसे नामांकित किया जाता है, तो नामकरण स्थिरता के लिए।

आप इसे इस तरह शामिल कर सकते हैं:

wp_enqueue_script("jquery-effects-core",'http://example.com/whatever/effects.core.js', array('jquery'), '1.8.8');

संपादित करें : यह उत्तर वर्डप्रेस 3.3 से पहले लिखा गया था, जिसमें अब कोर के हिस्से के रूप में विभिन्न प्रभाव पुस्तकालय शामिल हैं। आप बस उन इफ़ेक्ट लाइब्रेरी के टुकड़ों को समझ सकते हैं जिन्हें आपको अभी उपयोग करने की आवश्यकता है।

इन फ़ाइलों के लिए स्लग की सूची wp में शामिल हो सकती है / script-loader.php, लेकिन कोर का स्लग jquery-effects-core है।

wp_enqueue_script("jquery-effects-core");

Comments

ज्ञात हो कि वास्तविक प्रभाव (अंधा, उछाल, फीका, ..) के लिए आपको उस प्रभाव को स्पष्ट रूप से समझाना होगा। जैसे 'फीका':wp_enqueue_script( 'jquery-effects-fade' );

— सनीरेड

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

— डेव हिल्डिच

Answer 2

@dabito,

आप अपनी स्क्रिप्ट्स को सही से लोड नहीं कर रहे हैं ... wp_enqueue_script()अपनी थीम टेम्पलेट फ़ाइल के अंदर कॉल न करें (यह ऐसा दिखता है header.php)। आपको इस फ़ंक्शन को एक अलग हुक से कॉल करने की आवश्यकता है।

अपनी थीम की functions.phpफ़ाइल में, निम्न कोड रखें:

function my_add_frontend_scripts() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'my_add_frontend_scripts');

यदि दोनों स्क्रिप्ट ठीक से पंजीकृत हैं, तो उन्हें ठीक से लोड करना चाहिए ( <script />हेडर में उपयुक्त टैग जोड़कर । फिर आपका अन्य जावास्क्रिप्ट कोड काम करना चाहिए।

यदि आप स्क्रिप्ट को चीजों के व्यवस्थापक पक्ष में जोड़ना चाहते हैं, तो admin_enqueue_scriptsइसके बजाय अपनी कार्रवाई जोड़ें ।

Comments

बिल्कुल सच नहीं है। जब तक वह उन्हें wp_head () कॉल से पहले बुला रहा है, तब तक उसे ठीक काम करना चाहिए। उन्हें हुक करने की आवश्यकता नहीं है, और उन्हें वैसे भी इनिट से नहीं जोड़ा जाना चाहिए। यदि आप उन्हें कहीं हुक करने जा रहे हैं, तो उन्हें 'wp_enqueue_scripts' क्रिया हुक पर हुक करें। यह वही है जिसके लिए यह है।

— ओटो

@Otto आपने जो कहा वह तार्किक लगता है। लेकिन क्या आपके पास एक स्पष्टीकरण है कि कोडेक्स में यह क्यों लिखा है @EAMann ने लिखा - "इस फ़ंक्शन को कॉल करने के लिए init क्रिया का उपयोग करें?" और उसका उदाहरण वहाँ से लिया गया है ... codex.wordpress.org/Function_Reference/wp_enqueue_script

— ली कोहेन

कोडेक्स स्थानों में बेतरतीब है। इसके लिए उपयोग करने के लिए सबसे अच्छी कार्रवाई सामने के अंत के लिए 'wp_enqueue_scripts' है, या बैक एंड पर 'admin_enqueue_scripts' है। इनिट हुकिंग काम करेगा, लेकिन यह पूरी साइट पर स्क्रिप्ट को अनावश्यक रूप से संलग्न करेगा।

— ओट्टो

मैंने अपने कोड स्निपेट को तदनुसार अपडेट कर दिया है। यह मूल रूप से कोडेक्स संदर्भ के आधार पर एक त्वरित, आंत प्रतिक्रिया थी ... wp_enqueue_scriptsनिश्चित रूप से जाने का एक बेहतर तरीका है और अतिरिक्त is_admin()जांच की आवश्यकता से बचा जाता है ।

— ईमान

यह भी गलत तरीका है - प्रदर्शन प्लगइन्स को निर्भरता जानने की आवश्यकता है। लेखक को अपनी स्वयं की .js फ़ाइल लिखनी चाहिए और निर्भरता को नाम देना चाहिए - वर्डप्रेस बाकी को संभाल लेगा।

— डेव हिल्डिच

Answer 3

आप Google से सीधे पूरे jQuery UI का पता लगा सकते हैं। यह मेरा इसे करने का तरीका है:

wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6');

और चूंकि jQuery को jQuery UI के लिए एक निर्भरता के रूप में सूचीबद्ध किया गया है, इसलिए आपको इसे मैन्युअल रूप से संलग्न करने की आवश्यकता नहीं है। वर्डप्रेस यह आपके लिए स्वचालित रूप से करेगा।

Comments

आप अपनी साइट के बजाय Google CDN से सभी jQuery के कामों को भी लोड कर सकते हैं ।

— Jan Fabry

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

— जूलियन एफ वेइनर्ट

@ JulianF.Winert यह एक दोहरी धार वाली तलवार है, जिसमें एक अच्छा सीडीएन का मतलब कम विलंबता है लेकिन अगर यह विफल रहता है तो नियंत्रण की कमी है। उस ने कहा, अगर Google cdn आधे से नीचे चला जाता है तो इंटरनेट विफल हो जाएगा, इसलिए आपका केवल एक ही नहीं होगा। संभावना है कि यह नीचे हो जाएगा और एक उपयोगकर्ता ब्राउज़र पर कैश नहीं किया गया है हालांकि पतला है। Cdn का उपयोग करने वाली अधिकांश स्थितियों के लिए एक लाभ है।

— एलेक्स

सच। मैं एक पूर्ण विकसित सीडीएन के बारे में बात नहीं कर रहा था, जो निश्चित रूप से यहां बिल्कुल ठीक होगा, क्योंकि यह बिल्कुल उस उपयोग के लिए डिज़ाइन किया गया है। किसी भी john-doe.com से स्क्रिप्ट लोड करना थोड़ा जोखिम भरा है, हालांकि, मुझे लगता है

— जूलियन एफ। वेनर्ट

Answer 4

इस jQuery लाइब्रेरी (पूरी सूची यहाँ ) के लिए एक डिफ़ॉल्ट लोड प्रतीत नहीं होता है, इसलिए आपको इसकी गणना करने से पहले स्क्रिप्ट को पंजीकृत करना होगा।

Comments

मुझे लगा कि आप सही हो सकते हैं (कभी-कभी WP के नाम स्क्रिप्ट के तहत इस्तेमाल किए गए मानक नामों की तुलना में भिन्न होते हैं) लेकिन इस मामले में 'jquery-ui-core' को पंजीकृत करना चाहिए। इसके core.trac.wordpress.org/browser/branches/3.0/wp-includes/…

— Goldenapples

अच्छी बात! मैंने मान लिया कि वह केवल उस jQuery लाइब्रेरी को लोड करना चाहता था , इस मामले में बाकी लोड करना थोड़ा फूला हुआ होगा।

— संपादक

Answer 5

बस थोड़ा सा टिप्स। जब आप अपनी स्क्रिप्ट की गणना करते हैं, तो यह व्यवस्थापक पैनल सहित पूरी साइट के लिए गणना करता है। यदि आप व्यवस्थापक पैनल में स्क्रिप्ट नहीं चाहते हैं, तो आप उन्हें केवल फ्रंटएंड में साइट के लिए शामिल कर सकते हैं।

function my_add_frontend_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
}

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');

Comments

आपको ईनक्यू करने के लिए init हुक का उपयोग नहीं करना चाहिए। आगे के छोर के लिए केवल wp_enqueue_scripts हुक का उपयोग करें या बैक एंड के लिए admin_enqueue_scripts हुक।

— ओट्टो

नहीं पता था कि wp_enqueue_scriptsकार्रवाई केवल फ्रंट एंड के लिए है। धन्यवाद :)

— तारेक

Answer 6

यहां सभी जवाब, जबकि वे काम करते हैं, तकनीकी रूप से गलत हैं।

Jquery-ui और अन्य पुस्तकालयों को शामिल करने का सही तरीका उन्हें अपनी स्क्रिप्ट की निर्भरता के रूप में शामिल करना है ।

यह महत्वपूर्ण है, क्योंकि साइट को ऑप्टिमाइज़ करने के लिए प्रदर्शन उपकरण आपकी स्क्रिप्ट के लोडिंग ऑर्डर को बदलने के लिए इन निर्भरताओं की जांच कर सकते हैं।

इसलिए, यदि आप jquery और jquery-ui का उपयोग करना चाहते हैं, तो अपनी स्वयं की .js स्क्रिप्ट फ़ाइल बनाएं और इसे इस तरह से संलग्न करें, सूचीबद्ध निर्भरता के साथ - आपके द्वारा उपयोग किए जा रहे प्रत्येक लाइब्रेरी के लिए एक अलग enqueue कमांड की कोई आवश्यकता नहीं है:

wp_enqueue_script('your-script-handle', 
 plugins_url('your-script-file.js', __FILE__), 
 array('jquery', 'jquery-effects-core', 'jquery-ui-core')
);

आप यहाँ निर्भरता के रूप में जोड़ने के लिए सभी उपलब्ध लिपियों की सूची पा सकते हैं: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Comments

आपके पास यह सही है। अपने स्वयं के wp_enqueue_script कॉल्स में निर्भरता का उपयोग करना jquery / jquery-ui इत्यादि को शामिल करने का सही तरीका है। Theres उन्हें अलग से enqueue करने की कोई जरूरत नहीं है।

— माइकल पावलोस माइकल

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

— डेव हिल्डिच