WordPress中自定义后台管理界面配色方案的小技巧
<p>WordPress 3.8 开始的全新设计的后台支持多颜色选择，默认有八种非常精美的配色，可以让用户自己选择。</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="WordPress中自定义后台管理界面配色方案的小技巧" alt="WordPress中自定义后台管理界面配色方案的小技巧" src="https://zhuji.jb51.net/uploads/img/202305/db32b5d92d5ca694688cf404630d9b23.jpg"></p>
<p>
关于配色 WordPress 提供了一个函数 wp_admin_css_color() 可以让开发者自定义配色，只需要调用一下这个函数即可完成所有的注册操作。</p>
<p>
参数</p>
<div>
<div>
<div id="highlighter_681137">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
<td>
<div>
<div>
<code>wp_admin_css_color( </code><code>$key</code><code>, </code><code>$name</code><code>, </code><code>$url</code><code>, </code><code>$colors</code> <code>= </code><code>array</code><code>(), </code><code>$icons</code> <code>= </code><code>array</code><code>() );</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<ul>
<li>
$key（string）：颜色的 ID</li>
<li>
$name（string）：颜色的名称，在后台显示</li>
<li>
$url（string）：选择此颜色的时候引用的 CSS</li>
<li>
$colors（array）：在用户选择颜色时名称下边的演示颜色，可以设置无限个，推荐 4 个。默认值为空数组</li>
<li>
$icons（array）：SVG 图标的颜色，可以设置成长度为 3 的数组，键值分别为 base、focus 和 current。默认值为空数组</li>
</ul>
<p>
例子</p>
<p>
首先需要准备一个 CSS 文件，这个 CSS 文件存放了当用户选择你的配色的时候调用的 CSS，也就是存放配色样式的 CSS，你完全可以自定义，或者直接复制一下 WordPress 自带的默认颜色 CSS 修改一下（/wp-admin/css/colors.min.css）。</p>
<p>
然后就可以在 PHP 文件里注册了，先看一个例子，这个例子创建了一个函数挂载到了 admin_init，然后在里边添加颜色。</p>
<div>
<div>
<div id="highlighter_818621">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
</td>
<td>
<div>
<div>
<code>/***</code>
</div>
<div>
<code> </code><code>*创建后台自定义配色</code>
</div>
<div>
<code> </code><code>*http://www.endskin.com/add-admin-color/</code>
</div>
<div>
<code>*/</code>
</div>
<div>
<code>function</code> <code>Bing_add_admin_color(){</code>
</div>
<div>
<code> </code><code>wp_admin_css_color(</code>
</div>
<div>
<code> </code><code>'Bing'</code><code>,</code>
</div>
<div>
<code> </code><code>'自定义'</code><code>,</code>
</div>
<div>
<code> </code><code>get_bloginfo( </code><code>'template_directory'</code> <code>) . </code><code>'/color_style.css'</code><code>,</code>
</div>
<div>
<code> </code><code>array</code><code>( </code><code>'red'</code><code>, </code><code>'#AAA'</code><code>, </code><code>'#FEFEFE'</code><code>, </code><code>'#000'</code> <code>),</code>
</div>
<div>
<code> </code><code>array</code><code>( </code><code>'base'</code> <code>=> </code><code>'#999'</code><code>, </code><code>'focus'</code> <code>=> </code><code>'#2ea2cc'</code><code>, </code><code>'current'</code> <code>=> </code><code>'#fff'</code> <code>)</code>
</div>
<div>
<code> </code><code>);</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action( </code><code>'admin_init'</code><code>, </code><code>'Bing_add_admin_color'</code> <code>);</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
位置</p>
<p>
函数所在文件：/wp-includes/general-template.php</p>
頁:
[1]