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

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

WordPressの管理画面に関するカスタマイズまとめの第5弾です。
表側だけでなく裏側も自分好みにカスタマイズしたい方やクライアント(更新者)向けに少しでもわかりやすい管理画面にしたい時に使えるものがあります。

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

※以下で紹介している内容は、WordPress Ver4.4.2で動作確認などしたものです。

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

  1. メディアアップローダのデフォルト表示を変更する
  2. メディアアップローダの表示「この投稿へのアップロード」のみにする
  3. メディアアップローダの初期表示タブを変更する
  4. 「ヘルプ」タブを非表示にする
  5. 投稿フォーマットのラベル名を変更する
  6. 「投稿」のラベル名を変更する
  7. 管理画面内の文言をわかりやすいものに変更する
  8. 「アイキャッチ画像」部分に補足テキストを表示する
  9. 管理バーにログアウトを追加する
  10. ログアウト後に任意のページの移動させる

1. メディアアップローダのデフォルト表示を変更する

画像を追加したい時には投稿画面にある「メディアを追加」ボタンから行う人が多いと思いますが、その際にデフォルトのメディアアップローダでは「すべてのメディア」が初期選択された状態になっています。
例えば画像を多用しているサイトなどで不要な画像はできるだけ非表示にしたい時やロードさせたくない時などは、デフォルトで「すべてのメディア」となっているプルダウンを「この投稿へのアップロード」に変更することで表示されるメディアを絞り込んで表示させることができるのですが、これを毎回選択するのが面倒だとかデフォルトの初期選択を変えたいという場合はfunctions.phpへ下記のように記述することで変更することができます。

functions.php

function change_media_uploader_default_filters() {
?>
<script type="text/javascript">
jQuery(function($) {
  wp.media.view.Modal.prototype.on('open', function() {
    $('#media-attachment-filters > [value="uploaded"]').prop('selected', true).parent().trigger('change');
  });
});
</script>
<?php
}
add_action( 'admin_footer-post-new.php', 'change_media_uploader_default_filters' );
add_action( 'admin_footer-post.php', 'change_media_uploader_default_filters' );

見ての通りですが、jQueryを用いてメディアアップローダ表示時にプルダウンの選択が変更されるように記述することで初期選択されているようにしています。
上記はプルダウンの初期選択を「この投稿へのアップロード」に変更するものになりますが、これを「画像」や「未添付」など他のものに変更したいという時はソースの赤文字部分を変更することで実装でき、それぞれ以下のように記述すれば変更可能です。

  • 「画像」 → [value="image"]
  • 「音声」 → [value="audio"]
  • 「動画」 → [value="video"]
  • 「未添付」 → [value="unattached"]

目次へ

2. メディアアップローダの表示「この投稿へのアップロード」のみにする

先ほどのものは初期選択を変更しただけなので他の絞り込み内容に変更することができましたが、こちらはいっそのこと必要ない他のプルダウンは全て消してしまうという方法になります。
実装にはfunctions.phpへ下記のように記述し、この場合は記述後に画面を確認するとプルダウンの内容が「この投稿へのアップロード」のみになっているのを確認できます。

functions.php

function change_media_uploader_filters() {
?>
<script type="text/javascript">
jQuery(document).on('DOMNodeInserted', function() {
  jQuery('select.attachment-filters [value="uploaded"]').prop('selected', true).siblings().hide().parent().trigger('change');
});
</script>
<?php
}
add_action( 'admin_footer-post-new.php', 'change_media_uploader_filters' );
add_action( 'admin_footer-post.php', 'change_media_uploader_filters' );

ここでは「この投稿へのアップロード」を例にしましたが、他のものにしたい場合は先ほどと同様で[value="uploaded"]の部分を任意のものに変更すれば実装できます。

目次へ

3. メディアアップローダの初期表示タブを変更する

メディアアップローダを立ち上げるとデフォルトでは「メディアライブラリ」のタブが選択された状態で表示されますが、それを初期表示で「ファイルをアップロード」の方が選択された状態で表示されるようにする方法です。
実装にはfunctions.phpへ下記のように記述し、上2つと同様にjQueryを利用する形で実装をします。

functions.php

function change_media_uploader_default_router() {
?>
<script type="text/javascript">
jQuery(function($) {
  // 「メディアを挿入」の初期表示タブを「ファイルをアップロード」に
  wp.media.controller.Library.prototype.defaults.contentUserSetting = false;
  // 「アイキャッチ画像」の初期表示タブを「ファイルをアップロード」に
  wp.media.controller.FeaturedImage.prototype.defaults.contentUserSetting = false;
});
</script>
<?php
}
add_action( 'admin_footer-post-new.php', 'change_media_uploader_default_router' );
add_action( 'admin_footer-post.php', 'change_media_uploader_default_router' );

