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

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

Всем привет! Сегодня на SEO-Mayak.com я расскажу как сделать на WordPress смайлики в комментариях без плагина.

Лично я сам «рожицами» пользуюсь не часто, наверное в силу своей консервативности и на своем блоге я все же не стану это реализовывать, но раз читатели просят, ну как тут можно отказать 🙂 придется осветить и эту тему.

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

Многие веб-мастера не заморачиваются и используют плагины типа Qip Smile или WP-Monalisa, но как известно я не сторонник плагинов и для своих читателей я покажу способ, как в очередной раз обойтись без них.

smailiki v kommentariyah

Немного покопавшись в 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 мне лично не очень приглянулись, да и выбор мне показался каким-то скудным.

smailiki1

И дабы не ударить лицом в грязь перед своими читателями, я решил пойти немного дальше.

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

Изображения со смайликами хранятся в директории wp-includes/images/smilies и имеют расширение .gif. Чтобы заменить картинки на желаемые, их конечно надо иметь на своем компьютере.

Благо в интернете полно различных сайтов, качественных и не очень, с которых можно все это дело скачать.

Далее,  воспользуемся FTP клиентом и заменим изображения, которые находятся в папке smilies, на новые, при этом обязательно надо сохранить исходные названия.

Ну вот, теперь смайлики выглядят куда интереснее:

smailiki2

В файле 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 не терпит ошибок и если вы вдруг забудете поставить обыкновенную запятую, то Ваш сайт станет недоступен. Будьте внимательны!

Смотрим на результат:

smailiki3

И вот «рожица» в маске появилась в самом конце. Возможно в будущем я расскажу как сделать с помощью jQuery, выезжающий сверху или снизу, блок со смайликами, так что советую подписаться на обновления блога.

Таким образом выводятся смайлики в комментариях без плагина. Надеюсь я объяснил понятно, но если есть вопросы, я всегда готов на них ответить в комментариях.

На сегодня у меня все! Как Вам статья!

С уважением, Виталий Кириллов

