WordPressの管理画面カスタマイズ時に使えるハック #2

WordPressの管理画面カスタマイズ時に見るチートシート目的のメモ第2弾です。

紹介している内容は、基本的にWordPress Ver 3.3で実装・確認したものになります。

February 20, 2014 追記

WordPress Ver 3.8になって管理画面がいろいろ変更されたことにより、紹介しているカスタマイズの一部が使用できなくなっている可能性がありますのでご注意ください。

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

デフォルトのログイン画面

デフォルトのログイン画面はWordPressのロゴが表示されていますが、これを任意のものに変更する方法です。

下記をfunctions.phpに記述して、ロゴ部分のCSSを上書くことで変更します。
イメージの置き場所やファイル名が違う場合は、echoの部分を変更してください。
デフォルトで表示されているWordPressロゴの大きさは274×63ですので、これを基準に作成すれば簡単に変更できます。

functions.php

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

カスタマイズ後のログイン画面

ログイン画面のデザインを変更

先程はロゴのみを変更しましたが、ロゴだけじゃなくてログイン画面全体のデザインを変更する方法です。
下記をfunctions.phpに記述し、CSSで各スタイルを上書いていきます。

functions.php

add_action( 'login_head', 'custom_login' );
function custom_login() {
  echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo( 'template_directory' ) . '/login.css" />';
}

カスタマイズ後のログイン画面

イメージはカスタマイズ後のログイン画面で、このようにCSSでできる範囲であれば思い通りの見栄えのログイン画面にできます。
ディレクトリやファイル名などが違う場合は、上記コードのecho部分を変更してください。

ちなみVer 3.3のログイン画面は下記のようなコードになっていますので、カスタマイズの参考にしてください。

<body class="login">
  <div id="login">
    <h1><a href="http://wordpress.org/" title="Powered by WordPress">Blog Title</a></h1>

    <form name="loginform" id="loginform" action="http://xxx/wordpress/wp-login.php" method="post">
      <p>
        <label for="user_login">ユーザー名<br />
        <input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
      </p>
      <p>
        <label for="user_pass">パスワード<br />
        <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
      </p>
      <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> ログイン状態を保存する</label></p>
      <p class="submit">
        <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="ログイン" tabindex="100" />
        <input type="hidden" name="redirect_to" value="http://xxx/wordpress/wp-admin/" />
        <input type="hidden" name="testcookie" value="1" />
      </p>
    </form>

    <p id="nav"><a href="http://xxx/wordpress/wp-login.php?action=lostpassword" title="パスワード紛失取り扱い">パスワードをお忘れですか ?</a></p>
    <p id="backtoblog"><a href="http://xxx/wordpress/" title="迷子になってしまいましたか ?">&larr; Blog Title へ戻る</a></p>
  </div>
  <div class="clear"></div>
</body>

管理画面でCSSやJavaScriptを使う

先程のログイン画面同様、管理画面でも独自のCSSやJavaScriptを使用することができます。
下記をfunctions.phpに記述することで、CSSはadmin.cssが読み込まれ、JavaScriptはadmin.jsが読み込まれるようになります。

functions.php

// CSS
add_action( 'admin_head', 'admin_css' );
function admin_css() {
  echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo( "template_directory" ) . '/css/admin.css">';
}

// JavaScript
add_action( 'admin_head', 'admin_js' );
function admin_js() {
  echo '<script type="text/javascript" src="'.get_bloginfo("template_directory").'/js/admin.js"></script>';
}

サイドバーの項目を非表示

管理画面のサイドバーにはデフォルトで11項目表示されていますが、これを非表示にする方法です。
自分のサイトであれば使わない項目は邪魔なので非表示にしておいたり、クライアント納品の場合はいじられると困るものは予め非表示にしたりしておくと良いと思います。
下記をfunctions.phpに記述してください。

functions.php

add_action( 'admin_menu', 'remove_menu', 999 );
function remove_menu() {
  remove_menu_page( 'index.php' );                // ダッシュボード
  remove_menu_page( 'edit.php' );                 // 投稿
  remove_menu_page( 'upload.php' );               // メディア
  remove_menu_page( 'link-manager.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' );      // 設定
}

