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

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

前回の「WordPressの管理画面をカスタマイズする時に使えるハック Part 1」に引き続き、WordPressの管理画面をカスタマイズする時に見るチートシート目的のメモです。

February 20, 2014 追記

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

functions.phpを使用するので、テーマ内にない場合は作成してください。

※以下で紹介している内容は、基本的にWordPress Ver3.3を使用したものです。

WordPressの管理画面をカスタマイズする時に使えるハック Part 2 目次

  1. ログイン画面のロゴを変更
  2. ログイン画面のデザインを変更
  3. 管理画面でCSSやJavaScriptを使う
  4. サイドバーの項目を非表示
  5. サイドバーの項目を追加
  6. 投稿、固定ページの編集画面から不要なボックスを非表示
  7. 投稿一覧、固定ページ一覧の不要な項目を非表示
  8. 投稿一覧、固定ページ一覧に項目を追加
  9. プロフィールの項目を削除
  10. プロフィールの項目を追加

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

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

デフォルトのログイン画面はWordPressのロゴが表示されている

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

functions.php

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>';
}
add_action( 'login_head', 'custom_login_logo' );
ログイン画面のロゴを変更

目次へ

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

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

functions.php

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

ディレクトリやファイル名などが違う場合は、上記コードのecho部分を変更してください。
ちなみにWordPress 3.3のログイン画面は下記のようなコードになっていますので、カスタマイズの参考にしてください。

HTML

<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>
ログイン画面のデザインを変更

目次へ

3. 管理画面でCSSやJavaScriptを使う

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

functions.php

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

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

目次へ

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

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

functions.php

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' );      // 設定
}
add_action( 'admin_menu', 'remove_menu', 999 );

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

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

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

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

functions.php

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

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

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

functions.php

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

※このカスタマイズはあくまで指定した項目を非表示にしているだけで、URLに直接ファイル名を指定すれば表示されます。

目次へ

5. サイドバーの項目を追加

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

functions.php

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

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

サイドバーの項目を追加

目次へ

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

投稿や固定ページの編集画面には、画像のように「抜粋」や「トラックバック送信」など様々なボックスが予め設置されています。

投稿の編集画面

※画像は投稿の編集画面

ダッシュボードと同じく右上にある「表示オプション」で表示・非表示の切り替えはできますが、これをfunctions.phpで非表示にする方法です。
この方法を使うと「表示オプション」からも項目を消すことができるので、管理画面をよりシンプルにしたい場合は「表示オプション」で表示・非表示切り替えよりもこちらの方法が良いと思います。
それぞれ下記をfunctions.phpに記述します。

functions.php

// 投稿
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_post_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' );      // リビジョン
}
add_action( 'admin_menu', 'remove_default_page_screen_metaboxes' );

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

投稿の編集画面から不要なボックスを非表示

※画像は投稿の編集画面

目次へ

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

投稿一覧や固定ページ一覧のページには、画像のように「タイトル」や「作成者」などの項目が予め表示されています。

投稿の一覧画面

※画像は投稿の一覧画面

こちらもダッシュボードや編集画面と同じく右上にある「表示オプション」で表示・非表示の切り替えはできますが、これをfunctions.phpで非表示にする方法です。
それぞれ下記をfunctions.phpに記述します。

functions.php

// 投稿一覧
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_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' );

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

投稿一覧の不要な項目を非表示

※画像は投稿の一覧画面で、「タイトル」と「カテゴリー」以外の項目を非表示にしたもの

目次へ

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

上では一覧から項目を非表示にしましたが、逆に項目を追加する方法です。
今回はサンプルとして、投稿一覧にアイキャッチのサムネイルを出してみます。
自分のテーマでアイキャッチを使えるようにしていない場合は、まず下記を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 ( 'thumbnail' == $column_name) {
    $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 );

上記を記述後、投稿の一覧画面を確認すると画像のようにサムネイルという項目が追加されており、アイキャッチがあるものに関しては画像が表示され、ないものに関しては「なし」と表示されています。
表示されているサムネイルの大きさを変更したい場合は、上記コード8行目にある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 ( 'thumbnail' == $column_name) {
    $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 );

目次へ

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

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

functions.php

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

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

目次へ

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

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

functions.php

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;
}
add_filter( 'user_contactmethods', 'custom_profile_fields', 10, 1 );

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

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

上記で紹介したのは「連絡先情報」部分のみですが、他の箇所もカスタマイズすることができます。
プロフィールのその他のカスタマイズについては「WordPressのユーザー管理画面カスタマイズまとめ | Simple Colors」がとても参考になります。

目次へ


以上、WordPressの管理画面をカスタマイズする時に使えるハック Part 2でした。
前回書いたPart 1と合わせると全部で20個紹介しましたが、他にもまだまだあるみたいなので、覚えておきたいなと感じたものがまた溜まってきた頃に紹介しようと思います。

Close the search window,
please press close button or esc key.