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

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

1. 管理画面のロゴを変更
2. 管理画面のロゴを非表示
3. 管理バーに項目を追加
4. 管理画面のファビコンを変更
5. フッターの文字を変更
6. アップデート通知を消す
7. プラグインのアップデート通知を消す
8. 管理バーのアップデート通知を消す
9. ダッシュボードにウィジェットを追加
10. ダッシュボードのウィジェットを非表示

1. 管理画面のロゴを変更

WordPressのデフォルトの管理画面左上には、WordPressのロゴが表示されています。

バージョンアップ毎にロゴが小さくなっている感じはしますが、気になる人は気になるだろうし、特にクライアントに納品する場合などは変更しておくと良いと思うので、このロゴを任意のものに変更します。
下記をfunctions.phpに記述して、CSSを上書くことでロゴを変更します。

functions.php

function my_custom_logo() {
  echo '<style type="text/css">#wp-admin-bar-wp-logo > .ab-item .ab-icon { background: url('.get_bloginfo('template_directory').'/images/custom-logo.png) no-repeat left top !important; }</style>';
}
add_action( 'admin_head', 'my_custom_logo' );

上記はimages内にあるcustom-logo.pngというイメージを表示するようになっているので、イメージの置き場所やファイル名が違う場合はこの部分を変更してください。
大きさは20×20pxが丁度良いみたいです。

functions.php

function my_custom_logo() {
  echo '<style type="text/css">#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before { content: ""; display: block; width: 18px; height: 18px; background: url('.get_bloginfo('template_directory').'/images/custom-logo.png) no-repeat 0 0;}</style>';
}
add_action( 'admin_head', 'my_custom_logo' );

以前の方法では.ab-iconに対して背景画像を指定していたものを、.ab-icon:beforeに対して指定する形に変更します。
あとは、表示させたいアイコンの幅と高さを指定して、同じく表示させたいアイコン画像を指定してあげることで新しくなった管理画面でもアイコンが表示されます。
ただ、新しい管理画面ではレスポンシブ対応しているため、大きいディスプレイでは問題ありませんがスマートフォンやタブレットといった小さいディスプレイで見ると、このままだと他のアイコンに比べて明らかに小さいアイコンが表示されてしまいます。
なので、この箇所もレスポンシブにしっかり対応させたいという場合は、それ専用の画像を作成したり、アイコンを画像ではなく同じくアイコンフォントで用意するなどの必要があります。

目次へ

2. 管理画面のロゴを非表示

単純にロゴを変更するだけならさっきの方法で良かったのですが、3.3になってから管理画面がまた少し変わったことにより、画像のようにマウスオンで「WordPressについて」「WordPress.org」というようなメニューが表示されるようになりました。

個人ブログであればここからフォーラムにいけたりと何かと便利なんですが、やっぱりクライアント納品などの場合は微妙な感じです...。
ロゴだけ変更してメニューのみを消す方法なんかもあると思いますが、特にこの部分を残す必要もない場合はいっそのこと非表示にしてしまいましょう。
下記をfunctions.phpに記述することでロゴの部分を丸々非表示にできます。

functions.php

add_action( 'wp_before_admin_bar_render', 'hide_before_admin_bar_render' );
function hide_before_admin_bar_render() {
  global $wp_admin_bar;
  $wp_admin_bar->remove_menu( 'wp-logo' );
}

目次へ

3. 管理バーに項目を追加

上では管理バーの項目を非表示にしましたが、逆にこの管理バーに項目を追加する方法です。
例えば、自分のブログだったらよく使うページや自分の他のサイトへのリンクを置いておいたり、クライアント納品の場合は「ヘルプ」の項目を作ってあげて、「お問い合わせ」とか「使い方」へ誘導してあげたり、上手く使えば何かと便利そうです。

今回はサンプルとして、管理バーに関連サイトの項目を追加してみます。
下記をfunctions.phpに記述してください。

functions.php

class add_related_menu {
  function add_related_menu() {
    add_action('wp_before_admin_bar_render', array($this, "related_links"));
  }

  function add_root_menu($name, $id, $href = FALSE) {
    global $wp_admin_bar;
    if ( !is_super_admin() || !is_admin_bar_showing() )
      return;

    $wp_admin_bar->add_menu( array(
      'id' => $id,
      'title' => $name,
      'href' => $href
    ) );
  }

  function add_sub_menu($name, $link, $root_menu, $meta = FALSE) {
    global $wp_admin_bar;
    if ( !is_super_admin() || !is_admin_bar_showing() )
      return;

    $wp_admin_bar->add_menu( array(
      'parent' => $root_menu,
      'title' => $name,
      'href' => $link,
      'meta' => $meta
    ) );
  }

  function related_links() {
    $this->add_root_menu( '関連サイト', 'related' );
    $this->add_sub_menu( '関連サイトA', 'http://example-a.com', 'related' );
    $this->add_sub_menu( '関連サイトB', 'http://example-b.com', 'related' );
    $this->add_sub_menu( '関連サイトC', 'http://example-c.com', 'related' );
  }
}
add_action( 'init', 'add_related_menu_init' );
function add_related_menu_init() {
  global $add_related_menu;
  $add_related_menu = new add_related_menu();
}

上記を記述することで、画像のように「関連サイト」という項目が追加され、マウスオンで「関連サイトA」「関連サイトB」「関連サイトC」というリンクがサブメニューとして表示されるようになります。

「関連サイト」という項目名を変更したい場合は上記コードの34行目、マウスオンで表示されるメニューのリンクや項目名を変更したい場合は35～37行目あたりを変更してください。
また、項目名のみでサブメニューを表示する必要がない場合は下記のように記述します。

