Смайлики для WordPress 4.2 и выше, как отключить Emoji?

5 (100%) 1 голосов

Фрагмент статьи на “Блоге свободного вебмастера”, а здесь – Оригинал публикации

Начиная с версии 4.2 и выше разработчики внедрили в ядро WordPress новую библиотеку Twemoji — это набор символов в формате Unicode, которые при формировании страницы конвертируются в Emoji.

Если браузер не поддерживают эмодзи, то происходит автоматическая замена символов на графические изображения, подгружаемые с CDN:

Таким образом старые добрые смайлики вероятно навсегда ушли в прошлое… Для себя я выделил отрицательные стороны подобной замены и хочу поделиться с Вами:

даже современные браузеры не всегда поддерживают Emoji;
изображения имеют истинные размеры 72х72px и при загрузке масштабируются, увеличивая время рендеринга страницы;
в секции <header> подгружаются инлайновые скрипты и стили, не вынесенные в отдельные файлы.

К тому же все статьи и комментарии на блоге приобрели совсем иной внешний вид, который меня не устраивал. Предлагаю воспользоваться решением, которое позволяет вернуть прежние смайлики на свои места. Оно содержит часть функций плагина Classic Smilies, а также собственные наработки.

Для начала в каталоге с названием темы блога необходимо создать папку smilies и в неё положить файлы изображений смайликов. Затем в файл functions.php добавляем следующий код:

// Задаем новое расположение изображений по-умолчанию
function classic_smilies_src( $old, $img ) {
	$mythemes = get_template();
	return site_url( "/wp-content/themes/$mythemes/smilies/{$img}", __FILE__ );
}
 
// Возвращаем сопоставление символов файлам
add_action( 'init', 'classic_smilies_init', 1 );
function classic_smilies_init() {
	global $wpsmiliestrans;
	$wpsmiliestrans = array(
	':mrgreen:' =&gt; 'icon_mrgreen.gif',
	':neutral:' =&gt; 'icon_neutral.gif',
	':twisted:' =&gt; 'icon_twisted.gif',
	  ':arrow:' =&gt; 'icon_arrow.gif',
	  ':shock:' =&gt; 'icon_eek.gif',
	  ':smile:' =&gt; 'icon_smile.gif',
	    ':???:' =&gt; 'icon_confused.gif',
	   ':cool:' =&gt; 'icon_cool.gif',
	   ':evil:' =&gt; 'icon_evil.gif',
	   ':grin:' =&gt; 'icon_biggrin.gif',
	   ':idea:' =&gt; 'icon_idea.gif',
	   ':oops:' =&gt; 'icon_redface.gif',
	   ':razz:' =&gt; 'icon_razz.gif',
	   ':roll:' =&gt; 'icon_rolleyes.gif',
	   ':wink:' =&gt; 'icon_wink.gif',
	    ':cry:' =&gt; 'icon_cry.gif',
	    ':eek:' =&gt; 'icon_surprised.gif',
	    ':lol:' =&gt; 'icon_lol.gif',
	    ':mad:' =&gt; 'icon_mad.gif',
	    ':sad:' =&gt; 'icon_sad.gif',
	      '8-)' =&gt; 'icon_cool.gif',
	      '8-O' =&gt; 'icon_eek.gif',
	      ':-(' =&gt; 'icon_sad.gif',
	      ':-)' =&gt; 'icon_smile.gif',
	      ':-?' =&gt; 'icon_confused.gif',
	      ':-D' =&gt; 'icon_biggrin.gif',
	      ':-P' =&gt; 'icon_razz.gif',
	      ':-o' =&gt; 'icon_surprised.gif',
	      ':-x' =&gt; 'icon_mad.gif',
	      ':-|' =&gt; 'icon_neutral.gif',
	      ';-)' =&gt; 'icon_wink.gif',
	       '8O' =&gt; 'icon_eek.gif',
	       ':(' =&gt; 'icon_sad.gif',
	       ':)' =&gt; 'icon_smile.gif',
	       ':?' =&gt; 'icon_confused.gif',
	       ':D' =&gt; 'icon_biggrin.gif',
	       ':P' =&gt; 'icon_razz.gif',
	       ':o' =&gt; 'icon_surprised.gif',
	       ':x' =&gt; 'icon_mad.gif',
	       ':|' =&gt; 'icon_neutral.gif',
	       ';)' =&gt; 'icon_wink.gif',
	      ':!:' =&gt; 'icon_exclaim.gif',
	      ':?:' =&gt; 'icon_question.gif',
	);
	add_filter( 'smilies_src', 'classic_smilies_src', 10, 2 );
 
// Отключаем загрузку скриптов и стилей Emoji
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' );	
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );	
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'classic_smilies_rm_tinymce_emoji' );
add_filter( 'the_content', 'classic_smilies_rm_additional_styles', 11 );
add_filter( 'the_excerpt', 'classic_smilies_rm_additional_styles', 11 );
add_filter( 'comment_text', 'classic_smilies_rm_additional_styles', 21 );
}
 
// Отключаем Emoji в визуальном редакторе TinyMCE
function classic_smilies_rm_tinymce_emoji( $plugins ) {
	return array_diff( $plugins, array( 'wpemoji' ) );
}
 
// Убираем размеры смайликов равные 1em (новые задаются для класса .wp-smiley)
function classic_smilies_rm_additional_styles( $content ) {
	return str_replace( 'class="wp-smiley" style="height: 1em; max-height: 1em;"', 'class="wp-smiley"', $content );
}

