如何在前端的插件中实现WordPress虹膜选择器？

10

这个问题在这里被问同样的问题，因为我，但没有足够的答案，也没有选择正确的答案，所以我再次问，如果我在一个更连贯的方式问我可能会得到回应希望。

我正在尝试实现在Wordpress主题自定义API窗格中看到的颜色选择器轮，以选择颜色。使用挂钩时，加载脚本和样式工作正常，“ admin_enqueue_scripts”可以工作，但是尝试使用挂钩在前端加载这些脚本，“ wp_enqueue_scripts”不起作用。样式入队，但脚本不入队。

我想避免将文件复制到我的插件中，而不会复制与Wordpress捆绑在一起的文件。必须有一种方法可以使Iris拾色器在我没有看到的前端工作。

对于那些想知道为什么要这样做的人，我正在开发一个插件，该插件在屏幕的侧面添加了一个弹出式面板，可让您对网站进行实时临时样式更改，而无需通过wp-admin登录面板。

— 德韦恩·查林顿
source

16

这使我发疯了一段时间，但是我通过将它们与管理脚本加载器中使用的完整参数相加，而不是仅仅引用句柄，使它起作用。当我打印了$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 );

— 米洛
source

哇，完美。使用admin_url函数并只是将脚本放入队列而无需注册然后将其放入队列，这对我来说从来没有想到。这可能与我们将要使用的核心Iris颜色选择器及其依赖关系差不多。谢谢。

— Dwayne Charrington

1

这几乎使我到了那里，但是关于wpColorPickerL10n我仍然有一个错误，因此我必须在函数中添加更多内容。我已经用wp_localize_script要求更新了上面的答案。

— 工业主题

3

我们需要wp_enqueue_script脚本和wp_enqueue_style样式，并在function.php文件中使用add_action。只需在此脚本中包含一个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);

现在，像cp-active.js一样创建一个新的javascript文件，并使用波纹管代码将其保留为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”作为输入$ variable。

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

从这里获取详细信息

— 切塞西卜
source