之前有在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/
微信扫一扫 
支付宝扫一扫 
