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

この質問ここでは、私は同じ質問をされていますが、充分な答えも私は私が応答を得るかもしれない、より一貫した方法で頼めば期待して再び求めていますので、選択した正解はありませんでした。

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

Wordpressにすでにバンドルされているものと重複するファイルをプラグインにコピーすることを避けたいです。アイリスのカラーピッカーをフロントエンドで動作させる方法が必要です。

そして、なぜこれをしたいのかと思っている人のために、画面の横にフライアウトパネルを追加するプラグインを開発しています。これにより、wp-adminを介してログインしなくても、サイトにリアルタイムの一時的なスタイル変更を加えることができます。パネル。

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

スクリプトをwp_enqueue_scriptし、関数をwp_enqueue_styleに追加して、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のような新しい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クラスを使用して、テキストボックスを設定ページに追加します。入力$ variableに「color_code」を使用しています。

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

詳細はこちらから