WordPress:Creating Admin Themes

目錄

• 1 Using Admin Theme Plugins
• 2 使用管理主題插件
• 3 Styling The Admin Theme
• 4 設(shè)計(jì)管理主題
  • 4.1 The Admin Style Sheet
  • 4.2 管理樣式表
  • 4.3 Creating an Admin Theme Plugin
  • 4.4 創(chuàng)建一個(gè)管理主題插件
• 5 Change Log-In page's style
• 6 更改登錄網(wǎng)頁(yè)的樣式
  • 6.1 Advanced CSS Styles
  • 6.2 高級(jí)的 CSS 樣式
• 7 Resources
• 8 資源

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本性非常靈活，幾乎每個(gè)部分都能夠更改。創(chuàng)建一個(gè)自定義的WordPress管理面板主題沒(méi)有區(qū)別。有兩種方式可以創(chuàng)建WordPress管理主題：通過(guò)插件創(chuàng)建或者值通過(guò)更改CSS創(chuàng)建主題。通過(guò)插件創(chuàng)建主題更簡(jiǎn)單，能夠使你更快更簡(jiǎn)單地安裝WordPress管理主題。你只要"插入"插件并且運(yùn)行，即可。

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.

如果你屬于創(chuàng)新性類(lèi)型的人，我們也有一些指示說(shuō)明，幫助你設(shè)計(jì)自己的管理面板的樣式，甚至幫助你怎樣將[[WordPress:#Creating an Admin Theme Plugin|管理主題變?yōu)椴寮]作為公開(kāi)發(fā)行。

使用管理主題插件

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核心文件。有幾個(gè)WordPress插件，能夠使你使用WordPress管理主題，但是不會(huì)混亂主題。查看管理主題列表并且根據(jù)指示，更改你的管理面板的外觀。

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.

一般來(lái)說(shuō)，這些指示說(shuō)明是要將管理主題插件上傳到你的插件文件夾中，然后再在插件面板上將管理主題插件激活。操作簡(jiǎn)單容易。

600px|Administration Theme Plugins

600px|管理主題插件

設(shè)計(jì)管理主題

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不管你是設(shè)計(jì)自己的管理面板主題還是創(chuàng)建一個(gè)或者多個(gè)公開(kāi)發(fā)行的主題作為WordPress插件，這兩個(gè)過(guò)程基本是相同的。作為插件，管理主題包含有一個(gè)函數(shù)，這個(gè)函數(shù)會(huì)指示W(wǎng)ordPress使用新的樣式表，顯示管理面板。創(chuàng)建插件一個(gè)明顯的優(yōu)勢(shì)在于，如果你想要返回到默認(rèn)樣式，你只要取消運(yùn)行插件，即可。如果你只是做出少量更改，而且不想要?jiǎng)?chuàng)建插件，你最好直接地編輯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站點(diǎn)wp-admin文件夾的wp-admin.css文件的備份。然后你可以進(jìn)入備份，更改新的wp-admin.css文件，使用備份，以防出錯(cuò)。

管理樣式表

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 管理主題原始的管理主題樣式表非常地復(fù)雜，完全地包含了管理面板的所有部分。重新創(chuàng)建你的管理主題并不一定要更改原始主題的每個(gè)部分。

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.

下面是管理面板中使用的重要的樣式參照的部分列表。根據(jù)CSS網(wǎng)絡(luò)標(biāo)準(zhǔn)，#表示樣式ID而.表示樣式類(lèi)別。

#wphead

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

#wphead

管理面板主要的標(biāo)題。用來(lái)顯示博客名稱和鏈接，鏈接到瀏覽站點(diǎn)。

#adminmenu ul

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

#adminmenu ul

關(guān)于鏈接的主要級(jí)別的導(dǎo)航條：Dashboard，編寫(xiě)，管理，等等。

#adminmenu2 ul

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

#adminmenu2 ul

關(guān)于鏈接的子級(jí)別的導(dǎo)航條（例如：管理下面：文章，網(wǎng)頁(yè)，類(lèi)別）。

.wrap

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

.wrap

管理面板中所有內(nèi)容的基本的wrapper，設(shè)置在<div>中。

#zeitgeist

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

#zeitgeist

Dashboard中的工具條，用來(lái)顯示最新的活動(dòng)和博客統(tǒng)計(jì)數(shù)據(jù)。

#footer

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

#footer

底部的頁(yè)底文字，有WordPress標(biāo)示語(yǔ)，版本數(shù)字，和幫助鏈接。

.wrap h2

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

.wrap h2

不同的子面板，如總選項(xiàng)的單個(gè)網(wǎng)頁(yè)標(biāo)頭。

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.

你可以簡(jiǎn)單地或者大量地更改wp-admin.css。你可以只更改背景色，給不同的部分添加背景圖像，更改字體，或者只是更改Quicktag 按鈕的顏色或者設(shè)計(jì)。這取決于你的想象力，創(chuàng)建你想要的效果。

創(chuàng)建一個(gè)管理主題插件

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.

要?jiǎng)?chuàng)建管理主題插件，用戶需要能夠輕易地安裝，卸載，以及取消這個(gè)插件的運(yùn)行，將管理面板返回到原始狀態(tài)。

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

