お知らせ
NEWS
【WordPressカスタム】管理画面メニューのアイコン変更
2021.06.28
みなさん、こんにちは。 Mon Webの楠本です。
今回はWordPress(以降WPと記述します)のカスタムについて書いてみようと思います。
WPのサイト制作で一番多い対応であろうというのが、お問い合わせフォーム設置の次にカスタム投稿の設置だと思います。
お客様によってどこを更新したいかは様々です。
なので制作以前のヒアリングでしっかりと仕様を決めて、カスタム投稿を作っていく事が重要になります。
カスタム投稿の作り方については今回は割愛をさせていただきまして、今回はこのカスタム投稿のメニューに表示されているアイコンを分かりやすく変更する方法を記載してみようと思います。
1.なぜアイコンを変更すると良いのか?
今回はアイコン変更という事ですが、デフォルトでカスタム投稿を使用しても問題はありません。
なぜアイコンを変更すると良いのか?
理由として、カスタム投稿は「投稿」の部類に入るのでデフォルトのメニューアイコンは「投稿」と同じアイコンが設定されてしまいます。 なので出来るだけ更新する方が視覚的にも分かりやすくしてあげる方が良いからです。
それを行うことによりアイコンを見るだけで「何を更新する場所なのか?」という事がわかりやすくなります。 UIの向上でお客様にも喜ばれるのではないでしょうか。
2.アイコンの変更方法
では実際に変更の手順を記載していきます。
まずはこちらのサイトにアクセスしてアイコンがどのような種類があるのか確認してみましょう。
https://developer.wordpress.org/resource/dashicons/#images-alt
見ていただくと分かるようにかなり多くの種類が発表されています。 これだけの種類があれば色々なカスタム投稿のメニューアイコンが変更可能であるかと思います。 またアイコンの下に数字が記載されていますが、こちらがそのアイコンを表す数字になります。(FontAwesomeなど使った事がある方は見覚えがあると思います)
次に変更したいアイコンが決まったらfunctions.phpにコードを記述していきます。
今回のソースはしーぼーデザイン様の記事がとても分かりやすくて良かったので参考にさせていただきました。
https://www.seeboo.jp/dashbord_icons/
下記のコードをfunctions.phpに記述します。
1 2 3 4 5 6 7 8 9 |
function my_dashboard_print_styles() { ?> <style> #dashboard_right_now .〇〇〇〇-count:before { content: "\f235"; } #adminmenu #menu-posts-〇〇〇〇 div.wp-menu-image:before { content: "\f235"; } </style> <?php } add_action( 'admin_print_styles', 'my_dashboard_print_styles' ); |
上記のコードの〇〇〇〇の部分を自分が作成したカスタム投稿のメニュー名、\f235の部分は自分が変更したいアイコンの番号を記載します。
記載した後にfunctions.phpをアップロードなど行い更新したら完了になります。
3.最後に
いかがでしたでしょうか?
アイコンが変わっただけでも管理画面の見栄えがかなり変わったと思います。 細かい箇所になりますが、このようなUIを作っていくとお客様にも使いやすい環境になると思うので、積極的に取り入れていってはどうかと思います。
意外に人間の目は文字よりも色や形の視覚情報で認知している事が多いので、今回の変更はとても有効だと思います。
それでは、また次回に!