انتخاب رنگ دلخواه در ابزارک وردپرس

admin وردپرس 2020/09/19 301 0

انتخاب رنگ دلخواه در ابزارک وردپرس

Adding WordPress ColorPicker in Widget

اگر قصد دارید که در سایت وردپرسی خود بتوانید رنگ دلخواهتان را در ابزارک وردپرس انتخاب کنید، تمایل دارید مثلا بک گراند یا پشت زمینه و یا قسمتی به رنگ مورد علاقه خود داشته باشید،کافی است تا پایان این پست آموزشی با ما در سایت پنگاش همراه باشید.

Adding WordPress ColorPicker in Widget

شما کاربران عزیز می توانید در طی سه مرحله و به آسانی این کار را انجام دهید.

مرحله ی اول : ابتدا لازم است قطعه کد زیر را در فایل فانکشن قالب سایت خود پیاده سازی کنید .

function widgets_scripts( $hook ) {
    if ( 'widgets.php' != $hook ) {
        return;
    }
    wp_enqueue_style( 'wp-color-picker' );        
    wp_enqueue_script( 'wp-color-picker' ); 
}
add_action( 'admin_enqueue_scripts', 'widgets_scripts' )

function widgets_scripts( $hook ) {

if ( 'widgets.php' != $hook ) {

return;

}

wp_enqueue_style( 'wp-color-picker' );

wp_enqueue_script( 'wp-color-picker' );

}

add_action( 'admin_enqueue_scripts', 'widgets_scripts' )

مرحله ی دوم : شما باید قطعه کد زیر را در در سایدبار یا جایی که قرار است ابزارک قرار گیرد قرار دهید مثلا در فایل sidebar.php . (البته اگر می توانید در فایل footer.php هم قرار دهید.)

<script>
 
    ( function( $ ){
        function initColorPicker( widget ) {
            widget.find( '.color-picker' ).not('[id*="__i__"]').wpColorPicker( {
                change: _.throttle( function() {
                    $(this).trigger( 'change' );
                }, 3000 )
            });
        }
 
        function onFormUpdate( event, widget ) {
            initColorPicker( widget );
        }
 
        $( document ).on( 'widget-added widget-updated', onFormUpdate );
 
        $( document ).ready( function() {
            $( '.widget-inside:has(.color-picker)' ).each( function () {
                initColorPicker( $( this ) );
            } );
        } );
 
    }( jQuery ) );
 
</script>

( function( $ ){

function initColorPicker( widget ) {

widget.find( '.color-picker' ).not('[id*="__i__"]').wpColorPicker( {

change: _.throttle( function() {

$(this).trigger( 'change' );

}, 3000 )

});

}

function onFormUpdate( event, widget ) {

initColorPicker( widget );

}

$( document ).on( 'widget-added widget-updated', onFormUpdate );

$( document ).ready( function() {

$( '.widget-inside:has(.color-picker)' ).each( function () {

initColorPicker( $( this ) );

} );

}( jQuery ) );

</script>

مرحله سوم :کد زیر را نیز در جایی که قرار است درخواست شما فراخوانی شود، قرار دهید.

<p>
    <label for="<?php echo esc_attr( $this->get_field_id( 'rm_background' ) ); ?>"><?php _e
        ( 'Background', 'text-domain'   ); ?></label>
    <input id="<?php echo esc_attr( $this->get_field_id( 'rm_background' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'rm_background' ) ); ?>" value="<?php echo $instance['rm_background']; ?>" class="wp-color-result"/>
</p>

<p>

<label for="<?php echo esc_attr( $this->get_field_id( 'rm_background' ) ); ?>"><?php _e

( 'Background', 'text-domain' ); ?></label>

<input id="<?php echo esc_attr( $this->get_field_id( 'rm_background' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'rm_background' ) ); ?>" value="<?php echo $instance['rm_background']; ?>" class="wp-color-result"/>

</p>

در نهایت شما قادر به مشاهده و انتخاب دکمه رنگ خواهید بود .