web-dev-qa-db-ja.com

フロントエンドのプラグインにWordPressのアイリスピッカーを実装するにはどうすればいいですか？

この質問 here は私と同じ質問をしていますが、適切な答えも選択された正しい答えもありませんでした。

色を選択するためのWordpress Theme Customization APIペインにあるように、カラーピッカーホイールを実装しようとしています。フックを使用するとスクリプトとスタイルをロードすることはうまくいきますが、 "admin_enqueue_scripts"はフロントエンドにフックを使ってロードしようとしても "wp_enqueue_scripts"は機能しません。スタイルはエンキューされますが、スクリプトはエンキューされません。

私は既にWordpressにバンドルされているものと重複して私のプラグインにファイルをコピーすることを避けたいと思います。私が見ていないフロントエンドでアイリスカラーピッカーを動かす方法があるはずです。

私がなぜこれをしたいのか疑問に思う人のために、私はあなたがwp-adminを通してログインする必要なしにあなたがサイトにリアルタイムの一時的なスタイル変更を加えることを可能にするフライアウトパネルをスクリーンの側面に加えるプラグインを開発していますパネル。

hookswp-enqueue-scripttheme-customizercolor-picker
10
Dwayne Charrington

これはしばらく私を怒らせましたが、ハンドルを参照するのではなく、管理スクリプトローダーで使用される完全な引数を使用してそれらを追加することによって機能させることができました。フロントエンドに$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 );
16
Milo

私たちは、スクリプトをwp_enqueue_script、そしてfunctions.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のように新しいjavascriptファイルを作成し、以下のコードを使って "/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
});

カラーピッカー用のCSSクラスを使用して設定ページにテキストボックスを追加します。ここで入力テキストを表示します。私はinput $ variableに“ color_code”を使いました。

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

詳細はここから入手

3
csehasib