关于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后台替换不同颜色

 

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

(2)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2019年7月27日 19:57
下一篇 2019年7月28日 10:05

相关推荐

  • 纠结,WordPress忘记密码了!这次我来介绍几种解决方法

    不经意中,忘掉wordpress的登陆密码了,无语啊。正巧在后台管理又没都还没设定电子邮件,既然到处苦寻解决方案,还行终于找到…… ! 1. WordPress内嵌的找加登陆密码方式 当你的admin账号的电子邮件地址是恰当的, 你就依据一般的找回密码流程, 在Wordpress的登陆页点一下”密码忘了?” 随后键入admin或电子邮箱地址. 然后, 你能接…

    2019年5月24日
    01.4K
  • 关于宝塔面板修改端口后无法登陆解决方案

    忘记宝塔面板登录管理端口怎么办?改完端口后忘记了怎么办?关于宝塔地址忘记了的处理方法,你知道吗? 服务器好几个月没有登录管理了,之前没有存档,现在忘记宝塔面板的后台端口是多少了怎么办 ?下面小编来给告诉大家几个指令,解决宝塔面板端口遗忘而无法登陆的问题。 1、找回端口 方法1 在终端输入 cat /www/server/panel/data/port.pl …

    2019年7月27日
    12.9K
  • 转载:CentOS6.5服务器配置建站环境详细流程

    CentOS6.5服务器配置建站环境详细流程 之前的Win主机上挂了十几个WordPress网站,客户普遍反映后台操作已经慢到不行。于是我租了一台新的云主机,这次下决心要搞定Linux 主机了,同样的配置,Linux跑WordPress肯定要快不少,而且也不会碰到Win主机下的各种怪问题。花了两天时间折腾,终于搞定建站环境,把第 一个WordPress网站给…

    2019年3月14日
    01.2K
  • 免费在线问答插件,使用WordPress建站的朋友,不要错过哦

    这款免费的Word Press 在线问答插件,名字叫:DW Question & Answer 免费问答社区插件下载地址:链接: https://pan.baidu.com/s/1WB6nn2VP75kkODfu1XMbSw 提取码: 5gm5    好看吗?你们觉得呢?而我的话,就觉得还不错哦。虽然和收费的有点差距,但是还不错了啦。 最近…

    2019年4月6日 免费建站教程
    11.7K
  • 购买宝塔专业版后如何在线升级到专业版?

    这次,小编给大家说说,关于 “购买宝塔专业版后如何在线升级到专业版?” 的话题。希望对购买了宝塔专业版的您有所帮助。 有三种方式,请根据你的需求选择其中一种升级为专业版,然后使用代金券支付即可。 方法一:未安装面板的用户,登录SSH直接安装专业版,然后登录面板,选择代金券支付Centos安装脚本 yum install -y wget && …

    2019年11月16日 免费建站教程
    01.1K
  • 快速制作网站,只需要三分钟?这么快吗?不信来看看

    请认真看完下面的这段视频,它会教你如何快速搭建网站。 只需要三分钟,就是这么快,就是怎么自信。

    2019年3月15日
    11.2K
  • 浅析网站公安备案流程

    实际上,当我们在ICP备案通过后就要进行网站公安备案了,许多新手对于公安备案还有很多不明白的地方。接下来,小编就来说说网站公安备案流程是什么吧。 网站公安备案流程是什么呢?如下: 1)打开全国公安机关网站 www.beian.gov.cn 注册一个帐号登录; 2)登录后会提示填写开办主体管理,如果没有提示登录后点击左边的菜单就行; 3)填写主体相关的信息,比…

    2019年10月29日
    01.2K
  • VPS的服务器怎样搭建网站呢?

    IIS站点基本设置:1、首先建立一个目录作为网站目录,用于存放网站程序,(注意最好不要把目录创建到C盘)如图: 2、打开IIS,右击网站选项,新建一个网站:出现如图: 点击“下一步”,出现如图,输入站点描述,可以用域名作为描述内容,方便以后对多个站点的清晰化管理: 在网站IP地址里输入您的VPS的IP地址,卓趣科技提醒:网站的主机头建议不要留空,以防止他人的…

    2019年6月10日 免费建站教程
    01.2K
  • 公安备案号是什么?如何查询公安备案?

    其实,“什么是公安备案号呢?公安备案应该如何查询呢?” 网站ICP备案之后就要进行公安备案,但是很多人还不知道公安备案号是什么。接下来,小编就来给大家说说吧。 什么是“公安机关备案号”呢? 很多站长可能都还没有听过,这是除了ICP备案号以外的另一个备案,未来正规的网站都要同时取得ICP备案号和公安机关备案号。 公安机关备案号与网站ICP备案号有什么不同呢? …

    2019年10月29日
    01.6K
  • 关于宝塔面板Linux系统磁盘挂载工具脚本

    这次,小编来给大家说说,“关于宝塔面板Linux系统磁盘挂载工具脚本”。一般来说,如果服务器只有一个硬盘的话,是不需要挂载磁盘的,但是如果额外又买了1块磁盘的话,那就需要服务器面板的挂载脚本了。 最近,有许多朋友反馈的一些问题和磁盘挂载有关。 1、安装完面板后发现磁盘容量与实际购买容量不符 2、重启服务器后面板无法访问,网站、数据库文件丢失上述的,都是因为未…

    2019年11月18日
    01.2K
  • 2020年3月10日阿里云注册与优惠价服务器购买推荐

    2020年3月10日阿里云注册与优惠价服务器购买推荐。 阿里云消费满额可领淘宝红包。3.2-3.31有效消费金额累计满3000元可领淘宝现金红包,仅限报名用户参与。 3月2日-31日有效消费金额累计满3000元,即可获取领取淘宝红包机会! 4月7日满足条件用户可直接来活动页面上领取淘宝红包! 1.到这里注册阿里云账号; https://account.ali…

    2020年3月10日
    01.2K
  • 什么样的网站需要公安备案号呢?

    其实,“什么网站需要公安备案号呢?什么网站需要公安备案呢?”许多朋友们在网站icp备案之后,会考虑网站是否需要进行公安备案?接下来,小编就来给大家说说吧。 什么网站需要公安备案号呢? 根据《公安部第33号令》文件,凡在互联网上开办的网站,网站的服务对象为中国网民,都需要到公安机关进行备案。 关于网站在公安部有备案的好处: 1)备案是工信部规定要求,主要是为了…

    2019年10月29日
    01.1K