Как добавить в форму комментариев смайлы без плагина

как добавить смайлы на сайт wordpressСегодня научимся добавлять на сайт смайлики рядом с формой комментирования. Делать это будем без использования плагинов и работает данная штука на сайтах под управлением нашей любимой CMS WordPress.

Предоставим комментаторам на своем сайте больше возможностей...

Вот так выглядят смайлы (на сайте одного из моих клиентов):

смайлы в wordpress без плагина

В самом движке уже встроены эти смайлы. Если в админке сайта проследуете Параметры ► Написание, то увидите:

как включить смайлы в wordpress

Кто не хочет заморачиваться с кодом, то может использовать плагин Custom Smilies. Остальные же читают дальше.

Вставляем код смайлов в файл шаблона

Находим у себя в папке с шаблоном файл comments.php (обычно так называют) и вставляем в нужное место следующее:

<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="smiles">'.$dm_showsmiles.'</div>';
?>

В зависимости от того, как у вас сделан шаблон, нужно место может различаться. Приведу 2 примера.

Если увидите нечто подобное <?php comment_form(); ?>, то вставив после него код смайлов, они отобразятся снизу за полем ввода комментария и кнопки "Отправить комментарий".

Если же в своем файле comments.php вы нашли много кода (на экрана 2 вертикальной прокрутки), то вам повезло, т.к. можете вставить смайлы в более подходящее место (на первом скриншоте прямо над формой ввода текста). В этом случае ищем такой тег:

<textarea></textarea>

У вас он может иметь свои атрибуты. Например:

<textarea name="comment" id="comment" cols="40" rows="5"></textarea>

Вставив код смайлов перед <textarea></textarea> - они появятся перед формой ввода. Вставите за этим тегом - появится снизу.

Стилевое оформление смайлов

Чтобы все было красиво, у вас есть возможность дописать нужные параметры стилей. Если обратили внимание, то блок смайлов обернут в div с class="smiles".

Советую в файл стилей (style.css, css.css) сразу добавить следующий параметр:

.smiles {cursor: pointer;}

Теперь при наведении на смайл курсор примет вид руки, а не обычной стрелки по-умолчанию. Также можете сделать произвольный курсор, о чем я рассказывал в статье Как сделать свой курсор на сайте при помощи CSS.

Кто из вас мог заметить в коде смайлов выше вот такой путь /wp-includes/images/smilies/. Заходите на ftp сайта и далее по указанному адресу: здесь можете заменить стандартные смайлы на свои произвольные. Но:

  • не забудьте сделать их с таким же именем
  • при обновлении движка возможно придется снова заменить смайлы

На этом все. Делимся результатами в комментариях к статье.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликован 21 комментарий
  1. Артём (83 комм.):
    http://blog-artema.ru/

    Спасибо за полезный материал, сделал у себя 😉

  2. Ольга (4 комм.):
    http://vortexflowers.net

    Спасибо,все работает. Однако, у меня в некоторых статьях отключено комментирование, а смайлы остаются под статьей - засада. То есть, поля для комментариев нет, а смайлы есть... Подскажите,как можно это исправить?
    Код вставляла после и до него тоже (у меня короткий) comments.php

  3. Ольга (4 комм.):
    http://vortexflowers.net

    Не заметила как правильно код вставить.
    Код смайлов вставлялся до или после

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Не понял: разобрались или нет?
      В любом случае: на сайте есть контакты.

  4. Ольга (4 комм.):
    http://vortexflowers.net

    Я не разобралась, как на Ваш сайт код вставить, чтобы он отображался в комментарии......

    Когда вставила код смайлов в свой comments.php они стали отображаться даже тогда, когда отключены комментарии - вот в этом и засада.

  5. Ольга (4 комм.):
    http://vortexflowers.net

    Вновь не получилось. Строчку внизу вижу, что код надо вписать вручную (ну или через буфер обмена) - не отображается.

  6. Junk (14 комм.):
    http://junk-nn.ru

    Спасибо, давно хотел прикрутить смайлы не нагружая плагинами.
    Будет время попробую.

  7. Ольга Суворова (2 комм.):
    http://fitdeal.ru/

    Не нашла у себя ни , ни 🙁

    • Ольга Суворова (2 комм.):
      http://fitdeal.ru/

      Написала Ваши тэги, не прошли, попробую так: <> и <> - нет у меня этого в шаблоне и в папке comments.php

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Добрый день.
      А если найду?)))

  8. Вера (7 комм.):
    http://port-mona.ru

    А мне такие мелкие мордашки не нравятся. А как вставить крупные смайлики?

    • Виталий (1674 комм.):
      http://mojWP.ru/

      В конце статьи написано где лежат изображения смайлов у вас на сервере. Просто подмените картинки с таким же названием. Однако после обновления WordPress придется эту процедуру снова повторять.

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Нашел простое решение проблемы. Если для вас актуально, то статья по ссылке Как заменить стандартные смайлы WP на свои

  9. Stila (1 комм.):

    У меня вот такая проблема. Может вы знаете решение)
    Если я вставляю смайл, то кнопка "ответить", которая под комментарием, не помещается полностью и видна только половина(

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Безусловно знаю решение. Нужно стили настроить для этих элементов шаблона.
      Другой вопрос, что я не ясновидящий и не могу на расстоянии видеть и проводить работы 😉

  10. Галина Шевалер (1 комм.):
    http://francissimo.ru/

    Все получилось...

    НО есть проблема. Сами смайлики не отображаются после публикации комментария. То есть они преобретают зашифрованный вид. И кстати, смайлики не отображаются и в теле статьи. Не подскажите как исправить ситуацию? Нужно залить свои картинки?

    • Виталий (1674 комм.):
      http://mojWP.ru/

      В админке в боковой консоли Настройки ► Написание. И тут первый пункт сверху будет "Преобразовывать смайлики наподобие 🙂 и 😛 в картинки"

  11. Анастасия Савельева (1 комм.):

    Здравствуйте. У меня в файле comments.php нет тегов . Я все равно пробую вставить код, если я вставляю в самом начале, первой строкой, то смайлики появляются в самом верху. А если добавляю код в любом месте файла или в конце, то и отображаются они под кнопкой "Отправить". А мне надо, чтобы перед полем, где вводится текст.

  12. Елена (1 комм.):

    НЕ РАБОТАЕТ скрипт, при чем встречаю его ни на одном сайте в топе 10, он один и тот же и не работает он реально. Или его исправить или вовсе убрать и советовать плагин просто.

    • Виталий (1674 комм.):
      http://mojWP.ru/

      К вашему большому сожалению, метод РАБОТАЕТ!
      Если есть проблемы с внедрением - обращайтесь за услугами.

  13. Евгений (1 комм.):
    http://www.fotovarka.ru/

    Уменя нет в настройка и написании этого форматирования((( как его добавить??

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.97MB | MySQL:84 | 0,534sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html