カスタムアイコンでwp-admin領域のメニューアイコン(WooCommerceなどの外部プラグインから来る)を変更するにはどうすればいいですか? (menu-itemは実際にはpost-type
なので、register_post_type
コマンドがあるはずです).
WooCommerceはこのCSSファイルwoocommerce/assets/css/menu.css
を使ってアイコンのスタイルを設定しています。これは対応するコードです( きれいに印刷された または実際には woocommerce/assets/css/menu.scss
)
#adminmenu #toplevel_page_woocommerce .menu-icon-generic div.wp-menu-image::before {
font-family: 'WooCommerce' !important;
content: '\e03d';
}
そのため、font-family
およびcontent
(およびその他の)プロパティをカスタムアイコンに合うように変更できます。
以下は、アイコンをbackground-image
を使用するように変更してカスタマイズする例です。
// We hook to the `admin_enqueue_scripts` action with a priority of `11`, where
// at this point, the default CSS file should have been loaded. But you can or
// should add the CSS rule to your custom CSS file; just make sure it's loaded
// *after* the default CSS file.
add_action( 'admin_enqueue_scripts', function(){
$css = <<<EOT
#adminmenu #toplevel_page_woocommerce .menu-icon-generic div.wp-menu-image::before {
content: ' ';
background: url('https://png.icons8.com/dusk/2x/e-commerce.png') no-repeat center;
background-size: contain;
}
EOT;
wp_add_inline_style( 'woocommerce_admin_menu_styles', $css );
}, 11 );
注:menu.css
ファイルは WC_Admin_Assets::admin_styles()
に登録およびキューに入れられ、ハンドル/名前はwoocommerce_admin_menu_styles
になります。
カスタム画像を追加するには、このコードを使用できます。元の画像はCSSで設定されているので、それを削除するにはカスタムCSSを追加する必要があります。
add_action("admin_menu", function () {
foreach ($GLOBALS["menu"] as $position => $tab) {
if ("woocommerce" === $tab["2"]) {
$GLOBALS["menu"][$position][6] = "http://server/image.png";
break;
}
}
});