WordPress管理画面のメニューをカスタマイズするfunctions.php記述法まとめ

シンプルに、使いやすく。
これが僕のシステム開発のモットーです。

WordPressの管理画面も、基本はコレ。
不要な項目は非表示にして、必要な項目だけ見せる事で
運用者の迷いも無くなるし、ヒューマンエラーも防げます。

で、WordPressの管理画面に関しては
functions.phpへコードを記述する事で
実は結構色々カスタマイズ出来ちゃうんですよね。

見た目部分なので、CSSの知識も多少必要ですが・・
逆にCSS分かっている人は、色々幅が広がると思います。

というわけで今回は、
WordPress管理画面の左メニューを
色々カスタマイズする方法まとめ。

簡単設定可能になるプラグインもあるみたいですが、
今回は直接functions.phpにコードを記述する方法で。

技術的な事やプログラミングはよく分からん・・という方も
「WordPressの管理画面ってココまでいじれるんだ！」という視点で
読んで頂ければと思います。

コードの動作確認は【 WordPress 4.1.1 】で行なっています。

既存の項目を整理する

最初は整理の章。

「投稿」「メディア」「固定ページ」などなど、
最初から存在するメニュー項目を何とかする方法をいくつか。

ポイントは、各メニュー項目にはそれぞれIDが設定されている点。
例えば「ダッシュボード：2」「投稿：10」などなど。

事前に以下の対応表を知っておくと、やりやすくなると思います。

メニュー番号対応表

ID	表示項目名	削除＆順番変更用
2	ダッシュボード	index.php
4	区切り線１	separator1
5	投稿	edit.php
10	メディア	upload.php
15	リンク	link-manager.php
20	固定ページ	edit.php?post_type=page
25	コメント	edit-comments.php
59	区切り線２	separator2
60	テーマ	themes.php
65	プラグイン	plugins.php
70	プロフィール	users.php
75	ツール	tools.php
80	設定	options-general.php
59	区切り線３	separator-last

メニュー項目の名称を変更する

「投稿」とか「固定ページ」って名称、
WordPressに慣れてない方からすれば「？？？」なんですよね（笑）

というわけで、各メニュー項目の表示名称を変える方法。
admin_menuというアクションを利用します。

下記のように、
$menu[●対応表のID●][0] = '●表示名●' という形式で
追加していけばOKです。

/*
「投稿」を「ブログ記事」、
「固定ページ」を「ページ」に変更
*/
function edit_admin_menus() {
	global $menu;
	$menu[5][0]	= 'ブログ記事';		// 投稿
	$menu[20][0]	= 'ページ';		// 固定ページ
}
add_action( 'admin_menu', 'edit_admin_menus' );

（表示結果）

メニュー項目を削除する（非表示）

項目を削除（非表示）にする場合は、
remove_menu_page 関数を使います。

先ほどのメニュー番号対応表で
「削除用」列にあるものを設定すればいけます。

/*
「メディア」を削除（非表示）
*/
function edit_admin_menus() {
	global $menu;
	remove_menu_page ( 'upload.php' );
}
add_action( 'admin_menu', 'edit_admin_menus' );

（表示結果）

但しメニュー上に表示されなくなるだけなので、
完全に使えないようにするにはユーザー権限の方を設定するべし。

また、上記と併用する場合は
同じ「edit_admin_menus」内に入れて下さい。

メニュー項目の順序を入れ替える