functions.php

function add_new_item_in_admin_bar() {
  global $wp_admin_bar;
  $wp_admin_bar->add_menu( array(
    'id' => 'new_item_in_admin_bar',
    'title' => __('ここにタイトル'),
    'href' => 'URL'
  ) );
}
add_action( 'wp_before_admin_bar_render', 'add_new_item_in_admin_bar' );

目次へ

4. 管理画面のファビコンを変更

管理画面のファビコンを変更する方法です。
サイトと同じにしても良いし、管理画面は違うものにしてわかりやすくしても良いですね。
下記をfunctions.phpに記述し、イメージの置き場所やファイル名が違う場合は変更してください。

functions.php

function admin_favicon() {
  echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_bloginfo('template_url').'/images/favicon.ico" />';
}
add_action( 'admin_head', 'admin_favicon' );

目次へ

5. フッターの文字を変更

フッターに表示されている「WordPress のご利用ありがとうございます。」の文字を変更する方法。
下記をfunctions.phpに記述し、表示される内容はechoの部分で変更できます。

functions.php

function remove_footer_admin () {
  echo 'ここに表示したい文字列を入力する。 <a href="URL">リンクも設定できます。</a>';
}
add_filter( 'admin_footer_text', 'remove_footer_admin' );

目次へ

6. アップデート通知を消す

WordPressはアップデートがあると、画像のように管理画面にアップデート通知が表示されます。

これ自体は良い機能だと思うのですが、例えばコアファイルとかをがっつりカスタマイズしたようなサイトでクライアントに納品した際、ここをポチっと押されると大変なことになってしまいます...。
クライアントにアップデートしないよう念を押していたのにされてしまい、復旧するのに苦労した話なんかもたまに耳にします。
こういうことが起こらないためにも、アップデート通知を非表示にします。

functions.php

add_filter( 'pre_site_transient_update_core', '__return_zero' );
remove_action( 'wp_version_check', 'wp_version_check' );
remove_action( 'admin_init', '_maybe_update_core' );

目次へ

7. プラグインのアップデート通知を消す

プラグインも画像のようにサイドバーにアップデートできるプラグインの数が表示されます。

こちらも先程と同様にアップデートされては困るものもあると思うので、更新通知を非表示にします。

functions.php

add_action( 'admin_menu', 'remove_counts' );
function remove_counts() {
  global $menu,$submenu;
  $menu[65][0] = 'プラグイン';
  $submenu['index.php'][10][0] = '更新';
}

目次へ

8. 管理バーのアップデート通知を消す

上記の6と7でアップデート通知を消したように見えますが、よく見ると管理バーにも更新通知のアイコンがあります。

先程紹介した 2. 管理画面のロゴを非表示 の方法を用いてこの部分を非表示にします。
下記をfunctions.phpに記述してください。

functions.php

add_action( 'wp_before_admin_bar_render', 'hide_before_admin_bar_render' );
function hide_before_admin_bar_render() {
  global $wp_admin_bar;
  $wp_admin_bar->remove_menu( 'updates' );
}

ちなみに他の項目を非表示にしたい場合は、$wp_admin_bar->remove_menu( ‘xxx’ );のxxxの部分をそれぞれ以下のものに変更していけば非表示にできます。

• サイト名：site-name
• コメント：comments
• 新規追加：new-content

目次へ

9. ダッシュボードにウィジェットを追加

ダッシュボードに表示されている「現在の状況」「最近のコメント」といったようなウィジェットを追加する方法です。
下記をfunctions.phpに記述してください。

functions.php

function dashboard_widget_function() {
  echo "ここにウィジェットの内容";
}
function add_dashboard_widgets() {
  wp_add_dashboard_widget('dashboard_widget', 'ウィジェットタイトル', 'dashboard_widget_function');
}
add_action( 'wp_dashboard_setup', 'add_dashboard_widgets' );

画像のようにオリジナルのウィジェットを追加することができます。
タイトルを変更したい場合は5行目、中身を変更したい場合は2行目を変更してください。
iframeとかも使えるみたいですし、例えば複数人で管理しているようなサイトであればお知らせを表示しておいたりと、使い方によっては便利なカスタマイズだと思います。

目次へ

10. ダッシュボードのウィジェットを非表示

上ではウィジェットを追加しましたが、今度は逆にウィジェットを非表示にする方法です。
右上にある「表示オプション」で表示・非表示の切り替えはできますが、クライアント納品の場合は「プラグイン」や「WordPressブログ」などの項目は恐らく必要ないと思うので、functions.phpを使ってウィジェットと「表示オプション」内の項目を非表示にします。

functions.php

function remove_dashboard_widgets() {
  global $wp_meta_boxes;
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);        // 現在の状況
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);  // 最近のコメント
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);   // 被リンク
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);          // プラグイン
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);        // クイック投稿
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']);      // 最近の下書き
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);            // WordPressブログ
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);          // WordPressフォーラム
}
add_action( 'wp_dashboard_setup', 'remove_dashboard_widgets' );

下の画像は上記を記述して全部のウィジェットを非表示にし、先程追加したオリジナルのウィジェットのみが表示されている状態です。
「表示オプション」からも各項目がなくなっているのがわかります。

※3.3で新しく追加された「ようこそ」は、上記を使用しても消すことができません。
自分なりにいろいろと試してはみましたがどうも上手く出来なかったので、もし方法をご存知の方がいましたら教えてください X(

functions.php

remove_action( 'welcome_panel', 'wp_welcome_panel' );

目次へ