WordPress Dashicons et comment les utiliser?

dash
Standard

Avec la sortie de WordPress 3.8 son interface d’administration a subit un changement remarquable, l’un des changements phares est l’utilisation d’une police de caractères plutôt que des images pour l’affichage des icônes dans le menu, ce qui a permet de gagner plus de performance, alors pourquoi pas utiliser ces icônes pour nos thèmes, plugins et mêmes nos types de contenu personnalisés (Custom post types).

Thèmes et plugins:

Par défaut la police dahsicons n’est pas intégrée dans la partie publique d’un site WordPress, mais on peux l’utiliser à la demande, il faut juste ajouter une ligne de code dans functions.php du thème (Peut être un autre fichier inclus dans functions.php) pour charger la feuille de style des dashicons comme pour toute une autre feuille de style dans WordPress:

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

Il faut juste faire attention à ne pas avoir plusieurs appels au hook wp_enqeue_scripts, si vous avez déjà un dans votre thème ou plugin, c’est mieux de l’exploiter.

Une autre astuce, c’est l’idéal pour moi, c’est de l’inclure en tant que dépendance

function themename_scripts() {
    wp_enqueue_style( 'themename-style', get_stylesheet_uri(), array( 'dashicons' ), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'themename_scripts' );

Utiliser les icônes:

Pour cela il faut jeter un œil sur cette ressource, toutes les icônes disponibles sont listées plus un outils très pratique pour sélectionner le glyphe qui sera utilisé en tant que icône dans le CSS.

Si voulez ajouter une icône de twitter avant un lien, cliquez sur le glyphe, après cliquer sur le lien « Copy CSS » qui va ouvrir une boite de dialogue qui contient le code CSS nécessaire pour afficher l’icône.

http://melchoyce.github.io/dashicons/

http://melchoyce.github.io/dashicons/

Maintenant vous pouvez afficher l’icône on appliquant le pseudo élément :before (ou :after pour une icône après le texte) , de l’élément concerné par exemple:

.twitter:before {
	font-family: "dashicons";
	content: "\f301";
}

Le résultat

 

twitter-ico

Résultat

Vous pouvez aller plus loin avec ça, vous pouvez appliquer du ombres, des couleurs, des événements de survol et d’autres magie du monde de CSS.

Types de contenu personnalisés:

Utilisation des icônes colorées dans la partie d’administration casse l’harmonie du nouvel design a mon avis,l’utilisation des icônes dashicones est la meilleur solution pour éviter ça, on va prendre comme exemple la création d’un nouveau type de contenu pour un speaker dans un événement:

function speaker_cpt() {
 
	$labels = array(
		'name'                => _x( 'Speakers', 'Post Type General Name', 'speaker_text_domain' ),
		'singular_name'       => _x( 'Speaker', 'Post Type Singular Name', 'speaker_text_domain' ),
		'menu_name'           => __( 'Speaker', 'speaker_text_domain' ),
		'parent_item_colon'   => __( 'Parent Item:', 'speaker_text_domain' ),
		'all_items'           => __( 'All Speakers', 'speaker_text_domain' ),
		'view_item'           => __( 'View Speaker', 'speaker_text_domain' ),
		'add_new_item'        => __( 'Add New Speaker', 'speaker_text_domain' ),
		'add_new'             => __( 'Add New', 'speaker_text_domain' ),
		'edit_item'           => __( 'Edit Speaker', 'speaker_text_domain' ),
		'update_item'         => __( 'Update Speaker', 'speaker_text_domain' ),
		'search_items'        => __( 'Search Speaker', 'speaker_text_domain' ),
		'not_found'           => __( 'Not found', 'speaker_text_domain' ),
		'not_found_in_trash'  => __( 'Not found in Trash', 'speaker_text_domain' ),
	);
	$args = array(
		'label'               => __( 'speaker', 'speaker_text_domain' ),
		'description'         => __( 'Event speaker', 'speaker_text_domain' ),
		'labels'              => $labels,
		'supports'            => array( 'title', 'thumbnail', 'trackbacks', 'custom-fields', ),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'show_in_nav_menus'   => false,
		'show_in_admin_bar'   => false,
		'menu_position'       => 20,
		'can_export'          => true,
                'menu_icon'           => 'dashicons-businessman',
		'has_archive'         => true,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'capability_type'     => 'post',
	);
	register_post_type( 'speaker', $args );
 
}
 
add_action( 'init', 'speaker_cpt', 0 );

Comme vous remarquez, on a  indiquer à WordPress que l’icône de notre type de contenu speaker est « dashicons-businessman » dans la l’index « menu_icon » , le nom été récupéré juste après le clique sur le glyphe, si vous accéder a l’interface d’administration de votre site WordPress vos remarquez la présence d’un nouveau menu « Speaker » avec l’icône affichée avant le texte du menu et avec le même style du WordPress.

Exemple d'utilisation de dashicons avec des types de contenu personalisés

Exemple d’utilisation de dashicons avec des types de contenu personalisés

Appel à orateurs WordPress

Standard

La communauté WordPress-Algérie, organise un WordPress-Day et nous sommes toujours à la recherche des intervenants pour faire des présentations dans les différents sujets de WordPress comme le theming, les extensions, SEO, etc…

Si vous avez besoins de plus d’informations vous pouvez me contacter à mon adresse email: cherif.bouchelaghem@gmail.com ou nacim192@gmail.com .