1. 广州SEO技术博客首页
  2. 免费建站教程

关于WordPress在后台使用其他颜色版本的方法

之前有在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") { ?>

这一步之后,后台主题选项中就有相关元素了。确保inputclass有值,比如: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之后,效果如下图:

wordpress后台使用不同颜色
wordpress后台使用不同颜色

 

展开后如下图:

wordpress后台替换不同颜色
wordpress后台替换不同颜色

 

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

联系我们

17688872082

在线咨询:点击这里给我发消息

邮件:2668888288@QQ.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code