Wordpress 管理画面のカスタマイズ @AKIBE

ここで書かれている内容はWP3.2での内容です。WP3.3以降は管理画面のスタイル等、多くが変更になったので、きちんと適用されない記述があります。

WordPressで作成したサイトをクライアントに納品する際、管理画面を色々とカスタマイズしなくてはいけない場合があります。Wordpressで管理画面をカスタマイズする場合、プラグインを使う方法とfunction.phpに手動で登録する方法があります。

簡単便利なプラグインは検索すればすぐに見つかると思いますので、今回は手動で設定をする方法をメモしておきます。

WordPressでのカスタム処理は、アクセスからページ出力までの間に設定されている様々なイベントに対して、その時処理する関数を設定することで実現しています。その為、1つの処理毎に2つの命令文が必要になります。

アクションフックやフィルターに、カスタム関数を登録する。
登録したカスタム関数を定義する。

これらのコードはすべて、利用するテンプレートの function.php に記述します。

ログイン画面のロゴを変更する

ログイン画面のヘッダー生成のアクションフックにスタイルシートを出力する関数を登録します。
ログイン画面のロゴは h1> a のバックグラウンド画像で指定します。

add_action('login_head', 'login_custom');
function login_custom() {
    echo '<style type="text/css">h1>a{background-image:url('.get_bloginfo('template_directory').'/images/login-logo.png);}</style>';
}

カスタムロゴにして wordpress.org へのリンクを無効にするには、h1タグにロゴを貼って、aタグを消してしまうのが簡単です。

add_action('login_head', 'login_custom');
function login_custom() {
    echo '<style type="text/css">h1{background:url('.get_bloginfo('template_directory').'/images/login-logo.png) top center no-repeat;} h1>a{display:none;}</style>';
}

要はヘッダーにタグを追加しているだけなので、何でもできます。cssファイルやjavascriptファイルを読み込んで、色々とカスタマイズ可能です。
ただ、外部ファイルを読み込むなら、なるべく「wp_enqueue_style」や「wp_enqueue_script」を使いましょう。

管理画面のロゴを変更する

管理画面のカスタマイズも、ログイン画面の変更と同じ方法で可能です。管理画面のヘッダー生成のアクションフックは「admin_head」になります。

add_action('admin_head', 'admin_custom');
function admin_custom() {
    echo '<style type="text/css">#header-logo{background-image:url('.get_bloginfo('template_directory').'/images/login-logo.png);}</style>';
}

最近の管理画面はロゴは16×16と小さめなので、新たに画像をつくらなくても、faviconを貼るだけでもいいかもしれません。

add_action('admin_head', 'admin_custom');
function admin_custom() {
    echo '<style type="text/css">#header-logo{background-image:url(/favicon.ico);}</style>';
}

ここでは「admin_head」で直接CSSを出力していますが、「admin_print_scripts」や「admin_print_styles」といったアクションフックもあります。似たような用途でも、アクションフックの種類によって出力される位置がかわりますので、問題があった場合はいろいろ試してみましょう。

管理画面のフッターテキストを変更する

管理画面の最下部に、「WordPress のご利用ありがとうございます。 • ドキュメンテーション • 自由について • バグ報告と提案 • クレジット」とあります。この表記も、クライアントに納品した場合はふさわしくない場合があります。
このテキストを変更する為に、「admin_footer_text」というフィルターフックが用意されています。

add_filter('admin_footer_text', 'custom_admin_footer');
function custom_admin_footer() {
    echo 'お困りの際は、株式会社〇〇 担当「〇〇」までお気軽にご連絡ください。 E-mail:<a href="mailto:xxx@akibe.com">XXXXX</a> TEL:00-0000-0000';
}

余計なメニューを非表示にする

サイトによってはリンクやコメントを利用しない場合もありますが、そんな時に管理画面のメニュー項目を操作できるアクションフック「admin_menu」が用意されています。

add_action('admin_menu', 'remove_menus');
function remove_menus () {
    global $menu;
    unset($menu[15]);//リンク
    unset($menu[25]);//コメント
}

どのメニューがどの項目かは、/wp-admin/menu.php を見れば解ります。

プロフィールの項目を増やす

プロフィールの項目って今の日本のユーザー的には微妙ですよね。
そこで最近メジャーな項目を増やして、使わなそうな項目を削除します。

add_filter('user_contactmethods','my_new_contactmethods',10,1);
function my_new_contactmethods( $contactmethods ) {
    $contactmethods['twitter'] = 'Twitter';
    $contactmethods['facebook'] = 'Facebook';
    $contactmethods['hatena'] = 'はてな';
    $contactmethods['mixi'] = 'mixi';
    $contactmethods['Flickr'] = 'Flickr';
    $contactmethods['YouTube'] = 'YouTube';
    $contactmethods['Tumblr'] = 'Tumblr';

    unset($contactmethods['aim']);
    unset($contactmethods['jabber']);

    return $contactmethods;
}

追加項目を表示させるには、以下のコードのように「the_author_meta」にキーを指定してテンプレートに追加します。

<?php the_author_meta('twitter'); ?>

デフォルトアバターを変更する

標準のアバター画像も、フィルターで変更可能です。

add_filter('avatar_defaults','avatar_custom');
function avatar_custom($avatar_defaults) {
    $myavatar = get_bloginfo('template_directory') . '/images/guest.jpg';
    $avatar_defaults[$myavatar] = "Guests";
    return $avatar_defaults;
}