上記記述後、管理画面を確認するとイメージのように項目が非表示になっているのを確認できます。
「ダッシュボード」ならindex.php、「投稿」ならedit.phpのように、非表示にしたい項目の各リンク先ファイル名を指定することで非表示にできます。

サイドバーの項目を非表示にした管理画面のイメージ

項目のサブメニューを非表示

例えば「ダッシュボード」という項目は残しておきたいけど、そのサブメニューにあたる「更新」の部分は非表示にしたいなど、一部のサブメニューのみ非表示にしたい場合はremove_submenu_page()を使用し、先程と同様に非表示にしたい項目の各リンク先ファイル名を指定することで非表示にできます。
例えば、下記をfunctions.phpに記述すると「ダッシュボード」内の「更新」と「投稿」内の「タグ」が非表示になります。

functions.php

add_action( 'admin_menu', 'remove_menu', 999 );
function remove_menu() {
  // ダッシュボードの「更新」を非表示
  remove_submenu_page( 'index.php', 'update-core.php' );
  // 投稿の「タグ」を非表示
  remove_submenu_page( 'edit.php', 'edit-tags.php?taxonomy=post_tag' );
}

プラグイン導入で追加された項目を非表示

プラグインの中には設定をするとサイドバーに項目が追加されるものがありますが、これらも同じ方法を用いて非表示にすることができます。
今回はサンプルとして多くの方が利用されていると思う「Contact Form 7」と「Ktai Style」を例にあげてみます。
「Contact Form 7」の場合はwpcf7、「Ktai Style」の場合はktai_styleをそれぞれ引数に指定することで非表示にすることができます。

functions.php

add_action( 'admin_menu', 'remove_menu', 999 );
function remove_menu() {
  remove_menu_page( 'wpcf7' );      // Contact Form 7
  remove_menu_page( 'ktai_style' ); // Ktai Style
}

ただ、注意点としてこのカスタマイズはあくまで指定した項目を非表示にしているだけで、URLに直接ファイル名を指定すれば表示されます。
完全にアクセスさせたくない場合は、リダイレクト指定したり権限を利用するなどしてアクセス拒否などする必要があります。

関数リファレンス/remove menu page | WordPress Codex 日本語

サイドバーの項目を追加

サイドバーに項目を追加したイメージ

上ではサイドバーの項目を非表示にしましたが、今度は逆にサイドバーに項目を追加する方法です。
functions.phpに下記を記述します。

functions.php

function test_menu_page() {
?>
  <div class="wrap">
    <p>ここにページで表示したいものを記述</p>
  </div>
<?php
}
add_action( 'admin_menu', 'test_admin_menu' );
function test_admin_menu() {
  add_menu_page( 'ページのタイトル', 'サイドバーに表示される項目名', 'read', basename(__FILE__), 'test_menu_page' );
}

上記を記述すると、イメージのようにサイドバーに項目を追加することができます。
ちなみにサブメニューとして項目を追加する場合は、add_submenu_page()を使用します。

投稿、固定ページの編集画面から不要なボックスを非表示

投稿の編集画面のイメージ

投稿や固定ページの編集画面には、イメージのように「抜粋」や「トラックバック送信」など様々なボックスが予め設置されています。
ダッシュボードと同じく右上にある「表示オプション」で表示・非表示の切り替えはできますが、これをfunctions.phpで非表示にする方法です。
この方法を使うと「表示オプション」からも項目を消すことができるので、管理画面をよりシンプルにしたい場合は「表示オプション」で表示・非表示切り替えよりもこちらの方法が良いと思います。
それぞれ下記をfunctions.phpに記述します。

functions.php