ここでは「メディアを挿入」と「アイキャッチ画像」ともに初期表示タブを変更しましたが、アイキャッチに関してはこの初期表示の動きは必要ないということであれば、wp.media.controller.FeaturedImage.prototype.defaults.contentUserSetting = false;の記述を消してください。

目次へ

4. 「ヘルプ」タブを非表示にする

「ヘルプ」タブを非表示にする

管理画面右上にある「ヘルプ」タブを非表示にする方法です。
本来はそのページの使い方や機能について書かれているので便利なものではあるのですが、例えば何らかの理由でデフォルトの機能などを取り除いており、ほとんどヘルプとして役割を果たしていない時や、単純にとにかく管理画面をシンプルにしたいという時などに使えると思います。
実装にはfunctions.phpへ下記のように記述します。

functions.php

function remove_help_tabs() {
  $screen = get_current_screen();
  $screen -> remove_help_tabs();
}
add_action( 'admin_head', 'remove_help_tabs' );

または既に管理画面用で自前のCSSを記述している(読み込んでいる)場合は、下記のようにCSSを利用して非表示にさせることもできます。

functions.php

function remove_help_tabs() {
?>
<style type="text/css">
#contextual-help-link-wrap {
  display: none !important;
}
</style>
<?php
}
add_action( 'admin_head', 'remove_help_tabs' );

上記をそのまま使用した場合はいずれも全てのページで「ヘルプ」が非表示になりますが、admin_headの箇所を少し変更(非表示にさせたいページに適用するに)すれば、特定のページでのみ非表示にさせるということもできます。

ちなみに、「表示オプション」も一緒に消したい場合は、以下の方法で非表示にすることができます。

目次へ

5. 投稿フォーマットのラベル名を変更する

投稿フォーマットのラベル名を変更する

投稿フォーマットを使うことで様々なデザインやレイアウトに見せることが可能になりますが、例えば「アサイド」や「ステータス」のようにフォーマット名が人によって少しわかりづらいものもあります。
それをfunctions.phpへ下記のように記述し、それぞれハイライト部分を変更することでフォーマットのラベル名を任意の名前にすることができます。

functions.php

add_filter( 'gettext_with_context', 'rename_post_formats' );
function rename_post_formats( $text ) {
  if ( $text == 'アサイド' )
    return '「アサイド」のフォーマット名を変更';
  if ( $text == '画像' )
    return '「画像」のフォーマット名を変更';
  if ( $text == '動画' )
    return '「動画」のフォーマット名を変更';
  if ( $text == '引用' )
    return '「引用」のフォーマット名を変更';
  if ( $text == 'リンク' )
    return '「リンク」のフォーマット名を変更';
  if ( $text == 'ギャラリー' )
    return '「ギャラリー」のフォーマット名を変更';
  if ( $text == 'ステータス' )
    return '「ステータス」のフォーマット名を変更';
  if ( $text == '音声' )
    return '「音声」のフォーマット名を変更';
  if ( $text == 'チャット' )
    return '「チャット」のフォーマット名を変更';
  return $text;
}

目次へ

6. 「投稿」のラベル名を変更する

「投稿」のラベル名を変更する

カスタム投稿を利用する際は更新する内容に応じてそれっぽいラベル名(投稿名)にあらかじめすることが多いと思いますが、デフォルトで用意されている「投稿」のみを利用するという時に「投稿」だとちょっとわかりづらいなと感じる場合は、functions.phpへ下記のように記述することで「投稿」というラベル名を任意のものに変更することができます。

functions.php

add_action( 'admin_menu', 'change_post_menu_label' );
function change_post_menu_label() {
  global $menu;
  global $submenu;
  $menu[5][0] = 'お知らせ';
  $submenu['edit.php'][5][0] = 'お知らせ一覧';
  $submenu['edit.php'][10][0] = '新しいお知らせを追加';
}
add_action( 'init', 'change_post_label' );
function change_post_label() {
  global $wp_post_types;
  $labels = $wp_post_types['post'] -> labels;
  $labels->name = 'お知らせ';
  $labels->singular_name = 'お知らせ';
  $labels->add_new = '新しいお知らせ';
  $labels->add_new_item = '新しいお知らせを追加';
  $labels->edit_item = 'お知らせの編集';
  $labels->new_item = '新しいお知らせ';
  $labels->view_item = 'お知らせを表示';
  $labels->search_items = 'お知らせを検索';
  $labels->not_found = 'お知らせが見つかりませんでした';
  $labels->not_found_in_trash = 'ゴミ箱のお知らせにも見つかりませんでした';
}

