クライアント向けに納品したワードプレスの管理画面を使いやすく完全カスタマイズする方法

WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。

本日は業務メモです。ワードプレスで管理画面をカスタマイズ納品する際の基本方針やファンクションをまとめておきます。ある程度の技術があれば下記内容をチェックするだけで管理画面のカスタマイズ納品ができますのでぜひご活用くださいませ。

なお、下記は初心者さんへ向けた記事ではありませんのでご留意ください。ワードプレスを使った制作では頻繁に行うカスタマイズ方法なので記事としておきます。一部に推奨されない関数も含まれますが管理画面のカスタマイズにあまり予算がかけられない場合には役に立ってくれるはずです。

ただし、覚え書き程度にまとめた内容なので、ある程度は自身で判断ができる知識も必要です。

クライアントへ渡す権限は「管理者 or 編集者 or 投稿者」のどれが最適なのか

クライアントへ渡す権限は「管理者 or 編集者 or 投稿者」のどれが最適なのか

クライアント側でウェブサイトの更新作業を行う際に「管理者権限」を渡してしまうと予期しないトラブルへ発展しやすくなります。理由は「管理者権限」では、投稿ページだけでなく、固定ページや全体の設定など「その他のあらゆる設定がクライアント側で変更できてしまう」のが理由です。

しかし、１つ権限を抑えた「編集者権限」でも色々な操作ができるので適切とはいえません。編集者権限では「ウィジェットの操作」などもできるので、誤操作で「ウィジェットを移動（または削除）してしまう可能性」があります。ワードプレスは色々なテーマが販売されていて、テーマによってどの機能の使用を前提として作られているか異なるので、すべてはテーマの実装状況に合わせて柔軟に制御していくのがベストです。

ちなみに私たちは「投稿者権限」をクライアントへ渡すのが適切だと考えています。投稿者であれば「投稿（主にブログ記事の更新で使用）」や「投稿に対するコメント（コメント欄をオープンにする場合）」または「カスタム投稿タイプ」の作成が可能です。もちろん「投稿者権限」なら、投稿記事の公開設定もできます。ちなみに「寄稿者権限」では公開ができません。このあたりは運営状況によってもベストな権限は変わってきます。

とはいえ、あらかじめ制作会社側で流し込んでいる「コンテンツ（アップロードした画像や作成済みの記事）」を、クライアント（お客様）側で誤って削除される可能性はゼロにしておくべきです。権限を安直に考えて管理者権限を「丸投げしてしまう」のもクライアントには優しくありません。

何より意図もなく「管理者権限」を渡しておき「削除したら知りませんよ」といったスタンスでは、お客様も更新作業をしなくなります。管理者権限で管理画面にアクセスすると膨大な数のメニューが表示されますし、そんな状況で「削除したら知らない」と言われて更新する人の方が珍しいです。

私たちが考える理想の状況は以下です。

クライアント側でコンテンツを誤って削除する可能性がない（自身で作成したコンテンツは自由自在に削除可能）
ログインすると不要なメニューはなく、最低限のメニューが表示されている（誤操作の可能性を極力ゼロに近づける）
作業効率を考えて、ブログ記事の複製はワンタッチで行えるように工夫する（作業効率を考えて機能を渡す）

これらを踏まえて、ざっと制御方法をまとめておきます。

１. ダッシュボードから不要な画面を消す

ダッシュボードには色々なメニューが表示されます。「概要」「アクティビティ」「クイックドラフト」「イベントとニュース」。クライアント側にはほとんど不要ですよね。もし残すとしても記事の公開予定などが表示される「アクティビティ」程度でOKです。

上記を非表示にするためのファンクションが以下です。

//不要なダッシュボードウィジェットを消す
function remove_dashboard_widget() {
	remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' ); // 概要
	remove_meta_box( 'dashboard_activity', 'dashboard', 'normal' ); // アクティビティ
	remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' ); // クイックドラフト
	remove_meta_box( 'dashboard_primary', 'dashboard', 'side' ); // WordPressニュース
} 
add_action('wp_dashboard_setup', 'remove_dashboard_widget' );

もし「アクティビティ」だけを残すなら、remove_meta_box( 'dashboard_activity', 'dashboard', 'normal' ); // アクティビティを１行だけ削除するか、下記のように「remove_〜」の直前にコメントアウト//を書けばOKです。

//不要なダッシュボードウィジェットを消す
function remove_dashboard_widget() {
	remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' ); // 概要
	//remove_meta_box( 'dashboard_activity', 'dashboard', 'normal' ); // アクティビティ
	remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' ); // クイックドラフト
	remove_meta_box( 'dashboard_primary', 'dashboard', 'side' ); // WordPressニュース
} 
add_action('wp_dashboard_setup', 'remove_dashboard_widget' );

以上でダッシュボードがスッキリします。

ダッシュボードがスッキリすると管理画面が見やすくなりますね。「制作会社からのお知らせ」として１つボックスを追加して「外部のxml」を読み込ませて「外部ブログのタイトルが表示されるお知らせボックス」を作って表示させるカスタムなどをするのも良いかもしれませんね。

