当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

管理画面テーマの作成

提供: WordPress Codex 日本語版
2010年9月25日 (土) 13:15時点におけるMizuno (トーク | 投稿記録)による版 (管理画面テーマプラグインの作成)

移動先: 案内検索

このページ「管理画面テーマの作成」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

WordPress は元来自由度が高く、ほとんど全ての部分を簡単に変更することができます。 カスタム WordPress 管理パネル テーマの作成もそうです。WordPress 管理画面テーマを作成するには、主に 2 通りの方法があります。プラグインを利用するか、あるいは単に CSS を書き換えるか、です。プラグインを使う方法がより簡単で、WordPress 管理画面テーマを素早く簡単にインストールできます。文字通り「差し込む」ことで利用できます。

創造性のある方のために、管理パネル用に独自のスタイルシートをデザインする方法を紹介します。さらに、 管理画面テーマプラグインの作成 をして簡単に配布する方法も紹介します。

管理画面テーマプラグインの使用

WordPress Pluginsにより、WordPress コアファイルを編集しなくても簡単にブログに機能を追加することができます。苦情をほとんどあるいはまったく無しに、WordPress 管理画面テーマを編集できるプラグインがあります。 List of Admin themes/en をチェックして、指示にしたがうと、管理パネルの見栄えを変更することができます。

典型的には、管理画面テーマプラグインをプラグインフォルダにアップロードし、プラグインで有効化するように指示されています。簡単で単純ですね。

Administration Theme Plugins


管理画面テーマのスタイル

自分用の管理パネルテーマをデザインしているか、WordPress プラグインとして公開するために作成しているかに関わらず、手順は基本的に同じです。プラグインとしては、管理画面テーマは WordPress に新しいスタイルシートを使用して管理パネルを表示するように指示する関数を含みます。プラグインを作成する明確な利点は、デフォルトスタイルに戻したい場合にプラグインを停止するだけで良い、ということです。少し変更するだけで、プラグインを作成したくない場合は、CSS ファイルを直接編集したほうが良いかもしれません。
直接編集 
WordPress サイトの wp-admin フォルダの wp-admin.css ファイルのバックアップを作成してください。それから、新しい wp-admin.css ファイルに(バックアップをとりながら)変更を加えてください。

管理画面のスタイルシート

ファイル:pink-admin-theme.png
Pink Administration Theme
元の管理画面テーマのスタイルシートは非常に複雑です。管理パネルのすべての外観をカバーしています。自分用の管理画面テーマを作成するのに、すべてのパーツやピースを変更する/作り直す必要はありません。

管理パネルで使用される重要なスタイルリファレンスの部分的なリストです。 Per CSS ウェブ標準では、、# はスタイル ID を、. はスタイルクラスを示します。

#wphead 
管理パネルの主タイトル。ブログ名やView Siteのリンクを表示する。
#adminmenu ul 
主レベルナビゲーションバー。リンク、ダッシュボード、投稿、管理等。
#adminmenu2 ul 
サブレベルナビゲーションバー。(例: 管理の下に、ページ、投稿、カテゴリ)
.wrap 
管理パネルのすべてのコンテンツのベーシックラッパー。<div> に設定。
#zeitgeist 
ダッシュボードのサイドバー。最近の活動とブログ統計を表示する。
#footer 
最下部のフッター。Wordpress ロゴ、バージョン、ヘルプリンク。
.wrap h2 
様々なサブパネルの個々のページヘッダー。General Options等。

wp-admin.css に加える変更はささいなものか、拡張です。背景色を変更したり、異なるセクションに異なる背景画像を追加したり、フォントを変更したり、 Quicktag buttons にささいな色またはデザインの変更を加えることができます。あなたの想像力次第で、好む効果を作成することができます。

管理画面テーマプラグインの作成

管理画面テーマプラグインを作成するには、ユーザーによって簡単にインストールできる必要があります。また簡単にアンインストール/停止して プラグイン を元の状態に戻せることが必要です。

WordPress に新しいスタイルシートにリンクするように指示することから始めましょう。

テキストエディタ で新規ドキュメントを作成し、以下を入力します。

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

これはスタイルシートの"ヘッダー"で、Plugin Panel で閲覧するプラグインについての情報を提供します。プラグインの名前、URI、説明、作者、バージョンです。

ローカルのコンピュータでフォルダを作成し、blue-steel と命名します。フォルダ内にこのファイルを保存して blue-steel.php と命名します。フォルダ全体を、プラグインフォルダ /wp-content/plugins/ にアップロードします。アップロードしたフォルダは /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:

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

<?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_option('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():

function mr_blue_steel() {
    $url = get_option('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:

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!

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:

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.

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

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.

function wp_blue_steel_login() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_option('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).

If you would like to use the original style:

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

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.

Advanced CSS Styles

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

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.

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.

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

function mr_blue_steel() {
    $url = get_option('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" src="' . $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.

Resources

この記事は翻訳時に編集が必要であるとマークされていました。その為Codex原文が大きく編集されている可能性があります。内容を確認される際は原文を参照していただき、可能であれば本項目へ反映させてください。よりよいCodexを作成するためのお手伝いをお願いします。

最新英語版: WordPress Codex » Creating Admin Themes最新版との差分