Smileys WordPress

Cette page présente les smileys que j'utilise sur ce site. Ce sont des smileys de ma création. Ils sont très basiques façon flat design.
Je ne suis pas graphiste, donc soyez indulgents :) .
J'ai fait ça tout bêtement avec Publisher de la suite Office 365 de Microsoft, en enregistrant la composition en tant qu'image PNG 256px × 256px (Image), et ensuite en redimensionnant les images à 24px × 24px.

Ils correspondent aux 22 smileys défaut de WordPress, plus quelques autres pour l'instant. Pour ne pas confondre avec ceux par défaut de WordPress (icon_xxxxx.png), leurs noms commencent par nth_ (nth_icon_xxxxx.png).

Les smileys avec les codes texte correspondants

SmileyTexteSmileyTexte
:D   :-D   :grin: :)   :-)   :smile:
:lol: :mrgreen:
8)   8-)   :cool: :P   :-P   :razz:
:wink:   ;)   ;-) :(   :-(   :sad:
:x   :-x   :mad: :?   :-?   :???:
:roll: :o   :-o   :eek:
8O   8-O   :shock: :|   :-|   :neutral:
:oops: :cry:
:evil: :twisted:
:!: :?:
:idea: :arrow:
:alien:   :et: :note:

Test avec différentes couleurs de fond

Le fichier functions-smilies.php

Je ne me sers pas des fonctions WordPress pour l'affichage des smileys, mais de fonctions personnelles.

Il suffit de charger le fichier functions-smilies.php dans WordPress et de renseigner le nom du dossier des smileys (constante CURRENT_SMILIE_FOLDER).
Dans mon cas, les différents packs de smileys sont dans des sous-dossiers d'un dossier (constante NTH_SMILIES_FOLDER) situé à la racine du thème enfant.

<?php
/**
 * functions-smilies.php
 *
 * gestion smilies perso nonoweb
 *
 * Les différents packs de smileys sont dans des sous-dossiers (constante CURRENT_SMILIE_FOLDER)
 * du dossier smilies (constante NTH_SMILIES_FOLDER) à la racine du thème enfant.

 * Dans chaque dossier de packs, on doit avoir un fichier php (wpn-initsmilies.php) :
 * $array_smilies = array(
      'icon_biggrin.png'   => [':D', ':-D', ':grin:'],
      'icon_smile.png'     => [':)',':-)', ':smile:'],
      'icon_lol.png'       => [':lol:'],
      'icon_mrgreen.png'   => [':mrgreen:'],
      ..........
   );
 *    clé    : nom de l'image + ext
 *    valeur : tableau du(ou des) code(s) pour afficher le smileys
 *
 * si un code smileys (ou plusieurs) est devenu obsolète (plus d'image par exemple), il va quand même s'afficher en clair.
 * Si on ne veut pas d'affichage en clair du code, ajouter dans le fichier php la ligne :
 * $array_smilies['__OBSOLETE_TXT_ICON__'] = [':mon_code:'];
 *    clé    : __OBSOLETE_TXT_ICON__
 *    valeur : tableau des différents codes devenus obsolètes
 *
 * Ou les retirer manuellement dans chaque page ou article faisant appel à ces codes.
 *
 * Si cette page (functions-smilies.php) n'est pas chargée dans WordPress, les smileys (les emoji) par défaut de WordPress seront utilisés.
 */
define('CURRENT_SMILIE_FOLDER', 'nonoweb'); // changer pour autre pack
// ***********************************************
define('NTH_SMILIES_INIT', 'wpn-initsmilies.php');
define('NTH_SMILIES_FOLDER', 'smilies/');
define('NTH_SMILIES_CURRENT_FOLDER', NTH_SMILIES_FOLDER.CURRENT_SMILIE_FOLDER);
// NTH_PATH_THEME = chemin thème enfant (/home/....)
// NTH_URL_THEME = url thème enfant (http://....)
define('NTH_PATH_SMILIES_FOLDER', NTH_PATH_THEME.NTH_SMILIES_CURRENT_FOLDER);
define('NTH_URL_SMILIES_FOLDER', NTH_URL_THEME.NTH_SMILIES_CURRENT_FOLDER);

if (file_exists(NTH_PATH_SMILIES_FOLDER) && file_exists(NTH_PATH_SMILIES_FOLDER.'/'.NTH_SMILIES_INIT)) {

/**
 * Ajout css
 */
function smilies_add_css() {
	wp_enqueue_style('smilies', NTH_URL_THEME.'smilies.css');
}
add_action("wp_enqueue_scripts", "smilies_add_css");
add_action("admin_enqueue_scripts", "smilies_add_css"); // dans admin, pour test.

/**
 * Désactivation emoji WordPress
 */
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_styles', 'print_emoji_styles');

// ----------------------------------------------------------------
require(NTH_PATH_SMILIES_FOLDER.'/'.NTH_SMILIES_INIT);

/**
 * $array_smilies (perso) -> $wpsmiliestrans (WP)
 */
function convert_array_smilies() {
	global $array_smilies, $wpsmiliestrans;
	$wpsmiliestrans = [];
	foreach ($array_smilies as $img => $toto) {
		foreach ($toto as $text) {
			$wpsmiliestrans[$text] = $img;
		}
	}
}
convert_array_smilies();

/**
 * Remplacement fonction WP (conversion text -> image)
 */
function nth_translate_smiley($smiley) {
	global $wpsmiliestrans;
	if (count($smiley) == 0) {
		return '';
	}
	$smiley = trim(reset($smiley));
	$img = $wpsmiliestrans[$smiley];
	if ($img ==	'__OBSOLETE_TXT_ICON__') {
	 	return '';
	}
	else {
		$html_smilies = '';
		$attr_img = [];
		$attr_img[] = 'src="'.esc_url(NTH_URL_SMILIES_FOLDER.'/'.$img).'"';
		$attr_img[] = 'draggable="false"';
		$attr_img[] = 'alt="'.esc_attr($smiley).'"';
		$attr_img[] = 'class="wp-smiley"';
		$html_smilies .= '<img';
		if (!empty($attr_img)) $html_smilies .= ' '.implode(' ', $attr_img);
		$html_smilies .= '/>';
		return $html_smilies;
	}
}

function nth_convert_smilies($text) {
	global $wp_smiliessearch;
	$output = '';
	if ( get_option('use_smilies') && !empty($wp_smiliessearch) ) {
		$textarr = preg_split("/(<.*>)/U", $text, -1, PREG_SPLIT_DELIM_CAPTURE);
		$stop = count($textarr);
		for ($i = 0; $i < $stop; $i++) {
			$content = $textarr[$i];
			if ((strlen($content) > 0) && ('<' != $content[0])) {
				$content = preg_replace_callback($wp_smiliessearch, 'nth_translate_smiley', $content);
			}
			$output .= $content;
		}
	} else {
		$output = $text;
	}
	return $output;
}

remove_filter('the_content', 'convert_smilies');
add_filter('the_content', 'nth_convert_smilies');
remove_filter('comment_text', 'convert_smilies', 20);
add_filter('comment_text', 'nth_convert_smilies', 20) ;
remove_filter('the_excerpt', 'convert_smilies');
add_filter('the_excerpt', 'nth_convert_smilies');

/**
 * barre smiley commentaire
 */
function nth_smileys_textarea($wpn_id) {
global $array_smilies;
	$barre_smileys_textarea = '<fieldset id="toolbar-comment-emoticons">';
	$barre_smileys_textarea .= '<legend>'. __( 'Sélection smileys') .'</legend>';
	$wpn_cptSmileys = 0;
	foreach ($array_smilies as $img => $tbl_text) {
		if ($img != '__OBSOLETE_TXT_ICON__') {
			// si le nombre de simileys atteind un certain nombre, on passe à la ligne.
			// if ($wpn_cptSmileys == 10) {$barre_smileys_textarea .= '<br />';$wpn_cptSmileys = 0;}
			$attr_img = [];
			$attr_img[] = 'src="'.esc_url(NTH_URL_SMILIES_FOLDER).'/'.$img.'"';
			$attr_img[] = 'title="'.esc_attr($tbl_text[0]).'"';
			$attr_img[] = 'onclick="wpn_insertTag(\' '.esc_attr($tbl_text[0]).' \', \'\', \''.$wpn_id.'\')"';
			$barre_smileys_textarea .= '<img';
			if (!empty($attr_img)) $barre_smileys_textarea .= ' '.implode(' ', $attr_img);
			$barre_smileys_textarea .= '/>';
			$wpn_cptSmileys++;
		} // end  if ($img != '__OBSOLETE_TXT_ICON__')
	}
	// lien vers pages smileys
	if (!is_page('smileys-wordpress')) {
		$barre_smileys_textarea .= '<div id="info-smileys">';
		$barre_smileys_textarea .= '<a href="'.get_option('home').'/smileys-wordpress/" target="_blank">';
		$barre_smileys_textarea .= '<i class="fa fa-info-circle margin-right" aria-hidden="true"></i>'.__('Smileys');
		$barre_smileys_textarea .= '</a>';
		$barre_smileys_textarea .= '</div>';
	}
	$barre_smileys_textarea .= '</fieldset>';
	// test('<div style="white-space: pre-wrap;line-height: 1.3em;">'.htmlspecialchars(str_replace('<img', "\n".'<img', $barre_smileys_textarea)).'</div>', 't=$barre_smileys_textarea');
	return $barre_smileys_textarea;
}

/**
 * ajout barre smileys au dessus champ commentaire
 */
add_filter('comment_form_field_comment','add_nth_smileys_textarea');
function add_nth_smileys_textarea($comment_field) {
    return nth_smileys_textarea('comment').$comment_field;
}
} // end if (file_exists(NTH_PATH_SMILIES_FOLDER))

Le fichier wpn-initsmilies.php

Fichier devant se trouver dans le dossier contenent le pack de smileys.

<?php
/**
 * wpn-initsmilies.php
 *
 * Pack smileys : nonoweb
 *
 * Pour éviter que des codes obsolètes s'affichent sans icône (si icône n'existe plus)
 * ajouter cette ligne à la fin
 * $array_smilies['__OBSOLETE_TXT_ICON__'] = [':toto:', ':titi:', ......];
 */
$array_smilies = array(
    'icon_biggrin.png'    => [':D', ':-D', ':grin:'],
    'icon_smile.png'      => [':)',':-)', ':smile:'],
    'icon_lol.png'        => [':lol:'],
    'icon_mrgreen.png'    => [':mrgreen:'],
    'icon_cool.png'       => ['8)', '8-)', ':cool:'],
    'icon_razz.png'       => [':P', ':-P', ':razz:'],
    'icon_wink.png'       => [':wink:', ';)' , ';-)'],
    'icon_sad.png'        => [':(', ':-(', ':sad:'],
    'icon_mad.png'        => [':x', ':-x', ':mad:'],
    'icon_confused.png'   => [':?', ':-?', ':???:'],
    'icon_rolleyes.png'   => [':roll:'],
    'icon_surprised.png'  => [':o', ':-o', ':eek:'],
    'icon_eek.png'        => ['8O', '8-O', ':shock:'],
    'icon_neutral.png'    => [':|', ':-|', ':neutral:'],
    'icon_redface.png'    => [':oops:'],
    'icon_cry.png'        => [':cry:'],
    'icon_evil.png'       => [':evil:'],
    'icon_twisted.png'    => [':twisted:'],
    'icon_exclaim.png'    => [':!:'],
    'icon_question.png'   => [':?:'],
    'icon_idea.png'       => [':idea:'],
    'icon_arrow.png'      => [':arrow:'],
    'nth_icon_alien.png'  => [':alien:', ':et:'],
    'nth_icon_note.png'   => [':note:'],
);

Le fichier inserttag.min.js

Fonction javascript permettant, en cliquant sur le smiley, d'insérer son code dans le message.

/**
 * inserttag.min.js
 *
 * Fonction javascript : insertion du code du smiley dans le message en cliquant sur l'image.
 *
 */
function wpn_insertTag(e,t,n,c){var l=document.getElementById(n);if(l.focus(),window.ActiveXObject)var a=document.selection.createRange(),s=a.text;else var i=l.value.substring(0,l.selectionStart),g=(s=l.value.substring(l.selectionStart,l.selectionEnd),l.value.substring(l.selectionEnd));window.ActiveXObject?(a.text=e+s+t,a.moveStart("character",-t.length-s.length),a.moveEnd("character",-t.length),a.select()):(l.value=i+e+s+t+g,l.focus(),l.setSelectionRange(i.length+e.length,i.length+e.length+s.length))}

Téléchargement

Télécharger mon pack

1 réflexion sur « Smileys WordPress »

  1. nonoweb Auteur de l’article

    TEST : Lorem ipsum dolor :D sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. :-( Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit :? in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt :note: in culpa qui officia :-P deserunt mollit anim id est laborum.
    Foxum Moldor croat e um extra terrestrum :alien:

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Sélection smileys

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.