Formation WordPress

Les smileys sur WordPress

posté le par Jonathan | 10 commentaires | 1517 vues | FavoriteLoadingAjouter à mes favoris

Un smiley (de l’anglais « smile » ou « émoticône » en français) est une figuration symbolique d’une émotion ou d’un état d’esprit utilisée dans un discours écrit. Le plus souvent, un smiley est un dessin stylisé de visage souriant coloré en jaune exprimant l’amitié.

Ce guide est consacré aux smileys sur WordPress. Nous allons découvrir tous les trucs et astuces pour modifier et améliorer l’utilisation des smileys sur votre site Internet.

L’interprétation des smileys

Par défaut, WordPress convertit automatiquement le texte correspondant à des raccourcis de smiley par des images. Lorsque vous tapez dans votre article « ;-) » vous voyez lors de la publication de votre article ou de votre commentaire le smiley ;-) à place du texte brute.

Le tableau ci-dessous vous illustre tous les smileys avec le texte correspondant pour les afficher.

Tableau des smileys

Tous les smileys disponibles sur WordPress

Si vous ne souhaitez pas que votre texte soit remplacé par des smileys et qu’il doit rester brute quoi qu’il arrive, vous avez la possibilité de désactiver cette fonction en suivant les étapes suivantes :

  • Connectez-vous sur l’administration
  • Allez dans « Paramètres » puis dans « Ecriture »
  • Dans la section « Mise en forme », décochez la case « Convertir les émoticônes comme :-) et:​​-P en images lors de l’affichage

Ajouter du CSS à vos smileys

Vous pouvez personnalisé vos smileys grâce à la class CSS wp-smiley présente sur chacun des smileys présents sur un article ou un commentaire.

Par exemple, on pourrait ajouter un espacement de 2px et supprimer les bordures des images :

img.wp-smiley {
    padding: 2px;
    border: none;
}

Modifier le pack de smileys de WordPress

Il faut avouer que le pack de smiley par défaut proposé par WordPress est assez classique. Comme d’habitude, nous avons plusieurs alternatives pour modifier et remplacer ce pack par des smileys plus « funny ».

La première solution est la plus « barbare ». En effet, il s’agit de modifier les smileys installés par WordPress dans le dossier/wp-includes/images/smileys. Je vous déconseille cette méthode car vos smileys seront de nouveau remplacés par ceux de WordPress lors de la mise à jour du CMS.

La deuxième solution est la plus « propre ». Grâce à une petite astuce, nous allons modifier l’appel du dossier par défaut des smileys. Ainsi, on va créer un dossier nommé « smileys » contenant l’intégralité de notre pack à la racine de notre thème.

Copier le code ci-dessous dans le fichier functions.php à la racine de votre thème :

function new_folder_smiley($img_src, $img, $siteurl)
{
     return get_template_directory_uri().'/smileys/'.$img;
}
add_filter('smilies_src','new_folder_smiley',10,3);

A partir de maintenant, WordPress cherchera les smileys du dossier du même nom présent à la racine de votre thème et non plus celui qui se trouve dans /wp-includes/images/smileys. Lors d’une mise à jour de WordPress, votre pack restera intacte :)

6 plugins indispensables pour gérer vos smileys

J’ai recueilli une liste des 6 meilleurs plugins WordPress qui fournissent quelques fonctionnalités supplémentaires intéressantes. Du changement de pack au l’intégration des rapides des smileys dans les commentaires, vous trouverez certainement votre bonheur parmi ces plugins.

WP Grins SSL

WP Grins SSL est un plugin qui permet d’ajouter une liste de smileys cliquables au formulaire de commentaires. C’est-à-dire que l’insertion des smileys dans les commentaires se fait en un clic sur la liste disponible. Vous installez, puis vous activez et le tour est joué puisque WP Grins SSL possède aucun réglages.

Smileys pour les commentaires

