Tout savoir sur WordPress
Tutoriel WordPress

Les smileys sur WordPress

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

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 :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

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

[/pastacode]

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 :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

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

[/pastacode]
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

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 :)

Cet article a été mis à jour il y a 4486 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

29 Commentaires

  1. 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.

  2. @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 :/

  3. 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 ? ;)

  4. 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.

  5. 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

  6. @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

  7. Bonjour,
    merci pour cet article ! J’ai installé sur WordPress le plugin SSL Grins car je veux qu’il y est une barre de smiley qui s’affiche pour écrire des commentaires mais aucune barre ne s’est affiché. Est-ce que j’ai pris le mauvais plugin ?Merci pour vos réponses

  8. @Sandrine : Je n’ai pas ré-utilisé le plugin WP SSL Grins depuis la publication de cet article. Du coup, je ne sais pas du tout q’il y a un problème avec la dernière version du plugin.

  9. Bonjour!
    J’ai installé et activés WP Grinn ssl et WP Smiley sur mon blog, mais rien ne change??? Par ailleurs je ne vois pas de paramétrage dans WP Smiley? Merci de m’aider!

  10. @Cathy : Apparemment, le plugin WP SSL Grins rencontre quelques problème. Il faut que je prenne le temps de le remettre pour confirmer.

  11. Ce sont des modifications qui sont surtout utile je pense pour les sites à fort trafic, et pour les sites qui ont créé leur propre thème WordPress.

    Sinon les smiley de base peuvent correspondre à la plupart des propriétaires de site web.

  12. Bonjour,

    J’ai bien placé la fonction pour changer le répertoire des smileys mais rien à faire, ce sont toujours ceux dans wp-includes qui sont appelés…

    Saurais-tu de quoi ça vient ? ^^

    Merci d’avance !

  13. @erysfoly: Sans voir de code, c’est compliqué de pouvoir aidé quelqu’un ^^

    (merci de passer par Pastebin pour partager ton code).

  14. @Jonathan : En fait, c’est exactement le code de l’article. Je le remets ici tout de même :

    Edit Admin : Merci de passer par Pastebin pour partager votre code.

  15. @erysfoly: Comme indiqué dans mon précédent commentaire: merci de passer par Pastebin pour partager votre code.

  16. Je ne vois pas comment importer le code en passant par Pastebin… Donc à part donner le lien du code, je ne vois pas quoi faire d’autre. ^^’ Voici le lien, si ça ne va pas, je veux bien savoir comment faire. http://pastebin.com/SSr9kdRa

  17. Merci pour ton article simple, clair et complet. J’ai pu faire un choix en fonction de mes besoins.
    Elo

  18. @erysfoly: C’est bien le lien Pastebin qu’il faut me fournir ;)

    Dans quel fichier a été ajouté ce code ?

  19. Comme indiqué dans l’article : dans le fichier functions.php de mon thème. Je ne comprends pas pourquoi ça ne fonctionne pas sachant que j’ai bien suivi ce que dit l’article. ^^’