我如何在我的前端插件中实现WordPress Iris选取器？

时间：2013-01-23 作者：Dwayne Charrington

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

我正在尝试实现Wordpress主题定制API窗格中用于选择颜色的颜色选择器轮。使用钩子加载脚本和样式时效果很好，“admin\\u enqueue\\u scripts”可以工作，但是尝试使用钩子在前端加载这些脚本，“wp\\u enqueue\\u scripts”无法工作。样式进入队列，但脚本未进入队列。

我想避免将过多的文件复制到我的插件中，复制已经与Wordpress捆绑在一起的内容。一定有办法让虹膜颜色选择器在前端工作，但我没有看到。

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

3 个回复

最合适的回答,由SO网友:Milo 整理而成

这让我有一段时间很恼火，但我通过添加管理脚本加载器中使用的完整参数来实现，而不仅仅是引用句柄。当我打印$wp_scripts 前端为global，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 );

SO网友:csehasib

我们需要使用wp\\u enqueue\\u脚本和wp\\u enqueue\\u样式将样式添加到函数中。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并使用波纹管代码避免定义“/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\\u code”。

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

Get details from here

SO网友:Nikolay

我不能让它工作，所以我用了一个简单的HTML 5 color picker field 相反

<input type="color">

结束

标签： hooks wp-enqueue-script theme-customizer color-picker 小码农

hooks & filters and variables

我是updating the codex page example for action hooks, 在游戏中完成一些可重用的功能（最初是针对这里的一些Q@WA）。但后来我遇到了一个以前没有意识到的问题：在挂接到一个函数以修改变量的输出后，我再也无法决定是要回显输出还是只返回它。The Problem: 我可以修改传递给do_action 用回调函数钩住。使用变量修改/添加的所有内容仅在回调函数中可用，但在do_action 在原始函数内部调用。很高兴：我将其修改为一个工作示例，因此您可以将其复制/粘贴

小码农CODE

我如何在我的前端插件中实现WordPress Iris选取器？

相关推荐

hooks & filters and variables