Les dashicons sont un ensemble d’icônes de polices intégré dans WordPress qui ont été introduits dans WordPress 3.8 lors de la refonte massive de l’interface utilisateur du backend et sont par défaut utilisés pour les différents liens sur la barre d’administration de gauche. Ces icônes, bien qu’elles aient été construites pour le noyau, peuvent être utilisées dans vos propres plugins et thèmes personnalisés, non seulement lors de la définition de types de publication personnalisés ou de la création de panneaux d’administration personnalisés, mais également sur la conception de thèmes frontaux si vous le souhaitez. Mieux encore, c’est très simple!

Utilisation de Dashicons pour les types de publication personnalisés

Lorsque vous enregistrez un nouveau type de publication personnalisé dans WordPress, tout ce que vous avez à faire est de définir le menu_icon argument égal au nom de classe CSS du Dashicon que vous souhaitez utiliser et cette icône sera définie comme l’icône affichée sur le côté gauche de votre nom de type de publication personnalisé dans le panneau d’administration WordPress. Visitez simplement le Page de destination Dashicons et cliquez sur n’importe quelle icône que vous souhaitez utiliser et vous verrez le nom de la classe en haut à côté de l’icône afin que vous puissiez le copier et le coller.

Exemple:

// Register a new custom post type named Portfolio
register_post_type( 'portfolio', array(
    'public' => true,
    'menu_icon' => 'dashicons-portfolio',
    'label' => __( 'Portfolio', 'local' ),
);

Capture d’écran:

Vous trouverez ci-dessous une capture d’écran montrant à quoi ressemblerait l’icône Dashicon pour le type de publication de portfolio. Je ne sais pas si vous vous en souvenez, mais avant Dashicons, vous deviez définir une URL d’image personnalisée pour votre icône de type de publication et lorsque vous utilisiez de nombreux plugins sur le site, les icônes ne correspondaient souvent pas et l’administrateur avait l’air plutôt mauvais. Maintenant, vos icônes de type de publication correspondent à l’interface utilisateur WP par défaut et ont l’air bien.

Utilisation de Dashicons sur la conception de thème Front-End

De nos jours, de nombreux thèmes utilisent des icônes pour le front-end pour des éléments tels que la méta de publication (date, catégorie, tag, auteur) ainsi que des icônes d’en-tête telles que les icônes d’utilisateur, de recherche et de magasin. Alors que l’icône de police la plus utilisée et la plus populaire est FontAwesome et cela fonctionne très bien pour la plupart des projets, c’est aussi un très grand jeu d’icônes comprenant de nombreuses icônes que vous n’utiliseriez probablement jamais; vous pouvez utiliser un site Web de générateur de polices tel que Fontello pour créer une feuille de style contenant uniquement les icônes dont vous avez besoin, mais une autre alternative consiste à utiliser Dashicons qui est déjà inclus dans votre installation WordPress, tout ce que vous avez à faire est de charger les scripts sur le front-end.

Ajoutez simplement ce qui suit à functions.php de votre thème pour charger des Dashicons sur le front-end (insérer via un thème enfant si vous personnalisez un thème existant et ne créez pas le vôtre).

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'dashicons' );
} );

Vous pouvez maintenant insérer une icône via HTML en tant que telle:

<span class="dashicons dashicons-menu"></span>

Changement simple où il dit «menu» à l’icône que vous souhaitez utiliser. Ce HTML peut être collé n’importe où dans le thème où vous souhaitez qu’une icône s’affiche. Vous pouvez même insérer le code HTML dans vos éléments de menu en collant le code HTML directement dans le champ «étiquette» de votre élément de menu.

Comment créer un shortcode Dashicons

Une autre solution pour utiliser Dashicons sur le front-end serait de créer un shortcode que vous pouvez utiliser n’importe où sur le site. C’est une bonne option si vous créez un site pour un client et souhaitez lui faciliter l’insertion d’icônes sur le site afin qu’il n’ait pas à se soucier du HTML. Voici un exemple de ce à quoi ce code peut ressembler, ajoutez simplement le code à votre fichier functions.php (ou à un autre fichier non-modèle chargé par functions.php)

add_shortcode( 'dashicon', function( $atts ) {
    $atts = shortcode_atts( array(
        'icon' => 'menu',
    ), $atts, 'bartag' );
    if ( ! empty( $atts[ 'icon' ] ) ) {
        return '<span class="dashicons dashicons-' . esc_attr( $atts[ 'icon' ] ) . '"></span>';
    }
} );

Utilisation du shortcode:

[dashicon icon="chart-pie"]

Remarque: Le shortcode ci-dessus suppose que vous avez déjà suivi l’étape précédente et chargé la feuille de style Dashicons sur votre front-end. Si vous ne l’avez pas fait, vous pouvez simplement ajouter la fonction «wp_enqueue_style» de l’extrait ci-dessus à droite dans le shortcode et la feuille de style ne sera chargée que lorsqu’une icône est utilisée. Cependant, il est recommandé de charger le script globalement, sinon la feuille de style des dashicons se chargera dans le pied de page de votre site afin que les icônes s’affichent après le rendu de votre site et provoquent un léger «flash».

Share: