如何在 front-end 上将 WordPress Iris 选择器实现到我的插件中？

问题描述

这个问题 here 正在问我一样的问题，但没有足够的答案，也没有选择正确的答案，所以我再次要求，希望如果我以更一致的方式问我可能会得到回应。

我试图实现颜色选择器轮，如 WordPress 主题自定义 API 窗格中所示，用于选择颜色。使用钩子时，加载脚本和样式可以正常工作，但是”admin_enqueue_scripts” 尝试使用钩子将这些脚本加载到 front-end 上，但”wp_enqueue_scripts” 不起作用。风格排队，而不是剧本。

我想避免将文件复制到我的插件中，复制与 Wordpress 捆绑在一起的内容。必须有一种方法让 Iris 颜色选择器在我看不到的 front-end 上工作。

而对于那些想知道我为什么要这样做的人，我正在开发一个插件，在屏幕的侧面添加一个 fly-out 面板，这样就可以让您对该站点进行实时临时样式更改，而无需通过 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 的样式用 add_action 转换为 functions.php 文件。这个脚本只包含一个 jQuery 文件和样式表文件。

// Register Scripts &amp; 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);

现在创建一个新的 JavaScript 文件，就像 cp-active.js 一样，并使用波纹管代码保持它的 avobe 定义的「/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 类，您要显示输入文本。我使用「color_code」输入 $变量。

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

参考文献

How do I implement the WordPress Iris picker into my plugin on the front-end?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何在 front-end 上将 WordPress Iris 选择器实现到我的插件中？