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

Setters et Getters dans Yii framework

Standard

Yii framework contien plusieurs fonctionaliés et l’une de ces fonctionalités c’est définir les propriétés d’une classe avec les Getters et Setters.

Pratiquement chaque classe dans Yii framework est un composant, qui est une simple classe PHP hérite de CComponent, si votre classe est une classe fille de CComponent, l’implémentation de Getters et Setters (entre autres) n’est qu’une question de temps.

Continue reading

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 .

CakePHP-2.0 enfin en version finale

Standard

cake-logo

Le 16/10/2011, l’équipe de développement The CakePHP core, annonce la sortie la version 2.0 du framework.

Abandonne le support de Php 4 et la migration vers Php5.2+, c’est le grand changement de cette version, avec une mouture purement orientée objet et l’utilisation intensive du lazy-loading (chargement paresseux) afin d’améliorer la performance dont il été toujours critiqué.

Beaucoup plus rapide, presque tout est désormais lazy-loading, et même sur le mode de débogage, vous vous sentirez vos applications en vol.

C’est ce que dise le texte dans l’annonce , mais je pense que c’est un peux exagérer, reste à prouver!!.

Voila quelques fonctionnalités qui m’encourage à essayé CakePhp-2.0:

  • Utilisation des fonctionnalités natives telles que exceptions,  SPL, json_encode et bien plus encore.
  • Embrasse la recommandation PSR-0 pour le nommage des fichiers. Maintenant toutes les classes map pour un fichier avec le même nom.
  • Nouveaux  gestionnaires d’erreurs et d’exception plus facile à configurer, et la facilité de travailler avec des erreurs telles que l’erreur 404, l’erreur 403 et beaucoup plus.
  • Nouveaux objets de requête (Request) et de réponse (Respond)  des objets pour faciliter la manipulation de requêtes HTTP, dans les versions précédentes c’été des tableau (array).
  • Abandon SimpleUnit en faveur de PHPUnit. PHPUnit est un framework de test defacto pour PHP avec le support pour plus d’options,  les objets fantaisie sont mieux, et sortie de la console améliorée.
  • Support de formulaire Html5 dans le form helper.

Pour plus d’information visitez:

Mon choix de php Framework

Standard

yii framework logo

Mon expérience avec les Frameworks PHP a commencé à la fin de l’année 2008, mon premier framework été CakePhp-1.2 (avec son Alpha release), j’ai testé Zend Framework, Symfony, CondeIgniter et beaucoup d’autres, mais avec la sortie de Yii PHP Framework, ma vision a été totalement changée, au final, ma comparaison été entre CakePHP et Yii. Dans un autre article je vais publier ma comparaison entre les deux frameworks et nous allons faire ensemble une aventure en développement web et la conception avec les standard. Restez attacher.