• aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. プログラミングの記事
  4. WordPressで管理画面内をカスタマイズするtips

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

  • 2019.10.25
  • プログラミング
  • WordPress
Updated: 2022.08.05
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」のアクションフックで実行します。    
ユーザー権限別に処理を分岐させる
管理者、編集者、投稿者などユーザーの権限ごとに処理を切り分けたい場合などは下記のように「current_user_can()」を使います。引数にユーザー権限の値を入れることで、その権限ごとに処理を分岐させることができます。以下の例では管理画面のメニュー表示を調整するサンプルになります。
if(current_user_can('editor')) {
  // 編集者
  function remove_menus_for_editor() {
    remove_menu_page('tools.php');
  }
  add_action('admin_menu', 'remove_menus_for_editor');
} else if(current_user_can('author')) {
  // 投稿者
  function remove_menus_for_author() {
    remove_menu_page('tools.php');
  }
  add_action('admin_menu', 'remove_menus_for_author');
} else if(current_user_can('contributor')) {
  // 寄稿者
  function remove_menus_for_contributor() {
    remove_menu_page('tools.php');
  }
  add_action('admin_menu', 'remove_menus_for_contributor');
} else if(current_user_can('subscriber')) {
  // 購読者
  function remove_menus_for_subscriber() {
    return;
  }
  add_action('admin_menu', 'remove_menus_for_subscriber');
}
   
ログイン画面のカスタマイズ
管理画面へのログイン画面も、デフォルトのものは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にはいろんなログインアカウントの権限がありますが、それぞれ使える機能は決められているため、編集者ユーザーにこの機能だけ使えるようにしたい、、などのケースもあるかと思います。そんな時には個別のユーザーに対して機能の権限を付与したり削除することができます。「get_role()」でユーザーを取得し、「add_cap()」や「remove_cap()」 で権限の追加や削除を行います。この処理を「admin_init」のフックで実行します。
function custom_editor_role_capabilities() {
  $role = get_role( 'editor' );
  $role->add_cap( 追加する機能 );
  $role->remove_cap( 削除する機能 ); 
}
add_action('admin_init', 'custom_editor_role_capabilities');

function custom_author_role_capabilities() {
  $role = get_role( 'author' );
  $role->add_cap( 追加する機能 );
  $role->remove_cap( 削除する機能 ); 
}
add_action('admin_init', 'custom_author_role_capabilities');
   
  これ以外にも、WordPressの管理画面をカスタマイズする方法は色々とあるようです。またよく使うものは、後日追加していきたいと思います。   (参考にさせて頂いたサイト) 関数リファレンス/remove menu page 関数リファレンス/remove post type support WordPressのログイン画面をカスタマイズしてデザインを変更してみよう WordPress管理画面の投稿記事一覧をカスタマイズする WordPressのカスタムタクソノミーのチェックボックスをラジオボタンにする方法
XでシェアLINEで送るはてブに追加

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

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

Sponsored Link

  • Showcase
  • Startify UI
  • Functional Gradation Generator
  • Coloooors

keyword search

categories

  • WordPress(61)
  • JavaScript(49)
  • Vue.js(48)
  • CSS(46)
  • jQuery(34)
  • Nuxt.js(22)
  • Sass(21)
  • Gulp(17)
  • webpack(16)
  • PHP(14)
  • HTML(14)
  • GSAP(11)
  • React(10)
  • Vite(9)
  • Pug(9)
  • Laravel(8)
  • Cordova(8)
  • Linux(7)
  • Next.js(6)
  • Apache(5)
  • Shopify(4)
  • REST API(4)
  • Node.js(4)
  • Smarty(3)
  • Git(3)
  • JSON(3)
  • その他プログラミング(3)
  • Google Apps API(3)
  • Bootstrap(3)
  • 環境構築・システム(3)
  • TypeScript(2)
  • EJS(2)
  • RMS(2)
  • Docker(2)
  • Instagram API(2)
  • Excel VBA(2)
  • SVG(1)
  • Dart(1)
  • ECカートASP(1)
  • Markdown(1)
  • AMP(1)
  • Nginx(1)
  • XML(1)
  • shellscript(1)
  • Ruby(1)
  • MySQL(1)

recent articles

  • Next.jsとWordPressでヘッドレスCMSのサイトを作成する#6:PWA対応とビルド時のエラー
    read more

    Next.jsとWordPressでヘッドレスCMSのサイトを作成する#6:PWA対応とビルド時のエラー

    2024.12.25/Next.js
  • Next.jsとWordPressでヘッドレスCMSのサイトを作成する#5:アナリティクス・アドセンスの導入とサイトマップ作成
    read more

    Next.jsとWordPressでヘッドレスCMSのサイトを作成する#5:アナリティクス・アドセンスの導入とサイトマップ作成

    2024.08.26/Next.js
  • Next.jsとWordPressでヘッドレスCMSのサイトを作成する#4:静的・動的ルーティングとページ作成
    read more

    Next.jsとWordPressでヘッドレスCMSのサイトを作成する#4:静的・動的ルーティングとページ作成

    2024.07.31/Next.js
  • Next.jsとWordPressでヘッドレスCMSのサイトを作成する#3:メタ情報設定・ファイル最適化・ステート管理
    read more

    Next.jsとWordPressでヘッドレスCMSのサイトを作成する#3:メタ情報設定・ファイル最適化・ステート管理

    2024.06.30/Next.js
  • Next.jsとWordPressでヘッドレスCMSのサイトを作成する#2:コーディング環境の構築
    read more

    Next.jsとWordPressでヘッドレスCMSのサイトを作成する#2:コーディング環境の構築

    2024.05.29/Next.js
  • Next.jsとWordPressでヘッドレスCMSのサイトを作成する#1:インストール・導入
    read more

    Next.jsとWordPressでヘッドレスCMSのサイトを作成する#1:インストール・導入

    2024.04.30/Next.js
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト支援
  • クリエイティブ制作
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact