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 区切り線1 separator1
5 投稿 edit.php
10 メディア upload.php
15 リンク link-manager.php
20 固定ページ edit.php?post_type=page
25 コメント edit-comments.php
59 区切り線2 separator2
60 テーマ themes.php
65 プラグイン plugins.php
70 プロフィール users.php
75 ツール tools.php
80 設定 options-general.php
59 区切り線3 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' );

(表示結果)
ダッシュボード_‹_【DEMO】WP管理画面のカスタマイズ_—_WordPress

メニュー項目を削除する(非表示)

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

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

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

(表示結果)
ダッシュボード_‹_【DEMO】WP管理画面のカスタマイズ_—_WordPress 2

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

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

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

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

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

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

(表示結果)
ダッシュボード_‹_【DEMO】WP管理画面のカスタマイズ_—_WordPress 3

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

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

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

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

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

管理画面メニューには、

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

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

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

メインメニューの追加は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>変更点その1</h2>
 <h2>変更点その2</h2>
 <h2>変更点その3</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' );

(表示結果)
スクリーンショット 2015-04-12 10.02.37

「操作マニュアル」をクリック
スクリーンショット 2015-04-12 10.02.51

「Ver.1.1」をクリック
スクリーンショット 2015-04-12 10.03.02

page_manualpage_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 );

(表示結果)
スクリーンショット 2015-04-12 9.53.29

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);

(表示結果)
スクリーンショット 2015-04-12 9.54.03

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

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

まとめ

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

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

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

ではでは。

“WordPress管理画面のメニューをカスタマイズするfunctions.php記述法まとめ” への2件のフィードバック

  1. RED より:

    初めまして、REDと申します。
    Wordpressのfunction.phpについて調べていたらコチラの記事にたどり着きました。

    function.phpをいじっておりましたところ、記述にミスがありアクセスができなくなってしまいました。
    その後、バックアップでとっていた元々の記述をFTPから入ってfunction.phpに上書きし元に戻すコトはできました。

    が、管理画面の
    外観→ウィジェット
    の右半分(サイドバーのトコロ?)の記述がおかしくなってしまいました。
    画像をお送りできれば分かりやすいのですが、項目の所に「?」がズラーッと並んでおります。

    バックアップをとってきちんと修正し直したと思っていたので、どこをどういじってこのようになったのかが把握できておりません・・。

    もしこの事象を元に戻すための方法をご存知でしたらご教授頂けませんでしょうか。
    お手数をお掛け致しますがよろしくお願い致します。

    • おるず より:

      REDさん、初めまして。
      管理人のおるずです。

      現象は、外観→ウィジェットの画面のみですか?

      ちょっと環境やカスタマイズ内容が分からないので何とも言えないのですが、「上書きして戻した」との事なので、functions.phpを保存する際の文字コードに問題があったのかもしれません。

      ご使用のエディタで、試してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA