WordPress管理画面のカスタマイズ詰め合わせ
※随時更新していきます
- ダッシュボード
- 不要なウィジェットを削除
- カスタムウィジェットを追加
- ウィジェットの配置を変更
- 投稿画面
- 不要な項目を削除
- エディタ
- ビジュアルエディタを無効にする
- HTMLエディタの不要なボタンを非表示
- HTMLエディタにカスタムボタンを追加
- フッター
- サイドメニュー
- メニューの名称変更
- メニューの並び替え
- メニューを非表示
- カスタムメニューを追加
- 管理バー
- サイト側の管理バーを非表示
- 不要な項目を削除
- 投稿一覧画面
- 不要なカラムを削除（投稿、ページ、カスタム投稿タイプ）
- カスタムカラムを追加（投稿、ページ、カスタム投稿タイプ）
- ソート機能も実装した応用技
- ログイン画面
- スタイルを変更
- ログイン/ログアウト後のリダイレクト先を変更
- バージョンアップ通知をOFF
- WordPress本体のバージョンアップ通知
- プラグインのバージョンアップ通知
- 管理画面用のカスタムCSSを読み込む
- 管理画面用のカスタムJavaScriptを読み込む
- 各種アイコンを変更
- ウィジェットサイドバー
ダッシュボード
不要なウィジェットを削除
「表示オプション」タブからユーザライクにウィジェットを非表示にすることはできますが、不要なウィジェットはディフォルトで非表示にしておいた方がいいでしょう。
> 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/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');
エディター
ビジュアルエディタを無効
知らない人が意外に多かったので。
「管理画面 > ユーザ > 各ユーザのプロフィール」ページで、ビジュアルエディタを無効するにするチェックを入れる。
HTMLエディタの不要なボタンを非表示
> functions.php
function custom_html_editor() {
echo '<style TYPE="text/css">
#qt_content_strong,
#qt_content_em,
#qt_content_link,
#qt_content_block,
#qt_content_del,
#qt_content_ins,
#qt_content_img,
#qt_content_ul,
#qt_content_ol,
#qt_content_li,
#qt_content_code,
#qt_content_more,
#qt_content_spell,
#qt_content_close,
#qt_content_fullscreen
{display:none;}
</style>';
}
add_action('admin_print_styles', 'custom_html_editor', 21);
マークアップを解析してそれぞれのボタンを非表示にする。
<input type="button" id="qt_content_strong" accesskey="b" class="ed_button" title="" value="b">
HTMLエディタにカスタムボタンを追加
開始タグと終了タグのセットボタンも追加できるし、終了タグなしのスタンプとしても追加できる。
function add_custom_quicktag() {
?>
<script type="text/javascript">
if (window.QTags) {
//QTags.addButton('ID', 'ラベル', '開始タグ', '終了タグ');
QTags.addButton('ed_small', 'small', '<small>', '</small>');
// 終了タグなしの定型文
QTags.addButton('ed_sign', '署名', 'hijiri'+'\n'+'hijiriworld.com/web/'+'\n'+'hijiriworld@gmail'+'\n'+'090-xxxx-xxxxx'); // 終了タグなしの定型文
}
</script>
<?php
}
add_action('admin_print_footer_scripts', 'add_custom_quicktag');
「署名」ボタンを押すとこうなる。
フッター
フッターを変更する。
> functions.php
function custom_admin_footer() {
echo '<a href="mainto:[email protected]">お問い合わせ</a>';
}
add_filter('admin_footer_text', 'custom_admin_footer');
サイドメニュー
メニューの名称変更
> functions.php
function edit_admin_menus() {
global $menu;
global $submenu;
$menu[5][0] = 'ブログ記事';
$submenu['edit.php'][5][0] = 'すべてのプログ記事';
}
add_action('admin_menu', 'edit_admin_menus');
それぞれのキーとスラッグ名は以下のサイトにまとめられています。
Customizing Your WordPress Admin
メニューの並び替え
> functions.php
function custom_menu_order($menu_ord) {
if (!$menu_ord) return true;
return array(
'index.php', // ダッシュボード
'separator1', // 仕切り
'edit.php', // 投稿
'upload.php', // メディア
'link-manager.php', // リンク
'edit.php?post_type=page', // 固定ページ
'edit-comments.php', // コメント
'separator2', // 仕切り
'themes.php', // 外観
'plugins.php', // プラグイン
'users.php', // ユーザー
'tools.php', // ツール
'options-general.php', // 設定
'separator-last', // 仕切り
);
}
add_filter('custom_menu_order', 'custom_menu_order');
add_filter('menu_order', 'custom_menu_order');
配列の並び順を変更すれば反映されます。
クライアント納品型の場合、「概観」「プラグイン」「ユーザ」「ツール」「設定」などの項目は不要かもしれません。そのまま残しておくと、誤って設定変更をされてしまうリスクもあります。
メニューを非表示
メインメニュー
> 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');
※非表示にしているだけでアクセス制限をかけているわけではない点に注意してください。アクセス制限をする場合はユーザーもしくは権限ごとに設定する必要があります。
サブメニュー
サブメニューを非表示にする場合
remove_submenu_page('メインメニューのスラッグ', 'サブメニューのスラッグ');
カスタムメニューを追加
メインメニュー
管理画面にカスタムメニューを設置するには、admin_menuアクションにフックして、add_menu_page関数を使います。
> テーマフォルダ/functions.php
// admin_menu にフック
add_action('admin_menu', 'register_custom_menu_page');
function register_custom_menu_page() {
// add_menu_page でカスタムメニューを追加
add_menu_page('サイト設定', 'サイト設定', 0, 'site_settings', 'create_custom_menu_page', '', 3);
}
function create_custom_menu_page() {
// カスタムメニューページを読み込む
require TEMPLATEPATH.'/admin/site_settings.php';
}
add_menu_page関数の書式はこちら: Function Reference/add menu page
カスタムメニューの位置はダッシュボードの下にしたかったので”3″を指定しています。
「サイト設定」というメインメニューが追加されました。
ページ自体は、上記の例では、テーマフォルダ/admin/site_settings.php になります。
サブメニュー
外観メニューに「配色」というサブメニューを追加してみます。
add_action('admin_menu', 'option_menu_create');
function option_menu_create() {
add_theme_page('配色', '配色', 'edit_themes', basename(__FILE__), 'option_page_create');
}
function option_page_create() {
require TEMPLATEPATH.'/admin-option.php';
}
管理バー
サイト側の管理バーを非表示
> functions.php
add_filter('show_admin_bar', '__return_false');
不要な項目を削除
> functions.php
function remove_admin_bar_menu( $wp_admin_bar ) {
$wp_admin_bar->remove_menu('wp-logo'); // WordPressロゴ
$wp_admin_bar->remove_menu('my-sites'); // 参加サイト for マルチサイト
$wp_admin_bar->remove_menu('site-name'); // サイト名
$wp_admin_bar->remove_menu('view-site'); // サイト名 -> サイトを表示
$wp_admin_bar->remove_menu('updates'); // 更新
$wp_admin_bar->remove_menu('comments'); // コメント
$wp_admin_bar->remove_menu('new-content'); // 新規
$wp_admin_bar->remove_menu('new-post'); // 新規 -> 投稿
$wp_admin_bar->remove_menu('new-media'); // 新規 -> メディア
$wp_admin_bar->remove_menu('new-link'); // 新規 -> リンク
$wp_admin_bar->remove_menu('new-page'); // 新規 -> 固定ページ
$wp_admin_bar->remove_menu('new-user'); // 新規 -> ユーザー
$wp_admin_bar->remove_menu('my-account'); // マイアカウント
$wp_admin_bar->remove_menu('user-info'); // マイアカウント -> プロフィール
$wp_admin_bar->remove_menu('edit-profile'); // マイアカウント -> プロフィール編集
$wp_admin_bar->remove_menu('logout'); // マイアカウント -> ログアウト
$wp_admin_bar->remove_menu('search'); // 検索
}
add_action( 'admin_bar_menu', 'remove_admin_bar_menu', 201 );
プラグインなどで追加されたメニューを削除する場合は、管理バーメニューの以下slugを指定する。
<li id="wp-admin-bar-{slug}">...</li>
投稿一覧画面
不要なカラムを非表示
管理画面上部の「表示オプション」で表示する項目を選択することができますが、不要な項目は最初から非表示にしておきたい場合。
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) {
...
}
add_filter('manage_pages_columns', 'custom_columns');
カスタム投稿タイプの場合
フックするフィルターを manage_edit-カスタム投稿名_columns にする。
function custom_columns ($columns) {
...
}
add_filter('manage_edit-photo_columns', 'custom_columns');
カスタムカラムを追加
「feeling」というカスタムフィールドのカラムを追加。
function add_custom_posts_columns_name($columns) {
$columns['feeling'] = '今日の気分';
return $columns;
}
function add_custom_posts_columns($column, $post_id) {
if($column == 'feeling') {
echo get_post_meta($post_id, 'feeling', true);
}
}
add_filter('manage_posts_columns', 'add_custom_posts_columns_name');
add_action('manage_posts_custom_column', 'add_custom_posts_columns', 10, 2);
固定ページの場合
フックするフィルターを manage_pages_columns、アクションを manage_pages_custom_column にする。
function add_custom_page_columns_name($columns) {
...
}
function add_custom_page_column($column, $post_id) {
...
}
add_filter('manage_pages_columns', 'add_custom_page_columns_name');
add_action('manage_pages_custom_column', 'add_custom_page_column', 10, 2);
カスタム投稿タイプの場合
フックするフィルターを manage_edit-カスタム投稿名_columns にする。
アクションは投稿と同じ。
function add_custom_columns_name($columns) {
...
}
function add_custom_column($column, $post_id) {
...
}
add_filter('manage_edit-photo_columns', 'manage_photo_columns');
add_action('manage_posts_custom_column', 'add_photo_column', 10, 2);
ソート機能も実装した応用技
「photo」というカスタム投稿タイプに、サムネイル画像と「photographer」というカスタムタクソノミー、「location」というカスタムフィールドのカラムを追加。
さらに、「location」にはソート機能も付ける。
function add_custom_photos_columns_name($columns) {
$columns['location'] = '撮影場所';
$columns['photographer'] = '撮影者';
$columns['thumbnail'] = 'サムネイル';
return $columns;
}
function add_custom_photos_columns($column, $post_id) {
if ($column == 'location') echo get_post_meta($post_id, 'location', true);
if ($column == 'photographer') echo get_the_term_list($post_id, 'photographer', '', ', ', '');
if ($column == 'thumbnail') echo the_post_thumbnail(array(100, 100));
}
add_filter('manage_edit-photo_columns', 'add_custom_photos_columns_name');
add_action('manage_posts_custom_column', 'add_custom_photos_columns', 10, 2);
function custom_orderby_columns($vars) {
if (isset($vars['orderby']) && 'location' == $vars['orderby']) {
$vars = array_merge($vars, array(
'meta_key' => 'location',
'orderby' => 'meta_value'
));
}
return $vars;
}
function custom_sortable_columns($sortable_column) {
$sortable_column['location'] = 'location';
return $sortable_column;
}
add_filter('request', 'custom_orderby_columns');
add_filter('manage_edit-photo_sortable_columns', 'custom_sortable_columns');
いい感じになりました↓
ログイン画面
スタイルの変更
管理画面と同様、コアファイルには触らずに、カスタムCSSファイルを読み込んでスタイルを上書きする方針は同じです。
フックする関数が違うので注意。
> functions.php
function login_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/admin/css/login.css">';
}
add_action('login_head', 'login_css');
function login_js() {
wp_enqueue_script('login', get_bloginfo('template_url').'/admin/js/login.js', null, true);
}
add_action('login_head', 'login_js');
以前、別記事にしていたのでそちらも参照: WordPress ログイン画面をカスタマイズする
ログイン/ログアウト後のリダイレクト先を変更
ログイン
> functions.php
add_filter("login_redirect", "edit_login_redirect", 10, 3);
function edit_login_redirect ($redirect_to, $request){
return home_url(); // リダイレクト先のURLを指定
}
ログアウト
サイトトップに戻る例
> functions.php
add_action('wp_logout','edit_logout_redirect');
function edit_logout_redirect(){
wp_safe_redirect(home_url());
exit();
}
バージョンアップ通知をOFF
リリース後にバージョンアップを実行されると不都合が生じるリスクがあるのなら、バージョンアップ通知を出さないようにしておきましょう。
WordPress本体のバージョンアップ通知
> 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にしておくといいと思います。
プラグインのバージョンアップ通知
> functions.php
add_filter('site_option__site_transient_update_plugins', '__return_zero');
管理画面用のカスタムCSSを読み込む
フックする関数が用意されていないカスタマイズや、デザインをフルカスタマイズしたい場合は、CSSを上書きしてスタイルを変更します。
ただし、管理画面にディフォルトで読み込まれているCSSファイルは、コアファイルなので触ってはいけません。
テーマフォルダ内にカスタムCSSファイルを用意して読み込みます。
フックした関数は、特に指定がない限り一番最後にフックされるので、ディフォルトのCSSファイルよりも後に読み込まれます。
> functions.php
function admin_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/admin/css/admin.css">';
}
add_action('admin_head', 'admin_css');
管理画面用のカスタムJavaScriptを読み込む
管理画面をカスタムJavaScriptで制御したい場合。
CSSと同様、管理画面にディフォルトで読み込まれている JavaScriptファイルは、コアファイルなので触ってはいけません。
テーマフォルダ内に管理画面用のカスタムJavaScriptファイルを作成して、それを読み込みます。
> functions.php
function admin_js() {
wp_enqueue_script('admin', get_bloginfo('template_url').'/admin/js/admin.js', null, true);
}
add_action('admin_head', 'admin_js');
we_enqueue_script関数の第5引数は必ず指定しましょう。
きちんと指定しないとコンフリクトを起こす可能性があります。参考記事: wp_enqueue_scriptの仕様変更によってコンフリクトが発生している模様
各種アイコンを変更する
/wp-admin/images/ フォルダ内に、管理画面で使っているアイコン画像が格納されています。
> /wp-admin/images/menu.png
この画像ファイルは、コアファイルなので触ってはいけません。
テーマフォルダ内にオリジナルのアイコン画像を用意してCSSで上書きしましょう。
以下2つのアイコンを変更してみます。
・要素のマークアップ構造を解析
・カスタムアイコン画像を作成してテーマフォルダ内の images フォルダに格納
・管理画面用のカスタムCSSファイルにCSSを記述してスタイルを上書き
> テーマフォルダ/admin/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;
}
ウィジェットサイドバー
ウィジェットを登録できるサイドバー領域を定義。
> 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; ?>
Comments
とても参考になりました！ありがとうございます
[…] http://hijiriworld.com/web/wordpress-admin-customize/ […]
[…] http://hijiriworld.com/web/wordpress-admin-customize/ […]
[…] WordPress 管理画面のカスタマイズ まとめ | hijiriworld Web […]
[…] http://hijiriworld.com/web/wordpress-admin-customize/ http://busilab.com/php/wordpress/plugin/wordpress-tips-sidebar-delete.html […]
[…] WordPress管理画面を「簡単」にカスタマイズする方法４つ | コムテブログ WordPress 管理画面のカスタマイズ まとめ | hijiriworld Web WordPressのカスタム投稿タイプの使い方が初心者でも超わかる記事10選 | […]
[…] http://hijiriworld.com/web/wordpress-admin-customize/ […]
[…] メニューとか 記事書く為に迷いそうな表示とかは消しちゃいます。 これも先ほどのブログのサイトの記事 WordPress 管理画面のカスタマイズ まとめ 分り易い記事ありがとうございました。 […]
[…] きました。 WordPress 管理画面のカスタマイズ まとめ http://hijiriworld.com/web/wordpress-admin-customize/ […]
[…] WordPress 管理画面をカスタマイズする | hijiriworld Web […]
管理画面のカスタマイズ、とても参考になりました。
ありがとうございます。
投稿一覧のカスタマイズで、サムネイルの追加などされているところは、
参考にさせていただき実装出来たのですが、
こんな感じで、クイック編集にある「公開する」というプルダウンを
項目の追加の様に、表に出すのは可能なのでしょうか？
[…] WordPress 管理画面をカスタマイズする | hijiriworld Web Creatorsはてなブックマーク – WordPress 管理画面をカスタマイズする | hijiriworld Web Creators […]
[…] http://weble.org/2011/03/23/wordpress-wp_insert_post 管理画面をカスタマイズ http://hijiriworld.com/web/wordpress-admin-customize/ 構築手順 http://kachibito.net/wordpress/build-process-lists.html プラグイン作成 […]
[…] WordPress 管理画面をカスタマイズする | hijiriworld Web. Posted on 2012年4月28日 by web3ple. This entry was posted in function.php, wordpress and tagged wordpress. Bookmark the permalink. « dbox – Instagram Filters […]
[…] 参考：http://hijiriworld.com/web/wordpress-admin-customize/#00 « 前の記事へ｜ 次の記事へ » […]
かじわらと申します。
文中に構文をきれいに書くにはどうしたらいいのかがわからず
困っていましたが、
貴ブログのソースを拝見してわかりました。
参考になりました。ありがとうございます。
> かじわら さん
コメントありがとうございます。
ソースコードの書き方ということでしょうか？
とにかく、お役に立てたようでよかったです ^ ^
[…] WordPress 管理画面をカスタマイズする | hijiriworld Web Creators […]
ものすごく参考になりました。ありがとうございます！
> kuso_peko さん
コメントありがとうございます。
お役に立てたようでなによりです＾＾
[…] WordPress 管理画面をカスタマイズする | hijiriworld Web Creators […]