La liste des smileys pour les commentaires

Télécharger WP Grins SSL

Smilies Themer

Smilies Themer permet de choisir entre 14 nouveaux packs de smileys. Parmi cette liste, on peut retrouver le pack de smiley de Yahoo, MSN Messenger ou même la série « silk » du célèbre famfamfam.

Le plugin est facile d’utilisation puisqu’il suffit de se rendre dans « Réglages », puis dans « Smilies Themer » pour sélectionner le pack de notre choix.

Télécharger Smilies Themer

Smilies Themer Toolbar

Tout comme WP Grins SSL, le plugin Smilies Themer Toolbar permet d’ajouter une liste de smileys au formulaire de commentaires, mais pas seulement.

En effet, STT propose quelques fonctionnalités en plus non négligeable. Par exemple, on note la présence d’un bloc avec la liste des smileys à côté de l’éditeur de texte dans l’administration.

Ensuite, il est possible de modifier l’ordre d’apparition des smileys dans la liste grâce à un système de glisser/déposer. Et si on souhaite cacher l’un des smileys de notre pack, on peut le déposer dans la liste des non désirable afin qu’il ne soit pas affiché.

Télécharger Smilies Themer Toolbar

WP Smiley

WP Smiley est un plugin composé de plusieurs fonctionnalités assez pratiques. Pour commencer, il ajoute un bouton dans l’éditeur visuel de WordPress qui vous permettra d’ajouter rapidement des smileys au sein de vos articles et de vos pages. Ensuite WP Smiley vous laisse le choix concernant les raccourcis nécessaires pour un remplacer un texte pour son smiley équivalent.

Au niveau des commentaires, WP Smiley met à notre disposition la fonction s4w_comment_form() qui permet d’afficher la liste des smileys cliquables à l’endroit souhaité.

Pour terminer, on peut noter un petit bémol pour WP Smiley puisqu’il nous oblige à renommer les smileys un par un après l’avoir activé !

Administration WP Smiley

La page des options de WP Smiley

Télécharger WP Smiley

Speedy Smilies

Le titre Speedy Smilies veut tout dire. L’objectif principal du plugin est de faire en sorte que vos smileys se chargent rapidement sur vos pages. Pour cela, Speedy Smilies utilise la technique du sprite CSS pour mettre l’intégralité des smileys d’un pack sur une seule et même image.

Il permet également d’insérer des smileys dans vos articles en ajoutant une section « Speedy Smilies » à votre page d’édition afin que vous puissiez facilement les ajouter en un simple clic.

Télécharger Speedy Smilies

SF Smilies

SF Smilies est un excellent plugin développé par ScreenFeed. A savoir que le plugin n’est pas disponible dans le référentiel WordPress.

SF Smilies est un mélange de Smilies Themer, Smilies Themer Toolbar et Speedy Smilies. Il regroupe les fonctionnalités principales des 3 plugins. C’est à dire qu’il permet de choisir entre plusieurs packs, mais aussi une zone cliquable pour insérer les smileys est disponible sur la page d’édition et le formulaire des commentaires. De plus, il reprend le challenge de la rapidité du plugin Speedy Smilies en utilisant un sprite CSS pour optimiser le temps de chargement des smileys.

Si vous souhaitez avoir plus d’informations au sujet de ce plugin, vous pouvez visité l’article de ScreenFeed sur son site.

Télécharger SF Smilies

Télécharger des packs de smileys WordPress

Un guide sur les smileys sans packs à télécharger, ce n’est pas un guide complet ! Vous trouverez ci-dessous une liste de packs d’icônes à télécharger gratuitement.

PS : n’hésitez pas à me proposer vos packs, je les ajouterai à la liste des téléchargements :)