２. 投稿画面をカスタマイズする

投稿画面を使いやすくカスタマイズするのは大切です。以下のようにテーマによっては「投稿するエディター」以外にも色々なオプションが表示されます。また投稿画面が左右で「二分割」しているのも使いやすいとはいえませんよね。左右に別れていると「カテゴリー」を選び忘れたり、アイキャッチ画像を追加しわすれたりと、クライアントにとっては想像以上のハードルになることを忘れてはなりません。

また、投稿エディター内に追加されている「i」マークは絵文字を挿入するための機能なので問題ありませんが、その「i」マークの右側にあるアイコンは「Slider Revolution」を挿入するためのアイコンです。クライアント側で投稿記事内にスライダーを挿入するシチュエーションはなかなかありませんし、そういった複雑な運用スタイルはそもそも避けるべきでしょう。

投稿画面は「シンプルイズベスト」。余計な機能は一切排除した方が良いです。今回は「Slider Revolution」のアイコンを削除して、その他のオプション項目もなくして、左右にわかれているレイアウトも１行表示にしてしまいましょう。１行表示にすれば入力を忘れる可能性も低くなります。

これらは管理画面内の投稿画面でのみ読み込ませるCSSを追記して削除していきましょう。

function my_admin_style_post_layout() {
	if(get_post_type() === 'post'){
		echo '<style>
		 #id1,#id2,#id3 {display:none;}
		</style>'.PHP_EOL;
	}
}
add_action("admin_print_styles-post.php", "my_admin_style_post_layout");
add_action("admin_print_styles-post-new.php", "my_admin_style_post_layout");

なお、#id1,#id2,#id3 {display:none;}の部分はhtml側のIDを指定してください。ネーミングはテーマ側の指定によって異なります。

参考までに手持ちのテーマの場合のidを入れた例が下記です。

💻SEOに強いWordPressテーマ

⇒ 大人気のワードプレステーマ「賢威」 ※ 2万を超えるお客様がご使用中！

function my_admin_style_post_layout() {
	if(get_post_type() === 'post'){
		echo '<style>
		 #mceu_14,#shortcode_metabox,#mymetabox_revslider_0 {display:none;}
		</style>'.PHP_EOL;
	}
}
add_action("admin_print_styles-post.php", "my_admin_style_post_layout");
add_action("admin_print_styles-post-new.php", "my_admin_style_post_layout");

無事、「i」マーク横のスライダーを差し込むアイコン（リフレッシュマーク）がなくなりましたね。あと、そのほかのオプション表示されていたボックスも非表示になりました。投稿（ブログ記事）を作成するだけなら不要なメニューなので削除して問題ありません。というよりクライアント側での更新を想定しているなら一切の無駄がない状態を目指して納品する姿勢が重要です。邪魔なものはあらかじめ非表示化するのは鉄則です。

では次は、２分割している操作画面を１列表示にしていきましょう。

以下の関数を使います。

add_filter( 'get_user_option_screen_layout_post', 'one_columns_screen_layout1' );
function one_columns_screen_layout1() {
	return 1;
}

無事、一列表示になりました。デフォルトでは「公開」がエディターの下に表示されていますが、最下部へ移動させておくとより「自然な流れ」で更新しやすくなりそうです。操作的にも「タイトル→本文→カテゴリー→タグ→アイキャッチ画像→公開」と進むのでミスもなくなりそうです。

投稿画面はこれでバッチリですね。

３. カスタム投稿タイプの場合

もし投稿画面ではなく「カスタム投稿タイプ（仮にnews）」に対して同様の制御を行う場合は以下です。

function my_admin_style_custom_post_layout($post){
	if( $post->post_type == "news" ){
		 echo '<style>
		 #id1,#id2,#id3 { display:none }
		 </style>'.PHP_EOL;
	}
}
add_action( 'edit_form_top', my_admin_style_custom_post_layout );

２分割している操作画面を１列表示にする方法は下記です。

add_filter( 'get_user_option_screen_layout_news', 'one_columns_screen_layout2' );
function one_columns_screen_layout2() {
	return 1;
}

制御方法は簡単ですね。

４. プロフィール画面の不要な表示を削除する

クライアントにとっては必要以上のプロフィール項目も不要です。管理者権限一人で管理するならすべて必要ですが、もし「投稿者」権限をクライアントへ渡す前提なのであれば「ビジュアルエディター設定や言語」などほとんどが使わない項目ですよね。必要最低限にしましょう。

消すためのファンクションが以下です。

