ฉันจะใช้ตัวเลือก WordPress Iris กับปลั๊กอินของฉันในส่วนหน้าได้อย่างไร

คำถามนี้ที่นี่ถามคำถามเดียวกันกับฉัน แต่ไม่มีคำตอบที่เพียงพอหรือคำตอบที่ถูกต้องที่เลือกดังนั้นฉันถามอีกครั้งหวังว่าฉันถามในลักษณะที่สอดคล้องกันมากขึ้นฉันอาจได้รับการตอบสนอง

ฉันกำลังพยายามใช้วงล้อเลือกสีตามที่เห็นในบานหน้าต่าง Wordpress Theme Customization API เพื่อเลือกสี การโหลดสคริปต์และลักษณะใช้งานได้ดีเมื่อใช้ตะขอ "admin_enqueue_scripts" ทำงาน แต่พยายามโหลดสคริปต์เหล่านี้ในส่วนหน้าโดยใช้ตะขอ "wp_enqueue_scripts" ไม่ทำงาน ลักษณะถูกจัดคิว แต่ไม่ใช่สคริปต์

ฉันต้องการหลีกเลี่ยงการคัดลอกไฟล์ลงในปลั๊กอินทำซ้ำสิ่งที่รวมอยู่ใน Wordpress แล้ว ต้องมีวิธีในการทำให้ตัวเลือกสี Iris ทำงานบนส่วนหน้าที่ฉันไม่เห็น

และสำหรับผู้ที่สงสัยว่าทำไมฉันถึงต้องการทำเช่นนี้ฉันกำลังพัฒนาปลั๊กอินที่เพิ่มแผงควบคุมแบบลอยออกไปที่ด้านข้างของหน้าจอซึ่งช่วยให้คุณทำการเปลี่ยนแปลงสไตล์ชั่วคราวแบบเรียลไทม์โดยไม่ต้องลงชื่อเข้าใช้ผ่าน wp-admin แผงหน้าปัด.

สิ่งนี้ทำให้ฉันเป็นบ้าไปชั่วครู่ แต่ฉันได้มันมาทำงานด้วยการเพิ่มอาร์กิวเมนต์ที่ใช้ในตัวจัดการสคริปต์ของผู้ดูแลระบบแทนที่จะอ้างอิงที่จับ เมื่อฉันพิมพ์$wp_scriptsทั่วโลกที่ส่วนหน้าirisและwp-color-pickerไม่พบที่ไหนเลยแม้ว่า jQuery UI dependencies ของพวกเขาทั้งหมดจะทำงาน อย่างไรก็ตามไม่แน่ใจว่าสิ่งนี้ถูกต้อง แต่ทำให้งานเสร็จ:

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 );

เราจำเป็นต้อง wp_enqueue_script สคริปต์และ wp_enqueue_style สไตล์ด้วย add_action ไปยังไฟล์ functions.php เพียงรวมไฟล์ 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” avobe โดยใช้รหัสเครื่องเป่าลม

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
});

เพิ่มกล่องข้อความไปยังหน้าการตั้งค่าของคุณด้วยคลาส CSS สำหรับเครื่องมือเลือกสีที่คุณต้องการกระจายข้อความอินพุต ฉันใช้“ color_code” เพื่อป้อน $ ตัวแปร

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

รับรายละเอียดจากที่นี่