Tags :
Auteur : Jonathan
Actuellement en Master 1 Information Communication à Ingémédia, je m’intéresse depuis quelques années à différents aspects du milieu informatique qui m’ont vraiment séduits tels que la gestion de projet et la création de sites Internet.
Avatar de jonathan
Les commentaires 10 commentaires sur cet article
  1. Aphrodite le

    Mmm bien tout ca. Il manque toujours LE plugin : celui qui permet facilement, en multisite, d’ajouter les smileys de son choix…..

    Avatar de
  2. Screenfeed le

    Bonjour.
    Je ne pensais pas voir mon plugin référencé quelque part :)
    Il faudra que je le mette à jour un de ces jours, mais ayant d’autres plugins plus importants (à mon goût) sur le feu…
    A bientôt et merci.

    Avatar de
  3. jonathan le

    @SCREENFEED : J’ai trouvé SF Smilies lors de ma recherche des extensions permettant d’améliorer et faciliter l’utilisation des smileys. Et il faut dire que ce plugin est le plus complet de tous parmi ceux que j’ai pu trouvé !

    Même si le plugin n’est pas encore terminé, c’est dommage de ne pas le soumettre sur le référentiel WordPress :/

    Avatar de
  4. BoiteAWeb le

    Merci !
    On aurait aimé que les lien renvoie vers la page de téléchargement/article plutôt que directement sur le lien du plugin.
    Que se passe-til si la version est mise à jour, tu mets à jour ton article ? ;)

    Avatar de
  5. jonathan le

    Et voilà M’sieur, j’ai ajouté les deux liens qu’ils manquaient concernant les plugins ;)

    Pour les mises à jour, si c’est vraiment une version qui apporte des nouvelles fonctionnalités, je ferai une review.

    Avatar de
  6. Fabien le

    Hello
    Y a t il une astuce permettant de désactiver les smiley seulement sur certaines pages ?
    Thx

    Avatar de
  7. Fabien le

    J’ai bien trouvé une solution ici : http://pure-essence.net/2006/02/02/disable-wordpress-smiley-for-a-certain-postpage/

    Mais c’est un peu crado non ?

    Avatar de
  8. Julio Potier (BoiteAWeb.fr) le

    Oui très crado mais en 2006, modifier le core était courant :]
    Voilà le bout de code que tu as besoin, fait maison tout frais :

    function disable_smilies_on_custom_pages()
{
	global $post;
	if( !$post )
		return false;
	$pages_IDs_without_smilies = array( 11, 22, 33 );
	return in_array( $post->ID, $pages_IDs_without_smilies ) ? '' : false;
}
add_filter( 'pre_option_use_smilies', 'disable_smilies_on_custom_pages', 10, 0 );

    J’utilise le super hook « pre_option_ ».$option qui me permet de tricher sur la valeur à récupérer.
    Puis grâce à un tableau maison, j’entre les IDs des posts/pages sur lesquels la valeur de l’option « use_smilies » doit etre fausse.

    Attention au piège, un « return false » renverra la vraie valeur des options alors que du vide «  » renverra ce vide.
    Les case à cocher ne valent pas « true »/ »false » mais « on »/ »" ;)
    Bonne soirée

    Avatar de
  9. Jonathan le

    @Fabien : il ne faut surtout pas suivre les recommandations du lien ! C’est pire que crado ;) Il demande de modifier l’un des fichiers core de WordPress. C’est une chose qui totalement déconseiller ^^

    J’ai une autre alternative :

    add_action('the_post', 'deactivated_smilies');
function deactivated_smilies() {
	if ( is_page('ma-page') ) {
		remove_filter( 'the_content', 'convert_smilies' );
		remove_filter( 'the_excerpt', 'convert_smilies' );
		remove_filter( 'comment_text', 'convert_smilies' );
	}
}

    Le code est a placé dans le fichier functions.php

    Avatar de
  10. Fabien le

    Merci à tous les 2 ;)

    Avatar de
Laisser un commentaire
Balises autorisées dans les commentaires: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Suivre les commentaires de cet article par E-mail