मैं सामने के छोर पर अपने प्लगइन में वर्डप्रेस आइरिस पिकर कैसे लागू कर सकता हूं?

Question

यह प्रश्न यहाँ वही प्रश्न पूछ रहा है जैसा कि मैं हूँ, लेकिन न तो पर्याप्त उत्तर थे और न ही चयनित सही उत्तर, इसलिए मैं फिर से उम्मीद कर रहा हूँ कि यदि मैं अधिक सुसंगत तरीके से पूछूं तो मुझे प्रतिक्रिया मिल सकती है।

मैं रंग बीनने के पहिया को लागू करने की कोशिश कर रहा हूं जैसा कि रंगों का चयन करने के लिए वर्डप्रेस थीम अनुकूलन एपीआई फलक में देखा गया है। हुक का उपयोग करते समय स्क्रिप्ट और शैलियाँ ठीक से काम करती हैं, हालांकि "admin_enqueue_scripts" काम करता है, लेकिन हुक का उपयोग करके इन लिपियों को फ्रंट-एंड पर लोड करने की कोशिश करता है, "wp_enqueue_scripts" काम नहीं करता है। शैली की कल्पना की जाती है, लेकिन स्क्रिप्ट की नहीं।

मैं अपने प्लगइन में फ़ाइलों पर नकल करने से बचना चाहता हूं जो पहले से ही Wordpress के साथ बंडल है। आईरिस रंग बीनने वाले को सामने के छोर पर काम करने का एक तरीका होना चाहिए जो मैं नहीं देख रहा हूं।

और उन लोगों के लिए जो यह करना चाहते हैं कि मैं एक प्लगइन विकसित कर रहा हूं, जो स्क्रीन के किनारे एक फ्लाई-आउट पैनल जोड़ता है जो आपको wp-admin के माध्यम से लॉगिन करने के बिना साइट पर रियलटाइम अस्थायी स्टाइल परिवर्तन करने की अनुमति देता है। पैनल।

Answer 1

इसने मुझे कुछ समय के लिए पागल कर दिया, लेकिन मैंने इसे पूरी दलीलों के साथ जोड़कर काम करने के लिए मिला, जो कि केवल हैंडल को संदर्भित करने के बजाय व्यवस्थापक स्क्रिप्ट लोडर में उपयोग किए जाते हैं। जब मैं $wp_scriptsसामने के छोर पर वैश्विक प्रिंट करता हूं , irisऔर wp-color-pickerकहीं नहीं पाया जाता है, हालांकि उनके सभी jQuery यूआई निर्भरताएं काम करती हैं। वैसे भी, यह सुनिश्चित नहीं है कि यह सही है, लेकिन यह काम पूरा करता है:

function wpa82718_scripts() {
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script(
        'iris',
        admin_url( 'js/iris.min.js' ),
        array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ),
        false,
        1
    );
    wp_enqueue_script(
        'wp-color-picker',
        admin_url( 'js/color-picker.min.js' ),
        array( 'iris' ),
        false,
        1
    );
    $colorpicker_l10n = array(
        'clear' => __( 'Clear' ),
        'defaultString' => __( 'Default' ),
        'pick' => __( 'Select Color' ),
        'current' => __( 'Current Color' ),
    );
    wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n ); 

}
add_action( 'wp_enqueue_scripts', 'wpa82718_scripts', 100 );

Comments

वाह, एकदम सही। इसने मुझे कभी भी admin_url फ़ंक्शन का उपयोग करने की अनुमति नहीं दी और बस बिना पंजीकरण और फिर उन्हें एनक्यूइंग किए स्क्रिप्ट्स को लागू करना। यह संभवतः उतना ही करीब है जितना कि हम मुख्य आइरिस रंग बीनने वाले का उपयोग करने में सक्षम होंगे और यह निर्भरता है। धन्यवाद।

— ड्वेन चारिंगटन

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

— औद्योगिक विषय-वस्तु

Answer 2

हमें स्क्रिप्ट को wp_enqueue_script और फ़ंक्शन_php फ़ाइल में add_action के साथ शैली wp_enqueue_style करने की आवश्यकता है। बस इस स्क्रिप्ट द्वारा एक jQuery फ़ाइल और स्टाइलशीट फ़ाइल शामिल करें।

// Register Scripts & Styles in Admin panel
function custom_color_picker_scripts() {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
wp_enqueue_script( 'cp-active', plugins_url('/js/cp-active.js', __FILE__), array('jquery'), '', true );

}
add_action( 'wp_enqueue_scripts', custom_color_picker_scripts);

अब cp-active.js की तरह एक नई जावास्क्रिप्ट फ़ाइल बनाएं और इसे धौंकनी कोड का उपयोग करके "/js/cp-active.js" फ़ाइल पथ को परिभाषित करें।

jQuery('.color-picker').iris({
// or in the data-default-color attribute on the input
defaultColor: true,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
palettes: true
});

रंग बीनने वाले के लिए एक सीएसएस वर्ग के साथ अपने सेटिंग्स पृष्ठ पर एक टेक्स्टबॉक्स जोड़ें, जहां आप इनपुट पाठ को फैलाना चाहते हैं। मेरे पास इनपुट $ चर के लिए "color_code" का उपयोग है।

<input id="color_code" class="color-picker" name="color_code" type="text" value="" />

यहाँ से विवरण प्राप्त करें