function user_profile_hide_style_css() {
echo '<style>
#your-profile h2,
#your-profile .user-rich-editing-wrap, /* ビジュアルエディター */
#your-profile .user-syntax-highlighting-wrap, /* シンタックスハイライト */
#your-profile .user-admin-color-wrap, /* 管理画面の配色 */
#your-profile .user-comment-shortcuts-wrap, /* キーボードショートカット */
#your-profile .show-admin-bar, /* ツールバー */
#your-profile .user-language-wrap, /* 言語 */
#your-profile .user-first-name-wrap, /* 名 */
#your-profile .user-last-name-wrap, /* 姓 */
#your-profile .user-nickname-wrap, /* ニックネーム */
#your-profile .user-display-name-wrap, /* ブログ上の表示名 */
#your-profile .user-url-wrap, /* サイト */
#your-profile .user-description-wrap, /* プロフィール情報 */
#your-profile .user-twitter-wrap, /* Twitter */
#your-profile .user-facebook-wrap, /* Facebook */
#your-profile .user-linkedin-wrap, /* Linkedin */
#your-profile .user-gplus-wrap, /* Googleplus */
#your-profile .user-profile-picture, /* プロフィール写真 */
#your-profile .user-sessions-wrap /* セッション */ {
display: none;
}
</style>'.PHP_EOL;
}
add_action('admin_print_styles', 'user_profile_hide_style_css');

最低限で抑えるなら「ユーザー名」と「メールアドレス」と「パスワードの再設定ボックス」で十分です。パスワードの次に表示される「セッション」はセキュリティ的には残しておいても良いかもしれませんね。

５. 管理画面内の文言を置き換える

ワードプレスに慣れているユーザーなら問題はありませんが、クライアントによっては「投稿」と聞いてもよくわからない人がいるはずです。そんな時は「投稿」を「ブログ記事」と表記したり、「アイキャッチ」を「サムネイル」と文言を書き換えておけば使いやすさがより向上するでしょう。

add_filter( 'gettext_with_context', 'custom_gettext_with_context_replacement_wording' );
function custom_gettext_with_context_replacement_wording( $translation ) {
	$translation = str_ireplace( 'アイキャッチ', 'サムネイル', $translation );
	$translation = str_ireplace( '投稿', 'ブログ記事', $translation );
	return $translation;
}

もともと「投稿」だった項目が「ブログ記事」へ置き換わりましたね。「アイキャッチ」となっていた文言も「サムネイル」に変わっています。

なお、文言の差し替えには２パターンの書き方が存在しています。詳しくは「コンテキストなし【__()】の場合」はgettextを使って、「コンテキストあり【_x()】の場合」はgettext_with_contextを使って制御していきます。下記のページも入れ替えていきましょう。

まずは変更前の状態をチェック。

変更には下記を使います。さきほどは「gettext_with_context」でしたが、「gettext」の範囲を置き換えていきます。

//管理画面の文言を変更する１
add_filter( 'gettext', 'custom_gettext_replacement_wording' );
function custom_gettext_replacement_wording( $translation ) {
	$translation = str_ireplace( 'Team Members', '従業員の管理', $translation );
	$translation = str_ireplace( 'Add New Team Member', '新たな従業員を追加', $translation );
	$translation = str_ireplace( 'Search 従業員の管理', '従業員を検索', $translation );
	return $translation;
}

置き換えた後の状態がこちら。日本語になるだけで印象がまったく異なりますね。

６. おまけ

投稿者を複数発行する場合は、その他の人がアップロードした画像が「メディア」のなかに表示されると困るシチュエーションがありますよね。そんな時は下記のファンクションを足せば自分自身でアップロードした画像しか表示されなくなります。

//ログイン中のユーザーがアップロードした画像だけを表示させる
function show_only_login_user_image( $where ){
	global $current_user;
	if(is_admin()){
		if(current_user_can('author') ){
			if( isset( $_POST['action'] ) && ( $_POST['action'] == 'query-attachments' ) ){
				$where .= ' AND post_author='.$current_user->data->ID;
			}
		}
	}
	return $where;
}
add_filter( 'posts_where', 'show_only_login_user_image' );

この制御はウェブサイトを更新していくユーザーとの関係性や状況によっても変わってきそうですね。

最後に

では念のために「投稿者権限」でログインした画面をご紹介いたします。最低限のコンテンツが管理できる状態になっていますね。管理画面がこれだけシンプルになればクライアントもスムーズにウェブサイトを更新管理できるでしょう。

ちなみに「投稿者権限」では上記のメニュー以外にも「コメント」「お問い合わせ（Contact form7有効時）」「ツール」などのメニューが表示されてしまいますので、今回は念のために「Admin Menu Editor」プラグインを併用して不必要なメニューは非表示化しています。

何を表示して何を非表示にするかは運営するウェブサイトのコンセプトによっても異なってくるはずです。また、テーマ化する人によっては「ワードプレス標準のカスタムフィールド」を活用せずに「外部プラグイン（ACF：アドバンスカスタムフィールド）」を使ってしまう開発者もいます。

もちろん、外部プラグイン（ACF）ありきのワードプレス構築が間違っているか正しいかはサイトのコンテンツ管理方法によって異なりますが、できる限りワードプレス内の標準機能だけで完結（外部プラグイン制御のカスタムフィールドを使わずワードプレス標準のカスタムフィールドを使う）する設計方法の方が柔軟な設計であることは間違いありません。ワードプレスはブログ管理のシステムですので何が正しいかは賛否両論ありますが一番はクライアント（実際に更新作業を行うお客様）に最適化された設計方法で納品できるのがベストだと思います。参考になれば幸いです。