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」を用意する。ここで文字装飾を変えてやればいい。

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

#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)
}

まとめ

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

ちなみに納品時には、このような管理画面のカスタマイズ処置をしていることをクライアントに伝達するようにしよう。

一覧へ戻る