Смайлики на блоге WordPress
Здравствуйте! С Вами снова я, автор Блога Свободного Вебмастера и сегодня речь пойдет о смайликах на Вордпресс. Смайлики уже давно завоевали свою популярность. Это отличный способ выразить свои эмоции и порой достаточно использовать всего лишь один смайл чтобы выразить свои чувства.
Честно говоря меня не очень впечатлили стандартные смайлики вордпресса. Их вид показался мне примитивным, слишком уж древним и поэтому решил сменить их на другие.
Стандартные смайлики wordpress
Здесь можно пойти двумя путями.
- Первый — это установить плагин, который автоматически заменит стандартные смайлы на другие. Но слишком много активных плагинов замедлит работу блога, увеличит нагрузку на сервер. К тому же плагины зачастую добавляют свои таблицы в базу данных MySQL, а при удалении не всегда чистят за собой эту базу и приходится чистить вручную, через панель phpMyAdmin.
- Второй путь позволит избежать таких неприятностей, к тому же позволит лучше изучить работу WordPress. Он подразумевает под собой ручное редактирование.
Поэтому мы пойдем вторым путем. Стандартные смайлики находятся в папке /wp-includes/images/smilies/ в корне Вашего блога. Чтобы их сменить нужно просто переписать старые на новые. Вы можете взять абсолютно любые смайлы, переименовать их, чтобы имена файлов совпадали со стандартными и закачать обратно в ту же папку. Выкладываю наборы смайликов, которые у меня уже есть:
Колобки мини
Колобки
Смайлики 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;
- изображения имеют истинные размеры 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, заменив их своими смайликами, которые использовали прежде. Удачи!
Ну вот… Наконец-то нашла, что мне надо, но весь файл comments.php просмотрела, а слова textarea не нашла. Может можно в другое место вставить в этом же файле? Помогите пожалуйста. Хочу смайлики)
Ответить
Арина, можете попробовать и в другом месте. Или отправьте мне на почту содержимое файла comments.php и посмотрим как лучше. Хотя сейчас посмотрел исходный код Вашей страницы и
<textarea>в нем присутствует!Ответить
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>Сохранить изменения и обновить страницу. Смайлики для добавления появятся сразу же под текстовым полем формы.
Ответить
Заработало! Я не знаю, как ты это всё находишь! Ну в общем, как обычно — ты лучший! 😎
Ответить
Скажите пожалуйста, как сделать чтобы смайлы были скрыты и место всех смайлов было написано ссылка на смайлы типо кнопки, а когда нажимаешь открывалось окно смайлов, а то у меня очень много смайлов и как то все не так как надо, а плагин я ставить не хочу.
Ответить
Илья, к сожалению я не знаю как их скрыть под кнопку. У Вас они не влезают в одну строку? Может попробовать расширить контейнер с текстом и форму отправки комментария?
Ответить
Ладно, все равно спасибо, я сделал в 3 строчки. Просто у меня большие смайлы я их через
marginдруг к другу близко сделал, будто кучка смайлов. Прикольно получилось, кстати. За скрип тоже спасибо, то что надо)Ответить
Стоял плагин «QIP смайлы», но сейчас убираю все ненужные плагины. Отличное решение проблемы!
Ответить
Дмитрий, я тоже стараюсь по возможности не использовать плагины, спасибо)
Ответить
Денис, а как вставлять смайлы в статьи? Получается, нужно писать код смайла, а он будет автоматически превращаться в смайл, так?
Ответить
Pavel, да все верно, но чтобы вручную не прописывать код можно просто их скопировать из собственной формы отправки комментариев, как это делаю я. Если код не сложный и легко запоминается, то можно вручную писать.
Если в настройках админки на вкладке Параметры можно поставить галочку напротив пункта «Преобразовывать смайлики в картинки» — тогда общепризнанные смайлы будут автоматически преобразовываться в графические.
Ответить
Здравствуйте. После обновления WordPress к версии 3.2.1 у меня перед полем ввода комментария не отображаются смайлики, но нужный код находится в файле comments.php. Не подскажете в чём может быть проблема?
Ответить
Смайлики остались те же самые, что и были до обновления, они не заменились на старые. В записях они отображаются, но не отображаются только над полем ввода комментария 🙁
Ответить
Андрей, скопируйте новые смайлики в папку со смайлами, при обновлении WP они заменяются на старые 😉
Ответить
Спасибо Денис за урок! Теперь у меня на сайте красивые смайлики!
Мне ваша форма комментариев понравилась, можно ли скопировать код вашей формы в мою тему? А то у меня какая-то «корявая» форма…
Ответить
Андрей, здравствуйте! Даже не знаю, попробуйте повторить все действия по установке смайликов, может быть что-то упустили… Если вероятную причину так и не найдете, то попробуйте воспользоваться другим вариантом, который я описывал Арине в комментариях выше.
Михаил, попробуйте, но мне кажется она не подойдет Вам по стилю. Ведь главное индивидуальность и будет намного лучше если Вы модернизируете свою форму 😉
Ответить
Почему периодически смайлы возвращаются на стандартные? Уже 2 раза менял их обратно… Можно ли как то их зафиксировать что бы не менялись?
Ответить
Михаил, они меняются только после обновления вордпресс до новых версий. Т.к. при обновлении старые файлы заменяются на новые, поэтому не забывайте их перезаписывать после применения обновлений. Или же используйте радикальный способ — назначьте для папки со смайлами права доступа только для чтения, тогда они уже никуда не «убегут» 🙂
Ответить
Спасибо Денис! Я целый час пытался поставить смайлы используя плагины+коды, как на других сайтах рассказывают, а результат — 0, не идет. Зашел на твой сайт, вставил код, все пошло и работает! Молодец!
Ответить
Скажите, а можно вставить смайлы на шаблон от Artister?
Потому что я пробовала вставить код, но ничего не меняется.
Ответить
Ольга, даже не знаю. Насколько я знаю, Artister верстает шаблоны для вордпресс? Я не пользовался этим, так что затрудняюсь ответить. Хотя по идее, если шаблоны специально под вордпресс сформированы, то исходники должны быть подходящими, попробуйте в разные места вставлять код и проверьте правильно ли делаете, все ли пункты инструкции выполняете.
Ответить
Так же менял смайлы, просто заменой картинок. И всё бы хорошо, если бы не одно досадное НО — при обновление блога, смайлы переписываются и возвращаются опять старые.
Ответить
BaNru, аналогичная ситуация у всех. При обновлении вордпресс заменяет файлы. Поэтому сразу после обновления нужно не забывать менять их обратно. Я в папку со смайлами загрузил архив с новыми изображениями и после обновления распаковываю с заменой файлов. Если не охота тратить на это время, то на папку /wp-includes/images/smilies/ достаточно выставить права только для чтения и больше не придется их восстанавливать при обновлении.
Ответить
Хм, кстати, идея. Как же я сам до такого не додумался? А ты пробовал? Вордпресс при обновление не ругается?
Ответить
BaNru, нет, я пока не пробовал, все руки не доходят. Права нужно через FTP выставлять, а я в основном пользуюсь веб-интерфейсом при доступе к серверу.
Ответить
Webliberty, зря. FTP наше все 😛 Советую Total Commander и NotePad++ с фтп плагином для быстрой правки!
Ответить
BaNru, пользуюсь веб-интерфейсом по ряду причин.
Вот так и получается, хотя NotePad++ и дома и на работе установлен) Спасибо за совет!
Ответить
Здравствуйте! Подскажите пожалуйста, почему у меня смайлики вообще не отображаются изначально? Вроде в настройках галочка стоит преобразовывать смайлики в картинки и в папке они есть, что не так?
Ответить
Анна, так Вы их вообще то используете в тексте? Бегло пробежался — не нашел. В настройках галочка отвечает за то, что если в тексте используется текстовый смайл
:)то он будет преобразован в графический — 🙂Ответить
Благодарю Вас! Все отлично работает! 😎 Давно хотел поставить красивые смайлы типа скайповских, только без плагина. Ваш пост помог.
Ответить
Интересная статья! Мне самой нравится работать со смайликами, но вот я думаю… Стоит ли вставлять их в блог, посвященному бизнесу? К месту ли они будут там?
Ответить
Гульнара, скорее всего Вы правы, они не всегда уместны, если раскрывается серьезная тема, то лучше обойтись без них.
Ответить
Добрый день, Денис! Огромное спасибо за пост, у меня все получилось с первого раза, хотя являюсь представителем «чайников», ну или начинающим, кому как нравится. Еще хотел спросить есть ли на вордпрессе возможность без плагина выводить форму регистрации (авторизации) пользователей, только не стандартную.
Ответить
Здравствуйте, смайлики это здорово, вот, если бы еще при отправлении комментария можно было бы файл вложить. Денис, может быть Вы сможете что-нибудь посоветовать?
Ответить
Максим, не знаю))) Регистрацию с самого первого дня убрал и не планирую ставить. В рамках обычного блога она ни к чему. Но вероятно такие решения есть, поищите.
Елена, только специальный плагин. Но я бы и этого не советовал — во-первых опасно, т.к. могут прикрепить вредоносный файл, а во-вторых файлы можно передавать и по почте или через обратную связь.
Ответить
У меня возникает конфликт с плагином MCEComments, т.е. когда плагин включен смайлы отображаются но не кликабельны, когда плагин выключен смайлы полностью работают. Если какие то варианты не отключая плагин решить проблему.
Ответить
Руслан, нужно экспериментировать. Возможно есть одинаковые переменные, вот они и не работают.
Ответить
Здравствуйте. Сделал, как написано в статье, почему то смайлы не появились не над, не под текстареа. В чем может быть проблема?
Ответить
Огромное спасибо за скрипт смайлов. Все заработало с первого раза, только в css изменил ограничение размера смайлов с 12рх на 64рх, смайлы свои подобрал поприкольнее. Доволен аки лев после ужина 😀
Ответить
Vladimir, здравствуйте. Вероятные проблемы можно выявить по комментариям чуть выше, вероятно тот файл в который вставляете код не участвует в построении комментариев, а используются файлы WP.
Ответить
Я скачала у вас колобков мини и установила на свой блог, но у меня почему-то встали стандартные… Может я что-то не то сделала?
Ответить
Гульнара, попробуйте почистить кэш браузера. Кроме того, если Вы используете специальные плагины для вставки смайлов, то у них свой набор картинок.
Ответить
У меня пока смайликов нет на блоге, но судя по статье, можно поставить без проблем. Надо только решиться на этот ответственный шаг 🙂
Ответить
Денис, до этого я уже устанавливала смайлы при помощи скрипта. Видимо, после обновления ВП, они автоматом заменились на стандартные. Сегодня решила вновь установить новые смайлы. Нашла ваш материал, т.к. не помню уже что и как делала. Пошагово выполнила всё, что нужно (сложностей, вроде, никаких), но смайлы мои в кол-ве 17 штук вышли с битыми картинками. Откуда они взяли, как их убрать — не знаю. В папке со смайлами находятся только эти рабочие колобки, а ЧТО ещё к ним подгрузилось…Помогите разобраться, пожалуйста!
Ответить
А нельзя не как сделать, чтобы смайлики отображались в админ панели при написании статей. Спасибо за ответ!
Ответить
Добрый день, Денис! Спасибо, большое смайлики встали, но почему-то в комментариях они отображаются, очень мелко. Подскажите пожалуйста, как это изменить?
Ответить
Елена, достаточно просто почистить кэш в браузере и они вернуться на свои места) При обновлении WP они заменяются на стандартные, так что не забывайте их менять заново, не так уж и часто выходят новые версии. Я поместил в ту папку со смайлами архив со своими и при обновлении просто распаковываю архив, заменяя их.
BlogGood, можно конечно попробовать что-нибудь придумать, а так я обычно копирую их со страницы на соседней вкладке)
Оксана, здравствуйте! Можно в CSS назначить им свойство с размерами изображения. Сейчас у Вас такие свойства:
img.wp-smiley { max-height: 12px; margin: 0; padding: 0; border: none; }Т.е. максимальная высота стоит 12 пикселей, измените это значение.
Ответить
Спасибо, Денис, Вы как всегда, молодец, помогли! 🙂
Ответить
У меня тоже TwentyTen, поставил смайлики через comments-template, добавил скрипт в футер. Вот только смайлики на черном фоне почему-то, и в кучку сбились. Подскажите, как исправить?
Ответить
Владимир, в CSS своей темы настройте внешний вид для класса
img.wp-smiley. Чуть выше есть пример.Ответить
Извините за тупой вопрос. А как их перезаписать? Можно поподробнее каждый шаг описать? Для особо одаренных. Скачала Ваши красивые смайлики, зашла в корневой папке в smilies, а дальше что?
Ответить
Галина, замените файлы в папке smilies на новые из архива — вот и все! Вы кажется слишком перемудрили, ведь это очень просто 🙂
Ответить
Я удалила все файлы из папки smilies, нажала: загрузить файлы в текущую директорию, выбрала файлы из скачанной папки. Всё, в папке smilies они есть, но в комментариях те же страшненькие смайлики…
Ответить
Галина, почистите кэш в браузере! Я вижу на Вашем блоге уже новые смайлы!
Ответить
И правда, от родных смайликов инфаркт может стукнуть. Я скачал у вас колобков и очень доволен их видом. Правда после обновления до 3.5.1 они стали снова родненькими, пришлось заново перекачать их в папку.
Ответить
Денис, спасибо за статью. До сих пор актуальна.
У меня шаблон блога как раз из той категории, где нужно дополнительно в футере код прописывать. Благодаря этой статье даже гуглить ничего не пришлось. Колобки класс!
Почитал каменты — многие спрашивают как сделать, чтоб в админке при написании поста можно было смайлы сразу ставить — решение есть конечно, это замена стандартного редактора на расширенный, например на Ultimate TinyMCE, или аналогичный. Уж не знаю, несет ли он большую нагрузку на сервер или нет, но если блог еще молодой, а хозяин блога не очень «дружит» с html и прочими тегами — думаю он будет интересен. Значительно расширяет функционал стандартного редактора.
Ответить
Добрый день Денис! Были проблемы с установкой смайликов как у Арины, но! Благодаря Вашим советам добавил код в футер и все установилось и стало кликабельно! Нижайший Вам поклон! На Вашем блоге все так доступно и легко. Буду в дальнейшем пользоваться этой инфой!
Ответить
Спасибо за статью! Некоторые моменты из нее очень пригодились, я использовала все названия стандартных, только новые как-то нельзя добавить… вернее они добавились, но в комментариях не показываются, только название и все. А вообще очень понравился ваш стиль написания статей! Очень просто и с любовью что ли 🙂
Ответить
Спасибо большое! Всё понятно и доступно. Установила себе. Очень нравится, что без плагина. Предпочитаю кодом пользоваться, если, конечно, разберусь как)
Ответить
Иришка, там необходимо делать дополнительные правки в файлах движка, чтобы добавить новые, не разбирался подробно, но сделать можно при желании.
Ольга, пожалуйста, пробуйте и у Вас все получится, если возникнут вопросы как установить код — обращайтесь, можно на почту.
Ответить
Добрый вечер Денис! У меня такая проблема. При добавлении кода в comments.php вместо слова «комментировать», «отправить» выходят вопросы «???». Подскажите как с этим бороться.
Ответить
Стас, пересохраните файл с кодировкой UTF-8 без BOM. Это можно сделать, например, в редакторе Notepad+
Ответить
Огромное спасибо, Денис! Помогло!
Ответить
Здравствуйте! Спасибо Вам за статью, после долгих мучительных поисков нашла отличную информацию, как поменять этих простеньких колобков от wordpress на других, посимпатичней. Вот только у меня к Вам вопрос: почему они у меня в комментариях такие малюсенькие получаются, вся красота мельчает? 🙁
Ответить
Ольга, здравствуйте, попробуйте в CSS вставить такую строку, она должна помочь:
img.wp-smiley { width:19px; height:19px; }Ответить
Здравствуйте, пробовала поставить смайлики, но в моей теме они становятся не так, как нужно, а именно или выше поля комментирования, или под полем отправить комментарий. Как расположить красиво, как у Вас сразу под полем комментирования? У меня в теме код странный, я по разному пробовала, или выше или ниже получается, а как нужно нет. Вот кусок кода, с которым я не могу справиться
Ответить
Анжелика, код был «порезан» WP, напишите мне на электронную почту, попробуем разобраться вместе.
Ответить
Написала Вам на электронную почту. Жду ответ 😉
Ответить
Я сдаюсь… Ничего не понимаю. Очень хочу смайлики, но никак не могу их вывести в комментарии. У меня в Comments (comments.php) нет кода textarea. Я уже установила плагин Kama WP Smiles. Думала, что появятся, но отображаются они только у меня в admin панели.
Пыталась вставить код в Comments (comments.php), но в итоге кнопка смайликов располагалась в левой части экрана и в середине текста. Куда только я код не вставляла ничего не получается. Как мне разместить смайлики без плагина?
Ответить
Светлана, Ваш сайт кажется расположен на wordpress.com или используется форма комментирования Jetpack Comments, которая подгружается через iframe, поэтому что либо изменить не получится.
Ответить
Webliberty, огромное спасибо за статью! У меня тема pilcrow. Не могла включить смайлы. Т.е. они появлялись в том числе в тех статьях, где были отключены комментарии. Случай как у Арины со вставкой кода в файл футер.пхп.
Смайлы не поместились в одну линию и даже еще один колобок вылез на вторую строку. Но это настроения не портит! Значение ширины меняла в т.ч. и на ширину текстового поля темы — У меня, примерно, 450 пикселей — тоже не помогает. Они, видимо, физически не помещаются.
Ответить
Ольга, видимо да, не влезают. Но смотрится ничуть не хуже 🙂
Ответить
Да, тем более, накачала себе разных смайлов по своей теме, так они теперь два полноценных ряда занимают — вполне гармонично.
На еще одном сайте у меня тема стоит mesocolumn , так там та же абсолютно история со смайлами. Все прошло легко благодаря Вам, еще раз спасибо.
Ответить
Здравствуйте, спасибо, очень интересное решение. Обрадовалась по-началу, однако куда я только этот скрипт не вставляла и перед textarea и после, смайлы выводятся, но не работают 🙁
Может, вы знаете в чем проблема? Подскажите, пожалуйста. Я ранее установила wp-Monalisa, но этот плагин располагает смайлы аж после кнопки отправить, что как-то неудобно и нелогично. Пробовала найти решение, чтобы переместить их повыше, но как ни искала, не нашла… Обидно… Заранее благодарю 😳
Ответить
Здравствуйте, Елена, почитайте пожалуйста самые первые комментарии — эта проблема уже встречалась и решение было найдено.
Ответить
Webliberty, приветствую, а скажи, как расставить смайлы в угодном для меня порядке? Я поставил по твоему способу в комментариях, но вот порядок смайлов меня не очень радует.
Ответить
Евгений, откройте файл /wp-includes/functions.php найдите следующую строку:
и закомментируйте ее таким образом:
// krsort($wpsmiliestrans);Теперь сортировка массива отключена и Вы самостоятельно можете менять местами смайлики. Для этого в этом же файле найдите строку:
$wpsmiliestrans = array(это массив, внутри которого можно менять строки местами, например передвинуть в другое место
':mrgreen:' => 'icon_mrgreen.gif',Как еще один вариант — просто переименовать названия gif файлов. Но учтите, что после обновления WordPress, все ручные правки пропадут и придется заново выполнять эти действия.
Ответить
Как сделать так, чтобы при наведении указателя мыши на смайл курсор менял свой вид на руку?
Ответить
Чтобы при наведении на смайл менялся указатель курсора мыши необходимо задать класс для изображений, например заменив строку кода таким образом:
$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;}Ответить
Вопрос не по теме: на Вордпресс загрузил 5 картинок в новости, а в папке uploads их штук 50, вместо одной еще +8 но разного размера. В медиафайлах все обновил, но не помогает, можно это исправить? А то много места занимают.
Ответить
Настройки >>> Медиафайлы, размеры миниатюр, средний размер и крупный размер: выставить значения равными нолю. В папке uploads вручную удалить все изображения с размерами, оставить только исходники.
Есть один нюанс — если в теме используется какой либо из этих способов вывода изображений — они пропадут со страниц. Настоятельно рекомендую сделать бэкап перед изменениями. У себя использую именно этот метод.
Ответить
Здравствуйте, подскажите, пожалуйста, на моем сайте установлены стандартные смайлики Вордпресс, но они отображаются на черном фоне. Тега textarea нет в comments.php.
Ответить
Лиса, они у вас сохранены с черным фоном. Могу предположить что открывали в графическом редакторе, который не поддерживает прозрачный фон и затем сохранили, поэтому фон и стал таким. Выберите любой набор смайлов из этой статьи и загрузите их на сервер в нужную папку — темный фон должен исчезнуть.
Тег textarea, в зависимости от того как сверстан шаблон, может находиться и в другом файле, например functions.php Вашей темы или даже в файле comment-template.php являющемся файлом ядра WP, также могут быть и другие варианты.
Ответить
Доброго времени суток. Вот снова обращаюсь к вашему блогу, т.к. снова понадобились смайлики. Уж больно рецепт у вас хороший)
Вот только на новой обложке сайта не могу найти заветный textarea) Где б его поискать?
Ответить
Дмитрий, добрый день! Поискать можно в файле comment-template.php ядра ВордПресс или functions.php темы. Где-то он обязательно должен находиться) Посмотрите комментарии выше, вроде уже обсуждались такие вопросы.
Ответить
Доброго времени суток! А как поступить, если смайликов очень много и часть из них надо скрыть под катом?
Ответить
Теоретически, часть можно скрыть аяксом и выводить по клику. На практике затрудняюсь привести пример 😳
Ответить
Денис, здравствуй! Твой блог это кладезь полезной информации, работающих примеров и толковых советов! Какой раз уже выручает, спасибо!
Пару дней назад установил себе смайлики на блог, правда по примеру с другого ресурса, но скрипт аналогичен тому. Сейчас был замечен один недостаток, вернее незавершенность моей темы. Вернулся к тому сайту по котором делал, но ответов я там не нашел, то ли авторы не смыслят в том, что делают, то ли у меня такой особый случай. Решил обратится за помощью к свободному вебмастеру 🙂
Смайлики работают хорошо, даже сделал подсветку курсора рукой при их наведении, но заметил одну штуку, что смайлы которые стоят в тексте статьи принимают стили прописанные к изображению на сайте. В форме комментариев такого не происходят. Смайлы живут своей жизнью как и должно быть. Вот удручает их отображение в статье.
Можно ли как-то это исправить? Почитал комментарии к твоей статье, нашел только как прописать стиль появления курсора-руки, а как быть со стилями в статье?
Заранее благодарю за дельный совет как это безобразие исправить!))
Ответить
Максим, а что с ними не так? Стили для смайлов, расположенных в основном тексте, назначаются в style.css для класса
img.wp-smileyОтветить
День добрый! Сегодня обновился движок сайта до 4.2, у меня стояли смайлы размером 50х50, сегодня же они имеют размер 13, в css указан максимальный размер 50. Не знаю что делать и где найти причину( Помогите пожалуйста.
Ответить
Лекс, здравствуйте! К сожалению, у меня плохие новости. Разработчики WP в обновлении 4.2 решили отказаться от смайликов в пользу Emoji. Переписка на официальных англоязычных форумах поддержки на протяжении последних дней не приносит результатов — они не планируют возвращать смайлы и даже не хотят предоставить пользователям выбор.
Однако мне удалось найти способ вернуть прежние смайлики и отключить Emoji, обновил статью! Заодно и проблема с заменой картинок после каждого обновления WP решилась 🙂
Ответить
Денис, подскажите, как можно смайлики совсем удалить с сайта? Что-то я сними уже намаялась после последнего обновления ВП. Решила совсем от них избавиться. Удалила папку с ними с хостинга, остались крякозябры все равно. Еще где-то код нужно удалить? В каких файлах?
Ответить
Юлия, смайлики можно отключить в настройках, убрав галочку напротив пункта «Преобразовывать смайлики наподобие
:-)и:-Pв картинки».Emoji можно отключить путем исключения загрузки скриптов и стилей (пример приведен в решении для 4.2 и выше).
Но в статьях и комментариях все равно останутся символы, просто они не будут преобразовываться в изображения. Придется удалять, редактируя все подряд, или оставить как есть.
Ответить
Webliberty, спасибо за ответ. Тогда мне нужно все-таки все настраивать. Чтобы красиво они выводились.
Ответить
Супер! Денис, спасибо за дополнение к статье насчет Эмодзи.
Честно, был в шоке от такого странного решения разработчиков ВордПресс.
Скажи, а подобным образом можно «вырезать» некоторые скрипты из темы? Можно к тебе обратиться за помощью по этому вопросу?
Ответить
Саша, вырезать скрипты из темы лучше напрямую, то есть прямо из шаблона убирать коды их вызова. Чтобы не получилось так, что сначала их регистрируем, а потом отключаем. Ну а так, да, можно с помощью хуков отменять регистрацию скриптов и стилей, делать замену стандартных функций на свои. Напиши на электронку, помогу чем смогу)
Ответить
Подскажите, добавил часть кода (Убираем размеры смайликов равные 1em (новые задаются для класса .wp-smiley) в functions.php, почему он может не срабатывать?
class="wp-smiley" style="height: 1em; max-height: 1em;Этот код все равно остается в контенте.
Ответить
Сергей, почистите кэш, может в этом проблема.
Ответить
Денис, привет! Спасибо за решение с Emoji, а то после обновления движка все смайлы слетели 😉
Ответить
Сергей, привет! Да, неприятная ситуация возникла после обновления… Разработчикам не нужно было добавлять их поддержку в ядро. Лучше бы сделали опцией или вынесли в отдельный плагин, например, в качестве еще одного модуля в составе Jetpack.
Ответить
Знаете, я мучилась-мучилась с этими смайликами. Нашла код и удалила их совсем. Вот так с плеча убрала их совсем. Попробую пока пожить без смайликов, если будет скучно верну обратно и попробую все сначала настроить.
Ответить
Ок, спасибо за отзывчивость. Немного разгребусь по времени — обращусь.
Ответить
Огромное спасибо за борьбу с эмодзи в 4.2! А то я весь моск сломал, пока пытался понять, как их оттуда выпилить… Руки бы пообрывать этим «рационализаторам»! Кому нужны эмодзи — есть в конце концов отдельный плагин!
Ответить
Webliberty, уже разобрался! Нужно было со стилями немного повозиться.
Это я хорошо зашел. У меня WordPress 4.1.1. и еще не обновлял, теперь знаю, что делать, если возникнут проблемы со смайликами. Помню, сколько времени потратил на добавление и переименование стандартного набора. Не хотелось бы терять полюбившиеся смайлы. Еще раз спасибо за проделанную работу! 🙂
Ответить
Люди жалуются, что с обновлением движка или темы приходится все настраивать и перестраивать по новой. Бегло глянул код, почему все это не реализовать как плагин (что вполне реально)? Пользователям удобно! Автору переходы на сайт! 😎
Ответить
С учетом новых доработок после обновления WP не придется корректировать код или менять файлы, внесенные изменения останутся на прежнем месте.
Ответить
Спасибо, нашел очень нужную информацию. А то совсем уже устал бороться со смайликами.
Ответить
Здравствуйте! Решилась исправить эту «ошибку разработчиков» в вордпресс 4.2. Первый раз делала всё по вашей статье и у меня получилось. Сейчас решила переделать и ничего не получается. Когда вставляю код в файл functions.php, то у меня он весь вылезает над шапкой сайта да и в редакторе тоже. Помогите, пожалуйста, сил уже нет смотреть на эти смайлы. Заранее спасибо!
Ответить
Милена, вероятно неправильно размещаете код, поэтому вместо исполнения он выводится на экран. Попробуйте вставить в самом конце файла перед
?>Ответить
Webliberty, ну конечно же! Я же чайник во всех этих кодах! Для таких как я нужно конкретно указывать куда ставить код. Я же в конец поставила и всё. Так что лучше в статье допишите, нас таких много непонятливых блондинок.
Теперь получилось. Спасибо большое! Только смайлы теперь почему-то вылезли и новые, и старые, которые раньше по умолчанию в вордпрессе были 🙁
Ответить
Значит остался старый код, который прежде использовали, поэтому они два раза и выведены рядом с формой.
Ответить
Да, точно. Только что сама нашла. С прошлого раза остался. Большое спасибо Вам за помощь и за Вашу статью. Что бы я без Вас делала? 😮
Ответить
Здравствуйте. Подскажите пожалуйста, как можно переложить смайлы в корневую папку (site.ru/smilies/)? Пытаюсь-ковыряюсь, но пока ничего не выходит 😥
Большое спасибо за реанимацию старых смайлов, а то обновился и тут же опечалился. Теперь смайлики на своих местах и это хорошо!
Ответить
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__ );Ответить
Webliberty, спасибо большое. Сработало!
Хотел еще поинтересоваться, как правильно добавить еще смайликов, чтобы их было не 22, а к примеру 30 ? И можно ли как-то дополнительно оптимизировать код, чтобы он был более статичным ? Понимаю, что вопрос специфичный и универсальность кода пропадает с этим, но я думаю, что если будет инструкция, то те кому это необходимо подправят под себя. Спасибо 😉
Ответить
Все работает, спасибо! Откладывал обновление движка до 4.2, пока до смайликов руки не дойдут, теперь все поменял и обновил вордпресс — все получилось! 🙂
Ответить
Alex, для добавления новых отредактируйте
arrayмассив. А что подразумеваете под статичность кода? Я опубликовал общедоступный вариант, у себя подключил чуть иначе, но суть от этого не меняется.Ответить
Здравствуйте! Когда вставляю код, то форма комментариев исчезает. Не подскажете как правильно сделать? Буду очень благодарен!
Ответить
Константин, здравствуйте, уточните пожалуйста, код который в comments.php или functions.php?
Ответить
Webliberty, вставляю в comments.php.
Сейчас у меня вообще не отображаются смайлики в форме комментариев. Хочется хотя бы их вывести под формой комментариев. Просто не все пользователи знают коды смайликов.
Тема оформления у меня не стандартная. Может что-то нужно по-другому мне делать?
Ответить
Константин, напишите мне на электронную почту с примерами исходников (что куда вставляли), чтобы понять причину.
Ответить
Здравствуйте! Подскажите, пожалуйста, с чем может быть связана такая проблема: после восстановления блога из резервной копии на блог вернулись вордпрессовские смайлы. Хотя в уже опубликованных комментариях остались красивые смайлы, в теме блога есть папка с закачанными смайлами, проверила, коды в comments.php и functions.php стоят… Что делать-то?..
Ответить
Ольга, попробуйте очистить кеш, если не поможет — выполните все действия повторно согласно инструкции, возможно в резервной копии сохранены не все изменения.
Ответить
Webliberty, Все это я проделала, однако, как потом выяснилось, проблема произошла из-за очередного обновления Вордпресс. Новое обновление многое «попортило» у меня на блоге, не только смайлы, пришлось все возвращать из резервной копии базы данных. и не обновляться.
Ответить
Здравствуйте! Попробовали установить данным способом смайлы на наш сайт, но после клика на них + нажатия оставить комментарий выводятся символы вместо смайлов. В чем может быть проблема? Как это исправить возможно ли или нет исправить, подскажите пожалуйста?
Ответить
Seyran, в консоли WordPress на странице Настройки — Настройки публикации в разделе Форматирование должен стоять флажок напротив «Преобразовывать смайлики наподобие
:-)и:-Pв картинки».В виду отказа WP от поддержки смайликов рекомендую все-таки использовать Emoji. Как сделать работу с ними простой и удобной подробно описано на этой странице.
Ответить
Хорошо, спасибо большое. Кстати, классный блог, молодцы 😉
Ответить
Спасибо. Единственный сайт, который предложил точное решение данной задачи. Спасибо! 🙂
Ответить