• 额外增加管理界面配色方案
  • 如何修改管理界面配色方案我相信每个站长应该都是明白的,这种配色方案通过下面截图的路径直接可以进行修改,而且每个用户都可以自定义的,当然,本站禁止用户进入后台,那么就不用考虑这个问题了,如果你的站点可以让用户进入后台,这个功能可能就会有用了。
    额外增加管理界面配色方案-WP新手学园

    虽然提供了较多的配色方案,但是每个人的喜好不一样,而本文就可以根据你自己的喜好来进行添加额外的配色方案,请继续往下看。

    生成配色方案

    想要配置一个额外的方案,我们需要的内容非常简单,就是CSS样式表配合PHP代码,让样式表在后台加载成功即可,而这一切,都可以通过下面这个站点来完成: https://wpadmincolors.com/

    站点方面是专门为了解决后台配色方案而创建的,下面是站点界面截图:
    额外增加管理界面配色方案-WP新手学园

    额外增加管理界面配色方案-WP新手学园

    默认情况就是上面两张图片,同时,你可以进行配置:
    额外增加管理界面配色方案-WP新手学园

    配置完毕之后点击Generate Color Scheme按钮即可生成如下界面:
    额外增加管理界面配色方案-WP新手学园

    没错,代码方面提供了PHP代码和相关的CSS代码,至于如何使用呢,请继续查看。

    引入相关代码

    首先下载CSS文件,这就不用说了吧,上图中的1右上角有一个download,点击按钮即可下载,下载完毕之后,我们将文件保存到你的主题根目录下:
    额外增加管理界面配色方案-WP新手学园

    之后将相关的PHP代码复制到你主题下面的functions.php文件里面:
    额外增加管理界面配色方案-WP新手学园

    之后保存文件即可。如果操作中不存在任何问题,你将在个人资料里面看到如下的界面:
    额外增加管理界面配色方案-WP新手学园

    可以看到我们自己创建的配色方案已经生效了,点击选择之后颜色各方面都是符合自己的设定,没有任何错位等等问题:
    额外增加管理界面配色方案-WP新手学园

    请不要在意颜色配色的问题,只要功能生效了,证明目的可以达到了,你学会了么?

    额外内容

    虽然我们知道怎么做了,但是我们并不知道原理是什么,通过PHP代码,我们可以了解到使用的是一个钩子,加载在admin_init上,同时通过函数:wp_admin_css_color()加载配置,对于这个函数,官方声明如下:

  • wp_admin_css_color() 函数介绍
  • 函数用法
  • wp_admin_css_color( string $key, string $name, string $url, array $colors = array(), array $icons = array() )

    Registers an admin color scheme css file.

  • 功能介绍
  • Allows a plugin to register a new admin color scheme. For example:

    wp_admin_css_color( 'classic', __( 'Classic' ), admin_url( "css/colors-classic.css" ), array(
        '#07273E', '#14568A', '#D54E21', '#2683AE'
    ) );
  • 参数介绍
  • $key

    (string)
    (Required)
    The unique key for this theme.

    $name

    (string)
    (Required)
    The name of the theme.

    $url

    (string)
    (Required)
    The URL of the CSS file containing the color scheme.

    $colors

    (array)
    (Optional)
    An array of CSS color definition strings which are used to give the user a feel for the theme.

    Default value: array()

    $icons

    (array)
    (Optional)
    CSS color definitions used to color any SVG icons. 'base'(string) SVG icon base color.
    'focus'(string) SVG icon color on focus.
    'current'(string) SVG icon color of current admin menu link.

    Default value: array()

  • 返回值
  • 暂无数据
  • 通过函数说明我们基本了解到了,这个函数才是整个功能的核心,同时,我们也可以修改SVG图标方面的颜色,但是本文章没有用到相关代码,如果你需要的话,可以考虑使用。

  • 订阅站点了解最新技巧
  • 任何有用的技巧我们均将通过邮件告知你
  • 点击订阅
    高级设置
  • 0
    大惊
    0
    大笑
    0
    发呆
    0
    恶魔
    0
    流泪
    0
    调皮
    0
    笑出泪
    0
    犯困
    0
    坏笑
    0
    疑问
  • 版权声明:整理不易,如无特殊说明,文章内容均为本站原创,转载请注明出处
  • 本文标题:额外增加管理界面配色方案
  • 本文链接:https://www.wpxsxy.com/336.html [点击复制]
  • W*******
  • 2830776172
  • qweqw
  • qwe
  • 啥都没有,没啥好看的
    主页
    关注
    聊天
    View Admin As:以其他身份查看站点
  • 上一篇:
  • View Admin As:以其他身份查看站点
  • Code Snippets:更容易地添加代码
  • 下一篇:
  • Code Snippets:更容易地添加代码
  • 相关推荐
    文章评论
    提交评论
    分类推荐