В сегодняшнем посте рассмотрим один способ установки смайликов на WordPress без каких-либо плагинов. Мы будем использовать отдельные функции и внедрять их в файлы вашей текущей темы. Это позволит сохранить весь проделанный труд при обновлении движка и не затрагивать редактирование системных файлов. По сути, весь отвечающий функционал за смайлы, перенесем в тему, что и станет основным местом управления.
Смайлики уже давно стали частью сопровождением виртуального общения, в мессенджерах, форумах, блогов, сайтов и т.д. Они позволяют выражать эмоциональность, точнее, подчеркивать характер написанного сообщения. Иногда даже вместо набора слов достаточно оставить один смайлик, чтобы показать свою эмоцию в ответе.
Устную часть материалы прошли теперь перейдем к реализации задуманного плана. Сложных действий нет, поэтому все должно пройти гладко просто следуйте шаг за шагом написанной инструкции. По окончании в ваших комментариях будут добавлены смайлики довольно красивого вида и с приятным оформлением.
Шаг 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> обернутую ссылкой. Откройте любой редактор, создайте новый документ и добавьте в него ниже представленный код.
<script type="text/javascript" language="javascript">
/* <![CDATA[ */
function grin(tag) {
var myField;
tag = ' ' + tag + ' ';
if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') {
myField = document.getElementById('comment');
} else {
return false;
}
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = tag;
myField.focus();
}
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var cursorPos = endPos;
myField.value = myField.value.substring(0, startPos)
+ tag
+ myField.value.substring(endPos, myField.value.length);
cursorPos += tag.length;
myField.focus();
myField.selectionStart = cursorPos;
myField.selectionEnd = cursorPos;
}
else {
myField.value += tag;
myField.focus();
}
}
/* ]]> */
</script>
<a href="javascript:grin(':?:')" title="Сомнение"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_question.gif" alt="Сомнение" /></a>
<a href="javascript:grin(':razz:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_razz.gif" alt="" /></a>
<a href="javascript:grin(':sad:')" title="Грусть"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_sad.gif" alt="Грусть" /></a>
<a href="javascript:grin(':evil:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_evil.gif" alt="" /></a>
<a href="javascript:grin(':!:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_exclaim.gif" alt="" /></a>
<a href="javascript:grin(':smile:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_smile.gif" alt="" /></a>
<a href="javascript:grin(':oops:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_redface.gif" alt="" /></a>
<a href="javascript:grin(':grin:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_biggrin.gif" alt="" /></a>
<a href="javascript:grin(':eek:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_surprised.gif" alt="" /></a>
<a href="javascript:grin(':shock:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_eek.gif" alt="" /></a>
<a href="javascript:grin(':???:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_confused.gif" alt="" /></a>
<a href="javascript:grin(':cool:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_cool.gif" alt="" /></a>
<a href="javascript:grin(':lol:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_lol.gif" alt="" /></a>
<a href="javascript:grin(':mad:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_mad.gif" alt="" /></a>
<a href="javascript:grin(':twisted:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_twisted.gif" alt="" /></a>
<a href="javascript:grin(':roll:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_rolleyes.gif" alt="" /></a>
<a href="javascript:grin(':wink:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_wink.gif" alt="" /></a>
<a href="javascript:grin(':idea:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_idea.gif" alt="" /></a>
<a href="javascript:grin(':arrow:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_arrow.gif" alt="" /></a>
<a href="javascript:grin(':neutral:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_neutral.gif" alt="" /></a>
<a href="javascript:grin(':cry:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_cry.gif" alt="" /></a>
<a href="javascript:grin(':mrgreen:')"><img src="<?php bloginfo('template_url'); ?>/images/smilies/icon_mrgreen.gif" alt="" /></a>
<br />
Сохраните этот файл под именем 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> добавляем следующий код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#comment-smiley").live("click",function(){
$(".smiwp1").fadeToggle(500);
$(".smiwp2").fadeOut(500)});
});
</script>
Шаг 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;
}
На этом все. Если возникнуть трудности пишите их в комментариях разберемся что к чему.
Здравствуйте, сделала все как вы написали, но при нажатии на смайлик ничего не происходит. Помогите пожалуйста решить проблему...
Доброй ночи. Может быть конфликт с другой версией библиотеке jQuery. Попробуйте не подключать из 4-го шага библиотеку (первая строчка), и попробуйте скрипт подключить в header.php между тегами
<head>...</head>.Здравствуйте. Сделала все до 4 шага. Смайлики появились и работают, но в самих комментариях отображаются текстом, и «ломаная» картинка появляется. Подскажите, что это может быть?
Eva, здравствуйте! Это значит неправильный путь к картинке. Посмотрите в исходном коде, картинка, при наведении курсора на код, отображается или пишет неправильный путь.
Спасибо, это было решено!
Но есть еще проблема, которую никак не получается решить. Подскажите пожалуйста! Вставила код в comment.php, но смайлы отображаются либо до слов «Добавить комментарий», а следом «войти как», поле комментирования и кнопка «отправить комментарий» или уже после всего этого. То есть куда-то в середину вставить смайлы не получается, хоть я и разрывала код, но все равно либо до, либо после. При чем, если ответить на комментарий кого-то наверху, то вся конструкция как и положено двигается вверх, а смайлы остаются в самом конце страницы, и тут не важно, были они до конструкции или после. Пыталась покопаться в comment-template.php, но так и не смогла найти подходящего места для кода.
Ева, это нужно смотреть файл comment.php. Можете его мне скинуть или подскажите название вашей темы, я сам посмотрю, если она в открытом доступе.
Круто. А можно сделать что бы при отправке смайла, он в редактор тоже смайл приписывал, а не код от смайла?
Проще тогда плагин поискать. Здесь именно такой подход.