首先，我們指示W(wǎng)ordPress鏈接到一種新的樣式表。

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

在文本編輯器的一個(gè)新建文檔中，放入：

<?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.

這是樣式表的"標(biāo)頭"，提供了插件面板上的插件的信息。提供了插件名稱，插件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.

在你的電腦上創(chuàng)建一個(gè)文件夾，如這個(gè)例子中，文件夾為blue-steel。將文件保存在文件夾中，文件名為blue-steel.php。你準(zhǔn)備好之后，將你的整個(gè)文件夾上傳到你的網(wǎng)站/wp-content/plugins/</tt中的 插件文件夾中。這個(gè)文件夾應(yīng)該在/wp-content/plugins/blue-steel/，插件文件應(yīng)該位于/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:

要使得這個(gè)插件為管理面板調(diào)用一種新的樣式表，我們需要?jiǎng)?chuàng)建一個(gè)函數(shù)，這個(gè)函數(shù)會(huì)將新的樣式表添加到管理面板的header的head上。網(wǎng)頁(yè)創(chuàng)建好之后，這看起來(lái)像：

<link rel="stylesheet" type="text/css" 
>

<link rel="stylesheet" type="text/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:

擁有了插件，你可能想要偵測(cè)用戶在哪里安裝了WordPress，這樣你知道你其余的主題位于哪里。你可以使用get_settings()函數(shù)處理這一問(wèn)題。這使得你的插件靈活方便。下面是關(guān)于我們?cè)鯓觿?chuàng)建上面顯示的樣式表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函數(shù)和程序的功能。對(duì)于管理主題，你想要使用add_action()hook into管理面板的admin_head（在<head>中調(diào)用）：

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，你還可以隨意地添加函數(shù)，向admin_footer添加內(nèi)容。例如，你可能想在頁(yè)腳添加關(guān)于主題的通知。下面是關(guān)于怎樣將函數(shù)添加到你的插件：

function blue_steel_footer() {
   echo 'This theme was made by <a >Mr. WordPress</a>.';
}

add_action('admin_footer', 'blue_steel_footer');

function blue_steel_footer() {
   echo 'This theme was made by <a >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! 保存插件并且將插件上傳到你的站點(diǎn)上。從插件面板上選出插件，看看關(guān)于blue-steel內(nèi)容有沒(méi)有出現(xiàn)。如果出現(xiàn)了，你就做對(duì)了！

Change Log-In page's style

更改登錄網(wǎng)頁(yè)的樣式

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文件，更改登錄網(wǎng)頁(yè)的樣式，你必須使用wp_admin_css函數(shù)。創(chuàng)建包含這些命令行的插件：

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.

插件覆蓋了原始的函數(shù)，而且在管理網(wǎng)友的標(biāo)頭上只顯示你的樣式表。你可以在CSS文件中使用.login和#login，更改網(wǎng)頁(yè)的樣式。

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

如果你使用這個(gè)插件，你不需要使用先前閱讀的admin_head函數(shù)。

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.

此外，如果你不想要覆蓋整體管理界面的默認(rèn)wp-admin.css樣式表，你可以使用login_head函數(shù)，只將樣式表添加到你的登錄網(wǎng)頁(yè)。使得這個(gè)樣式表運(yùn)行，將/wp-admin/css/中的login.css文件復(fù)制，你可以下面的內(nèi)容添加到你最初創(chuàng)建的插件中：

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函數(shù)也顯示一些其它的CSS文件，這樣你應(yīng)該向這個(gè)插件添加一些其它的命令行。你可以在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"文件一起運(yùn)行。如果你想要使用rtl文件，請(qǐng)看看wp_admin_css函數(shù)是怎樣在wp_include/general-template.php文件中運(yùn)行的。

Advanced CSS Styles

高級(jí)的 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.

有時(shí)候，在不更改管理面板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樣式是要在內(nèi)容"框"周?chē)鷦?chuàng)建圓形的角。這種技術(shù)包括向HTML結(jié)構(gòu)添加部分或者wrappers，以取得效果。因?yàn)槲覀冋娴牟幌脒M(jìn)入核心的管理面板，做出更改，這樣的更改在下一次更新后就會(huì)消失，你可以使用DOM（Document Object Model）。DOM是一種方式，用來(lái)動(dòng)態(tài)地使用和更新內(nèi)容，結(jié)構(gòu)以及文檔的樣式。

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.

在這個(gè)例子中，使用來(lái)自456 Berea Street的Transparent Rounded Corners，你可以將站點(diǎn)上提供的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()函數(shù)更改為：

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.

這個(gè)腳本使用單一的"hook" (cbb)在container周?chē)鷦?chuàng)建許多divisions。要使得這些能夠運(yùn)行，打開(kāi)Javascript文件并且將所有的cbbreferences更改為wrap，以匹配wp-admin.css標(biāo)準(zhǔn)樣式references。

Resources

資源

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

• 管理主題列表
• 編寫(xiě)插件
• 插件
• 博客設(shè)計(jì)和布局
• WordPress 和CSS