wordpress-dashicons

WordPress 3.8 s’est dotée d’une nouvelle interface d’administration avec l’utilisation d’une police d’icônes afin de remplacer les images et donc gagner en performances. Pourquoi ne pas l’utiliser pour les icônes de nos types de contenu ou directement dans votre thème comme je le fais sur WordPress Channel ?

2 méthodes existent pour utiliser les dashicons de WordPress : en utilisant du CSS avec le pseudo élément :before ou :after ou directement en HTML. Une excellente ressource recense les différents icônes inclues dans la police et fournit les codes à utiliser.

Attention, ce tutoriel est réservé à des utilisateurs avertis.

#1 – Pour vos thèmes et plugins

À la différence du back-office, la police dashicons n’est pas intégrée dans le front-office ce qui est tout à fait logique. Pour l’utiliser, il suffit donc de la charger comme n’importe quelle feuille de styles. Il convient d’adapter ces lignes de code avec votre thème pour éviter de doubler le wp_enqueue_scripts.

Le plus souvent, il convient d’éditer le fichier functions.php mais pas forcément si le thème repose sur un framework. Dans ce cas, il vous faudra creuser un peu.

function wpc_dashicons() {
wp_enqueue_style('dashicons');
}

add_action('wp_enqueue_scripts', 'wpc_dashicons');

Ensuite, à l’aide des outils de développement de votre navigateur – Firebug sous Mozilla Firefox par exemple, repérez les classes ou les ID à modifier dans la feuille de styles CSS. Rajoutez :before pour placer du contenu avant ou :after pour le placer après.

Voici un exemple en place pour l’icône symbolisant un utilisateur sur la page d’accueil dans les métas d’un billet :

span.author:before {
    content: "\f110";
    font-family: dashicons;
}

Le principe n’est guère très compliqué : obtenez le code CSS via le site ressource puis ajoutez dashicons comme font-family.

Faites de même pour les autres éléments. Évidemment, vous pouvez spécifier des propriétés supplémentaires comme une taille, une couleur ou autre. C’est tout l’avantage d’utiliser des polices personnalisées !

#2 – Dans les custom post types

Dans un précédent tutoriel qui commence à dater mais qui reste valable pour les versions de WordPress antérieures à la 3.8, je vous indiquais comment ajouter des icônes pour vos types de contenu personnalisé. Idéal pour donner un aspect professionnel à votre back-office !

Depuis la 3.8, le recours à des icônes de couleurs casse l’harmonie visuelle à mon sens. Si vous trouvez votre bonheur dans la police dashicons alors utilisez-là en modifiant le code qui génère le type de contenu comme le montre cet exemple :

function cpt_ntp_slider() {
    $labels = array(
        'name'                => _x( 'Diapositives', 'Post Type General Name', 'ntp_framework' ),
        'singular_name'       => _x( 'Diapositive', 'Post Type Singular Name', 'ntp_framework' ),
        'menu_name'           => __( 'Diapositives', 'ntp_framework' ),
        'parent_item_colon'   => __( 'Diapositive parente :', 'ntp_framework' ),
        'all_items'           => __( 'Toutes les diapositives', 'ntp_framework' ),
        'view_item'           => __( 'Voir la diapositive', 'ntp_framework' ),
        'add_new_item'        => __( 'Ajouter une diapositive', 'ntp_framework' ),
        'add_new'             => __( 'Nouvelle diapositive', 'ntp_framework' ),
        'edit_item'           => __( 'Editer une diapositive', 'ntp_framework' ),
        'update_item'         => __( 'Mettre à jour', 'ntp_framework' ),
        'search_items'        => __( 'Rechercher des diapositives', 'ntp_framework' ),
        'not_found'           => __( 'Aucune diapositive trouvé', 'ntp_framework' ),
        'not_found_in_trash'  => __( 'Aucune diapositive dans la corbeille', 'ntp_framework' ),
    );

    $args = array(
        'label'               => __( 'diapositive', 'ntp_framework' ),
        'description'         => __( 'Les diapositives du site.', 'ntp_framework' ),
        'labels'              => $labels,
        'supports'            => array( 'title', 'editor', 'revisions', 'custom-fields', 'thumbnail'),
        'hierarchical'        => false,
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_nav_menus'   => false,
        'show_in_admin_bar'   => true,
        'menu_position'       => 20,
        'menu_icon'           => 'dashicons-images-alt',
        'can_export'          => true,
        'has_archive'         => false,
        'exclude_from_search' => true,
        'publicly_queryable'  => true,
        'rewrite'             => false,
        'capability_type'     => 'page',
    );

    register_post_type( 'diaporama', $args );
}

add_action( 'init', 'cpt_ntp_slider', 0 );

Notez la présence du paramètre menu_icon.

Le principe est fort simple : indiquez simplement la valeur correspond à la classe CSS obtenue en cliquant sur HTML à partir du lien ressource. Si vous cliquez sur l’icône WordPress dans la liste et que vous faites Copy HTML alors vous obtenez ce code.

Capture d'écran - Code HTML dashicons
Copie de l’icône WordPress via la police dashicons

Il vous suffit de copier / coller dashicons-wordpress-alt comme valeur de menu_icon.

Sauvegardez le fichier puis retourner dans le back-office pour admirer le résultat : vos icônes prennent la même apparence que les autres éléments du menu.

Exemple d'utilisation des dashicons sous WordPress
Exemple d’utilisation des dashicons sous WordPress

Le recours à une police comme dashicons est un bon moyen d’éviter le chargement d’images supplémentaires et de s’intégrer au plus près de l’interface de WordPress.

10 commentaires

  1. Génial ! Merci pour l’astuce ! Mais dis moi, si on utilise ces icônes dans un thème qui lui même est utilisé dans une version de WordPress inférieur à 3.8, que se passe-t-il ?

  2. Bonjour,
    Pour ma part j’utilise un autre thème mais avec le même principe d’icônes.Mon souci est que je n’arrive pas a ajouter une icône devant le titre d’un nouveau widget.
    Exemple,à l’aide de la boite texte je crée un widget biographie,j’ai bien mon titre mais pas d’icône?
    Avez-vous une piste ou la solution?
    merci

    Laisser un commentaire