Шаг №112.Усовершенствуем форму комментариев wordpress.Добавляем смайлики и редактор кода для подсветки синтаксиса.

Приветствую на своем сайте друзья.Давненько уже я обещал написать урок по усовершенствованию формы комментариев wordpress.Ну и наконец то сегодня я подробно напишу, что за чем следует делать, что бы добиться такого же функционала как и на моём блоге. Напомню, на своём сайте я по просьбе читателей сначала добавил возможность вывода смайликов возле формы комментариев, ну а чуть позже также добавил возможность вставлять код в комментарии.

Итак, что нам понадобится…Надо же мне вспомнить в какой последовательности я делал свою форму комментариев. Ах да, вспомнил, для начала Вам необходимо установить плагин под названием WP-Syntax. Скачать его можно из официального репозитория wordpress, перейдя по ссылке WP-Syntax. Данный плагин необходим для подсветки синтаксиса кода, размещенного в комментариях. Установить плагин Вы сможете сами, так как я уже не раз показывал как это делается.

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

 Подсветка синтаксиса в форме комментариев wordpress.

Для того, что бы добавить кнопки подсветки синтаксиса на wordpress необходимо установить плагин jQuery Comment Preview.Данный плагин позиционируется как плагин для пред просмотра комментариев перед публикацией, но на своем сайте я использую не весь его функционал а лишь часть. После установки данного плагина перейдите к его настройке.

Так как я не использую предпросмотр комментариев на своем сайте, то часть с настройкой предпросмотра можно пропустить, а прокрутить ниже — до настроек HTML — редактора.

Форма комментариев wordpress

Поставьте галочку, что Вы хотите отображать html редактор, а в поле для ввода кнопок html редактора пропишите код:

<button id="ed_strong">b</button>
<button id="ed_em">i</button>
<button id="ed_a">link[href=""]</button>
<button>b-quote</button>
<button>CSS<b> lang="css" escaped="true"</b></button>
<button>HTML<b> lang="html" escaped="true"</b></button>
<button>JavaScript<b> lang="javascript" escaped="true"</b></button>
<button>PHP<b> lang="php"  escaped="true"</b></button>

После данных манипуляций в Вашей форме комментариев уже должны появиться кнопки для быстрой вставки кода.

Форма комментариев wordpress

Теперь нам нужно добавить смайлики в форму комментариев.

Добавление смайликов в форму комментариев wordpress.

Загрузите набор смайлов на компьютер, разархивируйте папку smiles, и загрузите ее к себе на хостинг в папку wp-includes/images/. Для вставки смайлов в форму комментариев wordpress Вам необходимо добавить код в файл wp-includes/comments-template.php

Для того что бы узнать в какое место необходимо загрузить код, сделайте поиск по файлу,в котором ищите вот такую строку:

<?php echo $args['comment_notes_after']; ?>

После того, как найдете данную строку, вставьте перед ней код:

<script type="text/javascript">
function addsmile($smile){
document.getElementById('real-comment').value=document.getElementById('real-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 style="margin-right: -2px;cursor:pointer;" src="'.get_bloginfo('wpurl').'/wp-includes/images/smilies/'.$dm_smile.'" alt="'.$tag.'" onclick="addsmile(\''.$tag.'\');"/> ';
    }
}
echo '<div id="smile-panel">'.$dm_showsmiles.'</div>';
?>

Единственное что нужно проверить, это id области для ввода комментария должны совпадать. В моем случае id = real-comment , в Вашем же случае id может принимать другое значение, и тогда в код указанный выше нужно подставить своё значение.

Для того что бы узнать id объекта, нужно к примеру в Google Chrome выбрать интересующий объект и нажать «Просмотр кода элемента».
Форма комментариев wordpress
Ну и завершающая часть даю CSS код, который необходимо разместить в файле style.css Вашего шаблона:

#smile-panel {
width: 670px;
margin-left: 0px;
margin-right: 0px;
height: 23px;
padding-bottom: 14px;
margin-top: -10px;
background: #EEE url(image/toolbar.gif) repeat-x;
border: solid #D6D3D3;
border-width: 1px 1px 0;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius: 0 0 6px 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}

