web-dev-qa-db-fra.com

Remplacement des icônes dans le tableau de bord

Puis-je remplacer les icônes du tableau de bord WordPress par des icônes personnalisées? J'imagine qu'il doit y avoir un moyen de faire cela avec le functions.php ou, plus idéalement, avec un plugin personnalisé, mais je ne sais pas comment faire ce genre de choses, et Google m'a échoué. En particulier, je cherche à remplacer l’icône Yoast SEO par une icône grise pour correspondre mieux au thème WordPress:

pluginsfunctionsicon
5
JacobTheDev

Oui, vous pouvez remplacer les icônes existantes en les écrasant via CSS.

Assurez-vous de vérifier si l'icône existante est définie via img ou background-image et ajoutez du code CSS pour l'écraser avec l'une des icônes disponibles. Vous pouvez trouver toutes les icônes disponibles et le sélecteur approprié sur le site Web Dashicons .

Pour remplacer l'icône du plug-in Yoast SEO, vous pouvez ajouter cet extrait à votre 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 } ?>

Lectures supplémentaires: Il existe également un didacticiel de Nice en profondeur de Shea Bunge sur Remplacement des icônes du menu Admin WordPress .

UPDATE: Il y aura une icône blanche dans le futur :)

UPDATE 2: implémenté avec v1.6.1

5
Sven

Dashicons à la rescousse! Les dashicons sont la police d'icônes livrée avec WordPress 3.8+ par défaut et alimentant toutes les icônes de menu principales.

Commencez par enregistrer une feuille de style personnalisée pour les styles spécifiques à l'administrateur de votre thème dans 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' );

(Je préfère en fait faire cela dans un mu-plugin personnalisé qui nécessite un extrait légèrement différent, mais je choisirai un style d'administration de thème pour cette réponse.)

La feuille de style make that (cet exemple l'a dans le dossier /css/ du thème actif) et utilisez une règle comme celle-ci pour cibler l'icône avec la bonne valeur de contenu afin d'obtenir l'icône de votre choix (recherchez celles-ci sur le lien de dashicons ci-dessus):

/* 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;
}

Cette icône est l'icône en forme de clé de Dashicons qui ressemble en réalité à l'espace négatif dans l'icône par défaut.

Tandis que la couleur et l'état de survol sont probablement excessifs et vont à l'encontre de la raison pour laquelle vous souhaitez remplacer l'icône en premier lieu, je les inclus simplement pour indiquer que vous pouvez utiliser le CSS pour styliser ces icônes comme vous le souhaitez.

3
mrwweb