web-dev-qa-db-ja.com

ダッシュボードのアイコンを置き換える

WordPress Dashboardのアイコンをカスタムのものに置き換える方法はありますか？これをfunctions.php、もっと理想的にはカスタムビルドのプラグインを使って行う方法があると思いますが、そのようなことをする方法が私にはわかりません。Googleは失敗しました。特に、WordPressのテーマに合わせて、Yoast SEOのアイコンを灰色のアイコンに置き換えることを検討しています。

pluginsfunctionsicon
5
JacobTheDev

はい、既存のアイコンをCSSで上書きすることで置き換えることができます。

既存のアイコンがimgまたはbackground-imageで設定されているかどうかを確認し、CSSを追加して使用可能なアイコンの1つで上書きするようにしてください。 Dashicons Webサイト で、利用可能なすべてのアイコンと適切なセレクタを見つけることができます。

Yoast SEO Pluginのアイコンを置き換えるには、このスニペットをfunctions.phpに追加します。

<?php
add_action( 'admin_head', 'replace_yoast_admin_menu_icon' );
function replace_yoast_admin_menu_icon() {
?>

<style type="text/css">
#adminmenu #toplevel_page_wpseo_dashboard div.wp-menu-image img {
  display: none;
}
#adminmenu #toplevel_page_wpseo_dashboard div.wp-menu-image:before {
  content: '\f108';
}
</style>

<?php } ?>

さらに読むこと： WordPress管理者メニューアイコンの置き換えについて /についてShea Bungeからの深みのあるチュートリアルもあります。

更新日： 将来的に白いアイコンがあるでしょう :)

アップデート2： v1.6.1 で実装

5
Sven

Dashicons 助けに！ダッシュは、デフォルトでWordPress 3.8以降に同梱されているアイコンフォントで、すべてのコアメニューアイコンに使用されています。

テーマの管理者固有のスタイルのカスタムスタイルシートをfunctions.phpに登録することから始めます。

// Admin styles
function wpse134414_admin_styles() { 
    wp_enqueue_style( 'wpse134414_admin_styles_custom_admin_styles', get_template_directory_uri() . '/css/wpse134414_admin_styles.css' , false, '1.0' );
}
add_action( 'admin_enqueue_scripts', 'wpse134414_admin_styles_admin_styles' );

（実際には、これとは少し異なるスニペットが必要なカスタムのmu-pluginでこれを行うことを好みますが、この回答にはテーマ管理者スタイルを使用します。）

そのスタイルシートを作成する - この例ではアクティブテーマの/css/フォルダにあります - そして正しいコンテンツ値を持つアイコンをターゲットにするためにこのようなルールを使います（上のそのダッシュリンクでこれらを見つけます）

/* Better Yoast SEO Admin Icon */
/* hide the default icon */
#toplevel_page_wpseo_dashboard .wp-menu-image img {
    display: none;
}
/* add the new dashicon */
#adminmenu #toplevel_page_wpseo_dashboard div.wp-menu-image:before {
    content: "\f107";

/* style the icon with CSS to make it re-yoasty */
    color: #ef8e02;
    opacity: 0.7;
}
#adminmenu #toplevel_page_wpseo_dashboard a:hover div.wp-menu-image:before {
    opacity: 1;
}

そのアイコンは、Dashiconsのレンチアイコンで、デフォルトアイコンの負のスペースのように見えます。

色とホバーの状態はおそらくやり過ぎで、実際にアイコンを置き換える必要があるという理由に実際には反抗しますが、これらのアイコンをスタイルするのにCSSを使用できることを指摘するためにそれらを含めます。

3
mrwweb