Смайлики на блоге WordPress

Здравствуйте! С Вами снова я, автор Блога Свободного Вебмастера и сегодня речь пойдет о смайликах на Вордпресс. Смайлики уже давно завоевали свою популярность. Это отличный способ выразить свои эмоции и порой достаточно использовать всего лишь один смайл чтобы выразить свои чувства.

Смайлики на wordpress

Честно говоря меня не очень впечатлили стандартные смайлики вордпресса. Их вид показался мне примитивным, слишком уж древним и поэтому решил сменить их на другие.

Стандартные смайликиСтандартные смайлики wordpress

Здесь можно пойти двумя путями.

  • Первый — это установить плагин, который автоматически заменит стандартные смайлы на другие. Но слишком много активных плагинов замедлит работу блога, увеличит нагрузку на сервер. К тому же плагины зачастую добавляют свои таблицы в базу данных MySQL, а при удалении не всегда чистят за собой эту базу и приходится чистить вручную, через панель phpMyAdmin.
  • Второй путь позволит избежать таких неприятностей, к тому же позволит лучше изучить работу WordPress. Он подразумевает под собой ручное редактирование.

Поэтому мы пойдем вторым путем. Стандартные смайлики находятся в папке /wp-includes/images/smilies/ в корне Вашего блога. Чтобы их сменить нужно просто переписать старые на новые. Вы можете взять абсолютно любые смайлы, переименовать их, чтобы имена файлов совпадали со стандартными и закачать обратно в ту же папку. Выкладываю наборы смайликов, которые у меня уже есть:

Колобки миниКолобки мини

КолобкиКолобки

Смайлики SkypeСмайлики Skype

Ничего переименовывать не нужно, осталось лишь заменить этими стандартные и готово. С этим вопросом разобрались.

Следующий вопрос: как добавить смайлики над текстовым полем формы отправки комментариев? Здесь также все очень просто! Для этого в файле comments.php Вашей темы перед открывающим тегом <textarea>, у меня он имеет следующий вид:

<textarea name="comment" id="comment" rows="10" cols="1"></textarea>

вставить следующий код:

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

Вот и все! Данными действиями нам удалось заменить стандартные смайлики wordpress на более привлекательные и современные, а также добавить их над текстовым полем формы комментариев. И всё это без использования каких либо плагинов.

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

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

Emoji

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

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

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

Для начала в каталоге с названием темы блога необходимо создать папку smilies и в нее распаковать изображения смайликов (ссылки на загрузку приведены выше). Затем выполнить инструкции, предназначенные для ранних версий WordPress, добавляя немного модифицированный код в 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_template_directory_uri().'/smilies/'.$dm_smile.'" alt="'.$tag.'" onclick="addsmile(\''.$tag.'\');"/> ';
	}
}
echo '<div style="width:100%; margin-left:0px; margin-right:0px;">'.$dm_showsmiles.'</div>';
?>

