关于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,使用的是ssh协议。windows平台下有putty,Xshell,SecureCRT等工具来远程连接linux服务器。 1、putty是一款非常轻量级的SSH连接工具,可以直接运行,方便测试。界面如下: 2、SecureCRT 完成后就可以远程连接了。 首次登录会提示输入密码,如果是个人电脑使用,建议勾选保存密码,便于下次快速登录。 3…

    2019年3月14日 免费建站教程
    01.4K
  • 建站工具?推荐WordPress和Dede,两款开源程序

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

    2019年3月15日
    11.6K
  • 织梦dedecms管理系统,文件目录详细解释,织梦建站必备!

      本文章主要是为了今后对 Dedecms 做二次开发所写。安装后 dedecms 的目录,如 (图 1)所示,   图 1-文件根目录 “a”: 默认 HTML 文件存放目录 “data”: 系统缓存或其它可写入数据存放目录 “dede”: 默认后台管理目录“images”: 系统默认模板图片存放目录“include”: 类库文件目录 …

    2019年6月3日
    01.5K
  • 忘记了Linux 3-6版本宝塔面板密码怎么办?

    进入ssh 输入以下命令重置密码(把命令最后面的   “testpasswd”  替换成你要改的新密码) 注:若是debian/ubuntu用户,请使用有root权限的账户去执行这条命令 cd /www/server/panel && python tools.py panel testpasswd 复制代码 紫框即你要修改的密码红框即面板账…

    2019年8月4日
    01.4K
  • WooCommerce如何仅将CSS更改应用于一个页面或产品?

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

    2020年6月12日
    01.9K
  • 织梦Dedecms忘记密码怎么办?用mysql修改密码

    织梦DEDE忘记密码了怎么办? 方法亲测可用: 1.进去云虚拟主机或者云服务器的控制面板,找到mysql数据库。   2.在mysql数据库里面,找到 dede_admin 这个数据库里面的文件,选择点击,然后修改“pwd”,也就是修改密码。把“pwd”里面的字符串换成  f297a57a5a743894a0e4 (admin = f297a57a…

    2019年6月18日
    11.7K
  • WordPress在线表单制作步骤教程

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

    2020年2月23日 免费建站教程
    01.9K
  • 不买空间域名都可以搭建自己的博客?

    这次,小编来给大家介绍,如何不买空间域名都可以搭建自己的博客?真的可以的哦,不信?你也来试试哈。 想搭建个人博客又不知道选用服务器,或是考虑费用问题?将博客托管,省时省心,还不用担心被攻击。 一款纯静态的博客-gridea 如果你使用过 Hexo 等工具基于 Github  做个人博客,那么恭喜你,你可以很轻松的上手使用Gridea如果你以前没有使用过,那么…

    2019年11月25日 免费建站教程
    01.6K
  • Mysql数据库的备份和还原

    mysql数据库备份还原操作图文流程,网站服务器搬家技巧,做到这几步,让网站搬家不再难。   步骤1,进入数据库管理中心,选中要备份的数据库,点击导出。   步骤2,点击数据库导出,选择自定义,选择所有数据库表。 步骤3,选中数据库表后,点击:执行,就会自己下载保存。 步骤4,已经看到下载后的数据库表文件:文件名.sql格式。 步骤5,接…

    2019年3月14日 免费建站教程
    11.4K
  • 国外DNS服务器免费DNS解析平台推荐

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

    2019年10月16日 免费建站教程
    02.1K
  • 如何在网站添加百度地图?

    这次,小编来说说,“如何在网站添加百度地图?” 的这个话题。 一般来说,对于很多网站的来说,联系我们这一栏都有,但是只会写公司名称和公司电话,公司地址之类,如果在网站的联系我们这一栏中,加上一个百度地图,这样的效果是不是更好,用户看着也方便,那么如何在做网站过程中,插入一个百度地图呢?快来跟着下面的步骤给自己的网站添加百度地图吧。 方法/步骤 1、打开“百度…

    2020年9月3日 免费建站教程
    02.3K
  • 关于宝塔面板修改端口后无法登陆解决方案

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

    2019年7月27日
    13.3K