web-dev-qa-db-ja.com

ウィジェット設定にWordPressカラーピッカーを追加する

ウィジェット設定フォームにWordPressのデフォルトカラーピッカーを追加したい。これが私がしようとしているものです：

私のfunctions.phpでは、私はこれを持っています：

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

私のウィジェットファイルでは、私はこれを持っています：

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#<?php echo $this->get_field_id( 'color' ); ?>').wpColorPicker();
    });
</script>
<input id="<?php echo $this->get_field_id( 'color' ); ?>" type="text" name="<?php echo $this->get_field_name( 'color' ); ?>" value="<?php echo esc_attr( $instance['color'] ); ?>" />

上記のコードを使うと、カラーピッカーの「色の選択」ボタンが表示されますが、最初はクリックできません。

ウィジェットが保存された後にクリックするだけです。私はそれがIDを割り当てるためだと思います。

CSSクラス名を使用しようとすると、ボタンが2回表示されます（その理由はわかりません。そのクラスがウィジェット内に1回しか存在しない場合でも）。これは私がクラス名を使用する場合私が見るものです： enter image description here

また、同じウィジェットが複数回使用されると、クラス名が問題を引き起こすと思います。入力フィールドに動的IDを使用しようとしているのはそのためです。

theme-developmentthemeswidgetscolor-picker
2
jay

次は私のために働いた。複数のカラーピッカーを一致させるために、IDではなくclass属性を使用しています。

<script type="text/javascript">
    jQuery(document).ready(function($) { 
            jQuery('.color-picker').on('focus', function(){
                var parent = jQuery(this).parent();
                jQuery(this).wpColorPicker()
                parent.find('.wp-color-result').click();
            }); 
    }); 
</script>

私のウィジェットフォームは次のように設定されています。

<p>
    <label for="<?php echo $this->get_field_id( 'font_color' ); ?>" style="display:block;"><?php _e( 'Font Color:' ); ?></label> 
    <input class="widefat color-picker" id="<?php echo $this->get_field_id( 'font_color' ); ?>" name="<?php echo $this->get_field_name( 'font_color' ); ?>" type="text" value="<?php echo esc_attr( $font_color ); ?>" />
</p>
4
chifliiiii

私が持っていたものと@chifliiiiiによって投稿された解決策を混ぜ合わせると、私は以下のところに到着しました：

jQuery(document).ready(function($) {

    $('#widgets-right .color-picker, .inactive-sidebar .color-picker').wpColorPicker();

    // Executes wpColorPicker function after AJAX is fired on saving the widget
    $(document).ajaxComplete(function() {
        $('#widgets-right .color-picker, .inactive-sidebar .color-picker').wpColorPicker();
    });
});

それはトリックをはるかに簡単な方法でしました。私はそれをテストしました、そしてそれはうまく働いているようです。これがまだあなたに役立つことを願っています:)

2
Rodrigo D'Agostino

次のコードは私のために働きました。

<script type="text/javascript">

    ( 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>
0
Rubel Miah