之前有在WordPress后台给主题配置项加过一键更换主题色的功能,其中用到了wp自带的jQuery UI 的颜色选择器 组件(color picker),今天把添加的方法分享出来,希望对有需要的朋友一点帮助。
1. 在functions.php
中加载 color picker 的 JS 和 CSS:
1 2 3 4 5 |
add_action( 'admin_enqueue_scripts', 'wptuts_add_color_picker' ); function wptuts_add_color_picker( $hook ) { wp_enqueue_style( 'wp-color-picker' ); wp_enqueue_script( 'wp-color-picker'); } |
2. 给主题选项添加相关DOM元素,这一步每个主题的写法不一样,我举个JieStyle Two主题的写法,仅供参考,并不一定适用于所有主题。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$options = array( ... array( "name" => "主题风格色调", "id" => $shortname."_color", "type" => "color", "std" => "#4ec6c8", "explain" => "默认颜色 #4ec6c8 | 包括左侧导航栏底色", ), array( "name" => "链接二态颜色", "id" => $shortname."_color_hover", "type" => "color", "std" => "#2980b9", "explain" => "默认颜色 #2980b9 | 鼠标放在链接上的颜色", ), ... ) |
在主题选项DOM中添加以下代码:
1 2 3 4 5 6 7 8 9 10 11 |
<?php } elseif ($value['type'] == "color") { ?> <div class="form-group"> <label for="options" class="col-sm-2 control-label"><?php echo $value['name']; ?></label> <div class="col-sm-3"> <input name="<?php echo $value['id']; ?>" class="input-color" type="text" value="<?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?>" /> </div> <div class="col-sm-6"> <p class="form-control-static"><?php echo $value['explain']; ?></p> </div> </div> <?php } elseif ($value['type'] == "select") { ?> |
这一步之后,后台主题选项中就有相关元素了。确保input
的class
有值,比如:input-color
,后续会用到。
3. 最后加入js的调用,代码如下:
1 2 3 4 5 6 7 8 9 10 11 |
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script> <script> // 推荐这种写法 jQuery(".input-color").wpColorPicker(); // 或者下面这种写法: $(function () { $('[class="input-color"]').wpColorPicker(); }); </script> |
如果你的后台已经加载jquery.min.js
的话,则不需要重复引用!否则会报错,如果报 $
is undefined,说明你没有引入jquery.min.js
。
正确引入jQuery的方法:wp_enqueue_script( 'jquery');
如果不是上面第3步的写法,你也可以在底部加钩子,加入js调用,比如:
1 2 3 4 5 6 7 8 9 |
function hbao_use_colorpicker() { // wp_enqueue_script( 'jquery'); // 不需要再使用jQuery ?> <script> jQuery(".input-color").wpColorPicker(); </script> <?php } add_action( 'admin_print_footer_scripts', hbao_use_colorpicker ); |
好了,这3步ok之后,效果如下图:

展开后如下图:

原创文章,作者:SONIC SEO,如若转载,请注明出处:https://www.seo388.com/how2useothercolors/