ビジュアルエディターに拡張ボタンを追加表示する

ビジュアルエディターを利用する場合、標準では非表示になっているボタンがあります。
中には便利なボタンもあるので、クライアントが使いそうなボタンをデフォルト表示にしてしまいましょう。

add_filter("mce_buttons", "mce_custom");
function mce_custom($buttons){
    array_push($buttons, "backcolor", "copy", "cut", "paste", "fontsizeselect", "cleanup");
    return $buttons;
}

管理画面のメニューカラーの変更

管理画面のメニューカラーを変えるにはカスタムCSSをヘッダーに追加します。
ソースを見ながらCSSを上書きすればOKですが、修正箇所が多いので以下に例を記します。

add_action('admin_head', 'admin_custom');
function admin_custom() {
echo '<style type="text/css">

/*サイドバー全体の背景と右線の色*/
#adminmenuback {
    background-color: #333;
    border-color: #222;
}

/*メニュー項目の背景と右線の色*/
#adminmenuwrap {
    background-color: #333;
    border-color: #222;
}

/* メニュー項目の上線と下線の色 */
#adminmenu a.menu-top,
.folded #adminmenu li.menu-top,
#adminmenu .wp-submenu .wp-submenu-head {
    border-top-color: #444;
    border-bottom-color: #222;
}

/* メニュー内セパレーターの背景と下線の色 */
#adminmenu li.wp-menu-separator {
    background: #222;
    border-top-color: #333;
    border-bottom-color: #111;
}
/* 上記設定で不必要になった線を削除 */
#adminmenu div.separator {
    border: none;
}

/* メニュー項目の文字色 */
#adminmenu a {
    color: #999;
}

/* アクティブなメニュー項目の文字色 */
#adminmenu a:hover {
    color: #eee;
}

/* サブメニュー項目の背景色と文字色 */
#adminmenu .wp-submenu a {
    background-color: #222;
    color: #666;
}

/* アクティブなサブメニュー項目の背景色と文字色 */
#adminmenu .wp-submenu a:hover {
    background-color: #333 !important;
    color: #eee !important;
}

/* カレントなサブメニュー項目の文字色 */
#adminmenu .wp-submenu li.current,
#adminmenu .wp-submenu li.current a,
#adminmenu .wp-submenu li.current a:hover {
    color: #aaa;
}

/* 開いたサブメニューの下線の色 */
#adminmenu li.wp-menu-open {
    border-color: #111;
}

/* カレントメニューの背景色と上下の線の色 */
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.current a.menu-top,
.folded #adminmenu li.wp-has-current-submenu,
.folded #adminmenu li.current.menu-top,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
    background-color: #c00;
    background-image: -ms-linear-gradient(bottom,#900,#c00);
    background-image: -moz-linear-gradient(bottom,#900,#c00);
    background-image: -o-linear-gradient(bottom,#900,#c00);
    background-image: -webkit-gradient(linear,left bottom,left top,from(#900),to(#c00));
    background-image: -webkit-linear-gradient(bottom,#900,#c00);
    background-image: linear-gradient(bottom,#900,#c00);
    border-top-color: #c00;
    border-bottom-color: #900;
}

/* カレントメニューの矢印画像 */
#adminmenu li.wp-has-current-submenu.wp-menu-open .wp-menu-toggle,
#adminmenu li.wp-has-current-submenu:hover .wp-menu-toggle {
    background: transparent url(/wp-admin/images/arrows.png) no-repeat -1px 6px;
}

/* アップデート数表示の背景色と文字色 */
#adminmenu .awaiting-mod, #adminmenu .update-plugins, #sidemenu a .update-plugins, #rightnow .reallynow {
    background-color: #666;
    color: #fff;
    -moz-box-shadow: none;
    -khtml-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

</style>';
}

上記のコードを適用すると、以下のような表示になります。

管理ページを追加する

クライアントにWordpressサイトを納品する際、操作マニュアルを提供しないといけない場合があります。
そんな場合には、新たにページを追加してメニューに組み込んでしまったほうが、利用しやすくなります。

// メニューを追加
add_action('admin_menu', 'add_custom_menus');
function add_custom_menus() {

    // 新しいトップレベルメニューを追加:
    add_menu_page('マニュアル', 'マニュアル', 8, __FILE__, 'page_manual');

    // カスタムのトップレベルメニューにサブメニューを追加:
    add_submenu_page(__FILE__, '新規投稿手順', '新規投稿手順', 8, 'sub-page', 'page_manual_newpost');

    // カスタムのトップレベルメニューに二つ目のサブメニューを追加:
    add_submenu_page(__FILE__, 'コメントの管理', 'コメントの管理', 8, 'sub-page2', 'page_manual_comment');
}

// 追加したトップレベルメニューのコンテンツを表示
function page_manual() {
    echo "<h2>マニュアル</h2>";
}

// 追加したサブメニューのコンテンツを表示
function page_manual_newpost() {
    echo "<h2>新規投稿手順</h2>";
}

// 追加した二つ目のサブメニューのコンテンツを表示
function page_manual_comment() {
    echo "<h2>コメントの管理</h2>";
}

コンテンツの量にもよりますが、実際に追加ページを作成する時は、関数で表示させるよりも、外部PHPファイルを作成するか、プラグインにしたほうがいいでしょう。
詳しくは公式ドキュメントをご覧ください。

NOTES : 2011-09-18 : WEB

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