WordPress:Creating Admin Themes

WordPress' flexible nature allows for almost every part of it to be easily changed. Creating a custom WordPress 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管理主题：通过插件创建或者值通过更改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|管理主题变为插件]]作为公开发行。

使用管理主题插件

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 List of Admin themes and follow their instructions to change the look of your Administration Panels.

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

Typically, the instructions are to upload the Admin Theme Plugin to your plugins folder and then activate it on your Plugin Panel. Simple and easy.

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

600px|Administration Theme Plugins

600px|管理主题插件

设计管理主题

right|thumb|Tiger Admin ThemeWhether 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.

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

Direct Editing

Make a backup copy of the wp-admin.css file from the wp-admin folder on your WordPress site. Then you can go in and make changes in the new wp-admin.css file with a backup, just in case.

直接编辑

制作WordPress站点wp-admin文件夹的wp-admin.css文件的备份。然后你可以进入备份，更改新的wp-admin.css文件，使用备份，以防出错。

管理样式表

right|thumb|Pink Administration ThemeThe 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.

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

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

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

#wphead

The main title of the admin panel. Used to display the name of the blog and a link to View Site.

#wphead

管理面板主要的标题。用来显示博客名称和链接，链接到浏览站点。

#adminmenu ul

The main level navigation bar, for links: Dashboard, Write, Manage, etc.

#adminmenu ul

关于链接的主要级别的导航条：Dashboard，编写，管理，等等。

#adminmenu2 ul

The sub level navigation bar, for links (example: under Manage: Posts, Pages, Categories).

#adminmenu2 ul

关于链接的子级别的导航条（例如：管理下面：文章，网页，类别）。

.wrap

The basic wrapper for all content in the admin panel, set in a <div>.

.wrap

管理面板中所有内容的基本的wrapper，设置在<div>中。

#zeitgeist

The sidebar on the Dashboard displaying Latest Activity and Blog Stats.

#zeitgeist

Dashboard中的工具条，用来显示最新的活动和博客统计数据。

#footer

The footer at the bottom, with Wordpress logo, version number, and help links.

#footer

底部的页底文字，有WordPress标示语，版本数字，和帮助链接。

.wrap h2

Individual Page headers for the various subpanels, like General Options.

.wrap h2

不同的子面板，如总选项的单个网页标头。

The changes you make in the wp-admin.css 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 Quicktag buttons. It is up to you to use your imagination and create whatever effect you want.

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

创建一个管理主题插件

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.

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

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

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

In a text editor, in a new document, put the following:

在文本编辑器的一个新建文档中，放入：

<?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
*/
?>

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

This is the "header" of the style sheet and provides information about the plugin to be viewed on the Plugin Panel. It provides the name, URI of the plugin, the description, author, and version.

这是样式表的"标头"，提供了插件面板上的插件的信息。提供了插件名称，插件URI，描述，作者和版本。

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

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

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 head of the Admin Panel's header. 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:

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

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

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

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 get_settings() function for that. This makes your plugin flexible and portable. Here is how we would create the stylesheet link shown above:

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

<?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 '<link rel="stylesheet" type="text/css" href="' . $url . '" />';
}

?>

<?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 '<link rel="stylesheet" type="text/css" href="' . $url . '" />';
}

?>

Before we get to the actual styles, you need to add an action with the Plugin API. Actions allow for plugins to "hook" into functions and features of the program. For Admin Themes, you want to hook into the admin_head (called in the <head>) of the Administration Panel with add_action():

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

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

add_action('admin_head', 'mr_blue_steel');

?>

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

add_action('admin_head', 'mr_blue_steel');

?>

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

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

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

add_action('admin_footer', 'blue_steel_footer');

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

add_action('admin_footer', 'blue_steel_footer');

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

Change Log-In page's style

更改登录网页的样式

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

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

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');

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');

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

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

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

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

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

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

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');

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');

The wp_admin_css 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 wp-admin folder, and the /wp-admin/css/ maps (For example: upload.css).

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

If you would like to use the original style:

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

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

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

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

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

In the end:

<?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');
?>

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

最后：

<?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');
?>

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

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

Advanced CSS Styles

高级的 CSS 样式

right|thumbnail|Rounded Corners

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 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的Transparent Rounded Corners，你可以将站点上提供的Javascript添加到你的管理主题插件上，不用编辑WordPress源码。

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

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

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

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

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

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

Resources

资源

• List of Admin themes
• WordPress:Writing a Plugin
• WordPress:Plugins
• WordPress:Blog Design and Layout
• WordPress and CSS

• 管理主题列表
• 编写插件
• 插件
• 博客设计和布局
• WordPress 和CSS