Ownedmedia ウェブ制作に役立つコンテンツを発信中!

WordPress 2019.10.25

WordPressで管理画面内をカスタマイズするtips

Tags: ,
最終更新日:Update

WordPress案件では、クライアントさんの要望やプロジェクトの要件に合わせて管理画面のカスタマイズをすることもしばしばあります。たまにお願いされたりなどで、つい忘れてしまうこともあるので、比較的良く使うものを備忘録として残しておきたいと思います。

 

また、これらのコードは、すべて「functions.php」に記述する形になるので、テーマを変更した場合には引き継がれないので注意します。

 

サイドメニュー項目の非表示

WordPressの管理画面ではおなじみのサイドメニューですが、使わない項目についてはあっても邪魔なだけです。費用な項目は下記のコードを記述すると非表示にすることができます。

function hidden_menus(){
 remove_menu_page( 'edit.php' ); // デフォルトの「投稿」メニューを非表示
 remove_menu_page( 'upload.php' ); // 「メディア」メニューを非表示
 remove_menu_page( 'edit-comments.php' ); // 「コメント」メニューを非表示
}
add_action( 'admin_menu', 'hidden_menus' );

 

「remove_menu_page()」で引数に取ったメニュー項目を非表示にできます。あとは「admin_menu」のアクションフックで実行するとOKです。

 

固定ページ、投稿ページのデフォルトエディタの非表示

カスタムフィールドがたくさんあって、通常のエディタを使用しない場合には、エディタ自体を非表示にすることでかなり使いやすい投稿画面になります。サイドメニューの時と同じような形で、非表示にすることができる関数が用意されています。

function hidden_post_editor() {
 remove_post_type_support( 'post', 'editor' ); // 投稿ページのエディタを非表示
 remove_post_type_support( 'page', 'editor' ); // 固定ページのエディタを非表示
}
add_action( 'init' , 'hidden_post_editor' );

 

「remove_post_type_support()」では投稿のサポート機能を削除することができます。第一引数には対象の投稿タイプを、第二引数にはサポートを外す機能を指定します。「init」のアクションフックで実行します。

 

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

管理画面へのログイン画面も、デフォルトのものはWordPressのロゴが表示されたグレー背景の画面で味気ない印象がありますよね、、そんなログイン画面もCSSなどを使って自由にカスタマイズすることができます。ちなみにカスタマイズ方法は次のような2パターンあります。

 

1. インラインで記述する場合

ちょっとしたスタイルの調整であれば、PHPの関数内に直接スタイルやスクリプトを記述していきます。これらはheadタグ内に出力されます。「login_enqueue_scripts」のアクションフックで実行します。

function custom_login_inline() { ?>
 <style>
  // ログイン画面のカスタマイズに必要なCSSを記述
 </style>
 <script>
  // ログイン画面のカスタマイズに必要なJavascriptを記述
 </script>
<?php }
add_action( 'login_enqueue_scripts' , 'custom_login_inline' );

 

2. 外部ファイルとして参照する場合

インラインで記述した場合にコードが長くなり、メンテナンス性に欠ける場合には、外部ファイルから参照することもできます。PHPの関数内で「wp_enqueue_style」や「wp_enqueue_script」で外部のCSSやJavascriptを読み込みます。

function custom_login_reference() {
 wp_enqueue_style( 'ハンドル名', get_template_directory_uri() . '/*******.css' );
 wp_enqueue_script( 'ハンドル名', get_template_directory_uri() . '/*******.js' );
}
add_action( 'login_enqueue_scripts', 'custom_login_reference' );

 

 

投稿一覧で特定のカラムを非表示

投稿一覧画面では投稿された記事が表組みで表示されますが、不要なカラム(列)がある場合には、それを非表示にすることもできます。「unset()」でカラムを指定すると非表示になります。このようにデフォルトのカラムを編集する場合には「manage_posts_columns」というフィルターフックで実行します。

function hidden_columns( $columns ) {
 unset( $columns[
  'title' //「タイトル」のカラムを非表示
 ] );
 return $columns;
}
add_filter( 'manage_posts_columns', 'hidden_columns' );

 

 

投稿一覧でカラムを追加し、カスタムフィールドの値を表示させる

投稿一覧の表にデフォルト以外のカラムを追加し、新たな情報を表示させたいこともあります。例えば、投稿に含まれるカスタムフィールドの値などがいい例になるのではないでしょうか。その場合には、まず独自のカラムを追加した上で、投稿が持つカスタムフィールドの値を取得し、その値を追加したカラムに入れていくという形になります。下記の「CUSTOM_FIELD_NAME」には対象となるカスタムフィールドのキーを入れます。