В файл 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:' => 'icon_mrgreen.gif',
	':neutral:' => 'icon_neutral.gif',
	':twisted:' => 'icon_twisted.gif',
	 ':arrow:' => 'icon_arrow.gif',
	 ':o' => 'icon_eek.gif',
	 ':)' => 'icon_smile.gif',
	  ':???:' => 'icon_confused.gif',
	  ':cool:' => 'icon_cool.gif',
	  ':evil:' => 'icon_evil.gif',
	  ':D' => 'icon_biggrin.gif',
	  ':idea:' => 'icon_idea.gif',
	  ':oops:' => 'icon_redface.gif',
	  ':P' => 'icon_razz.gif',
	  ':roll:' => 'icon_rolleyes.gif',
	  ':wink:' => 'icon_wink.gif',
	  ':cry:' => 'icon_cry.gif',
	  ':eek:' => 'icon_surprised.gif',
	  ':D' => '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 );
}

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

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(5 голосов, в среднем: 5 из 5)
  1. Арина

    Ну вот… Наконец-то нашла, что мне надо, но весь файл comments.php просмотрела, а слова textarea не нашла. Может можно в другое место вставить в этом же файле? Помогите пожалуйста. Хочу смайлики)

    Ответить

  2. Webliberty

    Арина, можете попробовать и в другом месте. Или отправьте мне на почту содержимое файла comments.php и посмотрим как лучше. Хотя сейчас посмотрел исходный код Вашей страницы и <textarea> в нем присутствует!

    Ответить

  3. Арина

    Webliberty, просто можно Вам позавидовать, ну где вы всё видите, отправляю письмо 🙂

    Ответить

  4. Webliberty

    Письмо получил. Действительно, в том файле такого тега нет. Как я выяснил у Вас используется стандартная тема, которая называется Twenty Ten 1.1 от the WordPress team. В данной теме за вывод формы отправки комментариев отвечает файл самого движка WordPress. А именно файл расположен на Вашем сервере, вот путь: /wp-includes/comment-template.php. Открывайте этот файл и почти в самом его конце ищите строчку:

    <?php echo apply_filters( 'comment_form_field_comment', $args['comment_field'] ); ?>

    После неё нужно вставить следующий код:

    <?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:505px; margin-left:0px; margin-right:0px;">'.$dm_showsmiles.'</div>';
    ?>

    А в подвал шаблона (файл footer.php) в самое начало добавьте вот это:

    <script>
    function addsmile($smile){
    	document.getElementById('comment').value=document.getElementById('comment').value+' '+$smile+' ';
    }
    </script>

    Сохранить изменения и обновить страницу. Смайлики для добавления появятся сразу же под текстовым полем формы.

    Ответить

  5. Арина

    Заработало! Я не знаю, как ты это всё находишь! Ну в общем, как обычно — ты лучший! 😎

    Ответить

  6. Илья

    Скажите пожалуйста, как сделать чтобы смайлы были скрыты и место всех смайлов было написано ссылка на смайлы типо кнопки, а когда нажимаешь открывалось окно смайлов, а то у меня очень много смайлов и как то все не так как надо, а плагин я ставить не хочу.

    Ответить

  7. Webliberty

    Илья, к сожалению я не знаю как их скрыть под кнопку. У Вас они не влезают в одну строку? Может попробовать расширить контейнер с текстом и форму отправки комментария?

    Ответить

  8. Илья

    Ладно, все равно спасибо, я сделал в 3 строчки. Просто у меня большие смайлы я их через margin друг к другу близко сделал, будто кучка смайлов. Прикольно получилось, кстати. За скрип тоже спасибо, то что надо)

    Ответить

  9. Дмитрий

    Стоял плагин «QIP смайлы», но сейчас убираю все ненужные плагины. Отличное решение проблемы!

    Ответить

  10. Webliberty

    Дмитрий, я тоже стараюсь по возможности не использовать плагины, спасибо)

    Ответить

  11. Pavel

    Денис, а как вставлять смайлы в статьи? Получается, нужно писать код смайла, а он будет автоматически превращаться в смайл, так?

    Ответить

  12. Webliberty

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

    Если в настройках админки на вкладке Параметры можно поставить галочку напротив пункта «Преобразовывать смайлики в картинки» — тогда общепризнанные смайлы будут автоматически преобразовываться в графические.

    Ответить

  13. Андрей

    Здравствуйте. После обновления WordPress к версии 3.2.1 у меня перед полем ввода комментария не отображаются смайлики, но нужный код находится в файле comments.php. Не подскажете в чём может быть проблема?

    Ответить

  14. Андрей

    Смайлики остались те же самые, что и были до обновления, они не заменились на старые. В записях они отображаются, но не отображаются только над полем ввода комментария 🙁

    Ответить

  15. Дмитрий

    Андрей, скопируйте новые смайлики в папку со смайлами, при обновлении WP они заменяются на старые 😉

    Ответить

  16. Михаил

    Спасибо Денис за урок! Теперь у меня на сайте красивые смайлики!

    Мне ваша форма комментариев понравилась, можно ли скопировать код вашей формы в мою тему? А то у меня какая-то «корявая» форма…

    Ответить

  17. Webliberty

    Андрей, здравствуйте! Даже не знаю, попробуйте повторить все действия по установке смайликов, может быть что-то упустили… Если вероятную причину так и не найдете, то попробуйте воспользоваться другим вариантом, который я описывал Арине в комментариях выше.

    Михаил, попробуйте, но мне кажется она не подойдет Вам по стилю. Ведь главное индивидуальность и будет намного лучше если Вы модернизируете свою форму 😉

    Ответить

  18. Михаил

    Почему периодически смайлы возвращаются на стандартные? Уже 2 раза менял их обратно… Можно ли как то их зафиксировать что бы не менялись?

    Ответить

  19. Webliberty

    Михаил, они меняются только после обновления вордпресс до новых версий. Т.к. при обновлении старые файлы заменяются на новые, поэтому не забывайте их перезаписывать после применения обновлений. Или же используйте радикальный способ — назначьте для папки со смайлами права доступа только для чтения, тогда они уже никуда не «убегут» 🙂

    Ответить

  20. Максим Якушенков

    Спасибо Денис! Я целый час пытался поставить смайлы используя плагины+коды, как на других сайтах рассказывают, а результат — 0, не идет. Зашел на твой сайт, вставил код, все пошло и работает! Молодец!

    Ответить

  21. Ольга

    Скажите, а можно вставить смайлы на шаблон от Artister?
    Потому что я пробовала вставить код, но ничего не меняется.

    Ответить

  22. Webliberty

    Ольга, даже не знаю. Насколько я знаю, Artister верстает шаблоны для вордпресс? Я не пользовался этим, так что затрудняюсь ответить. Хотя по идее, если шаблоны специально под вордпресс сформированы, то исходники должны быть подходящими, попробуйте в разные места вставлять код и проверьте правильно ли делаете, все ли пункты инструкции выполняете.

    Ответить

  23. BaNru

    Так же менял смайлы, просто заменой картинок. И всё бы хорошо, если бы не одно досадное НО — при обновление блога, смайлы переписываются и возвращаются опять старые.

    Ответить

  24. Webliberty

    BaNru, аналогичная ситуация у всех. При обновлении вордпресс заменяет файлы. Поэтому сразу после обновления нужно не забывать менять их обратно. Я в папку со смайлами загрузил архив с новыми изображениями и после обновления распаковываю с заменой файлов. Если не охота тратить на это время, то на папку /wp-includes/images/smilies/ достаточно выставить права только для чтения и больше не придется их восстанавливать при обновлении.

    Ответить

  25. BaNru

    Хм, кстати, идея. Как же я сам до такого не додумался? А ты пробовал? Вордпресс при обновление не ругается?

    Ответить

  26. Webliberty

    BaNru, нет, я пока не пробовал, все руки не доходят. Права нужно через FTP выставлять, а я в основном пользуюсь веб-интерфейсом при доступе к серверу.

    Ответить

  27. BaNru

    Webliberty, зря. FTP наше все 😛 Советую Total Commander и NotePad++ с фтп плагином для быстрой правки!

    Ответить

  28. Webliberty

    BaNru, пользуюсь веб-интерфейсом по ряду причин.

    • Во-первых, удобная панель ISPmanager облегчает работу.
    • Во-вторых, крайне редко приходится ковыряться именно на сервере и загружать большие файлы, в окне браузера с этим справиться куда быстрее.
    • Ну а в-третьих, на работе у меня не достаточно административных прав устанавливать ПО, а дома для работы мне достаточно для работы одного браузера 🙂

    Вот так и получается, хотя NotePad++ и дома и на работе установлен) Спасибо за совет!

    Ответить

  29. Анна

    Здравствуйте! Подскажите пожалуйста, почему у меня смайлики вообще не отображаются изначально? Вроде в настройках галочка стоит преобразовывать смайлики в картинки и в папке они есть, что не так?

    Ответить

  30. Webliberty

    Анна, так Вы их вообще то используете в тексте? Бегло пробежался — не нашел. В настройках галочка отвечает за то, что если в тексте используется текстовый смайл :) то он будет преобразован в графический — 🙂

    Ответить

  31. Руслан

    Благодарю Вас! Все отлично работает! 😎 Давно хотел поставить красивые смайлы типа скайповских, только без плагина. Ваш пост помог.

    Ответить

  32. Гульнара

    Интересная статья! Мне самой нравится работать со смайликами, но вот я думаю… Стоит ли вставлять их в блог, посвященному бизнесу? К месту ли они будут там?

    Ответить

  33. Webliberty

    Гульнара, скорее всего Вы правы, они не всегда уместны, если раскрывается серьезная тема, то лучше обойтись без них.

    Ответить

  34. Максим

    Добрый день, Денис! Огромное спасибо за пост, у меня все получилось с первого раза, хотя являюсь представителем «чайников», ну или начинающим, кому как нравится. Еще хотел спросить есть ли на вордпрессе возможность без плагина выводить форму регистрации (авторизации) пользователей, только не стандартную.

    Ответить

  35. Елена

    Здравствуйте, смайлики это здорово, вот, если бы еще при отправлении комментария можно было бы файл вложить. Денис, может быть Вы сможете что-нибудь посоветовать?

    Ответить

  36. Webliberty

    Максим, не знаю))) Регистрацию с самого первого дня убрал и не планирую ставить. В рамках обычного блога она ни к чему. Но вероятно такие решения есть, поищите.

    Елена, только специальный плагин. Но я бы и этого не советовал — во-первых опасно, т.к. могут прикрепить вредоносный файл, а во-вторых файлы можно передавать и по почте или через обратную связь.

    Ответить

  37. Руслан

    У меня возникает конфликт с плагином MCEComments, т.е. когда плагин включен смайлы отображаются но не кликабельны, когда плагин выключен смайлы полностью работают. Если какие то варианты не отключая плагин решить проблему.

    Ответить

  38. Webliberty

    Руслан, нужно экспериментировать. Возможно есть одинаковые переменные, вот они и не работают.

    Ответить

  39. Vladimir

    Здравствуйте. Сделал, как написано в статье, почему то смайлы не появились не над, не под текстареа. В чем может быть проблема?

    Ответить

  40. Юрий

    Огромное спасибо за скрипт смайлов. Все заработало с первого раза, только в css изменил ограничение размера смайлов с 12рх на 64рх, смайлы свои подобрал поприкольнее. Доволен аки лев после ужина 😀

    Ответить

  41. Webliberty

    Vladimir, здравствуйте. Вероятные проблемы можно выявить по комментариям чуть выше, вероятно тот файл в который вставляете код не участвует в построении комментариев, а используются файлы WP.

    Ответить

  42. Гульнара

    Я скачала у вас колобков мини и установила на свой блог, но у меня почему-то встали стандартные… Может я что-то не то сделала?

    Ответить

  43. Webliberty

    Гульнара, попробуйте почистить кэш браузера. Кроме того, если Вы используете специальные плагины для вставки смайлов, то у них свой набор картинок.

    Ответить

  44. Андрей

    У меня пока смайликов нет на блоге, но судя по статье, можно поставить без проблем. Надо только решиться на этот ответственный шаг 🙂

    Ответить

  45. Елена

    Денис, до этого я уже устанавливала смайлы при помощи скрипта. Видимо, после обновления ВП, они автоматом заменились на стандартные. Сегодня решила вновь установить новые смайлы. Нашла ваш материал, т.к. не помню уже что и как делала. Пошагово выполнила всё, что нужно (сложностей, вроде, никаких), но смайлы мои в кол-ве 17 штук вышли с битыми картинками. Откуда они взяли, как их убрать — не знаю. В папке со смайлами находятся только эти рабочие колобки, а ЧТО ещё к ним подгрузилось…Помогите разобраться, пожалуйста!

    Ответить

  46. BlogGood

    А нельзя не как сделать, чтобы смайлики отображались в админ панели при написании статей. Спасибо за ответ!

    Ответить

  47. Оксана

    Добрый день, Денис! Спасибо, большое смайлики встали, но почему-то в комментариях они отображаются, очень мелко. Подскажите пожалуйста, как это изменить?

    Ответить

  48. Webliberty

    Елена, достаточно просто почистить кэш в браузере и они вернуться на свои места) При обновлении WP они заменяются на стандартные, так что не забывайте их менять заново, не так уж и часто выходят новые версии. Я поместил в ту папку со смайлами архив со своими и при обновлении просто распаковываю архив, заменяя их.

    BlogGood, можно конечно попробовать что-нибудь придумать, а так я обычно копирую их со страницы на соседней вкладке)

    Оксана, здравствуйте! Можно в CSS назначить им свойство с размерами изображения. Сейчас у Вас такие свойства:

    img.wp-smiley {
    	max-height: 12px;
    	margin: 0;
    	padding: 0;
    	border: none;
    }

    Т.е. максимальная высота стоит 12 пикселей, измените это значение.

    Ответить

  49. Оксана

    Спасибо, Денис, Вы как всегда, молодец, помогли! 🙂

    Ответить

  50. Владимир

    У меня тоже TwentyTen, поставил смайлики через comments-template, добавил скрипт в футер. Вот только смайлики на черном фоне почему-то, и в кучку сбились. Подскажите, как исправить?

    Ответить

  51. Webliberty

    Владимир, в CSS своей темы настройте внешний вид для класса img.wp-smiley. Чуть выше есть пример.

    Ответить

  52. Галина

    Извините за тупой вопрос. А как их перезаписать? Можно поподробнее каждый шаг описать? Для особо одаренных. Скачала Ваши красивые смайлики, зашла в корневой папке в smilies, а дальше что?

    Ответить

  53. Webliberty

    Галина, замените файлы в папке smilies на новые из архива — вот и все! Вы кажется слишком перемудрили, ведь это очень просто 🙂

    Ответить

  54. Галина

    Я удалила все файлы из папки smilies, нажала: загрузить файлы в текущую директорию, выбрала файлы из скачанной папки. Всё, в папке smilies они есть, но в комментариях те же страшненькие смайлики…

    Ответить

  55. Webliberty

    Галина, почистите кэш в браузере! Я вижу на Вашем блоге уже новые смайлы!

    Ответить

  56. Алексей

    И правда, от родных смайликов инфаркт может стукнуть. Я скачал у вас колобков и очень доволен их видом. Правда после обновления до 3.5.1 они стали снова родненькими, пришлось заново перекачать их в папку.

    Ответить

  57. Александр

    Денис, спасибо за статью. До сих пор актуальна.

    У меня шаблон блога как раз из той категории, где нужно дополнительно в футере код прописывать. Благодаря этой статье даже гуглить ничего не пришлось. Колобки класс!

    Почитал каменты — многие спрашивают как сделать, чтоб в админке при написании поста можно было смайлы сразу ставить — решение есть конечно, это замена стандартного редактора на расширенный, например на Ultimate TinyMCE, или аналогичный. Уж не знаю, несет ли он большую нагрузку на сервер или нет, но если блог еще молодой, а хозяин блога не очень «дружит» с html и прочими тегами — думаю он будет интересен. Значительно расширяет функционал стандартного редактора.

    Ответить

  58. Таможенник

    Добрый день Денис! Были проблемы с установкой смайликов как у Арины, но! Благодаря Вашим советам добавил код в футер и все установилось и стало кликабельно! Нижайший Вам поклон! На Вашем блоге все так доступно и легко. Буду в дальнейшем пользоваться этой инфой!

    Ответить

  59. Иришка

    Спасибо за статью! Некоторые моменты из нее очень пригодились, я использовала все названия стандартных, только новые как-то нельзя добавить… вернее они добавились, но в комментариях не показываются, только название и все. А вообще очень понравился ваш стиль написания статей! Очень просто и с любовью что ли 🙂

    Ответить

  60. Ольга

    Спасибо большое! Всё понятно и доступно. Установила себе. Очень нравится, что без плагина. Предпочитаю кодом пользоваться, если, конечно, разберусь как)

    Ответить

  61. Webliberty

    Иришка, там необходимо делать дополнительные правки в файлах движка, чтобы добавить новые, не разбирался подробно, но сделать можно при желании.

    Ольга, пожалуйста, пробуйте и у Вас все получится, если возникнут вопросы как установить код — обращайтесь, можно на почту.

    Ответить

  62. Стас

    Добрый вечер Денис! У меня такая проблема. При добавлении кода в comments.php вместо слова «комментировать», «отправить» выходят вопросы «???». Подскажите как с этим бороться.

    Ответить

  63. Webliberty

    Стас, пересохраните файл с кодировкой UTF-8 без BOM. Это можно сделать, например, в редакторе Notepad+

    Ответить

  64. Стас

    Огромное спасибо, Денис! Помогло!

    Ответить

  65. Ольга Суворова

    Здравствуйте! Спасибо Вам за статью, после долгих мучительных поисков нашла отличную информацию, как поменять этих простеньких колобков от wordpress на других, посимпатичней. Вот только у меня к Вам вопрос: почему они у меня в комментариях такие малюсенькие получаются, вся красота мельчает? 🙁

    Ответить

  66. Webliberty

    Ольга, здравствуйте, попробуйте в CSS вставить такую строку, она должна помочь:

    img.wp-smiley {
    	width:19px;
    	height:19px;
    }

    Ответить

  67. Анжелика

    Здравствуйте, пробовала поставить смайлики, но в моей теме они становятся не так, как нужно, а именно или выше поля комментирования, или под полем отправить комментарий. Как расположить красиво, как у Вас сразу под полем комментирования? У меня в теме код странный, я по разному пробовала, или выше или ниже получается, а как нужно нет. Вот кусок кода, с которым я не могу справиться

    Ответить

  68. Webliberty

    Анжелика, код был «порезан» WP, напишите мне на электронную почту, попробуем разобраться вместе.

    Ответить

  69. Анжелика

    Написала Вам на электронную почту. Жду ответ 😉

    Ответить

  70. Светлана

    Я сдаюсь… Ничего не понимаю. Очень хочу смайлики, но никак не могу их вывести в комментарии. У меня в Comments (comments.php) нет кода textarea. Я уже установила плагин Kama WP Smiles. Думала, что появятся, но отображаются они только у меня в admin панели.

    Пыталась вставить код в Comments (comments.php), но в итоге кнопка смайликов располагалась в левой части экрана и в середине текста. Куда только я код не вставляла ничего не получается. Как мне разместить смайлики без плагина?

    Ответить

  71. Webliberty

    Светлана, Ваш сайт кажется расположен на wordpress.com или используется форма комментирования Jetpack Comments, которая подгружается через iframe, поэтому что либо изменить не получится.

    Ответить

  72. Ольга

    Webliberty, огромное спасибо за статью! У меня тема pilcrow. Не могла включить смайлы. Т.е. они появлялись в том числе в тех статьях, где были отключены комментарии. Случай как у Арины со вставкой кода в файл футер.пхп.

    Смайлы не поместились в одну линию и даже еще один колобок вылез на вторую строку. Но это настроения не портит! Значение ширины меняла в т.ч. и на ширину текстового поля темы — У меня, примерно, 450 пикселей — тоже не помогает. Они, видимо, физически не помещаются.

    Ответить

  73. Webliberty

    Ольга, видимо да, не влезают. Но смотрится ничуть не хуже 🙂

    Ответить

  74. Ольга

    Да, тем более, накачала себе разных смайлов по своей теме, так они теперь два полноценных ряда занимают — вполне гармонично.
    На еще одном сайте у меня тема стоит mesocolumn , так там та же абсолютно история со смайлами. Все прошло легко благодаря Вам, еще раз спасибо.

    Ответить

  75. Елена

    Здравствуйте, спасибо, очень интересное решение. Обрадовалась по-началу, однако куда я только этот скрипт не вставляла и перед textarea и после, смайлы выводятся, но не работают 🙁

    Может, вы знаете в чем проблема? Подскажите, пожалуйста. Я ранее установила wp-Monalisa, но этот плагин располагает смайлы аж после кнопки отправить, что как-то неудобно и нелогично. Пробовала найти решение, чтобы переместить их повыше, но как ни искала, не нашла… Обидно… Заранее благодарю 😳

    Ответить

  76. Webliberty

    Здравствуйте, Елена, почитайте пожалуйста самые первые комментарии — эта проблема уже встречалась и решение было найдено.

    Ответить

  77. Евгений

    Webliberty, приветствую, а скажи, как расставить смайлы в угодном для меня порядке? Я поставил по твоему способу в комментариях, но вот порядок смайлов меня не очень радует.

    Ответить

  78. Webliberty

    Евгений, откройте файл /wp-includes/functions.php найдите следующую строку:

    krsort($wpsmiliestrans);

    и закомментируйте ее таким образом:

    // krsort($wpsmiliestrans);

    Теперь сортировка массива отключена и Вы самостоятельно можете менять местами смайлики. Для этого в этом же файле найдите строку:

    $wpsmiliestrans = array(

    это массив, внутри которого можно менять строки местами, например передвинуть в другое место

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

    Как еще один вариант — просто переименовать названия gif файлов. Но учтите, что после обновления WordPress, все ручные правки пропадут и придется заново выполнять эти действия.

    Ответить

  79. max

    Как сделать так, чтобы при наведении указателя мыши на смайл курсор менял свой вид на руку?

    Ответить

  80. Webliberty

    Чтобы при наведении на смайл менялся указатель курсора мыши необходимо задать класс для изображений, например заменив строку кода таким образом:

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

    И затем в CSS задать для этого класса стиль:

    img.smilies {cursor: pointer;}

    Ответить

  81. max

    Вопрос не по теме: на Вордпресс загрузил 5 картинок в новости, а в папке uploads их штук 50, вместо одной еще +8 но разного размера. В медиафайлах все обновил, но не помогает, можно это исправить? А то много места занимают.

    Ответить

  82. Webliberty

    Настройки >>> Медиафайлы, размеры миниатюр, средний размер и крупный размер: выставить значения равными нолю. В папке uploads вручную удалить все изображения с размерами, оставить только исходники.

    Есть один нюанс — если в теме используется какой либо из этих способов вывода изображений — они пропадут со страниц. Настоятельно рекомендую сделать бэкап перед изменениями. У себя использую именно этот метод.

    Ответить

  83. Лиса

    Здравствуйте, подскажите, пожалуйста, на моем сайте установлены стандартные смайлики Вордпресс, но они отображаются на черном фоне. Тега textarea нет в comments.php.

    Ответить

  84. Webliberty

    Лиса, они у вас сохранены с черным фоном. Могу предположить что открывали в графическом редакторе, который не поддерживает прозрачный фон и затем сохранили, поэтому фон и стал таким. Выберите любой набор смайлов из этой статьи и загрузите их на сервер в нужную папку — темный фон должен исчезнуть.

    Тег textarea, в зависимости от того как сверстан шаблон, может находиться и в другом файле, например functions.php Вашей темы или даже в файле comment-template.php являющемся файлом ядра WP, также могут быть и другие варианты.

    Ответить

  85. Дмитрий

    Доброго времени суток. Вот снова обращаюсь к вашему блогу, т.к. снова понадобились смайлики. Уж больно рецепт у вас хороший)
    Вот только на новой обложке сайта не могу найти заветный textarea) Где б его поискать?

    Ответить

  86. Webliberty

    Дмитрий, добрый день! Поискать можно в файле comment-template.php ядра ВордПресс или functions.php темы. Где-то он обязательно должен находиться) Посмотрите комментарии выше, вроде уже обсуждались такие вопросы.

    Ответить

  87. Boltovanin

    Доброго времени суток! А как поступить, если смайликов очень много и часть из них надо скрыть под катом?

    Ответить

  88. Webliberty

    Теоретически, часть можно скрыть аяксом и выводить по клику. На практике затрудняюсь привести пример 😳

    Ответить

  89. Максим

    Денис, здравствуй! Твой блог это кладезь полезной информации, работающих примеров и толковых советов! Какой раз уже выручает, спасибо!

    Пару дней назад установил себе смайлики на блог, правда по примеру с другого ресурса, но скрипт аналогичен тому. Сейчас был замечен один недостаток, вернее незавершенность моей темы. Вернулся к тому сайту по котором делал, но ответов я там не нашел, то ли авторы не смыслят в том, что делают, то ли у меня такой особый случай. Решил обратится за помощью к свободному вебмастеру 🙂

    Смайлики работают хорошо, даже сделал подсветку курсора рукой при их наведении, но заметил одну штуку, что смайлы которые стоят в тексте статьи принимают стили прописанные к изображению на сайте. В форме комментариев такого не происходят. Смайлы живут своей жизнью как и должно быть. Вот удручает их отображение в статье.

    Можно ли как-то это исправить? Почитал комментарии к твоей статье, нашел только как прописать стиль появления курсора-руки, а как быть со стилями в статье?

    Заранее благодарю за дельный совет как это безобразие исправить!))

    Ответить

  90. Webliberty

    Максим, а что с ними не так? Стили для смайлов, расположенных в основном тексте, назначаются в style.css для класса img.wp-smiley

    Ответить

  91. Лекс

    День добрый! Сегодня обновился движок сайта до 4.2, у меня стояли смайлы размером 50х50, сегодня же они имеют размер 13, в css указан максимальный размер 50. Не знаю что делать и где найти причину( Помогите пожалуйста.

    Ответить

  92. Webliberty

    Лекс, здравствуйте! К сожалению, у меня плохие новости. Разработчики WP в обновлении 4.2 решили отказаться от смайликов в пользу Emoji. Переписка на официальных англоязычных форумах поддержки на протяжении последних дней не приносит результатов — они не планируют возвращать смайлы и даже не хотят предоставить пользователям выбор.

    Однако мне удалось найти способ вернуть прежние смайлики и отключить Emoji, обновил статью! Заодно и проблема с заменой картинок после каждого обновления WP решилась 🙂

    Ответить

  93. Юлия

    Денис, подскажите, как можно смайлики совсем удалить с сайта? Что-то я сними уже намаялась после последнего обновления ВП. Решила совсем от них избавиться. Удалила папку с ними с хостинга, остались крякозябры все равно. Еще где-то код нужно удалить? В каких файлах?

    Ответить

  94. Webliberty

    Юлия, смайлики можно отключить в настройках, убрав галочку напротив пункта «Преобразовывать смайлики наподобие :-) и :-P в картинки».

    Emoji можно отключить путем исключения загрузки скриптов и стилей (пример приведен в решении для 4.2 и выше).

    Но в статьях и комментариях все равно останутся символы, просто они не будут преобразовываться в изображения. Придется удалять, редактируя все подряд, или оставить как есть.

    Ответить

  95. Юлия

    Webliberty, спасибо за ответ. Тогда мне нужно все-таки все настраивать. Чтобы красиво они выводились.

    Ответить

  96. Alexander Meier

    Супер! Денис, спасибо за дополнение к статье насчет Эмодзи.
    Честно, был в шоке от такого странного решения разработчиков ВордПресс.

    Скажи, а подобным образом можно «вырезать» некоторые скрипты из темы? Можно к тебе обратиться за помощью по этому вопросу?

    Ответить

  97. Webliberty

    Саша, вырезать скрипты из темы лучше напрямую, то есть прямо из шаблона убирать коды их вызова. Чтобы не получилось так, что сначала их регистрируем, а потом отключаем. Ну а так, да, можно с помощью хуков отменять регистрацию скриптов и стилей, делать замену стандартных функций на свои. Напиши на электронку, помогу чем смогу)

    Ответить

  98. Сергей

    Подскажите, добавил часть кода (Убираем размеры смайликов равные 1em (новые задаются для класса .wp-smiley) в functions.php, почему он может не срабатывать?

    class="wp-smiley" style="height: 1em; max-height: 1em;

    Этот код все равно остается в контенте.

    Ответить

  99. Webliberty

    Сергей, почистите кэш, может в этом проблема.

    Ответить

  100. Сергей

    Денис, привет! Спасибо за решение с Emoji, а то после обновления движка все смайлы слетели 😉

    Ответить

  101. Webliberty

    Сергей, привет! Да, неприятная ситуация возникла после обновления… Разработчикам не нужно было добавлять их поддержку в ядро. Лучше бы сделали опцией или вынесли в отдельный плагин, например, в качестве еще одного модуля в составе Jetpack.

    Ответить

  102. Юлия

    Знаете, я мучилась-мучилась с этими смайликами. Нашла код и удалила их совсем. Вот так с плеча убрала их совсем. Попробую пока пожить без смайликов, если будет скучно верну обратно и попробую все сначала настроить.

    Ответить

  103. Alexander Meier

    Ок, спасибо за отзывчивость. Немного разгребусь по времени — обращусь.

    Ответить

  104. Onizuka

    Огромное спасибо за борьбу с эмодзи в 4.2! А то я весь моск сломал, пока пытался понять, как их оттуда выпилить… Руки бы пообрывать этим «рационализаторам»! Кому нужны эмодзи — есть в конце концов отдельный плагин!

    Ответить

  105. Максим

    Webliberty, уже разобрался! Нужно было со стилями немного повозиться.

    Это я хорошо зашел. У меня WordPress 4.1.1. и еще не обновлял, теперь знаю, что делать, если возникнут проблемы со смайликами. Помню, сколько времени потратил на добавление и переименование стандартного набора. Не хотелось бы терять полюбившиеся смайлы. Еще раз спасибо за проделанную работу! 🙂

    Ответить

  106. Типичный Интернетчик

    Люди жалуются, что с обновлением движка или темы приходится все настраивать и перестраивать по новой. Бегло глянул код, почему все это не реализовать как плагин (что вполне реально)? Пользователям удобно! Автору переходы на сайт! 😎

    Ответить

  107. Webliberty

    С учетом новых доработок после обновления WP не придется корректировать код или менять файлы, внесенные изменения останутся на прежнем месте.

    Ответить

  108. Евгений

    Спасибо, нашел очень нужную информацию. А то совсем уже устал бороться со смайликами.

    Ответить

  109. Милена

    Здравствуйте! Решилась исправить эту «ошибку разработчиков» в вордпресс 4.2. Первый раз делала всё по вашей статье и у меня получилось. Сейчас решила переделать и ничего не получается. Когда вставляю код в файл functions.php, то у меня он весь вылезает над шапкой сайта да и в редакторе тоже. Помогите, пожалуйста, сил уже нет смотреть на эти смайлы. Заранее спасибо!

    Ответить

  110. Webliberty

    Милена, вероятно неправильно размещаете код, поэтому вместо исполнения он выводится на экран. Попробуйте вставить в самом конце файла перед ?>

    Ответить

  111. Милена

    Webliberty, ну конечно же! Я же чайник во всех этих кодах! Для таких как я нужно конкретно указывать куда ставить код. Я же в конец поставила и всё. Так что лучше в статье допишите, нас таких много непонятливых блондинок.

    Теперь получилось. Спасибо большое! Только смайлы теперь почему-то вылезли и новые, и старые, которые раньше по умолчанию в вордпрессе были 🙁

    Ответить

  112. Webliberty

    Значит остался старый код, который прежде использовали, поэтому они два раза и выведены рядом с формой.

    Ответить

  113. Милена

    Да, точно. Только что сама нашла. С прошлого раза остался. Большое спасибо Вам за помощь и за Вашу статью. Что бы я без Вас делала? 😮

    Ответить

  114. Alex

    Здравствуйте. Подскажите пожалуйста, как можно переложить смайлы в корневую папку (site.ru/smilies/)? Пытаюсь-ковыряюсь, но пока ничего не выходит 😥

    Большое спасибо за реанимацию старых смайлов, а то обновился и тут же опечалился. Теперь смайлики на своих местах и это хорошо!

    Ответить

  115. Webliberty

    Alex, здравствуйте. Замените в comments.php 14 строку приведенного кода на такую:

    $dm_showsmiles .= '<img src="'.get_site_url().'/smilies/'.$dm_smile.'" alt="'.$tag.'" onclick="addsmile(\''.$tag.'\');"/> ';

    А в functions.php замените 4 строку на такую:

    return site_url( "/smilies/{$img}", __FILE__ );

    Ответить

  116. Alex

    Webliberty, спасибо большое. Сработало!

    Хотел еще поинтересоваться, как правильно добавить еще смайликов, чтобы их было не 22, а к примеру 30 ? И можно ли как-то дополнительно оптимизировать код, чтобы он был более статичным ? Понимаю, что вопрос специфичный и универсальность кода пропадает с этим, но я думаю, что если будет инструкция, то те кому это необходимо подправят под себя. Спасибо 😉

    Ответить

  117. Максим

    Все работает, спасибо! Откладывал обновление движка до 4.2, пока до смайликов руки не дойдут, теперь все поменял и обновил вордпресс — все получилось! 🙂

    Ответить

  118. Webliberty

    Alex, для добавления новых отредактируйте array массив. А что подразумеваете под статичность кода? Я опубликовал общедоступный вариант, у себя подключил чуть иначе, но суть от этого не меняется.

    Ответить

  119. Константин

    Здравствуйте! Когда вставляю код, то форма комментариев исчезает. Не подскажете как правильно сделать? Буду очень благодарен!

    Ответить

  120. Webliberty

    Константин, здравствуйте, уточните пожалуйста, код который в comments.php или functions.php?

    Ответить

  121. Константин

    Webliberty, вставляю в comments.php.
    Сейчас у меня вообще не отображаются смайлики в форме комментариев. Хочется хотя бы их вывести под формой комментариев. Просто не все пользователи знают коды смайликов.

    Тема оформления у меня не стандартная. Может что-то нужно по-другому мне делать?

    Ответить

  122. Webliberty

    Константин, напишите мне на электронную почту с примерами исходников (что куда вставляли), чтобы понять причину.

    Ответить

  123. Ольга Суворова

    Здравствуйте! Подскажите, пожалуйста, с чем может быть связана такая проблема: после восстановления блога из резервной копии на блог вернулись вордпрессовские смайлы. Хотя в уже опубликованных комментариях остались красивые смайлы, в теме блога есть папка с закачанными смайлами, проверила, коды в comments.php и functions.php стоят… Что делать-то?..

    Ответить

  124. Webliberty

    Ольга, попробуйте очистить кеш, если не поможет — выполните все действия повторно согласно инструкции, возможно в резервной копии сохранены не все изменения.

    Ответить

  125. Ольга Суворова

    Webliberty, Все это я проделала, однако, как потом выяснилось, проблема произошла из-за очередного обновления Вордпресс. Новое обновление многое «попортило» у меня на блоге, не только смайлы, пришлось все возвращать из резервной копии базы данных. и не обновляться.

    Ответить

  126. Seyran

    Здравствуйте! Попробовали установить данным способом смайлы на наш сайт, но после клика на них + нажатия оставить комментарий выводятся символы вместо смайлов. В чем может быть проблема? Как это исправить возможно ли или нет исправить, подскажите пожалуйста?

    Ответить

  127. Webliberty

    Seyran, в консоли WordPress на странице Настройки — Настройки публикации в разделе Форматирование должен стоять флажок напротив «Преобразовывать смайлики наподобие :-) и :-P в картинки».

    В виду отказа WP от поддержки смайликов рекомендую все-таки использовать Emoji. Как сделать работу с ними простой и удобной подробно описано на этой странице.

    Ответить

  128. Seyran

    Хорошо, спасибо большое. Кстати, классный блог, молодцы 😉

    Ответить

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea:

Отправляя комментарий, вы соглашаетесь с политикой конфиденциальности.