Wordpress 「Dashicons」を使用して管理画面メニューの変更方法

###前提・実現したいこと
Wordpressの管理画面で、
「WooCommerce」の左メニューアイコンの
変更を行っております。

他の管理画面左メニューは（Dashiconsを使用して）
アイコンの変更はできます。

しかし「WooCommerce」のメニューのアイコンだけは
変更できない状態です。

Dashiconsを使用して、アイコンの変更方法を
教えていただけないでしょうか。

###該当のソースコード
以下のソースを使用しています。

function change_admin_menu_icons() {
  ?>
  <style>
    .dashicons-admin-generic:before { content: '\f319';}
  </style>
  <?php
}
add_action( 'admin_head', 'change_admin_menu_icons' );

###補足情報(言語/FW/ツール等のバージョンなど)

WordPress 4.9.1
WooCommerce 3.2.6

よろしくお願いいたいします。

行動規範の内容に同意します

回答1件

ベストアンサー

通常であれば

function change_admin_menu_icons() {
  ?>
  <style>
    #adminmenu #toplevel_page_woocommerce .menu-icon-generic div.wp-menu-image::before {content: '\f319';}
  </style>
  <?php
}
add_action( 'admin_head', 'change_admin_menu_icons' );

こんな感じで表示されるんでしょうけど\f319がWooCommerceで独自に読み込んでいるSVGファイルに存在しないので表示できません。

Dashiconsを使うのならWooCommerceのSVGファイルを読み込まないようにする必要があります。

function remove_woocommerce_menu_css() {
	wp_dequeue_style( 'woocommerce_admin_menu_styles' );
}
add_action( 'admin_print_styles', 'remove_woocommerce_menu_css' )

これでDashiconsが使えるようになります。

最終的には

function change_admin_menu_icons() {
  ?>
  <style>
    #toplevel_page_woocommerce .wp-menu-image::before {content: '\f319';}
  </style>
  <?php
}
add_action( 'admin_head', 'change_admin_menu_icons' );

これでいいはずです。

尚、WooCommerceで使えるアイコンは以下です。

???: \e20
virtual: \e000
downloadable: \e001
grouped: \e002
variable: \e003
contract: \e004
expand:  \e005
simple: \e006
plus: \e007
right: \e008
up: \e009
down: \e00a
left: \e00b
image: \e00c
link: \e00d
calendar: \e00e
processing: \e00f
view: \e010
status-processing: \e011
status-pending: \e012
status-cancelled: \e013
status-refunded: \e014
status-completed: \e015
status-failed: \e016
check: \e017
query: \e018
truck-1: \e019
truck-2: \e01a
globe: \e01b
gear: \e01c
cart: \e01d
card: \e01e
stats: \e01f
star-full: \e020
star-empty: \e021
up-down: \e022
reports: \e023
search: \e024
search-2: \e025
user2: \e026
windows: \e027
note: \e028
east: \e029
north: \e02a
attributes: \e02b
inventory: \e02c
mail: \e02d
south: \e02e
west: \e02f
share: \e030
refresh: \e031
navigation: \e032
on-hold: \e033
external: \e034
expand-2: \e035
contract-2: \e036
phone: \e037
user: \e038
status: \e039
user-fill: \e03a
phone-fill: \e03b
status-fill: \e03c
woo: \e03d
coupon: \e600
limit: \e601
restricted: \e602
edit: \e603
ccv: \e604
storefront: \e900

投稿2017/12/24 03:51