क्या WP के जेएस तरीकों को कस्टमाइज़ करना संभव है?


9

मुझे आश्चर्य हो रहा है कि क्या अनाम apiवस्तु के तरीकों का विस्तार करना संभव है wp-admin/js/customize-control.js। मुझे अपने स्वयं के कस्टम तर्क के साथ इन तरीकों में से एक को अधिलेखित करने की आवश्यकता है, लेकिन मुझे संदेह है कि यह संभव नहीं है क्योंकि यह तुरंत लागू समारोह में लिपटा है।

/* globals _wpCustomizeHeader, _wpMediaViewsL10n */
(function( exports, $ ){
// code
})( wp, jQuery );

जहां तक ​​मैं देख सकता हूं, मैं विंडो ऑब्जेक्ट से प्रोटोटाइप का विस्तार करने में सक्षम नहीं हूं क्योंकि इसे गुमनाम रूप से निष्पादित किया गया है और इससे उपलब्ध नहीं है window.wp.customize। किसी भी विचार अगर ऐसा संभव है? यहां तक ​​कि इसे ओवरराइड करने का भी उल्लेख है। टॉगल () विधियों के दस्तावेज / विवरण: https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-control.js#L110 , लेकिन मैं यकीन नहीं है कि अगर वे पूरी जेएस फ़ाइल को फोर्क करके मतलब करते हैं, तो WP संस्करण को हटा दें और अपने स्वयं के या यदि वे मतलब या कुछ अलग करते हैं।

ध्यान दें कि ऐसा लगता है कि यह संभव होना चाहिए wp.customize.{method}.extend({ foo: // replace method foo here })लेकिन यह केवल सार्वजनिक आधार वर्गों / वस्तुओं पर लागू होता है, उन में नहींwp-admin/js/customize-control.js


3
हालांकि apiयह गुमनाम है (यह wp.customizeलाइन 3 देखें) का पर्याय है जो विश्व स्तर पर सुलभ है। हालाँकि ऐसा लगता है कि नियंत्रण के लिए उपयोग किए जाने वाले एक अन्य ऑब्जेक्ट मॉडल में readyफ़ंक्शन को कॉल किया जाता है initializeताकि विधियों को अधिलेखित करने का मौका न मिले (यानी हमेशा बहुत देर हो सकती है) - आप क्या विस्तार करने की कोशिश कर रहे हैं?
बोंगर

सिद्धांत रूप में, यह समझ में आता है - सुझाव की सराहना की। मेरे मामले में, मैंने महसूस किया कि यह दृष्टिकोण बहुत हैकरी था और मेरे उपयोग के मामले के लिए एक और उपयुक्त समाधान के साथ आने में कामयाब रहा। हालाँकि, वर्किंग कोड के साथ जवाब अभी भी किसी ऐसे व्यक्ति के लिए उपयोग किया जा सकता है, जिनके पास अपने उपयोग के मामले के लिए कोई अन्य विकल्प नहीं है। मैं जो भी योजना बना रहा था उसके साथ प्रदर्शन वैसे भी भयानक था।
ब्रायन

1
मैं जेएस विशेषज्ञ नहीं हूं। लेकिन मेरे पास हमेशा मेरे एक्सटेंशन को रीफ़्रेश करने के लिए कस्टमाइज़र स्क्रिप्ट की एक छोटी सी थीम में एक ऐड होता है। मैं wp.customizeइस ऑब्जेक्ट के साथ कार्य करता हूं और जोड़ता हूं । - एक स्रोत उदाहरण के लिए यहाँ देख github.com/bueltge/Documentation/blob/master/js/...
bueltge

जवाबों:


5

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

wp.customize

WP थीम कस्टमाइज़र इंटरफ़ेस केंद्रों को समझना wp.customize जावास्क्रिप्ट ऑब्जेक्ट को समझने के आसपास। wp.customizeवस्तु महत्वपूर्ण है और आप शुरू पर यह स्थापित करना चाहिए।

लाइव उदाहरण

अनुसरण छोटा उदाहरण यह प्रदर्शित करता है। सबसे पहले मैंने apiकस्टमाइज़र के ऑब्जेक्ट पर var सेट किया । इसके बाद मैंने अपने कस्टम फ़ील्ड को सेट किया apiऔर लाइव पूर्वावलोकन के लिए परिणाम को ताज़ा करने के लिए छोटे jQuery स्रोत के साथ इसे बढ़ाया।

( function( $ ) {
    var api = wp.customize;

    // Site title and description.
    api( 'blogname', function( value ) {
        value.bind( function( to ) {
            $( '#header h1 a, #footer a.site-name' ).html( to );
        } );
    } );

    api( 'blogdescription', function( value ) {
        value.bind( function( to ) {
            $( '#header p.site-description' ).html( to );
        } );
    } );

} )( jQuery );

सेटिंग्स और नियंत्रण

कंट्रोल ऑब्जेक्ट्स को स्टोर किया जाता है wp.customize.controlऔर ऑब्जेक्ट्स को स्टोर किया जाता है wp.customize। मूल्य वर्ग में बहुत सारे कार्य हैं, आपकी सहायता कर सकते हैं।

  • उदाहरण (आईडी) - निर्दिष्ट आईडी के साथ संग्रह से एक वस्तु प्राप्त करें।
  • है (आईडी) - सही लौटें, अगर संग्रह में निर्दिष्ट आईडी के साथ कोई ऑब्जेक्ट है और यह अन्यथा गलत है।
  • add (id, value) - एक निर्दिष्ट आईडी और मूल्य के साथ संग्रह में एक ऑब्जेक्ट जोड़ें।
  • remove (id) - ऑब्जेक्ट को संग्रह से निकालें।
  • create (id) - डिफ़ॉल्ट कंस्ट्रक्टर का उपयोग करके एक नया ऑब्जेक्ट बनाएं और इसे संग्रह में जोड़ें।
  • प्रत्येक (कॉलबैक, संदर्भ) - संग्रह के भीतर तत्वों पर Iterate।

कस्टम सेटिंग्स

इस फ़ंक्शन के साथ हम अपनी कस्टम सेटिंग बढ़ा सकते हैं।

var api = wp.customize,
    mysetting = api.instance( 'my_custom_setting' );

एक सरणी के लिए भी प्रयोग करने योग्य है

var api = wp.customize,
    mysetting = api.instance( 'my_custom_settings[my_custom_setting_field]' );

प्राप्त

कंसोल में परिणाम देखें।

console.log( api.instance( 'my_custom_settings[my_custom_setting_field]' ).get() );

सेट

आप फ़ंक्शन के माध्यम से सेटिंग मान भी बदल सकते हैं set

api.instance( 'my_custom_settings[my_custom_setting_field]' ).set( 'my new value' ) );

नियंत्रण के साथ, वस्तु के रूप में प्राप्त करें

console.log( api.control.instance( 'my_custom_setting_field' ) );

सहायक स्रोत

  • WP-व्यवस्थापक / js / अनुकूलित-controls.js
  • WP-शामिल / js / अनुकूलित-preview.js
  • WP-शामिल / js / अनुकूलित-base.js
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.