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

「管理画面テーマの作成」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(管理画面テーマプラグインの作成)
(翻訳済み、div無し、画像募集中)
1行目: 1行目:
{{NeedTrans}}
 
 
__TOC__
 
__TOC__
 
WordPress は元来自由度が高く、ほとんど全ての部分を簡単に変更することができます。 カスタム WordPress [[管理パネル]] テーマの作成もそうです。WordPress 管理画面テーマを作成するには、主に 2 通りの方法があります。プラグインを利用するか、あるいは単に [[CSS]] を書き換えるか、です。プラグインを使う方法がより簡単で、WordPress 管理画面テーマを素早く簡単にインストールできます。文字通り「差し込む」ことで利用できます。
 
WordPress は元来自由度が高く、ほとんど全ての部分を簡単に変更することができます。 カスタム WordPress [[管理パネル]] テーマの作成もそうです。WordPress 管理画面テーマを作成するには、主に 2 通りの方法があります。プラグインを利用するか、あるいは単に [[CSS]] を書き換えるか、です。プラグインを使う方法がより簡単で、WordPress 管理画面テーマを素早く簡単にインストールできます。文字通り「差し込む」ことで利用できます。
62行目: 61行目:
 
ローカルのコンピュータでフォルダを作成し、<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> となります。
 
ローカルのコンピュータでフォルダを作成し、<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></tt> にスタイルシートを追加する関数を作成する必要があります。すべてのウェブページにスタイルシートへのリンク追加するのと同じです。ページが生成されると以下のようになります。
  
 
<pre>&lt;link rel="stylesheet" type="text/css"  
 
<pre>&lt;link rel="stylesheet" type="text/css"  
 
href="http://example.com/wp-content/plugins/blue-steel/wp-admin.css"></pre>
 
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_option()</tt> (Deprecated 2.1: <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_option()</tt> (<tt>get_settings()</tt> は2.1以降で非推奨) 関数を使用することができます。これにより、プラグインが柔軟に移動可能になります。上述のスタイルシート <tt>link</tt> を作成する方法です。
  
 
<pre>&lt;?php
 
<pre>&lt;?php
87行目: 86行目:
 
?&gt;</pre>
 
?&gt;</pre>
  
Before we get to the actual styles, you need to add an action with the [[プラグイン_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>:
+
実際にスタイルを適用するには、[[プラグイン_API#Adding_Actions|Plugin API]] でアクションを追加する必要があります。アクションにより、プラグインが、プログラムに関数と機能を"フックする"ことができます。管理画面テーマに関しては、 For Admin Themes, you want to hook into the管理がめの <tt>admin_head</tt> (<tt>&lt;head&gt;</tt> で呼び出される) に、<tt>add_action()</tt> で追加したいでしょう。
  
 
<pre>
 
<pre>
100行目: 99行目:
 
?&gt;</pre>
 
?&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 フックの他に、オプションとして <tt>admin_footer</tt> にコンテンツを追加する関数を追加することができます。例えば、フッターにテーマについて通知したいかもしれません。プラグインに追加する方法を紹介します。
  
 
<pre>
 
<pre>
110行目: 109行目:
 
</pre>
 
</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>
 
<pre>
124行目: 123行目:
 
</pre>
 
</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>
 
<pre>
138行目: 137行目:
 
</pre>
 
</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> マップにあります。(: <tt>upload.css</tt>)
  
If you would like to use the original style:
+
元のスタイルを使用したい場合:
 
<pre>
 
<pre>
 
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" />';
 
</pre>
 
</pre>
  
If you would like to use your style:
+
あなたのスタイルを使用したい場合:
 
<pre>
 
<pre>
 
echo '<link rel="stylesheet" href="/wp-content/plugins/blue-steel/upload.css" type="text/css" />';
 
echo '<link rel="stylesheet" href="/wp-content/plugins/blue-steel/upload.css" type="text/css" />';
 
</pre>
 
</pre>
  
In the end:
+
最終結果:
 
<pre>
 
<pre>
 
<?php
 
<?php
175行目: 174行目:
 
</pre>
 
</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_include/general-template.php</tt> ファイルで <tt>wp_admin_css</tt> 関数の動作を確認してください。
  
 
=== Advanced CSS Styles ===
 
=== Advanced CSS Styles ===
  
 
[[Image:admin-rounded-corners.png|right|thumbnail|Rounded Corners]]
 
[[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 スタイルは、コンテンツの"boxes"に角丸を作ることです。このテクニックを使うには、HTML アーキテクチャに div または ''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] エフェクトを使用して、WordPress ソースを改変せずに管理画面テーマプラグインに Javascript を追加します。
  
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>
 
<pre>
197行目: 196行目:
 
</pre>
 
</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.
+
このスクリプトは単一の"フック" (<tt>cbb</tt>) を使用してコンテナの周囲に div を作成します。Javascript ファイルを開き、<tt>wp-admin.css</tt> 標準スタイルシートに合うように <tt>cbb</tt> をすべて <tt>wrap</tt> に変更してください。
  
 
== Resources ==
 
== Resources ==

2010年10月2日 (土) 07:57時点における版

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 となります。

このプラグインが管理画面で新しいスタイルシートを呼び出すようにするには、管理パネルの 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

管理画面パネルの 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

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

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