これも削除（非表示）と同様のパラメータを使います。
return array( 以降の順番を
表示させたい順番に並び替えるだけで、いけます。

/*
　「投稿」「固定ページ」を
　上の方に持ってきて見やすく！
*/
function custom_menu_order($menu_old) {
    if (!$menu_old) return true;

    return array(
        'index.php', // ダッシュボード
        'edit.php', // 投稿
        'edit.php?post_type=page', // 固定ページ
        'edit-comments.php', // コメント
        'separator1', // 区切り線１
        'upload.php', // メディア
        'link-manager.php', // リンク
        'users.php', // ユーザー
        'separator2', // 区切り線２
        'themes.php', // テーマ
        'plugins.php', // プラグイン
        'tools.php', // ツール
        'options-general.php', // 設定
        'separator-last', // 区切り線３
    );
}
add_filter('custom_menu_order', 'custom_menu_order');
add_filter('menu_order', 'custom_menu_order');

（表示結果）

新たな管理ページメニューを追加する

WordPressの管理画面って、実は自分でも追加できるんですよね。

よくプラグインをインストールすると
プラグイン専用のメニュー項目が追加される時ってありませんか？
あれも同じ仕組みを使っています。

プラグインの場合は
設定画面になるので入力エリアが多くなりますが、
要はHTMLを表示してるだけなので、
管理画面内の静的ページとしても使えます。

僕が良く追加するのは、「操作マニュアル」項目。
僕みたいにクライアントさん向けのWebサイトを作る時や、
独自WordPressテーマを配布したい時なんかは、
何かと便利ですー。

管理画面メニューには、

・メインメニュー
（「ダッシュボード」「投稿」など）

・その中にあるサブメニュー
（「投稿」で言えば「投稿一覧」「新規追加」など）

の２種類があるので、それぞれ解説。

メインメニューの追加はadd_menu_page、
サブメニューの追加はadd_menu_page、をそれぞれ利用。

/*
　管理メニューに「操作マニュアル」ページを追加
*/
function page_manual() {
?>
<div class="wrapper">
    <h1>操作マニュアル</h1>
    <p>本WordPress管理画面の簡単な操作説明です。</p>
    <h2>記事の作成方法</h2>
    <p>メニューの「投稿」からどうぞ。</p>
    <h2>ページの作成方法</h2>
    <p>メニューの「固定ページ」からどうぞ。</p>
</div>
<?php
}
function page_manual_sub1() {
?>
<div class="wrapper">
 <h1>Ver.1.1 主な修正点（2015.XX.XX）</h1>
 <p>バージョンアップで追加/変更/削除があった部分のみ、ここに記述します。</p>
 <h2>変更点その１</h2>
 <h2>変更点その２</h2>
 <h2>変更点その３</h2>
</div>
<?php
}
function page_manuals () {
 add_menu_page('操作マニュアル', '操作マニュアル', 'manage_options', 'manual', 'page_manual'); add_submenu_page('manual', 'Ver1.1', 'Ver1.1', 'manage_options', 'page_manual_sub1', 'page_manual_sub1');
}
add_action ( 'admin_menu', 'page_manuals' );

（表示結果）

「操作マニュアル」をクリック

「Ver.1.1」をクリック

page_manual 、 page_manual_sub1 が、
それぞれメインメニューとサブメニューを
クリックした際に表示するページ内容です。
ご覧の通り、出力したいHTMLを書けばOK。

ココではメインメニューが基本的な操作マニュアル、
サブメニューはバージョンアップ情報を随時追加していく形を
イメージしてみました。

iframeなども勿論使えますので、
操作解説をYoutube動画にして埋め込むのも良いですね。

見た目やアニメーション

WordPressの管理画面だって、HTMLやCSSで出来ています。

じゃあ、管理画面を描画する処理の前に
独自CSSを差し込めれば、デザインだって、いじれるじゃない・・！

具体的には admin_head フックが使えます。

function my_head() {
?>
<style type="text/css">
（ココにCSSを記述）
</style>
<?php
}
add_action ( 'admin_head', 'my_head', 11 );

・・というわけで、
いくつか見た目改善のアイデアを。

背景色を付けて目立たせる

強調したいメニューだけ、背景色を変えてみます。

HTMLを確認すると、
各メニュー項目にはid属性が付いているので
コレをターゲットにCSSを記述すれば良さそうです。

/*
	「投稿」メニューの背景だけ赤くする
*/
function my_head() {
?>
<style type="text/css">
#menu-posts {
  background: #e74c3c;
}
#menu-posts div.wp-menu-image:before,
#menu-posts div.wp-menu-name {
  color: #fff;
}
</style>
<?php
}
add_action ( 'admin_head', 'my_head', 11 );

（表示結果）

div.wp-menu-image:before はメニュー項目左のアイコン部分、
div.wp-menu-name がメニュー文字。

画像挿入して目立たせる

メニューの左にあるアイコンを消して、
独自の画像を埋め込む事も可能です。

・・あまり使う機会は、無いかもしれませんが（笑）
こういう事も出来ますよーという事で。

function my_head() {
?>
<style type="text/css">
#menu-posts .wp-menu-image:before {
  content: none;
}
#menu-posts .wp-menu-name {
  padding: 10px 0 10px 46px!important;
}

#menu-posts-yamada .wp-menu-image {
	background: url("●●ここに画像URL●●") center center no-repeat!important;
	background-size: 100% 100%!important;
}
</style>
<?php
}
add_action('admin_head', 'my_head', 11);

（表示結果）

僕は最近だと、カスタム投稿のメニューに使いました。

４人の講師がそれぞれ記事を投稿するサイトで
講師ごとにカスタム投稿を作ったので、
メニュー項目にそれぞれ顔写真を表示して分かりやすくしてみたり。

まとめ

以上、WordPress管理画面のメニューを
functions.phpでカスタマイズする方法をいくつかご紹介しました。

無料ブログ等と違って、
こうしたUI（ユーザーインタフェース）部分も
色々カスタマイズ出来るのがWordPressの魅力でもありますね。

自分の運営するWordPressや
クライアント・ワークで是非活用してみて下さい。

ではでは。