ফ্রন্ট-এন্ডে আমি কীভাবে ওয়ার্ডপ্রেস আইরিস চয়নকারীটিকে আমার প্লাগইনটিতে প্রয়োগ করব?

Question

এখানে এই প্রশ্নটি আমার মতো একই প্রশ্নটি জিজ্ঞাসা করছে, তবে পর্যাপ্ত উত্তর বা একটি সঠিক সঠিক উত্তর ছিল না তাই আমি আরও আশাবাদী হয়ে জিজ্ঞাসা করছি যদি আমি আরও সুসংগত পদ্ধতিতে জিজ্ঞাসা করি তবে আমি কোনও প্রতিক্রিয়া পেতে পারি।

রঙ নির্বাচন করার জন্য ওয়ার্ডপ্রেস থিম কাস্টমাইজেশন এপি আই ফলকে বর্ণিত রঙ পিকার চাকাটি বাস্তবায়নের চেষ্টা করছি। স্ক্রিপ্টগুলি এবং শৈলীগুলি লোড করা হুক ব্যবহারের সময় দুর্দান্ত কাজ করে, "অ্যাডমিন_ইনকিউ_স্ক্রিপ্টস" তবে এই স্ক্রিপ্টগুলি হুক ব্যবহার করে সামনের প্রান্তে লোড করার চেষ্টা করে, "wp_enqueue_scriptts" কাজ করে না। স্টাইলটি এনকুইড হয়, তবে স্ক্রিপ্টটি নয়।

আমি ওয়ার্ডপ্রেসের সাথে ইতিমধ্যে যে বান্ডিল হয়েছে তা নকল করে আমার প্লাগইনে ফাইলগুলি অনুলিপি করা এড়াতে চাই। ফ্রন্ট-এন্ডে আমি দেখছি না এমন আইরিস রঙ চয়নকারীকে কাজ করার জন্য অবশ্যই একটি উপায় থাকতে হবে।

এবং কেন আমি এটি করতে চাই তা ভাবতে তাদের জন্য, আমি একটি প্লাগইন তৈরি করছি যা স্ক্রিনের পাশে একটি ফ্লাই-আউট প্যানেল যুক্ত করবে যা আপনাকে ডাব্লুপি-অ্যাডমিনের মাধ্যমে লগইন না করে সাইটে রিয়েলটাইম অস্থায়ী স্টাইলিং পরিবর্তন করতে দেয় you প্যানেল।

Answer 1

এটি আমাকে কিছুক্ষণের জন্য ক্ষিপ্ত করেছিল, তবে আমি হ্যান্ডেলটি উল্লেখ না করে অ্যাডমিন স্ক্রিপ্ট লোডারটিতে ব্যবহৃত পুরো যুক্তি যুক্ত করে এটি কাজ করেছিলাম work আমি যখন $wp_scriptsপ্রথম প্রান্তে গ্লোবাল মুদ্রণ করি irisএবং wp-color-pickerকোথাও পাওয়া যায় না, যদিও তাদের সমস্ত jQuery UI নির্ভরতা কাজ করে। যাইহোক, নিশ্চিত যে এটি সঠিক, তবে এটি কাজটি করে:

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

বাহ, নিখুঁত। অ্যাডমিন_আরএল ফাংশনটি ব্যবহার করতে এবং নিবন্ধন না করে স্ক্রিপ্টগুলি সজ্জিত করে এবং সেগুলি পুনরায় সজ্জিত করার জন্য এটি কখনই আমার কাছে উত্থাপিত হয়নি। এটি সম্ভবত প্রায় কাছাকাছি হিসাবে আমরা মূল আইরিস রঙ চয়নকারী ব্যবহার করতে সক্ষম হব এবং এটির নির্ভরতা। ধন্যবাদ.

— ডোয়াইন চারিংটন 23'13

এটি আমাকে প্রায় পেয়েছে তবে wpColorPickerL10n সম্পর্কিত আমার এখনও ত্রুটি ছিল, তাই আমাকে ফাংশনের মধ্যে আরও কিছু যুক্ত করতে হয়েছিল। আমি ডাব্লুপি_লোক্যালাইজ_স্ক্রিপ্টের প্রয়োজনীয়তার সাথে উপরের উত্তরটি আপডেট করেছি।

— ইন্ডাস্ট্রিয়াল থিমস

Answer 2

আমাদের স্ক্রিপ্টটি wp_enqueue_script এবং ফাংশন.এফপি ফাইলটিতে অ্যাডঅ্যাকশন সহ শৈলীর 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);

এখন সিপি-অ্যাক্টিভ.জেএস এর মতো একটি নতুন জাভাস্ক্রিপ্ট ফাইল তৈরি করুন এবং এটিকে বেলো কোড ব্যবহার করে "/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="" />

এখান থেকে বিশদ পান