Как без плагина установить смайлики и добавить новые для WordPress 4.2 и выше

Совсем недавно я обновил WordPress. После обновления WordPress на версию 4.2 исчезли стандартные смайлики. И если вы выводили смайлики без плагина (вот таким способом, как в этой статье), вы должны были увидеть у себя на блоге в комментариях что-то подобное, как у меня:

Не беда! Я даже рад, что так случилось. Раньше после каждого обновления приходилось повторно загружать мои смайлики-колобки, чтобы заменить стандартные WordPress. Это немного напрягало. Теперь этот способ, о котором я расскажу далее, даст возможность забыть про это неудобство, так как смайлики будут храниться в папке вашей темы. И еще: можно добавить дополнительно любые смайлики, которые вы скачаете.

Ну, что, поехали?!

Скачайте понравившиеся смайлики:

Колобки мини

Колобки

Смайлики Skype

Теперь в каталоге с названием вашей темы блога создайте папку «smalies» и залейте туда изображения смайлов:

Теперь откройте файл темы «comments.php». Найдите в файле вот такой код:

<p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>

Перед ним вставьте вот этот код:

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

Внимание, если в файле присутствовал этот код:

<script ENGINE="text/javascript">
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:95%; 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',
	  ':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 );
}

Вот и весь процесс по установке смайликов на  WordPress без плагина.

Как добавить новый смайлик на WordPress?

Чтобы добавить новые смайлики, достаточно вставить в файл «functions.php» к остальным смайликам

':mrgreen:' => 'icon_mrgreen.gif',
	':neutral:' => 'icon_neutral.gif',
	':twisted:' => 'icon_twisted.gif',
	  ':arrow:' => 'icon_arrow.gif',
	  ':shock:' => 'icon_eek.gif',

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

вот такой шаблон:

':название смайлика:' => 'название картинки.gif',

Вот пример:

':rose:' => 'ax.gif',

Только не забудьте добавить новый смйлик в папку «smilies». В нашем примере название картинки смайлику будет «ax.gif».

Вот так у меня сейчас выглядит форма для комментариев со смайликами. Там я добавил четыре новых:

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

19 Ответов на комментарий - Как без плагина установить смайлики и добавить новые для WordPress 4.2 и выше

1. Тамара Полякова

   02.05.2015 в 15:04

   Спасибо Степан за интересную и полезную статью. Хорошо, что можно смайлики ставить без плагина!
2. Степан => автор блога

   02.05.2015 в 20:00

   Пожалуйста! Здесь можно обойтись и без плагина.
3. Сергий

   16.06.2015 в 13:51

   не работает. у меня как были иероглифы так и остались…
4. Степан => автор блога

   17.06.2015 в 00:17

   Что-то вы не так делаете. Расскажите, как вы устанавливали код и в какие файлы.
5. Сергий

   17.06.2015 в 11:33

   смайлы отобразились, забыл папку бросить в папку темы. теперь есть другая проблема, смайлы обведены рамкой, находятся на большом расстоянии от друг друга, и не в одну строчку! подскажите как поправить??? понимаю что через css а не понимаю где, в посте смайлы без рамки. воттакой код в css на смайлы
   img.wp-smiley
   {
   border:none;
   margin:0;
   padding:0;
6. Степан => автор блога

   17.06.2015 в 23:40

   Смотрел ваш сайт, там смайлики отображаются отлично. Вот CSS стили для вас:

   .art-article img, img.art-article {
     border: 0px solid;
     margin: 0px;
     padding: 0px;
   }
   
7. Сергий

   18.06.2015 в 05:28

   спасибо за подсказку. сам разобрался, вот они и отображаются нормально
8. Храмовник

   31.07.2015 в 14:09

   Спасибо, если честно мозг уже себе вынес этим обновлением и сначала вообще сделал бэкап сайта, долго терпел с обновлением, понимаю это рискованно, до Вас пробовал примерно 5 способов. Сработал именно Ваш.
9. Степан => автор блога

   01.08.2015 в 12:12

   Пожалуйста!
10. Светлана

    01.10.2015 в 12:13

    Здравствуйте, после того как редактирую файл «functions.php», вставляя код, сайт перестает работать.
11. Степан => автор блога

    02.10.2015 в 22:38

    Здравствуйте, Светлана! Попробуйте установить код в самом начале, перед

    <?php
12. Анна

    20.12.2015 в 21:01

    Вроде не запутали, но у меня не получилось установить смайлики после обновления
13. Анна

    22.12.2015 в 20:44

    Решила проблему с помощью плагина.
14. Степан => автор блога

    23.12.2015 в 00:20

    Проверьте название папки, где находятся смайлики. А также, проверьте, правильно ли вы вставили код и в те ли файлы.
15. Степан => автор блога

    23.12.2015 в 00:25

    А как называется плагин? Может кому-то пригодится?
16. Анна

    23.12.2015 в 11:10

    Плагин Kama WP Smiles
17. Степан => автор блога

    28.12.2015 в 21:48

    Спасибо!
18. Андрей

    24.01.2019 в 17:09

    Здравствуйте! А у меня не появляются смайлики, хотя вроде делал все как вы описывали. Не подскажите в чем проблема
19. Степан => автор блога

    05.02.2019 в 00:27

    Здравствуйте, Андрей. А что выводит?

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: wordpress, без плагинов