Длину блока можно подредактировать вручную, если у Вас поле для ввода комментариев отличается по длине от моего.Вот так можно усовершенствовать форму комментариев wordpress.
Всем успехов!Если остались моменты, которые не совсем понятны, то задавайте вопросы в комментариях.

  • http://sea-of-money.ru Юлия

    Классная статья!
    Вот, кстати, у Вас нет смайлика «Большой палец вверх». Так мне его хочется добавить в этот комментарий 😐
    Попробую к себе на сайт установить такую форму комментариев.

    • http://wpcreate.ru Артем Петрусенко

      Спасибо Юлия, может когда нибудь добавлю такой смайл в этот набор)) 😉

  • http://awebart.ru/ Артем

    Спасибо, прикольные комменты)

  • http://kinoblog.pusku.com/ pavlo

    Здравствуйте подскажите пожалуйста как изменить текст в рубрике http://my.jetscreenshot.com/21207/20131024-p4cs-127kb что бы было вот так: http://my.jetscreenshot.com/21207/20131024-khbu-115kb

  • Andrey

    Первый… простите нах, у кого не работает)) Установил, всё работает для формы комментирования, но слетела прокрутка страницы «кнопка вверх». Стояла на сайте полгода. Добавил jQuery Comment Preview и перестала быть прокрутка вверх. Вроде безобидный javascript-код у данной «кнопки вверх», но сработала видать несовместимость скриптов…

  • http://www.boxinglegends.ru Егор

    Очень интересная статья. Классный сайт, добавил в закладки=)

  • Александр

    Установил плагин jQuery Comment Preview, правда без смайликов. Когда проверял работу, то увидел, что сообщения по подписке приходят ко мне без форматирования, а в HTML кодах со всеми blockquote, code и т.п.
    На сайте все отображается правильно. Как это исправить?

  • http://zarobitok.ru/ Андрей

    Доброе время суток Артем!
    Подскажите как удалить функционал предпросмотра, как это у Вас сделано?

    • http://wpcreate.ru Артем Петрусенко

      Андрей, я просто удалил код кнопки предпросмотра) 😉

      • http://vedruslan.com/ Руслан

        Подскажите пожалуйста, в каком файле нужно удалить код кнопки предпросмотра, где только я не искал её, но найти не смог..

        • http://wpcreate.ru Артем Петрусенко

          В настройках плагина отключить предпросмотр.

          • http://vedruslan.com/ Руслан

            В настройках jQuery Comment Preview нету кнопки (или галочки) которая отключает/включает эту функцию…

  • http://my-coding.ru Алексей

    Добрый день. Все сделал как у вас в статье, но вот один косячок всплыл. При добавлении комментария пользователем не из группы администраторы подсветка синтаксиса не работает. От админа комменты подсвечиваются. Не знаете где там проверка идет? А то самому лениво ковырять файлы.

    • http://wpcreate.ru Артем Петрусенко

      Алексей, вроде бы я у себя такой проблемы не замечал.

  • http://in1click.ru Александр

    мне нравится, спасибо! Обязательно сделаю 🙂

  • http://www.codergames.ru Степан

    Легко читается и все понятно.

  • Елена

    Артем, помогите, пожалуйста. Вопрос немного не в тему, но про комментарии…
    Изначально на сайте не было комментариев к статьям, но чудесным образом я их добавила, но смотрится ужасно, т.к. надписи строк ‘имя’ ‘ email’ стоят рядом со строчками, да еще с комментарием ОБЯЗАТЕЛЬНО… как можно надписи переместить внутрь строк и убрать этот ужасный комментарий (Обязательно)!

  • http://elena-sholohova.ru Елена

    Спасибо, за полезную статью! А возможно ли только для комментариев создать и добавить новый стиль? То есть чтоб фон и шрифт комментариев был другой чем у остального текста, допустим, хотя бы курсив? (а то сливается)

  • http://www.krasbaks.ru Rencontrez

    Спасибо за статью! =) Добавил ваш сайт в закладки. Буду брать уроки для редактирования своего блога 💡

  • http://vedruslan.com/ Руслан

    Здравствуйте!
    У меня получилось добавить кнопки для быстрой вставки кода, но вот смайлики добавить почему то не смог — ссылка на блог..
    Я загрузил смайлы в папку wp-includes/images/;
    Добавил код в файл wp-includes/comments-template.php перед нужной строкой, мой id — comment;
    В файле style.css, код добавил в конце файла..
    Может есть ещё какие то нюансы? Подскажите пожалуйста.

    • http://wpcreate.ru Артем Петрусенко

      Я смотрю все таки получилось со смайлами)

      • http://vedruslan.com/ Руслан

        Получилось другим способом. Я хочу сделать как у Вас, культурную форма комментариев, сверху имя, емайл и адрес сайта и в одной рамке форма комментов со смайлами и кнопками. Так у меня не получается.

      • http://vedruslan.com/ Руслан

        Помогите пожалуйста сделать форму комментариев, как у Вас.

  • некнкенкпар

    ыварпортьтьб

  • Сергей

    Артем, подскажите, пожалуйста, как вывести форму для добавления комментария перед лентой комментариев (как у вас)?

  • http://best-artclub.ru/ VARTAN

    Добрый вечер. Вроде по инструкции всё сделал, но что то смайлы не появились… http://yadi.sk/d/rZr0MPpKMuGkx
    Так же подскажите как сделать растяжение окна только по вертикали, а по по горизонтали фиксированную оставить.
    И последнее… Подскажите какие настройки выставит чтобы появилась форма (имя почта сайт) на данный момент у меня так http://yadi.sk/d/ILfqyCdrMuGGi
    P.s. Надеюсь вопросов не слишком много, заранее спасибо)

    • http://best-artclub.ru/ VARTAN

      Со смайлами разобрался) Были две ошибка…
      1) я другие смайлы колобки заливал а не из поста.
      2) был отключён Форматирование Преобразовывать смайлики наподобие 🙂 и 😛 в картинки

      Смайлы появились но возник следующий вопрос…
      Какой код удалить чтобы кнопка со смайлами исчезла?
      И как поправить чтобы смайлы не выходили за рамки (скрин ниже)
      http://yadi.sk/d/UxjjHBwxMuQ7y

  • NeXan

    Ку 😉

  • df

    dftyuiiuytr

  • test

    Test