• サイトデザイン工事中です。ご意見をお寄せください。
  • 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。（詳細）

【このWikiはいつでも誰でも編集できます】

Creating Admin Themes

提供：WordPress Codex 日本語版
移動： 案内, 検索

目次

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

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

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

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

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

Administration Theme Plugins


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

ファイル:tiger-admin-theme.png
Tiger Admin Theme
自分用の管理パネルテーマをデザインしているか、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 となります。

このプラグインが管理画面で新しいスタイルシートを呼び出すようにするには、管理パネルの header の 頭 にスタイルシートを追加する関数を作成する必要があります。すべてのウェブページにスタイルシートへのリンク追加するのと同じです。ページが生成されると以下のようになります。 

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

プラグインで、ユーザーが WordPress をどこにインストールしたか知りたい、そしてテーマがどこにあるか知りたい、ということがあるでしょう。get_option() (get_settings() は2.1以降で非推奨) 関数を使用することができます。これにより、プラグインが柔軟に移動可能になります。上述のスタイルシート 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_option('siteurl');
    $url = $url . '/wp-content/plugins/blue-steel/wp-admin.css';
    echo '<link rel="stylesheet" type="text/css" href="' . $url . '" />';
}

?>

実際にスタイルを適用するには、Plugin API でアクションを追加する必要があります。アクションにより、プラグインが、プログラムに関数と機能を"フックする"ことができます。管理画面テーマに関しては、 For Admin Themes, you want to hook into the管理がめの admin_head (<head> で呼び出される) に、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');

?>

admin_head プラグイン API フックの他に、オプションとして 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');

プラグインを保存して、サイトにアップロードしてください。プラグインパネルで選択し、blue-steel が表示されるか調べてください。そうなっているなら、成功です。

ログインページのスタイルを変更する

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

このプラグインは元の関数をオーバーライドし、管理画面ヘッダーをあなたのスタイルで比ゅ叔父します。CSS ファイルで .login と #login 要素を使用してスタイル変更できます。

このプラグインを使用する場合は、前述の admin_head 関数を使用する必要はありません。

別の方法として、デフォルトの wp-admin.css スタイルシートをオーバーライドしたくない場合は、login_head 関数を使用して、労銀ページにのみスタイルシートを追加することができます。この方法を用いるには、/wp-admin/css/ から login.css をコピーし、以下のようにあなたの作成したオリジナルプラグインを付け足します。 

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

wp_admin_css 関数は、他の CSS も表示します。このため、このプラグインに他の行も追加する必要があります。これらのスタイルシートファイルは wp-admin フォルダ、/wp-admin/css/ マップにあります。(例: upload.css)

元のスタイルを使用したい場合： 

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

あなたのスタイルを使用したい場合： 

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

最終結果： 

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

これらのプラグインは、install.css ファイルと "rtl" ファイルでは動作しません。rtl ファイルを使用したい場合は、wp_include/general-template.php ファイルで wp_admin_css 関数の動作を確認してください。

Advanced CSS Styles

ファイル:admin-rounded-corners.png
Rounded Corners

管理画面パネルの HTML を変更しないと、CSS だけでは見栄えを好きなように変更できないことがあるでしょう。

よくある CSS スタイルは、コンテンツの"boxes"に角丸を作ることです。このテクニックを使うには、HTML アーキテクチャに div または wrappers を追加する必要があります。これらの変更をするために管理画面パネルのコアをいじりたくない(アップグレードで消失する)ので、DOM (Document Object Model) を使用することができます。DOM はドキュメントのコンテンツ、構造、スタイルに動的にアクセスし更新する方法です。

456 Berea Street の Transparent Rounded Corners エフェクトを使用して、WordPress ソースを改変せずに管理画面テーマプラグインに Javascript を追加します。

スクリプトをダウンロードし、blue-steel フォルダに javascript.js という名前で保存します。mr_blue_steel() 関数を以下のように変更します。 

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

このスクリプトは単一の"フック" (cbb) を使用してコンテナの周囲に div を作成します。Javascript ファイルを開き、wp-admin.css 標準スタイルシートに合うように cbb をすべて wrap に変更してください。

Resources

最新英語版： WordPress Codex » Creating Admin Themes （最新版との差分）

「http://wpdocs.sourceforge.jp/Creating_Admin_Themes」より作成
個人用ツール
名前空間
変種
操作
このサイトについて
特集
サーバ別情報
リファレンス
ドキュメント整備
ツールボックス