WordPressのユーザー管理画面で表示データ項目を一部非表示にする実装方法(jQuery)
みなさんこんにちは！エンジニアの高澤です！
今回はWordPressのユーザー管理画面で表示データ項目を一部非表示にする実装方法について解説していきたいと思います。
今回の内容もまたマニアックな内容になりますが、WordPressで多数のユーザーアカウントを設定していて大人数で管理している場合は、そのユーザーアカウントによっては閲覧させたくない、もしくは項目が邪魔で表示させておく必要がないなどといったことがあるかと思います。
そんな時にお役立ていただけるのが今回の内容なので、よろしければぜひお仕事で当記事の内容をご利用いただけましたら幸いです。
今回実装する内容
まず初めに今回実装する内容についてご説明しておきたいと思います。
今回実装する内容はタイトルでもあった通り「ユーザー管理画面で表示データ項目を一部非表示にする」ことです。
具体的には下図のデータ項目をいずれか任意で非表示にするという実装になります。
当記事のサンプルコードではjQueryとPHPを使用し、コードベースで表示・非表示をカスタマイズしていきます。
実装する方法
それでは早速実装する方法について解説していきたいと思います。
まずは基本のコードをご紹介いたします。
以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
// ユーザープロフィール画面の特定の項目を非表示にするスクリプトを生成し、必要に応じてエンキューする関数
function user_profile_hide_script( $hook ) {
// スクリプトを heredoc 構文を用いて生成
$script = <<<SCRIPT
jQuery(function($) {
// ユーザープロフィール画面の特定の項目を非表示にする
jQuery('#your-profile .user-rich-editing-wrap').hide(); // ビジュアルエディター
jQuery('#your-profile .user-syntax-highlighting-wrap').hide(); // シンタックスハイライト
jQuery('#your-profile .user-admin-color-wrap').hide(); // 管理画面の配色
jQuery('#your-profile .user-comment-shortcuts-wrap').hide(); // キーボードショートカット
jQuery('#your-profile .show-admin-bar').hide(); // ツールバー
jQuery('#your-profile .user-language-wrap').hide(); // 言語
jQuery('#your-profile .user-url-wrap').hide(); // サイト
jQuery('#your-profile .user-aim-wrap').hide(); // AIM
jQuery('#your-profile .user-yim-wrap').hide(); // Yahoo IM
jQuery('#your-profile .user-jabber-wrap').hide(); // Jabber / Google Talk
jQuery('#your-profile .user-googleplus-wrap').hide(); // Google+
jQuery('#your-profile .user-description-wrap').hide(); // プロフィール情報
jQuery('#your-profile .user-profile-picture').hide(); // プロフィール写真
jQuery('#your-profile .user-sessions-wrap').hide(); // セッション
jQuery('#your-profile .application-passwords').hide(); // アプリケーションパスワード
// その他微調整
jQuery('#your-profile .user-role-wrap').hide(); // 権限グループ
jQuery('#your-profile .user-nickname-wrap').hide(); // ニックネーム (必須)
jQuery('#your-profile .user-display-name-wrap').hide(); // ブログ上の表示名
jQuery('#your-profile .user-pass1-wrap').hide(); // アカウント管理「新しいパスワード、パスワードのリセット」
jQuery('#your-profile .user-pass2-wrap').hide(); // アカウント管理「新しいパスワード、パスワードのリセット」
jQuery('#your-profile .user-generate-reset-link-wrap').hide(); // アカウント管理「新しいパスワード、パスワードのリセット」
jQuery('#your-profile h2').hide(); // h2非表示
jQuery('#your-profile h3').hide(); // h3非表示
// その他の特定の項目を非表示にする場合は、ここに追加
// ...
});
SCRIPT;
// 生成したスクリプトを jquery-core スクリプトにインラインで追加する
wp_add_inline_script( 'jquery-core', $script );
}
// 管理画面のスクリプトがエンキューされるときに、ユーザープロフィール画面の特定の項目を非表示にするスクリプトをエンキューするアクションフックを追加
add_action( 'admin_enqueue_scripts', 'user_profile_hide_script' );ペーストして保存していただき、管理画面ページを更新していただくと各項目が非表示になったことが確認できるかと思います。
もし「この項目は表示させておきたいな〜」というものがありましたら、コード中の対象の行をコメントアウトもしくは削除していただき、ご自身のサイトに適した形でカスタマイズしていただければと思います。
ユーザーごとにカスタムフィールドで表示・非表示を制御する方法
次は基本のコードをもとに「ユーザーごとにカスタムフィールドで表示・非表示を制御する方法」について解説いたします。
先ほどのコードでは複数のユーザーがあればすべてのユーザーに対して適用されて項目が非表示になり、閲覧したくてもできない管理者ユーザーが現れてしまう可能性があります。
その場合に有効なのが、ユーザーに設定したカスタムフィールドをもとに条件分岐させて表示・非表示のカスタマイズすることです。
ここではカスタムフィールドのデータ名は「author_unhide」にして、データタイプは「チェックボックス」にします。
カスタムフィールドの設定はadvanced custom fieldsプラグインかsmart custom fieldsプラグインなどを利用して設定してください。
下準備ができたら、以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
// ユーザープロフィール画面の特定の項目を非表示にするスクリプトを生成し、必要に応じてエンキューする関数
function user_profile_hide_script( $hook ) {
// 現在のユーザーのIDを取得
$user_id = wp_get_current_user()->ID;
// ユーザーメタ 'author_unhide' の値を取得し、その値がある場合のみスクリプトを生成・エンキューする
if(get_user_meta($user_id,'author_unhide',true)):
// スクリプトを heredoc 構文を用いて生成
$script = <<<SCRIPT
jQuery(function($) {
// ユーザープロフィール画面の特定の項目を非表示にする
jQuery('#your-profile .user-rich-editing-wrap').hide(); // ビジュアルエディター
jQuery('#your-profile .user-syntax-highlighting-wrap').hide(); // シンタックスハイライト
jQuery('#your-profile .user-admin-color-wrap').hide(); // 管理画面の配色
jQuery('#your-profile .user-comment-shortcuts-wrap').hide(); // キーボードショートカット
jQuery('#your-profile .show-admin-bar').hide(); // ツールバー
jQuery('#your-profile .user-language-wrap').hide(); // 言語
jQuery('#your-profile .user-url-wrap').hide(); // サイト
jQuery('#your-profile .user-aim-wrap').hide(); // AIM
jQuery('#your-profile .user-yim-wrap').hide(); // Yahoo IM
jQuery('#your-profile .user-jabber-wrap').hide(); // Jabber / Google Talk
jQuery('#your-profile .user-googleplus-wrap').hide(); // Google+
jQuery('#your-profile .user-description-wrap').hide(); // プロフィール情報
jQuery('#your-profile .user-profile-picture').hide(); // プロフィール写真
jQuery('#your-profile .user-sessions-wrap').hide(); // セッション
jQuery('#your-profile .application-passwords').hide(); // アプリケーションパスワード
// その他微調整
jQuery('#your-profile .user-role-wrap').hide(); // 権限グループ
jQuery('#your-profile .user-nickname-wrap').hide(); // ニックネーム (必須)
jQuery('#your-profile .user-display-name-wrap').hide(); // ブログ上の表示名
jQuery('#your-profile .user-pass1-wrap').hide(); // アカウント管理「新しいパスワード、パスワードのリセット」
jQuery('#your-profile .user-pass2-wrap').hide(); // アカウント管理「新しいパスワード、パスワードのリセット」
jQuery('#your-profile .user-generate-reset-link-wrap').hide(); // アカウント管理「新しいパスワード、パスワードのリセット」
jQuery('#your-profile h2').hide(); // h2非表示
jQuery('#your-profile h3').hide(); // h3非表示
// その他の特定の項目を非表示にする場合は、ここに追加
// ...
});
SCRIPT;
// 生成したスクリプトを jquery-core スクリプトにインラインで追加する
wp_add_inline_script( 'jquery-core', $script );
endif;
}
// 管理画面のスクリプトがエンキューされるときに、ユーザープロフィール画面の特定の項目を非表示にするスクリプトをエンキューするアクションフックを追加
add_action( 'admin_enqueue_scripts', 'user_profile_hide_script' );
ペーストして保存していただき、管理画面ページを更新していただくと、ユーザーごとの管理画面にチェクボックスが表示され、そのチェックの有無で表示・非表示を制御できるようになったことが確認できるかと思います。
まだまだカスタマイズ内容は豊富にある
今回はユーザーに設定したカスタムフィールドをもとに条件分岐させて表示・非表示のカスタマイズを行いましたが、まだまだカスタマイズの余地はあります。
例えばシンプルにユーザー権限ごとに条件分岐させて権限で表示の有無を実装したり、また今回のカスタムフィールドと権限を組み合わせてより機能を高度にさせることもできます。
まだまだアレンジは可能かと思いますので、よろしければぜひお試しください。
まとめ
WordPressのユーザー管理画面で表示データ項目を一部非表示にする実装方法についての解説は以上になります。
WordPressで多数のユーザーアカウントを設定していて大人数で管理している場合は、ユーザーアカウントによっては閲覧させたくないなどの問題が発生する可能性があるかと思います。
そんな時に解決に貢献できるのが今回の内容と思っておりますので、よろしければぜひお仕事などで当記事の内容をお役立ていただけましたら幸いです。
UMENOKI編集部 高澤 翔汰
お気軽に皆さんのご要望をお聞かせください！
どんなに些細なことでも構いません！よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに！」といったようなご要望等をお気軽にお聞かせください！今後のサービス改善にお役立てさせていただきます！
例1）Reactの技術記事を書いてほしい！
例2）WordPressの使い方とかを初心者向けに解説してほしい！...など
