こんにちは、Web制作フリーランスのママです。
ばぶみカスタム投稿のメニューアイコンって変更できないの？
このような疑問を持っている人も多いはず。
そこで今回は作成したカスタム投稿のメニューアイコンの変更手順をお伝えします。
ママ
- 業界未経験からフリーランスでWeb制作を行う
- 4社の制作会社と業務委託
- 学習中は1人を自宅保育、現在は2人の子どもを自宅保育しながら在宅でお仕事
目次
変更するメリット
カスタム投稿を作成すると通常はこのようなアイコンになると思います。
それを下の画像のように変更することで直感的でわかりやすくなります。
メニュー名に沿ったアイコンに変更することで、カスタム投稿が複数ある場合は特に探しやすくなるのでおすすめです。
ママクライアントにとっても、使いやすい管理画面になりますね
アイコン変更手順
STEP
functions.phpファイルに記述
// 管理画面メニューアイコン変更
function my_dashboard_menu_styles() {
?>
<style>
#dashboard_right_now .〇〇-count:before { content: "\△△"; }
#adminmenu #menu-posts-〇〇 div.wp-menu-image:before { content: "\△△"; }
</style>
<?php
}
add_action( 'admin_print_styles', 'my_dashboard_menu_styles' );STEP
〇〇の部分を変更したいメニューのスラッグに変更
上のコードの「〇〇」2箇所に作成したカスタム投稿のスラッグをいれます。
例えばスラッグが「menu」の場合はこうなります。
function my_dashboard_menu_styles() {
?>
<style>
#dashboard_right_now .menu-count:before { content: "\△△"; }
#adminmenu #menu-posts-menu div.wp-menu-image:before { content: "\△△"; }
</style>
<?php
}
add_action( 'admin_print_styles', 'my_dashboard_menu_styles' );
STEP
管理画面をリロード
管理画面に戻り、リロードするとアイコンが反映されます。
ママこのコードをスニペット登録し、アイコン一覧をブクマしておけば作業がスムーズになるのでおすすめです♩
複数変更する場合
function my_dashboard_menu_styles() {
?>
<style>
#dashboard_right_now .○○-count:before { content: "\△△"; }
#adminmenu #menu-posts-○○ div.wp-menu-image:before { content: "\△△"; }
#dashboard_right_now .□□-count:before { content: "\◎◎"; }
#adminmenu #menu-posts-□□ div.wp-menu-image:before { content: "\◎◎"; }
</style>
<?php
}
add_action( 'admin_print_styles', 'my_dashboard_menu_styles' );このように下に増やして記述すれば複数のメニューアイコンが変更できます。
まとめ
今回はカスタム投稿メニューのアイコン変更について解説しました。
アイコンを変更することでわかりやすく、使いやすい管理画面になります。
少しの手間でクライアントに喜ばれる管理画面になるのでぜひ取り入れてみてください。
