Всем привет! Сегодня на SEO-Mayak.com я расскажу как сделать на WordPress смайлики в комментариях без плагина.
Лично я сам «рожицами» пользуюсь не часто, наверное в силу своей консервативности и на своем блоге я все же не стану это реализовывать, но раз читатели просят, ну как тут можно отказать 🙂 придется осветить и эту тему.
Конечно, молодое поколение и не только активно используют смайлики в комментариях для передачи своего настроение или выражения эмоций и надо стараться идти в ногу с временем.
Многие веб-мастера не заморачиваются и используют плагины типа Qip Smile или WP-Monalisa, но как известно я не сторонник плагинов и для своих читателей я покажу способ, как в очередной раз обойтись без них.
Немного покопавшись в CMS WordPress я понял, как можно добавить в форму комментариев практически любой смайл, но давайте все по порядку.
Как активировать смайлики в WordPress
В WordPress уже есть смайлики по умолчанию и эту функцию надо просто активировать и вставить в нужное место.
Чтобы реализовать задуманное, открываем для редактирования файл cоmments.php, который расположен в папке с темой (wp-content/themes/Название темы/cоmments.php). Не устану повторять, что для редактирования файлов, пользуйтесь текстовым редактором Notepad++!
Для начала нам надо определиться: где будет располагаться блок со смайликами. Обычно его ставят или непосредственно над формой ввода комментариев или под ней.
Ищем в файле comments.php что-то похожее на такую строчку:
<textarea name="comment" id="comment" cols="100" rows="10" tabindex="4"></textarea>
Затем, над вышеупомянутой строчкой или под ней, в зависимости от того, где вы хотите вывести блок, вставляем следующий код.
<script type="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 class="smaliki">'.$dm_showsmiles.'</div>'; ?>
Вот в принципе и все, на этом можно было бы закончить статью и пожелать всем успехов, только вот смайлики от WordPress мне лично не очень приглянулись, да и выбор мне показался каким-то скудным.
И дабы не ударить лицом в грязь перед своими читателями, я решил пойти немного дальше.
Как заменить изображения смайликов на любые другие
Изображения со смайликами хранятся в директории wp-includes/images/smilies и имеют расширение .gif. Чтобы заменить картинки на желаемые, их конечно надо иметь на своем компьютере.
Благо в интернете полно различных сайтов, качественных и не очень, с которых можно все это дело скачать.
Далее, воспользуемся FTP клиентом и заменим изображения, которые находятся в папке smilies, на новые, при этом обязательно надо сохранить исходные названия.
Ну вот, теперь смайлики выглядят куда интереснее:
В файле style.css надо настроить отступы, для этого в коде я задал специальный класс:
class="smaliki"
Вот для этого класса можно прописать отступы и много другое, если есть знания и желание:
.smaliki { margin: 5px; }
Но и это еще не предел возможностей! Для тех кто хочет предоставить своим комментаторам полный набор смайликов, надо будет их добавить к уже имеющимся, но тогда придется залезть в дебри CMS WordPress.
Как увеличить количество смайликов
Для реализации задуманного нам потребуется отредактировать файл functions.php. ВНИМАНИЕ! Это нет тот functions.php, который расположен в папке с темой. Требуемый нам файл находиться в папке wp-includes, прошу не путать и сделайте резервную копию файла, чтобы избежать не нужных проблем, если что-нибудь не получится.
Открываем файл и ищем 2426 строку. Функция отвечающая за вывод смаликов выглядит так:
function smilies_init() { global $wpsmiliestrans, $wp_smiliessearch; // don't bother setting up smilies if they are disabled if ( !get_option( 'use_smilies' ) ) return; if ( !isset( $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', // This one transformation breaks regular text with frequency. // '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', ); }
В одинарных кавычках справа от символов «=>» прописаны названия изображений, а слева, также в одинарных кавычках, коды, отвечающие за вывод того или иного смайлика. Сразу оговорюсь, что некоторые коды смайликов не совпадают с общепринятым в России их написанием.
Итак, что надо сделать, чтобы добавить новые смайлики или поменять уже существующие? Давайте для примера возьмем смайлик «Бандит» из скайпа и попробуем добавить его в наш блок.
В скайпе код «бандита» пишется как «(bandit)» без кавычек конечно.
Назовем изображение — «icon_bandit.dif» и с помощью FTP клиента закинем картинку в папку wp-includes/images/smilies. В файл functions.php перед строчкой
// This one transformation breaks regular text with frequency.
вставляем следующее:
'(bandit)' => 'icon_bandit.dif',
Язык PHP не терпит ошибок и если вы вдруг забудете поставить обыкновенную запятую, то Ваш сайт станет недоступен. Будьте внимательны!
Смотрим на результат:
И вот «рожица» в маске появилась в самом конце. Возможно в будущем я расскажу как сделать с помощью jQuery, выезжающий сверху или снизу, блок со смайликами, так что советую подписаться на обновления блога.
Таким образом выводятся смайлики в комментариях без плагина. Надеюсь я объяснил понятно, но если есть вопросы, я всегда готов на них ответить в комментариях.
На сегодня у меня все! Как Вам статья!
С уважением, Виталий Кириллов
Как быстро Вы реализовываете мои желания! Спасибо большое! Вот именно этого я и хотела, чтобы смайлики были не стандартные вордпрессовские, а как их ставить не знала! Сегодня же попробую у себя на блоге! Еще раз спасибо))
Елена так совпало, что я занимался антиспамом в комментариях и заодно про смайлики написал, так что Вы вовремя попросили ))
Спасибо, Виталий. Я сама тоже редко пользуюсь, только в личной переписке с хорошими знакомыми, но надо будет попробовать поставить у себя.
Пожалуйста Наталья, рад опять видеть Вас!
Спасибо за полезный урок, когда-то я очень хотела поставить в комментариях смайлики.
Пожалуйста Людмила!
Спасибо,Виталий за подробный урок. Пока обхожусь улыбчивыми смайликами 🙂 😉 , но если понадобится расширить их количество, теперь знаю, что все можно сделать очень просто!
Здравствуйте Елена! Рад снова видеть Вас на блоге!
Смайлики способны оживить общение и сделать его более приятным. Особенно они нужны на форумах, где достаточно одного смайлика, чтобы выразить свое восхищение например темой или предыдущим комментарием. Без плагина смйлики на водрдпрессе — это классно!
Виталий, благодарю за полезные статьи. Потихоньку избавляюсь от плагинов, хотя их у меня совсем немного,сайт молодой пока. Хотелось бы еще узнать, как сделать, как у вас: ответили на комментарий- визуально видно, что это сделано (имею в виду перечеркивание имени комментатора).
Гульмира, я специально ничего не делал. Перечеркнутое имя — это ссылка, закрытая nofollow, а если у Вас включено расширение RDS bar, то ссылка будет перечеркнутой.
Да, Виталий, я установила это расширение по вашей рекомендации. А т. к. продолжала тусоваться на вашем сайте, то и тут же и увидела эти перечеркивания, не связав их с новым дополнением в браузере.
Спасибо огромное! поставила себе смайлики! Добавила новые через functions.php. Сама от себя не ожидала такого)
только единственное — они выглядят малюсенькими просто в комментариях. т.е. при просмотре через консоль — нормальные, а когда смотришь общие коммент арии — сложно разглядеть даже.. с чем это может быть связано, может подскажите?
Это связано с размером шрифта, который задан для комментариев.
А это можно где-нибудь поменять? буду очень благодарна если подскажите!
Сори Татошка, дело не в размере шрифта, а в размере самих изображений смайликов. Их надо увеличить в фотошопе и заново залить на сервер. Просто, когда вы задали вопрос я как раз готовил статью про символы, которых нет на клавиатуре. Размер этих символов как раз зависит от размера шрифта и совсем забыл, что смайлики это не символы, а изображения.
Большое спасибо! Сделаю через фотошоп!
Здравствуйте, Виталий! А вы случайно не знаете как можно сделать так, чтобы пользователи могли добавлять фото в комментарии без плагина?
Анна, я еще не изучал этот вопрос, но надо .s как-нибудь заняться.
Спасибо за код. Взял его для себя. Обязательно поставлю на блог.
Пожалуйста Александр! Рад видеть Вас на блоге!
Здраствуйте, не получается найти в файле comments.php строчку:
Тема Sugar & Spice Помогите…
Давно искал такой способ, чтобы не связываться с плагинами.
Было бы отлично, если бы автор усовершенствовал код в котором можно было скрывать часть смайликов, чтобы все не высвечивались.
Спасибо, отличная статья)
Наконец то нашел настоящую информацию, о том, как вставить смайлики в WordPress не прибегая к сторонним плагинам.
Спасибо.
У меня не получилось.
В моем шаблоне в файле comments.php нет строки
Эта строка есть только в файле wp-includes/comment-template.php. откуда и выводится. Но там она в виде
‘comment_field’ => » . _x( ‘Comment’, ‘noun’ ) . ‘ ‘,
И как в нее запихать код?
Блин, забыл. Порезало. Превратить в html сущность — че это?
Полный коммент без обрезки
pastebin.com/Yr479tXc
А что у Вас в файле comments.php за код?
pastebin.com/HsbawqNU
А сама форма выводится из вордпресс.
Сама форма у Вас выводится функцией comment_form(), вот после нее и вставляйте код из статьи, а там подправите положение стилями.
Пробовал. Эта функция выводит не только форму, а полностью с надписями и полями ввода.
Цифры в коде
hostingkartinok.com/show-image.php?id=9aab58fc8c21d4932df5f69eb0d5c220
Результат на сайте
hostingkartinok.com/show-image.php?id=bfa9653a2557ee822aa9828ce578478e
Ну все правильно, смайлики выйдут под всей формой. С помощью CSS можно их сдвинуть вправо и поднять к полю ввода текста. Это будет лучше, чем редактировать файл движка, в котором все изменения слетят при следующем обновлении WordPress.
Есть другой вариант. Вместо функции comment_form() прописать форму комментирования вручную, но это требует определенных знаний: HTML, принципа работы форм, ну и CSS конечно.
Код формы заменить на стандартную не сложно. Однако есть еще проблемка. Столкнулся с ней и при внедрении кнопки вверх и при смайликах. Просто не отображаются.
Временно поставил плагин Kama WP Smiles. Смайлы в форме появились, в комментах проставляются, но они не отображаются.
Со смайлами непонятки. В массиве в functions.php были указаны картинки только нескольких смайлов.
pastebin.com/VRK6fJcq
Заменил на ваш, но смайлы по прежнему не показываются.
Обновил файлы движка. Смайлы появились, но в дистрибьютиве вордпресса в папке смайлов какая то хрень лежит. Четыре здоровых смайлика со стандартными именами. Все остальные с другими именами. От бред то.
Тупые разрабы. Мало того, что в папке со смайлами бардак. Так и в файле functions.php бред полный. Причем дистрибьютив скачен с официального сайта.
Уф. Я победил этот wordpress. 🙂
Смайлики поставил, в css поднял на нужное место. Functions.php заменил на нормальный. Сделал нормальный размер смайликов, а то совсем мизерные показывались.
P.S. В инете полно статей, как смайлики вставить, но их код не работает. Твой сработал. Уважуха. 🙂
Я рад, что у вас все получилось и я тоже испытываю уважение к усердным людям!
А как я то рад! 🙂
Рано радовался. 🙁
При нажатии кнопки «ответить» смайлы убегают от формы. Причем если нажать на ответ на свой коммент, все на месте. Если ответ другому пользователю, то форма смещается и смайлики получаются хз где. Как поправить?
Изначально форма комментирования под комментами. При нажатии на ответ она перемещается над комментами.
Получается, что смайлики у Вас оказались вне формы и находятся в статичном состоянии, т.е. на одном месте. Думаю Вам все же надо отказаться от вывода формы функцией и установить HTML форму в файл comments.php.
тоже к этому склоняюсь. потому что посмотрел сайт на планшетке, там смайлики сами по себе, форма сама по себе.
Воткнул код в файлы движка. Сдвинул на место. Усё! Смайлы привязались к форме. И в мобильной версии тоже.
<div class="reply">
<?php printf('<span style="cursor:pointer; text-decoration: underline;
color: #00A1E0;" class="comment-reply-link" onclick="return addComment.moveForm(\'comment-%s\', \'%s\', \'respond\', \'%s\')">Ответить</span>',$comment->comment_ID,$comment->comment_ID,$comment->comment_post_ID); ?>
</div>
Что в этом коде может смещать форму?
Форма переезжает под отвечаемый комментарий. Если отключить comment-reply.min.js, то кнопка ответа вообще неактивна. Получается, надо скрипт редактировать? Или как по другому можно, чтобы отключить перемещение, но сохранить работоспособность кнопки ответа.
У меня не ставятся смайлики никак. менял всё в комментс файле. что можете посоветовать?
Ответил сам себе. Всё получалось на самом деле, но я этого не видел, т.к. был включён плагин кеширования страниц. И я видел сохранённые копии страниц, а не те, которые были на самом деле
На каком этапе вы застопорились?
ребята эти смайлики можно ставить в сайт-сателлиты?
Виталий, здравствуйте! Никак не могу установить смайлы(((((((( уже две недели бьюсь. Я вставляла и через редактор и через клиент, бесполезно, появляется огромный зеленый круг и несколько прямоугольников(( как быть????? вот скрин:
prntscr.com/dkzni2
Помогите пожалуйста!!
Добрый день, Виталий! Смайлики в комментариях — дело хорошее. Правда, я попробовал несколько способов и все-же убрал…
У меня тут возникла другая проблемка с редактированием файла comments. Поставил я все же от греха страницу с политикой конфиденциальности. И, хотя е-мейл и имя, вводимые при комментировании, назвать «персональными данными» можно лишь с большой натяжкой, добавил ссылку на эту страницу не только в футер блога, не только в виджеты с формой подписки на новые статьи и страницах с формами обратной связи, но и в файл комментариев — ниже самой формы. Все бы ничего. Но эта ссылка присутствует и на тех страницах, где самой формы комментариев нет (напр., на той самой странице с «политикой» да на страницах форм обратной связи). Не подскажете, как можно эту ссылку на страницах с отсутствующей формой для комментирования, скрыть?
Здравствуйте Александр!
Вы как хотите, чтобы ссылка отображалась только на странице с записями? Или Вы хотите ее полностью скрыть от поисковиков?
Здравствуйте, Виталий! У меня есть три страницы (служебных), где отсутствует форма для комментирования. Она там просто ни к чему — это страницы обратной связи (со мной и еще одним автором, публикующим свои записи в отдельной рубрике), и сама эта страница с «политикой». Формы для комментариев нет, но, поскольку ссылка размещена под формой в файле comments.php, внизу этих страниц ссылка присутствует. Не очень хорошо выходит — предупреждаю, что, нажимая на кнопку, человек соглашается с политикой конфиденциальности… а кнопочки-то нету! 🙂
Варианта, как скрыть ссылку на этих трех страницах, пока не нашел. Скрыть от посетителя. Для поисковых роботов там уже стоит noindex nofollow
Александр, здравствуйте!
Пришлите мне файл comments.php я посмотрю и набросаю условие. Думаю это не большая проблема.
Ах да, урлы страниц еще надо, где эта ссылка отображаться не должна.
Хорошо. Спасибо!
Здравствуйте! Подскажите, пожалуйста, может, вы знаете кого-нибудь, кто мог бы настроить у меня на блоге эти смайлы? Бьюсь уже который день, ничего не выходит. Меняю шаблон блога, в нем эти смайлы никак не хотят устанавливаться. Естественно, я готова заплатить, только бы найти того, кто сделает, а?