// カラムを新規追加
function add_columns( $columns ) {
 $columns['CUSTOM_FIELD_NAME'] = '表示するカラム名';
 return $columns;
}

// 追加したカラムに投稿に含まれるカスタムフィールドの値を表示
function custom_field_columns( $column_name, $post_id ) {
 if ( $column_name == 'CUSTOM_FIELD_NAME' ) {
  $cf_value = get_post_meta( $post_id , 'CUSTOM_FIELD_NAME' , true );
  echo ( $cf_value ) ? $cf_value : '-';
 }
}

add_filter( 'manage_posts_columns', 'add_columns' );
add_action( 'manage_posts_custom_column', 'custom_field_columns', 10, 2 );

 

カラム名を識別する用の値は任意のもので定義します。そしてカスタムフィールドを表示させるカラムの指定時に、先ほど指定したカラム識別用の値を指定します。ここではカラムの追加時に「manage_posts_columns」のフィルターフックで、カスタムフィールドの値を入れるときに「manage_posts_custom_column」のアクションフックで実行します。

 

上記で紹介しているこの、manage_posts_columnsやmanage_posts_custom_columnですが、デフォルトの投稿タイプに適用されるもので、固定ページや、カスタム投稿の場合には下記のようになります。カスタム投稿は対象の投稿タイプのスラッグに置き換えます。

// 固定ページの場合は
add_filter( 'manage_pages_columns', 'FUNCTION_NAME' );
add_action( 'manage_pages_custom_column', 'FUNCTION_NAME', 10, 2 );

// カスタム投稿の場合は
add_filter( 'manage_{POST_TYPE}_posts_columns', 'FUNCTION_NAME' );
add_action( 'manage_{POST_TYPE}_posts_custom_column', 'FUNCTION_NAME', 10, 2 );

 

 

投稿一覧で1ページあたりの表示数を投稿タイプ別に変更する

管理画面の投稿一覧ページですが、こちらにはステータスに関わらず作成済みの記事がリストとして表示されます。その際に数が多くなるとページネーションが表示されるようになるのですが、このリストに表示される投稿データの数も投稿タイプ別に自由に調整することができます。方法も簡単で下記の処理をfunctions.phpに追記するだけでOKです。

function admin_archive_posts_per_page ($posts_per_page, $post_type) {
  if($post_type == 'post') {
    return 50;
  } else if($post_type == 'blog') {
    return 30;
  } else {
    return 10;
  }
}
add_filter('edit_posts_per_page', 'admin_archive_posts_per_page', 10, 2);

 

「edit_posts_per_page」というフックを使います。コールバック関数の引数に投稿タイプが指定できるようにしておき、その投稿タイプ別に返す値をそれぞれ異なるものにしておきます。この値がページ内の表示件数として扱われるようになります。値を返すフックになるのでフィルターフックのメソッドを使います。

 

カテゴリやカスタム分類のチェックボックスをラジオボタンにする

カテゴリやカスタム分類の階層有りのものでは、デフォルトでチェックボックスとなっており、複数設定できるようになっていますが、運用上、必ず1つだけにしたいという要件もあるかと思います。そんな時にはプラグインで対応する方法もありますが、下記のコードをfunctions.phpに追記するとOKです。

function select_to_radio_taxonomy() {
  ?>
  <script type="text/javascript">
    jQuery(function($){
      $('#taxonomy-[TAXONOMY NAME] input[type=checkbox]').each( function(){
        $(this).replaceWith($(this).clone().attr('type', 'radio'));
      });
    });
  </script>
<?php
}
add_action( 'admin_print_footer_scripts', 'select_to_radio_taxonomy' );

 

カテゴリなどのチェックボックスは、タクソノミー名に「#taxonomy-」のプレフィックスがついたidが設定されており、それを取得してラジオボタンの要素を複製し置き換えるという動的な処理を追加する形になります。これだけでチェックボックスからラジオボタンに切り替えることができます。

 


 

これ以外にも、WordPressの管理画面をカスタマイズする方法は色々とあるようです。またよく使うものは、後日追加していきたいと思います。

 

(参考にさせて頂いたサイト)
関数リファレンス/remove menu page
関数リファレンス/remove post type support
WordPressのログイン画面をカスタマイズしてデザインを変更してみよう
WordPress管理画面の投稿記事一覧をカスタマイズする
WordPressのカスタムタクソノミーのチェックボックスをラジオボタンにする方法

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?