Posted on: 2011/11/28

WordPress 管理画面のカスタマイズ まとめ

WordPress管理画面のカスタマイズ詰め合わせ

※随時更新していきます

ダッシュボード

不要なウィジェットを削除

「表示オプション」タブからユーザライクにウィジェットを非表示にすることはできますが、不要なウィジェットはディフォルトで非表示にしておいた方がいいでしょう。

> functions.php

1
2
3
4
5
6
7
8
9
10
11
12
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

1
2
3
4
5
6
7
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

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);

マークアップを解析してそれぞれのボタンを非表示にする。

1
<input type="button" id="qt_content_strong" accesskey="b" class="ed_button" title="" value="b">

HTMLエディタにカスタムボタンを追加

開始タグと終了タグのセットボタンも追加できるし、終了タグなしのスタンプとしても追加できる。

1
2
3
4
5
6
7
8
9
10
11
12
13
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

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

サイドメニュー

メニューの名称変更

> functions.php

1
2
3
4
5
6
7
8
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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’ となっているので、以下のようなコードになります。

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

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

サブメニュー

サブメニューを非表示にする場合

1
remove_submenu_page('メインメニューのスラッグ', 'サブメニューのスラッグ');

カスタムメニューを追加

メインメニュー

管理画面にカスタムメニューを設置するには、admin_menuアクションにフックして、add_menu_page関数を使います。

> テーマフォルダ/functions.php

1
2
3
4
5
6
7
8
9
10
// 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 になります。

サブメニュー

外観メニューに「配色」というサブメニューを追加してみます。

1
2
3
4
5
6
7
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

1
add_filter('show_admin_bar', '__return_false');

不要な項目を削除

> functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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を指定する。

1
<li id="wp-admin-bar-{slug}">...</li>

投稿一覧画面

不要なカラムを非表示

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

1
2
3
4
5
6
7
8
9
10
11
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 にする。

1
2
3
4
function custom_columns ($columns) {
    ...
}
add_filter('manage_pages_columns', 'custom_columns');

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

フックするフィルターを manage_edit-カスタム投稿名_columns にする。

1
2
3
4
function custom_columns ($columns) {
    ...
}
add_filter('manage_edit-photo_columns', 'custom_columns');

カスタムカラムを追加

「feeling」というカスタムフィールドのカラムを追加。

1
2
3
4
5
6
7
8
9
10
11
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 にする。

1
2
3
4
5
6
7
8
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 にする。
アクションは投稿と同じ。

1
2
3
4
5
6
7
8
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」にはソート機能も付ける。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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

1
2
3
4
5
6
7
8
9
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

1
2
3
4
add_filter("login_redirect", "edit_login_redirect", 10, 3);
function edit_login_redirect ($redirect_to, $request){
    return home_url(); // リダイレクト先のURLを指定
}

ログアウト

サイトトップに戻る例

> functions.php

1
2
3
4
5
add_action('wp_logout','edit_logout_redirect');
function edit_logout_redirect(){
    wp_safe_redirect(home_url());
    exit();
}

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

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

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

> functions.php

1
2
3
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

1
add_filter('site_option__site_transient_update_plugins', '__return_zero');

管理画面用のカスタムCSSを読み込む

フックする関数が用意されていないカスタマイズや、デザインをフルカスタマイズしたい場合は、CSSを上書きしてスタイルを変更します。

ただし、管理画面にディフォルトで読み込まれているCSSファイルは、コアファイルなので触ってはいけません。
テーマフォルダ内にカスタムCSSファイルを用意して読み込みます。
フックした関数は、特に指定がない限り一番最後にフックされるので、ディフォルトのCSSファイルよりも後に読み込まれます。

> functions.php

1
2
3
4
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

1
2
3
4
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つのアイコンを変更してみます。

wp-admin-icon

・要素のマークアップ構造を解析
・カスタムアイコン画像を作成してテーマフォルダ内の images フォルダに格納
・管理画面用のカスタムCSSファイルにCSSを記述してスタイルを上書き

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

1
2
3
4
5
6
#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

1
2
3
4
5
function my_widget() {
    register_sidebar(array('name' => 'Left Sidebar'));
    register_sidebar(array('name' => 'Right Sidebar'));
}
add_action('widgets_init', 'my_widget');

> テンプレート

1
2
3
<?php if (!dynamic_sidebar('Left Sidebar')) : ?>
<?php register_sidebar(); ?>
<?php endif; ?>
LINE はてブ Pocket +1

Comments

Wordpressのログイン・管理画面のカスタマイズ | うんぬんかんぬん(unnunkannun) へ返信するコメントをキャンセル