在WordPress插件中使用颜色选择器

从WP3.5开始,后台就默认支持了颜色选择器(color-picker.js)。因为主题有封装好的类可以用,所以这里给出在插件中的调用方法。
WP默认的用的是Iris家的,只支持RGB。有需要RGBA的请用关键字自行搜索。

1.在插件初始化的地方加入指定元素的响应程序

function color_picker_assets() {
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'my-color-picker-handle', plugins_url('my-plugin.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}
add_action( 'admin_enqueue_scripts', 'color_picker_assets' );

因为是插件后台用,所以只要在admin的时候加载就好了。

2.js中增加处理函数

(function ($) {
  $(function () {
    $('#mail-border-color').wpColorPicker();
  });
}(jQuery));

关键的元素标志,用id或者class都可以。多次使用的时候还是id好一点

3.在插件的option页里增加插件调用。

<input type= 'text' name='myplugin_settings[mail_border_color]' id='mail-border-color'  value='<?php if ( isset( $options['mail_border_color'] ) ) echo $options['mail_border_color']; else echo "#FFC000"; ?>' />

因为用name跟options产生了关联,所以更新的时候就自动保存了,非常方便。

所谓会了不难,难了不会。就这么简单。

已有8条评论

路过的人
    1. 我不是把所有的自作功能都弄了个大插件嘛,邮件回复的格式是写死的。这换主题了,想换个配套的颜色就得改代码。
      所以就给做成可配置项了。

      1. 连邮件通知的样式都后台自定义了,这个牛逼。

  1. 东西用不上,不过想听听“多次使用的时候还是id好一点”这句的见解,id 和 class 的区别真没细究过。

    1. 理论上id是不允许重复的,好多浏览器会报错。class可以重复。在这种使用场景下,如果用重复的选择器,后面设的就把前面设的给覆盖了。所以我说id比class好。

  2. 这个方法不错,这样就可以很简单地实现在后台选择颜色切换前台颜色了

你好,新朋友。留言前请先填写昵称邮箱