Смайлики в комментариях на WordPress без плагина

Опубликовано: 01.09.2018

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

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

Уроки WordPress. Смайлы в комментариях - http://wp-voprosov.net

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

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

Шаг 1-й.

На первом шаге нам предстоит внести изменения в файл functions.php . Нельзя сказать, что это основная часть, но приоритет явно превышает остальные шаги, поэтому начнем именно с этого. Откройте данный файл ( functions.php ) и в конце перед знаком ?> добавляем следующий код:

//свой адрес для смайликов function custom_smilies_src($src, $img){return get_bloginfo('template_directory').'/images/smilies/' . $img;} add_filter('smilies_src', 'custom_smilies_src', 10, 2); //преобразование символов 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', '8)' => 'icon_cool.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_action('init', 'classic_smilies_init', 1); //Отключить загрузку скриптов 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', 'disable_wp_emojis_in_tinymce' ); function disable_wp_emojis_in_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } }

В содержание этого кода входит изменение адресного пути смайликов, мы ведь будем выводить свои, а не стандартные. Также преобразование символов в указанную картинку. И последние части кода отключают загрузку JavaScript не так давно добавленной новой функции Emojis.

Теперь обратим внимание на строку get_bloginfo('template_directory').'/images/smilies/', которая определяет путь расположения смайликов. Первая папка «images» она должна быть внутри вашей темы, а следом идет «smilies» непосредственно с нашими смайлами (скачиваем их здесь ). То есть папка внутри папки, чтобы не разводить беспорядок. Ну или можете изменить на свой путь, как удобнее.

Следующая часть кода, на которую также стоит обратить внимание, это преобразование символов в картинку. Если возникнет необходимость добавить еще какие-нибудь смайлы, то достаточно продублировать подобную строчку ':mrgreen:' => 'icon_mrgreen.gif', и прописать свои новые значения.

Пример.

'символ смайла или название, пример, bandit' => 'название картинки, отвечающей за указанные символы',

Все это прописывается в одинарных кавычках.

Шаг 2-й.

На втором шаге создадим отдельный файл, со скриптом отвечающий за добавление смайла в поле ввода по клику на него. Плюс вывод самих смайлов через тег <img> обернутую ссылкой. Откройте любой редактор, создайте новый документ и добавьте в него ниже представленный код.

Сохраните этот файл под именем smilies.php и загрузите его на сервер в вашу текущую тему. И обратим минуточку внимания на эту конструкцию:

<a href="javascript:grin(':?:')" title="Сомнение"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_question.gif" alt="Сомнение" /></a>

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

Пример.

<a href="javascript:grin('символ смайла или название, пример, bandit')" title="Сомнение"><img src="<?php bloginfo('template_url'); ?>/images/smilies/название картинки, отвечающей за указанные символы" alt="Сомнение" /></a>

Шаг 3-й.

Основную часть работы мы выполнили, теперь перейдем к выводу смайлов возле формы комментарий. Откройте файл comments.php и после тега <textarea> </textarea> нужно добавить следующий код (если данного тега не будет, то после <?php comment_form(); ?> добавьте):

<div class="smiwp"><a href="javascript:;" id="comment-smiley">смайлы</a></div> <div class="smiwp1"><?php include(TEMPLATEPATH . '/smilies.php'); ?></div>

Первая часть – это будет кнопка при нажатии, на которую появятся смайлы.

Вторая част – подключение ранее созданного шаблона с выводом смайликов.

Шаг 4-й.

Подключаем небольшой скрипт для плавного появления смайлов при нажатии на кнопку. Откройте файл footer.php и в конце перед закрывающем тегом боди </body> добавляем следующий код:

Шаг 5-й.

Мы подошли к концу и в последнем шаге осталось добавить стили оформления. Откройте файл style.css и где-нибудь в конце пропишем стили:

/*размер смайлов*/ .wp-smiley { max-height: 20px !important; width: 20px !important; height:20px !important; } /*стили кнопке*/ .smiwp1, .smiwp2 { display: none; } .smiwp a { background: #eee; color: #616161; display: inline-block; line-height: 35px; padding: 0 6px; }

Посмотреть Demo

На этом все. Если возникнуть трудности пишите их в комментариях разберемся что к чему.