关于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

相关推荐

  • 快速制作网站,只需要三分钟?这么快吗?不信来看看

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

    2019年3月15日
    11.4K
  • 关于宝塔面板Linux系统磁盘挂载工具脚本

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

    2019年11月18日
    01.4K
  • 简单粗暴易懂,除了WordPress之外,还有谁?!

    除了织梦Dede之外还有,Discuzz 和帝国,但是Discuzz和帝国比较适合做论坛类型的网站。 WordPress是使用PHP语言开发的博客平台,属于一款开源程序,简单粗暴,易懂,也不需要修改多少代码,就能建立一个简单的网站了,维护还很简单呢。用户可以在支持PHP和MySQL数据库的服务器上架设属于个人的小网站。此外,用户还可以把 WordPress当…

    2019年3月18日
    11.7K
  • 关于网安备案与网安备案注意事项

    其实,“什么是网安备案呢?网安备案注意事项有哪些呢?” 许多刚刚icp备案完成之后的朋友都有这样的疑问,接下来,小编就给大家介绍一下网安备案。 什么是网安备案呢? 公安机关备案号是由公安部门所管的一种备案号,与申请网站ICP备案号所需的资料差不多,但不用空间接入商审核处理,直接在线填写资料即可。 网安备案注意事项有哪些? 1)提交资料后,网站负责人前往分局完…

    2019年10月29日
    01.6K
  • 织梦Dede开源系统工具,织梦网站如何进行安全设置

    (为了安全起见,建议先做好全站数据和文件的备份,以下教程是总结经验,本人也是这样设置,并且没有任何问题) 1、修改默认后台名。 打开网站根目录,找到[dede],这个文件夹就是后台的路径,可以随意修改,比如修改为[adminbuy],此时后台登陆的路径为:http://www.*****.com/adminbuy/ 2、删除member文件夹(一共就两个模板…

    2019年7月15日 免费建站教程
    11.9K
  • p2p网站icp备案应该如何操作呢?

    这次,小编来给大家介绍一下 “p2p网站icp备案应该如何操作呢?” 现今社会,国内对于网贷平台的管理越来越严格,p2p平台要想正常运营就必须要办理icp备案,那么,p2p网站icp备案怎么操作? 根据银监会办公厅发布的备案指引,已开展业务的网贷机构需要完成有关违规经营行为的对照整改工作后,方可申请办理备案登记。 关于p2p网站备案流程: 购买域名,域名资料…

    2019年10月29日
    01.6K
  • 浅析域名被墙了的解决办法

    这次,小编来给大家简单地介绍一下 “域名被墙了的解决办法”。希望对广大的站长和SEOer有所帮助。 关于域名被墙的三大状态,如下: 域名被墙 如果域名ping的通却打不开网站(排除服务器宕机),用代理可以打开一般说明域名被封了。假如域名下的网站非法信息多,敏感,又不整改,会直接被GFW墙掉,结果就是访问域名是打不开的。但是解析是正常的。此时域名在国内是无法使…

    2019年10月16日 免费建站教程
    03.7K
  • 不死域名与已备案域名购买平台推荐

    不死域名与已备案域名购买平台推荐,首选怀米网。怀米网的不死域名一般是链接阿里云服务商的,买了之后感觉不错,小编一买就买了10几个不死域名,不死域名1个10几元到上百元不等,也不贵。备案域名就一般会贵一些,个人已备案域名大概100元左右,企业备案域名一般268元到380元左右吧。不死域名+已备案的域名,两个条件同时存在的也是有的,也是大概268元到380元左右…

    2019年10月1日
    02.1K
  • 关于比较常用的织梦调用标签详解

    这次,小编来给大家说说,关于 “关于比较常用的织梦调用标签详解” 的这个话题。 小编接着给大家分享织梦文章的调用标签,让你知道怎么调用某个栏目的文章,调用多少篇,是按发布时间去调用,还是随机调用等等,随便以一个相关推荐代码作为例子,分享如下: {dede:likearticle row=’10’ titlelen=’24’ } [field:title /]…

    2019年7月3日
    0895
  • 分享一些轻量级的论坛搭建源码

    这次,小编来给大家 “分享一些轻量级的论坛搭建源码”。希望能帮助大家搭建属于自己的轻量级论坛网站。 如果你想做一个博客,或者论坛,其实装个轻论坛即可。接下来,小编给大家介绍一些轻论坛程序,全套源码都有,大家自己选择。 Flarum http://flarum.org/ Carbon Forum https://www.94cb.com/ Wecenter h…

    2019年11月18日
    03.2K
  • 仿站工具:一键就能下载网页模板

    这次,小编来给大家推荐一下 ”仿站工具“,”仿站工具“:一键就能下载网页模板。好使,方便,实用。 看到人家好看的网站主题模板想要怎么办?自己又不懂代码又不想花钱请人来写怎么办?接下来分享一个自用的“扒站神器”(单页面扒站工具)输入目标网站网址点击两下就可以把想要的模板网页下载下来。 平时自己收藏使用的免费分享给大家。 仿站(扒站)工具介绍 仿站小工具是通过网…

    2019年12月15日 免费建站教程
    03.3K
  • 关于什么是服务器日志?如何查看服务器日志?

    这次,小编来给大家说说,“关于什么是服务器日志?如何查看服务器日志?” 的这个话题。 记录web服务器接收处理请求以及运行时错误等各种原始信息的以·log结尾的文件。通过网站日志可以清楚的得知用户在什么IP、什么时间、用什么操作系统、什么浏览器、什么分辨率显示器的情况下访问了你网站的哪个页面,是否访问成功。服务器的日志就是记录网站被访问的全过程,从你的网站工…

    2019年11月3日 免费建站教程
    0928