// 投稿
add_action( 'admin_menu', 'remove_default_post_screen_metaboxes' );
function remove_default_post_screen_metaboxes() {
  remove_meta_box( 'postexcerpt', 'post', 'normal' );       // 抜粋
  remove_meta_box( 'trackbacksdiv', 'post', 'normal' );     // トラックバック送信
  remove_meta_box( 'postcustom', 'post', 'normal' );        // カスタムフィールド
  remove_meta_box( 'commentstatusdiv', 'post', 'normal' );  // ディスカッション
  remove_meta_box( 'commentsdiv', 'post', 'normal' );       // コメント
  remove_meta_box( 'slugdiv', 'post', 'normal' );           // スラッグ
  remove_meta_box( 'authordiv', 'post', 'normal' );         // 作成者
  remove_meta_box( 'revisionsdiv', 'post', 'normal' );      // リビジョン
  remove_meta_box( 'formatdiv', 'post', 'normal' );         // フォーマット
  remove_meta_box( 'categorydiv', 'post', 'normal' );       // カテゴリー
  remove_meta_box( 'tagsdiv-post_tag', 'post', 'normal' );  // タグ
}

// 固定ページ
add_action( 'admin_menu', 'remove_default_page_screen_metaboxes' );
function remove_default_page_screen_metaboxes() {
  remove_meta_box( 'postcustom', 'page', 'normal' );        // カスタムフィールド
  remove_meta_box( 'commentstatusdiv', 'page', 'normal' );  // ディスカッション
  remove_meta_box( 'commentsdiv', 'page', 'normal' );       // コメント
  remove_meta_box( 'slugdiv', 'page', 'normal' );           // スラッグ
  remove_meta_box( 'authordiv', 'page', 'normal' );         // 作成者
  remove_meta_box( 'revisionsdiv', 'page', 'normal' );      // リビジョン
}

サンプルコード上部が投稿の編集画面、下部が固定ページの編集画面の記述になっており、上記以外のボックスを非表示にしたい場合はremove_meta_box()の引数を変更してください。
記述後、各編集画面を確認するとイメージのようにボックスが非表示になっており、また「表示オプション」からも項目がなくなっているのを確認できます。

投稿の編集画面から不要なボックスを非表示にしたイメージ

Function Reference/remove meta box | WordPress Codex

投稿一覧、固定ページ一覧の不要な項目を非表示

デフォルトの投稿一覧イメージ

投稿一覧や固定ページ一覧のページには、イメージのように「タイトル」や「作成者」などの項目が予め表示されています。
こちらもダッシュボードや編集画面と同じく右上にある「表示オプション」で表示・非表示の切り替えはできますが、これをfunctions.phpで非表示にする方法です。

functions.php

// 投稿一覧
add_filter( 'manage_posts_columns', 'custom_columns' );
function custom_columns( $columns ) {
  unset( $columns['cb'] );          // チェックボックス
  unset( $columns['title'] );       // タイトル
  unset( $columns['author'] );      // 作成者
  unset( $columns['categories'] );  // カテゴリー
  unset( $columns['tags'] );        // タグ
  unset( $columns['comments'] );    // コメント
  unset( $columns['date'] );        // 日付
  return $columns;
}

// 固定ページ一覧
add_filter( 'manage_pages_columns', 'custom_columns' );
function custom_columns( $columns ) {
  unset( $columns['cb'] );          // チェックボックス
  unset( $columns['title'] );       // タイトル
  unset( $columns['author'] );      // 作成者
  unset( $columns['categories'] );  // カテゴリー
  unset( $columns['tags'] );        // タグ
  unset( $columns['comments'] );    // コメント
  unset( $columns['date'] );        // 日付
  return $columns;
}

サンプルコード上部が投稿一覧、下部が固定ページ一覧向けの記述です。
記述後、確認するとイメージのようにボックスが非表示になっており、また「表示オプション」からも項目がなくなっているのを確認できます。

投稿一覧から不要な項目を非表示にしたイメージ

WordPress管理画面の投稿記事一覧をカスタマイズする | webOpixel

投稿一覧、固定ページ一覧に項目を追加

先ほどとは逆に項目を追加する方法で、今回はサンプルとして投稿一覧にアイキャッチのサムネイルを出してみます。
自分のテーマでアイキャッチを使えるようにしていない場合は、まず下記をfunctions.phpに記述してアイキャッチを使えるようにしてください。

functions.php

add_theme_support( 'post-thumbnails' );

アイキャッチを既に使用している、もしくは使える状態になったのを確認したらfunctions.phpに下記を記述します。

functions.php