今回は例として「投稿」を全て「お知らせ」に変更してみたもので、上記記述後に管理画面を確認すると各箇所で「投稿」と表示されていたところが「お知らせ」になっているのを確認できます。

目次へ

7. 管理画面内の文言をわかりやすいものに変更する

例えば「アイキャッチ画像」や「メディア」など、普段からWordPressを触っているという人や一度説明を受ければすぐ理解できるような人はそれらがどのようなものなのかすぐわかるとは思いますが、特にそういった呼び方に慣れていない人や忘れっぽい人など更新者によってはわかりづらい文言になっている箇所があります。
それらをもっとわかりやすい文言にしたい時にはfunctions.phpへ下記のように記述することで任意の文言に変更することができ、以下の記述の場合は先ほど例に挙げた「アイキャッチ画像」が「サムネイル画像」に、「メディア」が「画像」という文言にそれぞれ変更されます。

functions.php

add_filter( 'gettext', 'change_side_text' );
function change_side_text( $translated ) {
  $translated = str_ireplace( 'アイキャッチ画像', 'サムネイル画像', $translated );
  $translated = str_ireplace( 'メディア', '画像', $translated );
  return $translated;
}

目次へ

8. 「アイキャッチ画像」部分に補足テキストを表示する

先ほど「アイキャッチ画像」という名前をわかりやすいものに変更する方法を紹介しましたが、こちらも更新者に少しでもわかりやすくしたい時に使えるカスタマイズです。
functions.phpに下記のように記述することで、アイキャッチ画像部分に補足テキストを表示させることができます。

functions.php

add_filter( 'admin_post_thumbnail_html', 'add_post_thumbnail_description' );
function add_post_thumbnail_description( $content ) {
  return $content .= '<p>Lorem ipsum dolor sit amet.</p>';
}
好きなテキストを表示でき、装飾なども可能

ソースでハイライト部分が表示される箇所になり、例えばよりわかりやすくするために画像のようにスタイルを適用して目立たせるといったことも可能です。

目次へ

9. 管理バーにログアウトを追加する

管理バーにログアウトを追加する

デフォルトの管理画面ではページ右上にあるプロフィールを展開すると表示される部分にログアウトがあるのですが、初めてWordPressの管理画面を見たという人からするとパッと見でどこにあるのかがわかりづらいです...。
それをfunctions.phpに下記のように記述することで管理バーにログアウトを作成し、ここからログアウトできるということをわかりやすくできるカスタマイズです。

functions.php

function add_custom_logout_in_admin_bar() {
  global $wp_admin_bar;
  $wp_admin_bar -> add_menu(array(
    'id' => 'custom-logout',
    'title' => __('ログアウト'),
    'href' => wp_logout_url()
  ));
}
add_action( 'wp_before_admin_bar_render', 'add_custom_logout_in_admin_bar' );

上記を記述するだけだと「ログアウト」というテキストのみが表示される形になりますが、他の項目と同じようにアイコンをつけたい時はCSSを利用すれば任意のアイコンをつけることも可能です。
上記記述をそのまま使用した場合は、ボタンを括っているli要素に「wp-admin-bar-custom-logout」というidが付加されていると思うので(デベロッパーツールなどで確認してください)、そのidを利用する形で記述すればアイコンをつけられます。

ちなみに、他の項目と同じように<span class="ab-icon"></span><span class="ab-label"></span>がある状態で実装したい場合は、先ほどのものを下記に置き換えてもらえれば実装できます。

functions.php

function add_custom_logout_in_admin_bar() {
  global $wp_admin_bar;
  $title = sprintf(
    '<span class="ab-icon"></span><span class="ab-label">%s</span>',
    'ログアウト'
  );
  $wp_admin_bar -> add_menu(array(
    'id' => 'custom-logout',
    'title' => $title,
    'href' => wp_logout_url()
  ));
}
add_action( 'wp_before_admin_bar_render', 'add_custom_logout_in_admin_bar' );

目次へ

10. ログアウト後に任意のページの移動させる

デフォルトではログアウトした際はログイン画面に移動しますが、functions.phpに下記のように記述することでログアウト後に任意のページに移動させることができます。
この場合はログアウト後にトップページに移動する動きになるので、他のページを指定したい場合はhome_url()の部分を変更してください。

functions.php

add_filter( 'logout_redirect', 'custom_logout_redirect' );
function custom_logout_redirect( $redirect_to ) {
  $redirect_to = home_url();
  return $redirect_to;
}

目次へ


以上、WordPressの管理画面をカスタマイズする時に使えるハック Part 5でした。
以下では今回紹介した以外のカスタマイズや便利なプラグインなど、当ブログで書いているWordPressの管理画面に関連する内容をひと通りまとめているものになるので、興味がある方はこちらもご覧になってみてください :)

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