Комментарии: 49

  1. Елена:

    Как быстро Вы реализовываете мои желания! Спасибо большое! Вот именно этого я и хотела, чтобы смайлики были не стандартные вордпрессовские, а как их ставить не знала! Сегодня же попробую у себя на блоге! Еще раз спасибо))

    Ответить
    • Виталий Кириллов:

      Елена так совпало, что я занимался антиспамом в комментариях и заодно про смайлики написал, так что Вы вовремя попросили ))

      Ответить
  2. Наталья:

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

    Ответить
    • Виталий Кириллов:

      Пожалуйста Наталья, рад опять видеть Вас!

      Ответить
  3. Людмила:

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

    Ответить
    • Виталий Кириллов:

      Пожалуйста Людмила!

      Ответить
  4. Елена Картавцева:

    Спасибо,Виталий за подробный урок. Пока обхожусь улыбчивыми смайликами 🙂 😉 , но если понадобится расширить их количество, теперь знаю, что все можно сделать очень просто!

    Ответить
    • Виталий Кириллов:

      Здравствуйте Елена! Рад снова видеть Вас на блоге!

      Ответить
  5. Наталья:

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

    Ответить
  6. Гульмира:

    Виталий, благодарю за полезные статьи. Потихоньку избавляюсь от плагинов, хотя их у меня совсем немного,сайт молодой пока. Хотелось бы еще узнать, как сделать, как у вас: ответили на комментарий- визуально видно, что это сделано (имею в виду перечеркивание имени комментатора).

    Ответить
    • Виталий Кириллов:

      Гульмира, я специально ничего не делал. Перечеркнутое имя — это ссылка, закрытая nofollow, а если у Вас включено расширение RDS bar, то ссылка будет перечеркнутой.

      Ответить
  7. Гульмира:

    Да, Виталий, я установила это расширение по вашей рекомендации. А т. к. продолжала тусоваться на вашем сайте, то и тут же и увидела эти перечеркивания, не связав их с новым дополнением в браузере.

    Ответить
  8. Татошка:

    Спасибо огромное! поставила себе смайлики! Добавила новые через functions.php. Сама от себя не ожидала такого)
    только единственное — они выглядят малюсенькими просто в комментариях. т.е. при просмотре через консоль — нормальные, а когда смотришь общие коммент арии — сложно разглядеть даже.. с чем это может быть связано, может подскажите?

    Ответить
    • Виталий Кириллов:

      Это связано с размером шрифта, который задан для комментариев.

      Ответить
      • Татошка:

        А это можно где-нибудь поменять? буду очень благодарна если подскажите!

        Ответить
        • Виталий Кириллов:

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

          Ответить
  9. Татошка:

    Большое спасибо! Сделаю через фотошоп!

    Ответить
  10. Анна Вечеря:

    Здравствуйте, Виталий! А вы случайно не знаете как можно сделать так, чтобы пользователи могли добавлять фото в комментарии без плагина?

    Ответить
    • Виталий Кириллов:

      Анна, я еще не изучал этот вопрос, но надо .s как-нибудь заняться.

      Ответить
  11. Александр:

    Спасибо за код. Взял его для себя. Обязательно поставлю на блог.

    Ответить
    • Виталий Кириллов:

      Пожалуйста Александр! Рад видеть Вас на блоге!

      Ответить
  12. Алина:

    Здраствуйте, не получается найти в файле comments.php строчку:
    Тема Sugar & Spice Помогите…

    Ответить
  13. Алексей:

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

    Ответить
  14. Андрей:

    Спасибо, отличная статья)

    Ответить
  15. Алексей:

    Наконец то нашел настоящую информацию, о том, как вставить смайлики в WordPress не прибегая к сторонним плагинам.
    Спасибо.

    Ответить
  16. Bahus:

    У меня не получилось.
    В моем шаблоне в файле comments.php нет строки

    Эта строка есть только в файле wp-includes/comment-template.php. откуда и выводится. Но там она в виде
    ‘comment_field’ => » . _x( ‘Comment’, ‘noun’ ) . ‘ ‘,
    И как в нее запихать код?

    Ответить
    • Bahus:

      Блин, забыл. Порезало. Превратить в html сущность — че это?
      Полный коммент без обрезки
      pastebin.com/Yr479tXc

      Ответить
      • Виталий Кириллов:

        А что у Вас в файле comments.php за код?

        Ответить
        • Bahus:

          pastebin.com/HsbawqNU
          А сама форма выводится из вордпресс.

          Ответить
          • Виталий Кириллов:

            Сама форма у Вас выводится функцией comment_form(), вот после нее и вставляйте код из статьи, а там подправите положение стилями.

            Ответить
            • Bahus:

              Пробовал. Эта функция выводит не только форму, а полностью с надписями и полями ввода.
              Цифры в коде
              hostingkartinok.com/show-image.php?id=9aab58fc8c21d4932df5f69eb0d5c220
              Результат на сайте
              hostingkartinok.com/show-image.php?id=bfa9653a2557ee822aa9828ce578478e

              Ответить
              • Виталий Кириллов:

                Ну все правильно, смайлики выйдут под всей формой. С помощью CSS можно их сдвинуть вправо и поднять к полю ввода текста. Это будет лучше, чем редактировать файл движка, в котором все изменения слетят при следующем обновлении WordPress.
                Есть другой вариант. Вместо функции comment_form() прописать форму комментирования вручную, но это требует определенных знаний: HTML, принципа работы форм, ну и CSS конечно.

                Ответить
                • Bahus:

                  Код формы заменить на стандартную не сложно. Однако есть еще проблемка. Столкнулся с ней и при внедрении кнопки вверх и при смайликах. Просто не отображаются.
                  Временно поставил плагин Kama WP Smiles. Смайлы в форме появились, в комментах проставляются, но они не отображаются.

                  Ответить
                  • Bahus:

                    Со смайлами непонятки. В массиве в functions.php были указаны картинки только нескольких смайлов.
                    pastebin.com/VRK6fJcq
                    Заменил на ваш, но смайлы по прежнему не показываются.

                    Ответить
                    • Bahus:

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

                    • Bahus:

                      Тупые разрабы. Мало того, что в папке со смайлами бардак. Так и в файле functions.php бред полный. Причем дистрибьютив скачен с официального сайта.

  17. Bahus:

    Уф. Я победил этот wordpress. 🙂
    Смайлики поставил, в css поднял на нужное место. Functions.php заменил на нормальный. Сделал нормальный размер смайликов, а то совсем мизерные показывались.
    P.S. В инете полно статей, как смайлики вставить, но их код не работает. Твой сработал. Уважуха. 🙂

    Ответить
    • Виталий Кириллов:

      Я рад, что у вас все получилось и я тоже испытываю уважение к усердным людям!

      Ответить
      • Bahus:

        А как я то рад! 🙂

        Ответить
        • Bahus:

          Рано радовался. 🙁
          При нажатии кнопки «ответить» смайлы убегают от формы. Причем если нажать на ответ на свой коммент, все на месте. Если ответ другому пользователю, то форма смещается и смайлики получаются хз где. Как поправить?

          Ответить
          • Bahus:

            Изначально форма комментирования под комментами. При нажатии на ответ она перемещается над комментами.

            Ответить
          • Виталий Кириллов:

            Получается, что смайлики у Вас оказались вне формы и находятся в статичном состоянии, т.е. на одном месте. Думаю Вам все же надо отказаться от вывода формы функцией и установить HTML форму в файл comments.php.

            Ответить
            • Bahus:

              тоже к этому склоняюсь. потому что посмотрел сайт на планшетке, там смайлики сами по себе, форма сама по себе.

              Ответить
              • Bahus:

                Воткнул код в файлы движка. Сдвинул на место. Усё! Смайлы привязались к форме. И в мобильной версии тоже.

                Ответить
  18. Bahus:

    <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>

    Что в этом коде может смещать форму?

    Ответить
    • Bahus:

      Форма переезжает под отвечаемый комментарий. Если отключить comment-reply.min.js, то кнопка ответа вообще неактивна. Получается, надо скрипт редактировать? Или как по другому можно, чтобы отключить перемещение, но сохранить работоспособность кнопки ответа.

      Ответить
  19. Сергей:

    У меня не ставятся смайлики никак. менял всё в комментс файле. что можете посоветовать?

    Ответить
    • Сергей:

      Ответил сам себе. Всё получалось на самом деле, но я этого не видел, т.к. был включён плагин кеширования страниц. И я видел сохранённые копии страниц, а не те, которые были на самом деле

      Ответить
    • Виталий Кириллов:

      На каком этапе вы застопорились?

      Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS