WordPress かなり手軽なクライアントに納品する際の管理画面カスタマイズ

WordPressでウェブサイトを構築し、クライアント様に納品する際の、ありがちな悩み…。

「管理画面をどのようにカスタマイズしようか…。」

管理画面がデフォルトのままだと、メニュー項目が多すぎるため、一見してどこに何があるのか非常にわかりづらいです。

技術者ならともかく、あまりWordpressに慣れていないクライアント様の立場からしたら、気が重くなってしまいます。

やはり納品時には、ある程度管理画面をカスタマイズするほうがよいでしょう。

本稿では、手軽にできて後の案件にも使いまわせる、比較的あっさりめなカスタマイズ手段を紹介します。

簡易的な管理画面カスタマイズ：メニュー項目を少し見にくくする

完成図

下記スクリーンショットの左側をご覧ください。

やっていることは非常に単純で、管理画面内のあまりクライアントに触れてほしくないメニュー項目を見にくくしています。
文字サイズを小さくし、文字色を薄くしているだけです。

補足ですが、メニュー項目を「削除」してしまうと、逆にWordPressの知識が多少あるクライアントが困ってしまいます。
あくまでも見にくくしているだけで、クリックはできるようにしてあります。

functions.phpに追記

以下やり方を解説。functions.phpに下記を追記しましょう。

function enqueue_admin_style_script(){
 wp_enqueue_style('admin-style',get_template_directory_uri().'/admin/style.css');
}
add_action('admin_enqueue_scripts','enqueue_admin_style_script');

管理画面カスタマイズ用のスタイルシートを用意

テーマファイルの「admin」フォルダ内に「style.css」を用意。ここで文字装飾を変えてやればOK。

中身は下記のようにしてあります。
利用しているプラグイン次第でメニュー項目は増えるので、その際は管理画面内のソースコードを調査しつつ追記しましょう。

#adminmenuwrap ul#adminmenu #menu-dashboard a,
#adminmenuwrap ul#adminmenu #menu-media a,
#adminmenuwrap ul#adminmenu #menu-links a,
#adminmenuwrap ul#adminmenu #menu-comments a,
#adminmenuwrap ul#adminmenu #menu-appearance a,
#adminmenuwrap ul#adminmenu #menu-plugins a,
#adminmenuwrap ul#adminmenu #menu-users a,
#adminmenuwrap ul#adminmenu #menu-tools a,
#adminmenuwrap ul#adminmenu #menu-settings a {
 font-size: 90% !important;
 color: rgba(255,255,255,0.5) !important;
}
#adminmenuwrap ul#adminmenu #menu-dashboard .dashicons-before::before,
#adminmenuwrap ul#adminmenu #menu-media .dashicons-before::before,
#adminmenuwrap ul#adminmenu #menu-links .dashicons-before::before,
#adminmenuwrap ul#adminmenu #menu-comments .dashicons-before::before,
#adminmenuwrap ul#adminmenu #menu-appearance .dashicons-before::before,
#adminmenuwrap ul#adminmenu #menu-plugins .dashicons-before::before,
#adminmenuwrap ul#adminmenu #menu-users .dashicons-before::before,
#adminmenuwrap ul#adminmenu #menu-tools .dashicons-before::before,
#adminmenuwrap ul#adminmenu #menu-settings .dashicons-before::before {
 color: rgba(255,255,255,0.5) !important;
 -webkit-transform: scale(0.75, 0.75);
 transform: scale(0.75, 0.75)
}

まとめ

以上で管理画面内のカスタマイズは完了。
やや不格好な気もしますが…
あまりにも手軽ではありますが、これくらいがちょうどよいのではと感じています。