Les dashicons sont un ensemble intégré d’icônes de polices dans WordPress qui ont été introduits dans WordPress 3.8 lors de la refonte massive de l’interface utilisateur principale et sont utilisés par défaut pour les différents liens de la barre d’administration de gauche. Ces icônes, alors qu’elles ont été conçues 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 lors de la conception de thèmes frontaux si vous le souhaitez. Le meilleur de tous, c’est très facile!
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 des 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 portefeuille. 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 correspondront à l’interface utilisateur WP par défaut et auront fière allure.
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, balise, auteur) ainsi que des icônes d’en-tête telles que les icônes d’utilisateur, de recherche et de boutique. Alors que l’icône de police la plus utilisée et la plus populaire est PoliceAwesome 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 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 au fichier functions.php de votre thème pour charger les Dashicons sur le front-end (insérez 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 est dit « menu » à l’icône que vous souhaitez utiliser. Ce code HTML peut être collé n’importe où dans le thème où vous souhaitez afficher une icône. 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 que vous souhaitez lui permettre d’insérer plus facilement des icônes sur le site afin qu’il n’ait pas à s’embarrasser de HTML. Vous trouverez ci-dessous 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 code court :
[dashicon icon="chart-pie"]Noter: 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 directement 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 provoqueront un léger « flash ».
