WordPress 2019.10.25

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

Tags： PHP,WordPress

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' );

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

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

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

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

add_filter( 'manage_posts_columns', 'add_posts_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}_columns', 'FUNCTION_NAME' );
add_action( 'manage_{POST_TYPE}_custom_column', 'FUNCTION_NAME', 10, 2 );

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

（参考にさせて頂いたサイト）
関数リファレンス/remove menu page
関数リファレンス/remove post type support
WordPressのログイン画面をカスタマイズしてデザインを変更してみよう
 WordPress管理画面の投稿記事一覧をカスタマイズする