WordPress 管理画面をカスタマイズする！

Posted on: 2011/11/28 | Tags:

※随時更新していきます

はじめに

WordPressの管理画面はごちゃごちゃしていて、誰でも直感的に操作できるとは言えません。
リテラシーの低いユーザでも安心して運用できることを考えるならば、管理画面も使いやすいようにカスタマイズした方が良さそうです。
また、クライアント納品型であれば、必要な機能以外触らせない工夫も必要になってきます。

ダッシュボード

不要なウィジェットを消す

「表示オプション」タブでウィジェットを非表示にすることはできますが、不要なウィジェットは最初から非表示にしておく方が良いでしょう。

> functions.php

function example_remove_dashboard_widgets() {
	global $wp_meta_boxes;
	//unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']); // 現在の状況
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']); // 最近のコメント
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']); // 被リンク
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']); // プラグイン
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']); // クイック投稿
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']); // 最近の下書き
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']); // WordPressブログ
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']); // WordPressフォーラム
}
add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets');

すっきりしました↓

ウィジェットを追加する

> functions.php

function example_dashboard_widget_function() {
	echo "ウィジェットの内容をここに書きます";
}
function example_add_dashboard_widgets() {
	wp_add_dashboard_widget('example_dashboard_widget', 'オリジナルウィジェット', 'example_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );

追加されました↓

ウィジェットの配置を決める

ウィジェットは、ユーザがドラッグして好きな位置に配置できるようにするべきものなので、ウィジェットをあらかじめ並べ変えておく為の簡単な API はありません。
追加したウィジェットは一番下に配置されます。

参考までに、オリジナルウィジェットをデフォルトウィジェットよりも前に配置する例を示します。
ただし、この方法は、ユーザが一度もウィジェットを並べ替えたことがない場合にのみ動作します。
ユーザが並べ替えた場合は、その選好が優先されます。

> functions.php

function example_dashboard_widget_function() {
	echo "ウィジェットの内容をここに書きます";
}
function example_add_dashboard_widgets() {
	wp_add_dashboard_widget('example_dashboard_widget', 'オリジナルウィジェット', 'example_dashboard_widget_function');
	global $wp_meta_boxes;
	$normal_dashboard = $wp_meta_boxes['dashboard']['normal']['core'];
	$example_widget_backup = array('example_dashboard_widget' => $normal_dashboard['example_dashboard_widget']);
	unset($normal_dashboard['example_dashboard_widget']);
	$sorted_dashboard = array_merge($example_widget_backup, $normal_dashboard);
	$wp_meta_boxes['dashboard']['normal']['core'] = $sorted_dashboard;
}
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );

ダッシュボードウィジェット API について、詳しくはこちら→ ダッシュボードウィジェット API/WordPress Codex 日本語

投稿画面

ダッシュボードと同様です。
管理画面上部の「表示オプション」タブでウィジェットを非表示にすることはできますが、不要な項目は最初から非表示にしておく方が良いでしょう。

不要な項目を消す

> functions.php

function remove_post_metaboxes() {
	remove_meta_box('postcustom', 'post', 'normal'); // カスタムフィールド
	remove_meta_box('postexcerpt', 'post', 'normal'); // 抜粋
	remove_meta_box('commentstatusdiv', 'post', 'normal'); // コメント設定
	remove_meta_box('trackbacksdiv', 'post', 'normal'); // トラックバック設定
	remove_meta_box('revisionsdiv', 'post', 'normal'); // リビジョン表示
	remove_meta_box('formatdiv', 'post', 'normal'); // フォーマット設定
	remove_meta_box('slugdiv', 'post', 'normal'); // スラッグ設定
	remove_meta_box('authordiv', 'post', 'normal'); // 投稿者
	remove_meta_box('categorydiv', 'post', 'normal'); // カテゴリー
	remove_meta_box('tagsdiv-post_tag', 'post', 'normal'); // タグ
}
add_action('admin_menu', 'remove_post_metaboxes');

すっきりしました↓

フッターを変更する

> functions.php

function custom_admin_footer() {
	echo '<a href="mainto:xxx@xxx.com">お問い合わせ</a>';
}
add_filter('admin_footer_text', 'custom_admin_footer');

変更されました↓

ログインしている時の管理メニューを消す

> functions.php

add_filter('show_admin_bar', '__return_false');

消えました↓

カスタム CSS ファイルを読み込む

管理画面にディフォルトで読み込まれている CSS ファイルは、コアファイルなので触ってはいけません。

テーマフォルダ内に管理画面用のカスタム CSS ファイルを作成して、それを読み込んで CSS を上書きします。
これは、いかなるカスタマイズにも共通する基本的なスタンスです。

今回は admin.css という名前の CSS ファイルを作成します。

> functions.php

function admin_css() {
	echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/css/admin.css">';
}
add_action('admin_head', 'admin_css');

フックした関数は、特に指定がない限り一番最後にフックされるので、ディフォルトのCSSファイルよりも後に読み込まれます。

カスタム JavaScript ファイルを読み込む

管理画面にディフォルトで読み込まれている JavaScript ファイルは、コアファイルなので触ってはいけません。

テーマフォルダ内に管理画面用のカスタム JavaScript ファイルを作成して、それを読み込みます。

今回は admin.js という名前の JavaScript ファイルを作成します。

> functions.php

function admin_js() {
	wp_enqueue_script('admin', get_bloginfo('template_url').'/js/admin.js');
}
add_action('admin_head', 'admin_js');

サイドメニュー

クライアント納品型の場合、「概観」「プラグイン」「ユーザ」「ツール」「設定」などの項目は不要かもしれません。
逆にそのまま残しておくと、誤って設定変更をされてしまうリスクもあります。

メニューを消す

> functions.php

function remove_menu() {
	//remove_menu_page('index.php'); // ダッシュボード
	//remove_menu_page('edit.php'); // 投稿
	remove_menu_page('upload.php'); // メディア
	remove_menu_page('link-manager.php'); // リンク
	remove_menu_page('edit.php?post_type=page'); // 固定ページ
	remove_menu_page('edit-comments.php'); // コメント
	remove_menu_page('themes.php'); // 概観
	remove_menu_page('plugins.php'); // プラグイン
	remove_menu_page('users.php'); // ユーザー
	remove_menu_page('tools.php'); // ツール
	remove_menu_page('options-general.php'); // 設定
}
add_action('admin_menu', 'remove_menu');

↓不要なメニューが消えました

remove_menu_page() の引数の値は、それぞれのリンク先のファイル名に対応しています。リンク先アドレスの wp-admin/ 以下がそれに該当します。

よって、ディフォルトメニュー以外に、カスタム投稿タイプやプラグインの設定項目がある場合は、そのリンク先のファイル名を引数に指定すれば、それらのメニューも非表示にすることが可能です。

例えばカスタム投稿タイプの場合は、wp-admin/edit.php?post_type=xxx’ となっているので、以下のようなコードになります。

remove_menu_page('edit.php?post_type=xxx');

※あくまで表示しないようにしているだけで、アクセス制限をしているわけではない点に注意してください。アクセス制限をしたいなら、ユーザーもしくは権限ごとにアクセス制限を設定する必要があります。

サブメニューを消す

サブメニューだけを消してみます。
これは便利な関数は用意されていないので自前で。

> functions.php

function remove_submenu($menu_name, $submenu_name) {
	global $submenu;
	$menu = $submenu[$menu_name];
	if (!is_array($menu)) return;
	foreach ($menu as $submenu_key => $submenu_object) {
		if (in_array($submenu_name, $submenu_object)) {
			unset($submenu[$menu_name][$submenu_key]);
			return;
		}
	}
}
function do_remove_submenu () {
	remove_submenu('index.php', 'update-core.php');
}
add_action('admin_menu', 'do_remove_submenu');

↓ダッシュボードのサブメニュー「更新」を消してみました

サブメニューの場合もメニューと同様に、リンク先アドレスの wp-admin/ 以下を指定します。

カスタムメニューを追加する

マニュアルのページを作成して、そのカスタムメニューを追加してみます。

> admin-manual.php

<h2>WordPress の使い方</h2>

> functions.php

function custom_admin_menu() {
	add_menu_page('manual', 'マニュアル', 'edit_posts', 'manual', 'admin_manual_page');
}
function admin_manual_page() {
	require_once('admin-manual.php');
}

↓

オリジナルメニューにする

ディフォルトのサイドメニューは使わず、オリジナルメニューにしてみましょう。
まずはディフォルトのサイドメニューを全て消しますが、以下のように枠が残ってしまいます。

この枠も消したいので、カスタム CSS ファイルで CSS を調整します。

> admin.css

#adminmenuback { display: none; }
#adminmenuwrap { display: none; }
#wpcontent, #footer { margin-left: 15px; }

これで完全に消えました↓

次に、テーマフォルダ内にオリジナルのサイドメニューのテンプレートを作って、それを読み込みます。
original-admin-menu.php という名前のファイルにしてみます。

> original-admin-menu.php

<ul>
	<li><a href="./index.php">ダッシュボード</a></li>
	<li><a href="./edit.php">投稿</a></li>
	<li><a href="./edit.php?post_type=page">固定ページ</a></li>
</ul>

> functions.php

function original_admin_menu() {
	echo '</ul></div>';
	echo '<div id="original_admin_menu">';
	require_once('original-admin-menu.php');
}
add_action('admin_menu', 'original_admin_menu');

↓

あとは CSS でスタイルを整えて、JavaScript で動きをつけたりして、クールなメニューにしてみてください。

投稿一覧画面

不要な項目を消す

管理画面上部の「表示オプション」で表示する項目を選択することができますが、不要な項目は最初から非表示にしておきたい場合。

function custom_columns ($columns) {
	unset($columns['cb']); // チェックボックス
	unset($columns['title']); // タイトル
	unset($columns['author']); // 作成者
	unset($columns['categories']); // カテゴリー
	unset($columns['tags']); // タグ、カスタムフィールド
	unset($columns['comments']); // コメント
	unset($columns['date']); // 日付
	return $columns;
}
add_filter('manage_posts_columns', 'custom_columns');

固定ページの場合

フックするフィルターを「manage_pages_columns」にする。

function custom_columns ($columns) {
	unset($columns['cb']); // チェックボックス
	// 省略（投稿一覧と同じ）
	return $columns;
}
add_filter('manage_pages_columns', 'custom_columns');

カスタム投稿タイプの場合

フックするフィルターを「manage_edit-カスタム投稿名_columns」にする。
以下サンプルでは「photo」という名前のカスタム投稿タイプの場合です。

function custom_columns ($columns) {
	unset($columns['cb']); // チェックボックス
	// 省略（投稿一覧と同じ）
	return $columns;
}
add_filter('manage_edit-photo_columns', 'custom_columns');

固定ページに項目を追加

「スラッグ」の項目を追加するサンプル

function add_page_columns_name($columns) {
	$columns['slug'] = &quot;スラッグ&quot;;
	return $columns;
}
function add_page_column($column, $post_id) {
	if($column == 'slug') {
		echo get_post($post_id)-&gt;post_name;
	}
}
add_filter('manage_pages_columns', 'add_page_columns_name');
add_action('manage_pages_custom_column', 'add_page_column', 10, 2);

サムネイル画像やカスタムタクソノミーの項目を追加

「photo」というカスタム投稿タイプに、サムネイル画像と「photographer（撮影者）」というカスタムタクソノミーの項目を追加するサンプル

function manage_photo_columns ($columns) {
	$columns['photographer'] = '撮影者';
	$columns['thumbnail'] = 'サムネイル';
	return $columns;
}
function add_photo_column ($column, $post_id) {
	if ($column == 'photographer') {
		echo get_the_term_list($post_id, 'photographer', '', ', ', '');
	}
	if ($column == 'thumbnail') {
		echo the_post_thumbnail(array(80, 80));
	}
}
add_filter('manage_edit-photo_columns', 'manage_photo_columns');
add_action('manage_posts_custom_column', 'add_photo_column', 10, 2);

いい感じです↓

バージョンアップ通知をOFFにする

リリース後にバージョンアップを実行されると不都合が生じるリスクがあるのなら、バージョンアップ通知を出さないようにしておきましょう。

WordPress本体のバージョンアップ通知をOFF

> functions.php

add_filter('pre_site_transient_update_core', '__return_zero');
// remove_action('wp_version_check', 'wp_version_check');
// remove_action('admin_init', '_maybe_update_core');

コメントアウトしている部分は、バージョンアップ情報をチェックする関数です。
少しでも高速に動かしたいなら、こういう無駄な部分もOFFにしておくといいと思います。

プラグインのバージョンアップ通知をOFF

> functions.php

add_filter('site_option__site_transient_update_plugins', '__return_zero');

各種アイコンを変更する

/wp-admin/images/ フォルダ内に、管理画面で使っているアイコン画像が格納されています。

> /wp-admin/images/menu.png

この画像ファイルは、コアファイルなので触りません。
テーマフォルダ内にオリジナルのアイコン画像を用意して、CSSを上書きしましょう。

サンプルとして以下2つのアイコンを変更してみます。

まずは該当の要素を解析します。CSSを上書きしてカスタマイズする時の基本です。
次に、適当なアイコンを作成してテーマフォルダ内の images フォルダに格納します。
そして、オリジナルのCSSファイルを読み込む の手順に従ってCSSを上書きします。

> テーマフォルダ/css/admin.css

#icon-index {
	background: url(../images/icon_index.png) no-repeat;
}
.menu-icon-post div.wp-menu-image {
	background: url(../images/icon_menu_post.png) no-repeat !important;
}

