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

相关推荐

  • 关于宝塔面板修改端口后无法登陆解决方案

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

    2019年7月27日
    11.9K
  • 建站工具?推荐WordPress和Dede,两款开源程序

    建站工具?推荐Wordpress和Dede,两款开源程序 WordPress主要是做博客类型的网站,而使用不同的模板可以做出不同的效果,也可以做企业站和商城,后期操作更新维护比较简单。 Dede主要是做企业类型的网站,但是需要改代码的地方比较多,相对于Wordpress是比较复杂那么一些些。 WP   织梦(Dede)

    2019年3月15日
    11.1K
  • 什么样的网站需要公安备案号呢?

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

    2019年10月29日
    0751
  • 纠结,WordPress忘记密码了!这次我来介绍几种解决方法

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

    2019年5月24日
    01.0K
  • 浅析域名被墙了的解决办法

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

    2019年10月16日 免费建站教程
    01.5K
  • WordPress在线表单制作步骤教程

    原来wordpress做在线表单那么简单的,下载Contact Form 7插件,启用,插入短代码,表单完成。 如下图所示:    

    2020年2月23日 免费建站教程
    01.2K
  • 阿里云服务器设置:安装宝塔BT面板

    随着价格的大幅度优惠,现在云服务器已经成为站长建站的首选。不过还有一部分不懂技术的小白苦恼于不懂linux命令,害怕买了云服务器之后不会配置,其实大可不必担心,今天就给大家分享一下阿里云服务器设置教程之【安装宝塔面板一步到位管理服务器】,让管理服务器像管理虚拟主机一样简单。 一、首先我们打开ecs服务器购买页面: 对了,不知道大家是否知道?初次购买阿里云产品…

    2019年6月16日 免费建站教程
    01.1K
  • 服务器建站必备,宝塔Linux面板安装教程~

    安装要求: 内存:512M以上,推荐768M以上(纯面板约占系统60M内存) 硬盘:100M以上可用硬盘空间(纯面板约占20M磁盘空间) 系统:CentOS 7.1+ (Ubuntu16.04+.、Debian9.0+),确保是干净的操作系统,没有安装过其它环境带的Apache/Nginx/php/MySQL(已有环境不可安装)   宝塔linux6.0版本…

    2019年6月12日 免费建站教程
    0997
  • 关于Discuz!X3.4安装详细图文教程,安装简单

    说明:本文档用于帮助您全新安装完整的 Discuz! X3.4 社区软件 一、下载 Discuz! X3.4 到本地或者服务器上 下载地址:https://gitee.com/3dming/DiscuzL/attach_files 二、解压并上传 Discuz! X3.4 程序到服务器且修改相应目录权限 1、上传 Discuz! X3.4 程序到服务器上解压…

    2019年7月21日 免费建站教程
    11.5K
  • WooCommerce如何仅将CSS更改应用于一个页面或产品?

    这次小编来给大家说说,关于“WooCommerce如何仅将CSS更改应用于一个页面或产品?” 有的客户要求从只有一个产品页面中删除图像,但不是从所有的产品页面中删除图像。如果您想将 CSS 更改应用于任何特定的网页,同样的故事也适用。这是我如何做到的。 1. 访问您的网站,并转到您想要 “CSS-ify” 的页面或产品页面 如果您使用 Googl…

    2020年6月12日
    0888
  • 购买宝塔专业版后如何在线升级到专业版?

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

    2019年11月16日 免费建站教程
    0776
  • 服务器入门篇,Web服务器是什么东西?

    新手服务器入门必学,Web服务器是什么意思? 您在使用云服务器 ECS 的时候,可能会遇到各种问题,例如远程连接、更换操作系统、扩容、升降配、使用快照和镜像等。本文介绍了以下资源的最常用操作,方便您参考,包括: 实例、磁盘、快照、自动快照策略、镜像、安全组 服务器基础入门2分钟视频,帮助你了解服务器常用操作。 链接:https://pan.baidu.com…

    2019年3月13日
    1862