0%

Programmingプログラミングナレッジ

Posted:2019.10.25

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

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管理画面の投稿記事一覧をカスタマイズする

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】