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

相关推荐

  • 关于宝塔Linux面板命令大全,需要时可查看

    关于宝塔Linux面板命令大全,需要时可查看。因为现在越来越多人使用宝塔系统来管理服务器了,安装方便,配置环境快捷好用。 安装宝塔 Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && s…

    2019年7月27日
    11.1K
  • 关于工信部网站备案流程

    工信部备案系统是什么呢?工信部备案系统有什么作用呢? 实际上,国内云虚拟主机、VPS云服务器建站都是要进行备案的,许多朋友都会直接在工信部备案系统里面备案。 接下来,小编来给大家说说工信部网站备案流程是什么? 1)首先进入电信备案系统网址,并在首页中点击用户注册 2)点击注册后在系统中输入用户所注册的用户名和密码,进入ICP备案信息录入登录,填写真实的用户信…

    2019年10月29日
    01.1K
  • fastadmin忘记后台密码如何解决?

    这次,小编来分享一下,关于“fastadmin忘记后台密码如何解决?” 希望对大家有所帮助,谢谢。 首先,我们先进入数据库。 然后,修改数据库。具体如下: 数据库修改fa_admin表的两个字段 密码 (password):c13f62012fd6a8fdf06b3452a94430e5 密码盐(salt):rpR6Bv 修改完这两项后,登录密码就变成了 1…

    2019年11月4日
    02.4K
  • 分享一些轻量级的论坛搭建源码

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

    2019年11月18日
    01.8K
  • WordPress博客网站访问速度的优化方案

    这是小编的一个小徒弟做的一个小测试。他做的是 “Wordpress博客网站访问速度的优化方案 ”。希望能帮助用wordpress框架源码建站的小伙伴们。 如何提升Wordpress网站打开速度,让WP博客程序实现速度秒开,经过研究实践终于突破了速度这一难题。 要提升Wordpress速度需要结合多方面来进行操作,可针对以下几个方面对速度进行优化来让用户获得更…

    2020年9月3日 免费建站教程
    01.0K
  • 分享织梦文章内容加入相关推荐和翻页的代码

    分享织梦文章内容加入相关推荐和翻页的代码。 小编粗略写的,写得不好请见谅,萌新程序猿一枚。 <div><div><div><div><div id=”pages” class=”page”></div></div>{dede:p…

    2019年9月16日
    01.2K
  • WordPress一键更换整站文件域名的插件

    我们用Wordpress搭建博客之后,虽然可能很少碰到换域名的情况,但是万一哪天碰到了,真还是件麻烦的事情。 网站搬家,可能需要换域名,如果网站搬家要换域名的话,涉及的是整站的图片链接和其他文件的链接,手动1个1个改真的会烦死个人,超级麻烦的。 尤其是博客内的图片链接,如果图片没有放到第三方,那全部的图片都会失效。熟悉Sql的童鞋通过Sql虽然可以完成域名链…

    2019年9月7日
    01.3K
  • php版本升级?php哪个版本好?

    嗯哼,刚开始也不懂php是什么鬼。后来懂了,原来是一种环境语言,服务器和虚拟主机都需要它,必然是需要的。而本人一直以来心中有个疑惑,PHP版本是不是越高越稳定,越高就越好呢?在一般情况下,版本越新越好,就拿wordpress来说在PHP7.0环境下比之前的版本速度提升在3倍左右,3倍,3倍,3倍哦!飞起来了!   目前,PHP最高版本是7.2.x….

    2019年7月14日
    01.1K
  • 国外DNS服务器免费DNS解析平台推荐

    这次,小编来推荐一些国外免费的DNS解析平台。 国外的几个免费的DNS解析平台,如下: DNS(即Domain Name System,域名系统),是因特网上作为域名和IP地址相互映射的一个分布式数据库,能够让用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。举例来说,想要访问百度,我们只需输入www.baidu.com即可,但如果没有了DN…

    2019年10月16日 免费建站教程
    01.1K
  • 关于织梦DEDE友情链接调用的方法与技巧

    这次小编来分享几个织梦友情链接标签技巧。 DEDE织梦的友情链接标签正确的调用格式如下: 织梦dedecms友情链接调用方法: {dede:flink type=’textall’ row=’24’} [field:link /] {/dede:flink} 表示显示前24条从后台添加友情链接全部用文字显示 t…

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

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

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

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

    2019年6月12日 免费建站教程
    01.2K