ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

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&amp;post_type=book' ); // カスタム投稿タイプ / カテゴリー
remove_submenu_page( 'edit.php?post_type=book', 'edit-tags.php?taxonomy=book_tag&amp;post_type=book' ); // カスタム投稿タイプ / タグ
}
add_action( 'admin_menu', 'remove_menus' );

「&amp;」は文字化けではないので、そのまま記入します。

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
function remove_menus () {
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' );

ダッシュボードやメニューがスッキリとしたと思います。

ダッシュボードやサイドメニューをカスタマイズするプラグインも多く存在しますが、プラグインの操作を覚えるより、フックを使ったカスタマイズの方が簡単だと思います。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