function manage_posts_columns( $columns ) {
  $columns['thumbnail'] = __( 'Thumbnail' );
  return $columns;
}
function add_column( $column_name, $post_id ) {
  if ( $column_name == 'thumbnail' ) {
    $thum = get_the_post_thumbnail( $post_id, array( 100, 100 ), 'thumbnail' );
  }
  if ( isset( $thum ) && $thum ) {
    echo $thum;
  } else {
    echo __( 'None' );
  }
}
add_filter( 'manage_posts_columns', 'manage_posts_columns' );
add_action( 'manage_posts_custom_column', 'add_column', 10, 2 );

上記を記述後、投稿の一覧画面を確認するとイメージのようにサムネイルという項目が追加されており、アイキャッチがあるものに関しては画像が表示され、ないものに関しては「なし」と表示されています。
表示されているサムネイルの大きさを変更したい場合は、上記コード7行目にあるarray( 100, 100 )の値を変更してください。

投稿一覧にサムネイルが追加されたイメージ

固定ページの一覧にも同じくサムネイルの項目を追加したい場合は、下記をfunctions.phpに記述します。

functions.php

function manage_pages_columns( $columns ) {
  $columns['thumbnail'] = __( 'Thumbnail' );
  return $columns;
}
function add_pages_column( $column_name, $post_id ) {
  if ( $column_name == 'thumbnail' ) {
    $thum = get_the_post_thumbnail( $post_id, array( 100, 100 ), 'thumbnail' );
  }
  if ( isset( $thum ) && $thum ) {
    echo $thum;
  } else {
    echo __( 'None' );
  }
}
add_filter( 'manage_pages_columns', 'manage_pages_columns' );
add_action( 'manage_pages_custom_column', 'add_pages_column', 10, 2 );

WordPress管理画面の投稿記事一覧をカスタマイズする | webOpixel

プロフィールの項目を削除

複数人で管理するような場合に使うことが多いと思うプロフィールですが、予め幾つか項目が設定されている中に「AIM」や「Yahoo IM」など、普段あまり使わないような項目があります。
もちろんそのままでも何の問題もないのですが、シンプルな管理画面にしたい場合などに邪魔になると思うので、いらない項目を削除してしまいます。
下記をfunctions.phpに記述してください。

functions.php

add_filter( 'user_contactmethods', 'custom_profile_fields', 10, 1);
function custom_profile_fields( $contactmethods ) {
  unset( $contactmethods['aim'] );     // AIM
  unset( $contactmethods['yim'] );     // Yahoo IM
  unset( $contactmethods['jabber'] );  // Jabber / Google Talk
  return $contactmethods;
}

上記を記述後、プロフィール画面を確認すると「AIM」「Yahoo IM」「Jabber / Google Talk」の3つの項目が削除されているのを確認できます。

プロフィールの項目を追加

上とは逆にプロフィールの項目を追加する方法です。
項目の追加は$contactmethods['xxx'] = 'xxx';で可能なので、今回はサンプルとして上でも紹介した「AIM」「Yahoo IM」「Jabber / Google Talk」の3項目を削除しつつ、「Skype」「Twitter」「Facebook」「Google+」の4項目を追加してみます。
下記をfunctions.phpに記述してください。

functions.php

add_filter( 'user_contactmethods', 'custom_profile_fields', 10, 1 );
function custom_profile_fields( $contactmethods ) {
  unset( $contactmethods['aim'] );     // AIM
  unset( $contactmethods['yim'] );     // Yahoo IM
  unset( $contactmethods['jabber'] );  // Jabber / Google Talk
  $contactmethods['skype'] = 'Skype';
  $contactmethods['twitter'] = 'Twitter';
  $contactmethods['facebook'] = 'Facebook';
  $contactmethods['google_plus'] = 'Google+';
  return $contactmethods;
}

上記を記述後、プロフィール画面を確認するとイメージのように項目の削除と追加が行われているのを確認できます。

カスタマイズ後のプロフィール画面イメージ

ここで紹介したのは「連絡先情報」部分のみですが他の箇所もカスタマイズすることができ、プロフィール画面でのその他のカスタマイズについては以下エントリーがとても参考になります。

WordPressのユーザー管理画面カスタマイズまとめ | Simple Colors

WordPressの管理画面カスタマイズについては以下エントリーでもまとめています。