// Задаем новое расположение изображений по-умолчанию

function classic_smilies_src( $old, $img ) {

$mythemes = get_template();

return site_url( "/wp-content/themes/$mythemes/smilies/{$img}", __FILE__ );

}

// Возвращаем сопоставление символов файлам

add_action( 'init', 'classic_smilies_init', 1 );

function classic_smilies_init() {

global $wpsmiliestrans;

$wpsmiliestrans = array(

':mrgreen:' => 'icon_mrgreen.gif',

':neutral:' => 'icon_neutral.gif',

':twisted:' => 'icon_twisted.gif',

':arrow:' => 'icon_arrow.gif',

':shock:' => 'icon_eek.gif',

':smile:' => 'icon_smile.gif',

':???:' => 'icon_confused.gif',

':cool:' => 'icon_cool.gif',

':evil:' => 'icon_evil.gif',

':grin:' => 'icon_biggrin.gif',

':idea:' => 'icon_idea.gif',

':oops:' => 'icon_redface.gif',

':razz:' => 'icon_razz.gif',

':roll:' => 'icon_rolleyes.gif',

':wink:' => 'icon_wink.gif',

':cry:' => 'icon_cry.gif',

':eek:' => 'icon_surprised.gif',

':lol:' => 'icon_lol.gif',

':mad:' => 'icon_mad.gif',

':sad:' => 'icon_sad.gif',

'8-)' => 'icon_cool.gif',

'8-O' => 'icon_eek.gif',

':-(' => 'icon_sad.gif',

':-)' => 'icon_smile.gif',

':-?' => 'icon_confused.gif',

':-D' => 'icon_biggrin.gif',

':-P' => 'icon_razz.gif',

':-o' => 'icon_surprised.gif',

':-x' => 'icon_mad.gif',

':-|' => 'icon_neutral.gif',

';-)' => 'icon_wink.gif',

'8O' => 'icon_eek.gif',

':(' => 'icon_sad.gif',

':)' => 'icon_smile.gif',

':?' => 'icon_confused.gif',

':D' => 'icon_biggrin.gif',

':P' => 'icon_razz.gif',

':o' => 'icon_surprised.gif',

':x' => 'icon_mad.gif',

':|' => 'icon_neutral.gif',

';)' => 'icon_wink.gif',

':!:' => 'icon_exclaim.gif',

':?:' => 'icon_question.gif',

);

add_filter( 'smilies_src', 'classic_smilies_src', 10, 2 );

// Отключаем загрузку скриптов и стилей Emoji

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' );

remove_filter( 'the_content_feed', 'wp_staticize_emoji' );

remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );

remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );

add_filter( 'tiny_mce_plugins', 'classic_smilies_rm_tinymce_emoji' );

add_filter( 'the_content', 'classic_smilies_rm_additional_styles', 11 );

add_filter( 'the_excerpt', 'classic_smilies_rm_additional_styles', 11 );

add_filter( 'comment_text', 'classic_smilies_rm_additional_styles', 21 );

}

// Отключаем Emoji в визуальном редакторе TinyMCE

function classic_smilies_rm_tinymce_emoji( $plugins ) {

return array_diff( $plugins, array( 'wpemoji' ) );

}

// Убираем размеры смайликов равные 1em (новые задаются для класса .wp-smiley)

function classic_smilies_rm_additional_styles( $content ) {

return str_replace( 'class="wp-smiley" style="height: 1em; max-height: 1em;"', 'class="wp-smiley"', $content );

}

Если есть необходимость дать возможность вставлять смайлики в комментарии, то добавляем модифицированный код в comments.php темы:

<script>
function addsmile($smile){
	document.getElementById('comment').value=document.getElementById('comment').value+' '+$smile+' ';
}
</script>
<?php
global $wpsmiliestrans;
$dm_showsmiles = '';
$dm_smiled = array();
foreach ($wpsmiliestrans as $tag => $dm_smile) {
	if (!in_array($dm_smile,$dm_smiled)) {
		$dm_smiled[] = $dm_smile;
		$tag = str_replace(' ', '', $tag);
		$dm_showsmiles .= '<img src="'.get_bloginfo('wpurl').'/wp-includes/images/smilies/'.$dm_smile.'" alt="'.$tag.'" onclick="addsmile(\''.$tag.'\');"/> ';
	}
}
echo '<div style="width:100%; margin-left:0px; margin-right:0px;">'.$dm_showsmiles.'</div>';
?>

function addsmile($smile){

document.getElementById('comment').value=document.getElementById('comment').value+' '+$smile+' ';

}

</script>

<?php

global $wpsmiliestrans;

$dm_showsmiles = '';

$dm_smiled = array();

foreach ($wpsmiliestrans as $tag => $dm_smile) {

if (!in_array($dm_smile,$dm_smiled)) {

$dm_smiled[] = $dm_smile;

$tag = str_replace(' ', '', $tag);

$dm_showsmiles .= '<img src="'.get_bloginfo('wpurl').'/wp-includes/images/smilies/'.$dm_smile.'" alt="'.$tag.'" onclick="addsmile(\''.$tag.'\');"/> ';

}

echo '<div style="width:100%; margin-left:0px; margin-right:0px;">'.$dm_showsmiles.'</div>';

Теперь не нужно каждый раз после обновления WordPress заменять картинки на новые, так как они располагаются в другой папке и обновление их не затрагивает.

Таким образом, мы отключили загрузку и показ Emoji, заменив их своими смайликами, которые использовали прежде.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.