编辑“WordPress:Creating Admin Themes”

__TOC__
__TOC__
WordPress' flexible nature allows for almost every part of it to be easily changed. Creating a custom WordPress [[WordPress:Administration Panels|Admin Panel]] Theme is no different. There are essentially two ways of making a WordPress Admin theme: with a Plugin or by simply changing the [[WordPress:CSS]]. The Plugin method is the easier of the two methods, allowing you to install WordPress Admin Themes quickly and easily. You literally "plug it in" and it works.

WordPress本性非常灵活，几乎每个部分都能够更改。创建一个自定义的WordPress[[WordPress:Administration Panels|管理面板主题]]没有区别。有两种方式可以创建WordPress管理主题：通过插件创建或者值通过更改[[WordPress:CSS|CSS]]创建主题。通过插件创建主题更简单，能够使你更快更简单地安装WordPress管理主题。你只要"插入"插件并且运行，即可。

If you are the creative type, we also have instructions to help you design your own style sheet for the Administration Panels, and even how to turn your [[WordPress:#Creating an Admin Theme Plugin|Admin Theme into a Plugin]] for easy distribution to the public.

如果你属于创新性类型的人，我们也有一些指示说明，帮助你设计自己的管理面板的样式，甚至帮助你怎样将[[WordPress:#Creating an Admin Theme Plugin|管理主题变为插件]]作为公开发行。

== Using Admin Theme Plugins ==

== 使用管理主题插件 ==

[[WordPress:Plugins|WordPress Plugins]] allow a user to easily add functionality to their blog without editing core WordPress files. There are several WordPress Plugins available that will allow you to use a WordPress Admin Theme with little or no fuss. Check the 
[[WordPress:Using_Themes/Theme_List#Admin_Themes|List of Admin themes]] and follow their instructions to change the look of your Administration Panels.

[[WordPress:Plugins|WordPress 插件]]能够使得用户轻易地向博客添加功能，但是不用编辑WordPress核心文件。有几个WordPress插件，能够使你使用WordPress管理主题，但是不会混乱主题。查看[[WordPress:Using_Themes/Theme_List#Admin_Themes|管理主题列表]]并且根据指示，更改你的管理面板的外观。

Typically, the instructions are to upload the Admin Theme Plugin to your plugins folder and then activate it on your [[WordPress:Administration_Panels#Plugins_-_Add_Functionality_to_your_Blog|Plugin Panel]]. Simple and easy.

一般来说，这些指示说明是要将管理主题插件上传到你的插件文件夹中，然后再在[[WordPress:Administration_Panels#Plugins_-_Add_Functionality_to_your_Blog|插件面板]]上将管理主题插件激活。操作简单容易。

[[WordPress:Image:admin-themes-plugins.png|600px|Administration Theme Plugins]]


[[WordPress:Image:admin-themes-plugins.png|600px|管理主题插件]]


== Styling The Admin Theme ==

== 设计管理主题 ==

[[WordPress:Image:tiger-admin-theme.png|right|thumb|Tiger Admin Theme]]Whether you are designing your own Administration Panel Theme or creating one for public distribution as a WordPress Plugin, the process is basically the same. As a Plugin, the Admin Theme includes a function that will instruct WordPress to use a new stylesheet for displaying the Admin Panel. A distinct advantage to making a plugin is that if you ever want to revert back to the default style, all you have to do is deactivate the plugin. If you are just making few changes and do not want to go through the hassle of creating your plugin, you might be better off just editing the CSS file directly.

[[WordPress:Image:tiger-admin-theme.png|right|thumb|Tiger Admin Theme]]不管你是设计自己的管理面板主题还是创建一个或者多个公开发行的主题作为WordPress插件，这两个过程基本是相同的。作为插件，管理主题包含有一个函数，这个函数会指示WordPress使用新的样式表，显示管理面板。创建插件一个明显的优势在于，如果你想要返回到默认样式，你只要取消运行插件，即可。如果你只是做出少量更改，而且不想要创建插件，你最好直接地编辑CSS文件。

;Direct Editing :Make a backup copy of the <tt>wp-admin.css</tt> file from the <tt>wp-admin</tt> folder on your WordPress site. Then you can go in and make changes in the new <tt>wp-admin.css</tt> file with a backup, just in case.

;直接编辑 :制作WordPress站点<tt>wp-admin</tt>文件夹的<tt>wp-admin.css</tt>文件的备份。然后你可以进入备份，更改新的<tt>wp-admin.css</tt>文件，使用备份，以防出错。

===The Admin Style Sheet===

===管理样式表===

[[WordPress:Image:pink-admin-theme.png|right|thumb|Pink Administration Theme]]The original Admin Theme style sheet is very complex, covering all aspects of the Administration Panels thoroughly. Not all the parts and pieces may need to be changed to recreate your Admin Theme.  

[[WordPress:Image:pink-admin-theme.png|right|thumb|Pink 管理主题]]原始的管理主题样式表非常地复杂，完全地包含了管理面板的所有部分。重新创建你的管理主题并不一定要更改原始主题的每个部分。

Here is a partial list of the important style references used in the Administration Panels. Per CSS web standards, <tt>#</tt> denotes a style ID and <tt>.</tt> denotes a style class.

下面是管理面板中使用的重要的样式参照的部分列表。根据CSS网络标准，<tt>#</tt>表示样式ID而<tt>.</tt>表示样式类别。

; <tt>#wphead</tt> :The main title of the admin panel. Used to display the name of the blog and a link to '''View Site'''.

; <tt>#wphead</tt> :管理面板主要的标题。用来显示博客名称和链接，链接到'''浏览站点'''。

; <tt>#adminmenu ul</tt> :The main level navigation bar, for links: Dashboard, Write, Manage, etc.

; <tt>#adminmenu ul</tt> :关于链接的主要级别的导航条：Dashboard，编写，管理，等等。

; <tt>#adminmenu2 ul</tt> :The sub level navigation bar, for links (example: under Manage: Posts, Pages, Categories).

; <tt>#adminmenu2 ul</tt> :关于链接的子级别的导航条（例如：管理下面：文章，网页，类别）。

; <tt>.wrap</tt> :The basic wrapper for all content in the admin panel, set in a <tt>&lt;div></tt>. 

; <tt>.wrap</tt> :管理面板中所有内容的基本的wrapper，设置在<tt>&lt;div></tt>中。

; <tt>#zeitgeist</tt> :The sidebar on the Dashboard displaying Latest Activity and Blog Stats.

; <tt>#zeitgeist</tt> :Dashboard中的工具条，用来显示最新的活动和博客统计数据。

; <tt>#footer</tt> :The footer at the bottom, with Wordpress logo, version number, and help links.

; <tt>#footer</tt> :底部的页底文字，有WordPress标示语，版本数字，和帮助链接。

; <tt>.wrap h2</tt> :Individual Page headers for the various subpanels, like '''General Options'''.

; <tt>.wrap h2</tt> :不同的子面板，如'''总选项'''的单个网页标头。

The changes you make in the <tt>wp-admin.css</tt> can be minor or extensive. You can just change the background color, add a background image to different sections, change the font, or even just do a minor color or design change to the [[WordPress:Coloured_Quicktags|Quicktag buttons]]. It is up to you to use your imagination and create whatever effect you want.

你可以简单地或者大量地更改<tt>wp-admin.css</tt>。你可以只更改背景色，给不同的部分添加背景图像，更改字体，或者只是更改[[WordPress:Coloured_Quicktags|Quicktag 按钮]]的颜色或者设计。这取决于你的想象力，创建你想要的效果。

=== Creating an Admin Theme Plugin ===

=== 创建一个管理主题插件 ===

To create an Admin Theme Plugin, it will need to be easily installed with little effort by the user, and easily uninstalled or deactivated, returning the [[WordPress:Administration Panels]] to their original state.

要创建管理主题插件，用户需要能够轻易地安装，卸载，以及取消这个插件的运行，将[[WordPress:Administration Panels|管理面板]]返回到原始状态。

We begin by telling WordPress to link to a new style sheet.

首先，我们指示WordPress链接到一种新的样式表。

In a [[WordPress:Glossary#Text editor|text editor]], in a new document, put the following:

在[[WordPress:Glossary#Text editor|文本编辑器]]的一个新建文档中，放入：

<pre>
&lt;?php
/*
Plugin Name: Blue Steel Theme
Plugin URI: http://example.com/blue-steel-admin-theme
Description: Blue Steel WordPress Admin Theme - Upload and Activate.
Author: Mr. WordPress
Version: 1.0
Author URI: http://example.com
*/
?&gt;
</pre>




<pre>
&lt;?php
/*
插件名称: Blue Steel 主题
插件 URI: http://example.com/blue-steel-admin-theme
描述: Blue Steel WordPress 管理主题 – 上传和激活。
作者: Mr. WordPress
版本: 1.0
作者 URI: http://example.com
*/
?&gt;
</pre>



This is the "header" of the style sheet and provides information about the plugin to be viewed on the [[WordPress:Administration_Panels#Plugins_-_Add_Functionality_to_your_Blog|Plugin Panel]]. It provides the name, [[WordPress:Glossary#URI_and_URL|URI]] of the plugin, the description, author, and version.

这是样式表的"标头"，提供了[[WordPress:Administration_Panels#Plugins_-_Add_Functionality_to_your_Blog|插件面板]]上的插件的信息。提供了插件名称，插件[[WordPress:Glossary#URI_and_URL|URI]]，描述，作者和版本。

Create a folder on your computer, per this example, called <tt>blue-steel</tt>.  Save this file inside of the folder and call it <tt>blue-steel.php</tt>.  When you are ready, upload the entire folder to your plugin folder on your website at <tt>/wp-content/plugins/</tt>. This folder should be at <tt>/wp-content/plugins/blue-steel/</tt> and the plugin file should be at <tt>/wp-content/plugins/blue-steel/blue-steel.php</tt>.

在你的电脑上创建一个文件夹，如这个例子中，文件夹为<tt>blue-steel</tt>。将文件保存在文件夹中，文件名为<tt>blue-steel.php</tt>。你准备好之后，将你的整个文件夹上传到你的网站<tt>/wp-content/plugins/</tt中的 插件文件夹中。这个文件夹应该在<tt>/wp-content/plugins/blue-steel/</tt>，插件文件应该位于<tt>/wp-content/plugins/blue-steel/blue-steel.php</tt>。

To make this plugin call a new style sheet for the Administration Panels, we need to create a function that will add the style sheet to the <tt>head</tt> of the Admin Panel's <tt>header</tt>. This is no different than adding a link to a style sheet in all web pages.  It will look something like this when the page is generated:

要使得这个插件为管理面板调用一种新的样式表，我们需要创建一个函数，这个函数会将新的样式表添加到管理面板的<tt>header</tt>的<tt>head</tt>上。网页创建好之后，这看起来像：

<pre>&lt;link rel="stylesheet" type="text/css" 
href="http://example.com/wp-content/plugins/blue-steel/wp-admin.css"></pre>


<pre>&lt;link rel="stylesheet" type="text/css" 
href="http://example.com/wp-content/plugins/blue-steel/wp-admin.css"></pre>

With your plugin, you will want to detect where the user has installed WordPress, so that you know where the rest of your Theme is located. You can use the <tt>get_settings()</tt> function for that. This makes your plugin flexible and portable. Here is how we would create the stylesheet <tt>link</tt> shown above:

拥有了插件，你可能想要侦测用户在哪里安装了WordPress，这样你知道你其余的主题位于哪里。你可以使用<tt>get_settings()</tt>函数处理这一问题。这使得你的插件灵活方便。下面是关于我们怎样创建上面显示的样式表<tt>link</tt>：

<pre>&lt;?php
/*
Plugin Name: Blue Steel Theme
Plugin URI: http://example.com/blue-steel-admin-theme
Description: Blue Steel WordPress Admin Theme - Upload and Activate.
Author: Mr. WordPress
Version: 1.0
Author URI: http://example.com
*/

function mr_blue_steel() {
    $url = get_settings('siteurl');
    $url = $url . '/wp-content/plugins/blue-steel/wp-admin.css';
    echo '&lt;link rel="stylesheet" type="text/css" href="' . $url . '" /&gt;';
}

?&gt;</pre>


<pre>&lt;?php
/*
插件名称: Blue Steel 主题
插件 URI: http://example.com/blue-steel-admin-theme
描述: Blue Steel WordPress 管理主题 – 上传并且激活。
作者: Mr. WordPress
版本: 1.0
作者 URI: http://example.com
*/

function mr_blue_steel() {
    $url = get_settings('siteurl');
    $url = $url . '/wp-content/plugins/blue-steel/wp-admin.css';
    echo '&lt;link rel="stylesheet" type="text/css" href="' . $url . '" /&gt;';
}

?&gt;</pre>




Before we get to the actual styles, you need to add an action with the [[WordPress:Plugin_API#Adding_Actions|Plugin API]]. Actions allow for plugins to "hook" into functions and features of the program. For Admin Themes, you want to hook into the <tt>admin_head</tt> (called in the <tt>&lt;head&gt;</tt>) of the Administration Panel with <tt>add_action()</tt>:

在我们得到真正的样式之前，你需要添加[[WordPress:Plugin_API#Adding_Actions|插件 API]]的action。Action能够使得插件"hook" into函数和程序的功能。对于管理主题，你想要使用<tt>add_action()</tt>hook into管理面板的<tt>admin_head</tt>（在<tt>&lt;head&gt;</tt>中调用）：

<pre>
function mr_blue_steel() {
    $url = get_settings('siteurl');
    $url = $url . '/wp-content/plugins/blue-steel/wp-admin.css';
    echo '&lt;link rel="stylesheet" type="text/css" href="' . $url . '" /&gt;';
}

add_action('admin_head', 'mr_blue_steel');

?&gt;</pre>



<pre>
function mr_blue_steel() {
    $url = get_settings('siteurl');
    $url = $url . '/wp-content/plugins/blue-steel/wp-admin.css';
    echo '&lt;link rel="stylesheet" type="text/css" href="' . $url . '" /&gt;';
}

add_action('admin_head', 'mr_blue_steel');

?&gt;</pre>






In addition to the <tt>admin_head</tt> Plugin API hook, you can also optionally add a function to add content to the <tt>admin_footer</tt>. For example, you might want to put a notice about the theme in the footer. Here is how to add it to your plugin:

除了<tt>admin_head</tt> 插件 API hook，你还可以随意地添加函数，向<tt>admin_footer</tt>添加内容。例如，你可能想在页脚添加关于主题的通知。下面是关于怎样将函数添加到你的插件：

<pre>
function blue_steel_footer() {
   echo 'This theme was made by &lt;a href="http://example.com"&gt;Mr. WordPress&lt;/a&gt;.';
}

add_action('admin_footer', 'blue_steel_footer');
</pre>




<pre>
function blue_steel_footer() {
   echo 'This theme was made by &lt;a href="http://example.com"&gt;Mr. WordPress&lt;/a&gt;.';
}

add_action('admin_footer', 'blue_steel_footer');
</pre>




Save the plugin and upload it to your site. Select it from the Plugins Panel and see if anything about <tt>blue-steel</tt> appears. If it does, you are on the right track!
保存插件并且将插件上传到你的站点上。从插件面板上选出插件，看看关于<tt>blue-steel</tt>内容有没有出现。如果出现了，你就做对了！
== Change Log-In page's style ==

== 更改登录网页的样式 ==

If you would like to change your Log-In page's style with your <tt>wp-admin.css</tt> file you must be use the <tt>wp_admin_css</tt> function. Create a plugin that contains these lines:

如果你想要使用<tt>wp-admin.css</tt>文件，更改登录网页的样式，你必须使用<tt>wp_admin_css</tt>函数。创建包含这些命令行的插件：

<pre>
function my_wp_admin_css() {
  echo '<link rel="stylesheet" href="/wp-content/plugins/blue-steel/wp-admin.css" type="text/css" />';
}

add_action('wp_admin_css','my_wp_admin_css');
</pre>





<pre>
function my_wp_admin_css() {
  echo '<link rel="stylesheet" href="/wp-content/plugins/blue-steel/wp-admin.css" type="text/css" />';
}

add_action('wp_admin_css','my_wp_admin_css');
</pre>




This plugin overrides the original function, and displays only your stylesheet in the admin page's header. You use the <tt>.login</tt> and the <tt>#login</tt> element in the CSS file to change the page's style.

插件覆盖了原始的函数，而且在管理网友的标头上只显示你的样式表。你可以在CSS文件中使用<tt>.login</tt>和<tt>#login</tt>，更改网页的样式。

If you use this plugin you don't need to use the <tt>admin_head</tt> function that you read before!

如果你使用这个插件，你不需要使用先前阅读的<tt>admin_head</tt>函数。

Alternatively, if you don't want to override the default wp-admin.css stylesheet for the overall admin screen, you can use the <tt>login_head</tt> function to add a style sheet solely to your log-in page. To get this working, copy the login.css file from <tt>/wp-admin/css/</tt> you can append the following to the original plug-in you've created.

此外，如果你不想要覆盖整体管理界面的默认wp-admin.css样式表，你可以使用<tt>login_head</tt>函数，只将样式表添加到你的登录网页。使得这个样式表运行，将<tt>/wp-admin/css/</tt>中的login.css文件复制，你可以下面的内容添加到你最初创建的插件中：

<pre>
function wp_blue_steel_login() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_settings('siteurl') . '/wp-content/plugins/blue-steel/login.css" />'."\n";
}

add_action('login_head', 'wp_admin_login_css');
</pre>



<pre>
function wp_blue_steel_login() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_settings('siteurl') . '/wp-content/plugins/blue-steel/login.css" />'."\n";
}

add_action('login_head', 'wp_admin_login_css');
</pre>




The <tt>wp_admin_css</tt> function also displays some other CSS file so you should add some other lines to this plugin. You can find these stylesheet files in the <tt>wp-admin</tt> folder, and the <tt>/wp-admin/css/</tt> maps (For example: <tt>upload.css</tt>).

<tt>wp_admin_css</tt>函数也显示一些其它的CSS文件，这样你应该向这个插件添加一些其它的命令行。你可以在<tt>wp-admin</tt>文件夹和中<tt>/wp-admin/css/</tt> maps（例如：<tt>upload.css</tt>）找到这些样式表文件。

If you would like to use the original style:

如果你想要使用最初的样式：

<pre>
echo '<link rel="stylesheet" href="/wp-admin/css/upload.css" type="text/css" />';
</pre>



<pre>
echo '<link rel="stylesheet" href="/wp-admin/css/upload.css" type="text/css" />';
</pre>



If you would like to use your style:
如果你想要使用自己的样式：

<pre>
echo '<link rel="stylesheet" href="/wp-content/plugins/blue-steel/upload.css" type="text/css" />';
</pre>

In the end:
<pre>
<?php
/*
Plugin Name: Blue Steel Theme
Plugin URI: http://example.com/blue-steel-admin-theme
Description: Blue Steel WordPress Admin Theme - Upload and Activate.
Author: Mr. WordPress
Version: 1.0
Author URI: http://example.com
*/

function my_wp_admin_css() {
 echo '
  // use the "blue-steel" style
  <link rel="stylesheet" href="/wp-content/plugins/blue-steel/wp-admin.css" type="text/css" />
  // use the original style
  <link rel="stylesheet" href="/wp-admin/css/upload.css" type="text/css" />
 ';
}

add_action('wp_admin_css','my_wp_admin_css');
?>
</pre>


<pre>
echo '<link rel="stylesheet" href="/wp-content/plugins/blue-steel/upload.css" type="text/css" />';
</pre>

最后：
<pre>
<?php
/*
插件名: Blue Steel主题
插件URI: http://example.com/blue-steel-admin-theme
描述: Blue Steel WordPress 管理主题 – 上传和激活。
作者: Mr. WordPress
版本: 1.0
作者 URI: http://example.com
*/

function my_wp_admin_css() {
 echo '
  // use the "blue-steel" style
  <link rel="stylesheet" href="/wp-content/plugins/blue-steel/wp-admin.css" type="text/css" />
  // use the original style
  <link rel="stylesheet" href="/wp-admin/css/upload.css" type="text/css" />
 ';
}

add_action('wp_admin_css','my_wp_admin_css');
?>
</pre>






These plugins don't work with the <tt>install.css</tt> file and the <tt>"rtl"</tt> files. If you would like to use the <tt>rtl</tt> files, please look at how the <tt>wp_admin_css</tt> function works in the <tt>wp_include/general-template.php</tt> file.


这些插件不能与<tt>install.css</tt>文件和 <tt>"rtl"</tt>文件一起运行。如果你想要使用<tt>rtl</tt>文件，请看看<tt>wp_admin_css</tt>函数是怎样在<tt>wp_include/general-template.php</tt>文件中运行的。

=== Advanced CSS Styles ===

=== 高级的 CSS 样式 ===

[[WordPress:Image:admin-rounded-corners.png|right|thumbnail|Rounded Corners]]

[[WordPress:Image:admin-rounded-corners.png|right|thumbnail|Rounded Corners]]

Sometimes there are places where CSS just cannot achieve the look you want without making modifications to the HTML of the Administration Panels. 

有时候，在不更改管理面板HTML的情况下，CSS不能获得你想要的外观。

A popular CSS style is to create rounded corners on "boxes" of content. The technique involves adding divisions or ''wrappers'' to the HTML architecture in order to achieve the effect.  Since we really do not want to get into the core Administration Panels to make these changes, which will disappear with the next upgrade, you can use the DOM (Document Object Model). The DOM is a way of dynamically accessing and updating content, structure, and style of documents.

一种受欢迎的CSS样式是要在内容"框"周围创建圆形的角。这种技术包括向HTML结构添加部分或者''wrappers''，以取得效果。因为我们真的不想进入核心的管理面板，做出更改，这样的更改在下一次更新后就会消失，你可以使用DOM（Document Object Model）。DOM是一种方式，用来动态地使用和更新内容，结构以及文档的样式。

In this example, using the [http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/ Transparent Rounded Corners] effect from 456 Berea Street, you can add the Javascript provided on the site to your Admin Theme Plugin, without editing the WordPress source.

在这个例子中，使用来自456 Berea Street的[http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/ Transparent Rounded Corners]，你可以将站点上提供的Javascript添加到你的管理主题插件上，不用编辑WordPress源码。

Download the script and save it to your <tt>blue-steel</tt> folder as <tt>javascript.js</tt>.  Change the <tt>mr_blue_steel()</tt> function to:

下载脚本，并且将脚本保存到你的<tt>blue-steel</tt> 文件夹作为<tt>javascript.js</tt>。将<tt>mr_blue_steel()</tt>函数更改为：

<pre>
function mr_blue_steel() {
    $url = get_settings('siteurl');
    $dir = $url . '/wp-content/plugins/blue-steel/';
    echo '&lt;link rel="stylesheet" type="text/css" href="' . $dir . 'wp-admin.css" /&gt;';
    echo '&lt;script type="text/javascript" href="' . $dir .'javascript.js"&gt;&lt;/script&gt;';
}
</pre>





<pre>
function mr_blue_steel() {
    $url = get_settings('siteurl');
    $dir = $url . '/wp-content/plugins/blue-steel/';
    echo '&lt;link rel="stylesheet" type="text/css" href="' . $dir . 'wp-admin.css" /&gt;';
    echo '&lt;script type="text/javascript" href="' . $dir .'javascript.js"&gt;&lt;/script&gt;';
}
</pre>





This script uses a single "hook" (<tt>cbb</tt>) to create many divisions around the container. For this to work, open the Javascript file and change all references of <tt>cbb</tt> to <tt>wrap</tt> to match the <tt>wp-admin.css</tt> standard style references.

这个脚本使用单一的"hook" (<tt>cbb</tt>)在container周围创建许多divisions。要使得这些能够运行，打开Javascript文件并且将所有的<tt>cbb</tt>references更改为<tt>wrap</tt>，以匹配<tt>wp-admin.css</tt>标准样式references。

== Resources ==

== 资源 ==

* [[WordPress:Using_Themes/Theme_List#Admin_Themes|List of Admin themes]]
* [[WordPress:Writing a Plugin]]
* [[WordPress:Plugins]]
* [[WordPress:Blog Design and Layout]]
* [[WordPress:Blog_Design_and_Layout#WordPress_and_CSS|WordPress and CSS]]

* [[WordPress:Using_Themes/Theme_List#Admin_Themes|管理主题列表]]
* [[WordPress:Writing a Plugin|编写插件]]
* [[WordPress:Plugins|插件]]
* [[WordPress:Blog Design and Layout|博客设计和布局]]
* [[WordPress:Blog_Design_and_Layout#WordPress_and_CSS|WordPress 和CSS]]