WordPress：管理画面を使いやすくカスタマイズする方法
新宿のウェブ制作会社ITTIのデザイナーNNです。コロナウィルスでEC案件が急に増えましたね。EC売上げアップに貢献できるように頑張っています。
WordPressのフックを利用して、管理画面のダッシュボードやサイドメニューをカスタマイズする方法をご紹介します。プラグインを使うより簡単だと思いますよ。
ダッシュボードのカスタマイズ
ダッシュボードのウィジェットを非表示にします。
functions.phpに下記を追記します
functions
function 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_activity']); // アクティビティ 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']['normal']['core']['dashboard_site_health']); // サイトヘルス 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', 'remove_dashboard_widgets');
remove_action( 'welcome_panel', 'wp_welcome_panel' ); // ようこそ！オリジナルのウィジェットを追加
ダッシュボードにオリジナルのウィジェットを追加することができます。
functions
function custom_dashboard_widgets() { global $wp_meta_boxes; wp_add_dashboard_widget('custom_widget', 'ウィジェット見出し, 'dashboard_text'); }function dashboard_text() { echo '<p>ここにテキスト</p>';}add_action('wp_dashboard_setup', 'custom_dashboard_widgets');下記のように追加されます。HTMLタグを使うこともできます。
サイドメニュー非表示
サイドメニューから不要なメニューを非表示にします。
remove_menu_pageで、メニューを削除することができます。
functions
function remove_menus() {remove_menu_page( 'index.php' ); // ダッシュボードremove_menu_page( 'edit.php' ); // 投稿remove_menu_page( 'upload.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_menus' );表示したいメニューは、コメントアウトすると良いでしょう。
「//remove_menu_page('index.php');」など。
unset()を使った非表示
unset()とglobal $menuを使って非表示にすることもできます。
functions
function remove_menus() {global $menu;unset( $menu[2] );// ダッシュボードunset( $menu[5] );// 投稿unset( $menu[10] );// メディアunset( $menu[20] );// 固定unset( $menu[25] );// コメントunset( $menu[60] );// 外観unset( $menu[65] );// プラグインunset( $menu[70] );// ユーザーunset( $menu[75] );// ツールunset( $menu[80] );// 設定}add_action( 'admin_menu', 'remove_menus' );サブメニューの非表示方法
カテゴリーやタグ、カスタム分類、カスタム投稿タイプのタームなどのサブメニューを非表示にします。
サンプルでは、投稿の「カテゴリー」「タグ」のサブメニューを非表示にして、カスタム分類、カスタム投稿タイプの「カテゴリー」「タグ」を表示にします。
カスタム分類は「staff」。
カスタム投稿タイプが「book」の場合で、カテゴリーは「book_cat」タグが「book_tag」の場合です。
fuctions
function remove_menus() {remove_submenu_page( 'edit.php', 'edit-tags.php?taxonomy=category' ); // 投稿 / カテゴリーremove_submenu_page( 'edit.php', 'edit-tags.php?taxonomy=post_tag' ); // 投稿 / タグremove_submenu_page( 'edit.php', 'edit-tags.php?taxonomy=staff' ); // 投稿 / カスタム分類remove_submenu_page( 'edit.php?post_type=book', 'edit-tags.php?taxonomy=book_cat&post_type=book' ); // カスタム投稿タイプ / カテゴリーremove_submenu_page( 'edit.php?post_type=book', 'edit-tags.php?taxonomy=book_tag&post_type=book' ); // カスタム投稿タイプ / タグ}add_action( 'admin_menu', 'remove_menus' );「&」は文字化けではないので、そのまま記入します。
unset()を使った方法
unset()とglobal $submenuを使ってサブメニューを非表示にすることもできます。
functions
function remove_menus() {global $submenu;unset($submenu['edit.php'][15]); // カテゴリー
unset($submenu['edit.php'][16]); // タグ}add_action( 'admin_menu', 'remove_menus' );画像のように、投稿メニューからカテゴリーやタグが非表示となります。
メニュー、サブメニューのIDを確認する方法
メニューの情報を表示させて、カスタマイズするIDなどを確認します。
メインメニューの確認方法
functions.phpに下記を記述します。
functions
function remove_menus() {global $menu;var_dump( $menu );}add_action( 'admin_menu', 'remove_menus');するとダッシュボードにメニューの情報が表示されます。
数字はunset関数に指定すると非表示にすることができる数字です。
3つめの情報がファイルになり、remove_menu_page関数で指定すると非表示することができます。
サブメニューの確認方法
functions.phpに下記を記述するとサブメニューの情報が表示されます。
functions
function remove_menus() {global $submenu;var_dump( $submenu );}add_action( 'admin_menu', 'remove_menus');unset()関数に利用する数字や、remove_submenu_page関数に指定するファイル名が表示されます。
プラグインのメニューを非表示
メニューに表示されたプラグインメニューを非表示にすることもできます。
例えば「contact form 7」の場合は、先程のメニュー、サブメニュー情報を見ると下図のように表示されています。
contact form7のメニューを非表示にする場合は下記になります。
functions
function remove_menus() {remove_menu_page( 'wpcf7' ); // Contact Form 7 非表示}add_action( 'admin_menu', 'remove_menus' );サブメニューの「新規追加」を非表示にしたい場合は下記になります。
functions
function remove_menus() {remove_submenu_page( 'wpcf7', 'wpcf7-new' ); // Contact Form 7 サブメニュー非表示}add_action( 'admin_menu', 'remove_menus' );サブメニューの「新規追加」が非表示になっています。
この方法で、他のプラグインのメニューをカスタマイズすることができます。
権限でサイドメニューを変更する
ユーザーや権限グループによって、サイドメニューの表示を変えることが殆どだと思いますので、ユーザーや権限によって分岐させてサイドメニューを変更する方法もご紹介します。
functions
if (current_user_can('ここに権限グループを記述')) {
//ここに非表示にする項目を記述
}
}
add_action('admin_menu', 'remove_menus');
サイドメニューを変更したい権限を記述します。
例えば権限「投稿者」グループの場合は「author」と記述します。
| 管理者 | administrator |
| 編集者 | editor |
| 投稿者 | author |
| 寄稿者 | contributor |
| 購読者 | subscriber |
複数の権限を指定する場合
複数の権限を指定する事もできます。
functions
function remove_menus () { if (current_user_can('author') || current_user_can('editor')) { //ここに非表示にする項目を記述 }}
add_action('admin_menu', 'remove_menus');下記のように「!（以外）」を使って、管理者（administrator）以外を指定することもできます。
functions
function remove_menus () {if (!current_user_can('administrator')) { //ここに非表示にする項目を記述}}
add_action('admin_menu', 'remove_menus');ユーザーIDでサイドメニューを変更する
特定のユーザーのみに適用することができます。
functions
function remove_menus(){global $current_user; wp_get_current_user();if ($current_user->ID == 2 ){//ここに非表示にする項目を記述}}add_action('admin_menu', 'remove_menus');複数のユーザーを指定する場合
複数のユーザーを指定する事もできます。
functions
function remove_menus(){global $current_user; wp_get_current_user();if ($current_user->ID == '2' || $current_user->ID == '3') {//ここに非表示にする項目を記述}}add_action('admin_menu', 'remove_menus');特定のユーザー以外に適用することができます。
この場合ユーザーID1以外に適用されます。
functions
function remove_menus () {global $current_user; wp_get_current_user();
if ($current_user->ID != "1" ) {
//ここに非表示項目を記述
}
}
add_action('admin_menu', 'remove_menus');アドミンバー（Admin Bar）を非表示
アドミンバーで不要なメニューを非表示にします。
functions
function remove_admin_bar_menus( $wp_admin_bar ) {$wp_admin_bar->remove_menu( 'wp-logo' ); // ロゴ
$wp_admin_bar->remove_menu( 'about' ); // ロゴ / WordPressについて
$wp_admin_bar->remove_menu( 'wporg' ); // ロゴ / WordPress.org
$wp_admin_bar->remove_menu( 'documentation' ); // ロゴ / ドキュメンテーション
$wp_admin_bar->remove_menu( 'support-forums' ); // ロゴ / サポート
$wp_admin_bar->remove_menu( 'feedback' ); // ロゴ / フィードバック
$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-page' ); // 新規 / 固定
$wp_admin_bar->remove_menu( 'new-user' ); // 新規 / ユーザー
$wp_admin_bar->remove_menu( 'view' ); // 投稿を表示
$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( 'menu-toggle' ); // メニュー
$wp_admin_bar->remove_menu( 'search' ); // 検索 }add_action( 'admin_bar_menu', 'remove_admin_bar_menus', 999 );アドミンバーにメニューを追加する
アドミンバーにメニューを追加することもできます。
「id」がメニューのIDで、「title」がアドミンバーに表示されます。
「href」でリンクを設定できます。
functions
function custom_menu_adminbar($wp_adminbar) {
// add menu$wp_adminbar->add_node(['id' => 'newpostlist','title' => '投稿一覧','href' => 'https://www.hogehoge.jp/wp-admin/edit.php',]);
// add menu$wp_adminbar->add_node(['id' => 'newpost','title' => '記事を投稿する','href' => 'https://www.hogehoge.jp/wp-admin/post-new.php',]);
}add_action('admin_bar_menu', 'custom_menu_adminbar', 999);スタイルシートでデザインを変更する
CSSを読み込んで、管理画面の見た目をがっつり変更することもできます。
functions
function admin_css() {echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/admin.css">';}add_action( 'admin_head', 'admin_css' );ダッシュボードやメニューがスッキリとしたと思います。
ダッシュボードやサイドメニューをカスタマイズするプラグインも多く存在しますが、プラグインの操作を覚えるより、フックを使ったカスタマイズの方が簡単だと思います。