変更されました↓

ログイン画面をカスタマイズする

コアファイルには触らずに、オリジナルのCSSファイルを読み込んでCSSを上書きする、という方針は同じです。
以前、別記事にしていたのでそちらも参照してみてください。

→ WordPress ログイン画面をカスタマイズする

ファイルアップロードサイズの上限値の変更

初期状態では、アップロードするファイルのサイズ上限は 5MB になっています。
画像などであれば問題ありませんが、動画などをアップロードしようと思うなら、明らかに足りません。

ルートディレクトリの .htaccess に以下を追記します。
サイズ上限を 10M にしてみます。

> .htaccess

php_value upload_max_filesize 10M
php_value post_max_size 10M
php_value max_execution_time 300
php_value max_input_time 300

これでもうまくいかない場合は、利用しているサーバの設定を行う必要があります。
また、サイズ上限をあまり大きくしすぎると、サーバに負荷がかかる可能性も出てくるのでご注意を。

サイドバーを定義する

便利なウィジェットを登録できるサイドバー領域を定義してみます。

> functions.php

function my_widget() {
	register_sidebar(array('name' => 'Left Sidebar'));
	register_sidebar(array('name' => 'Right Sidebar'));
}
add_action('widgets_init', 'my_widget');

> テンプレート

<?php if (!dynamic_sidebar('Left Sidebar')) : ?>;
<?php register_sidebar(); ?>;
<?php endif; ?>;
WordPress 管理画面をカスタマイズする！hijiriworld Web

Comment