Как добавить в форму комментариев смайлы без плагина
Сегодня научимся добавлять на сайт смайлики рядом с формой комментирования. Делать это будем без использования плагинов и работает данная штука на сайтах под управлением нашей любимой CMS WordPress.
Предоставим комментаторам на своем сайте больше возможностей...
Вот так выглядят смайлы (на сайте одного из моих клиентов):
В самом движке уже встроены эти смайлы. Если в админке сайта проследуете Настройки ► Написание, то увидите:
Кто не хочет заморачиваться с кодом, то может использовать плагин Custom Smilies. Остальные же читают дальше.
Вставляем код смайлов в файл шаблона
Находим у себя в папке с шаблоном файл comments.php (обычно так называют) и вставляем в нужное место следующее:
$dm_smile) {
if (!in_array($dm_smile,$dm_smiled)) {
$dm_smiled[] = $dm_smile;
$tag = str_replace(' ', '', $tag);
$dm_showsmiles .= ' ';}}
echo ''.$dm_showsmiles.'';
?>
В зависимости от того, как у вас сделан шаблон, нужно место может различаться. Приведу 2 примера.
Если увидите нечто подобное <?php comment_form(); ?>, то вставив после него код смайлов, они отобразятся снизу за полем ввода комментария и кнопки "Отправить комментарий".
Если же в своем файле comments.php вы нашли много кода (на экрана 2 вертикальной прокрутки), то вам повезло, т.к. можете вставить смайлы в более подходящее место (на первом скриншоте прямо над формой ввода текста). В этом случае ищем такой тег:
У вас он может иметь свои атрибуты. Например:
Вставив код смайлов перед <textarea></textarea> - они появятся перед формой ввода. Вставите за этим тегом - появится снизу.
Стилевое оформление смайлов
Чтобы все было красиво, у вас есть возможность дописать нужные параметры стилей. Если обратили внимание, то блок смайлов обернут в div с class="smiles".
Советую в файл стилей (style.css, css.css) сразу добавить следующий параметр:
.smiles {cursor: pointer;}
Теперь при наведении на смайл курсор примет вид руки, а не обычной стрелки по-умолчанию. Также можете сделать произвольный курсор, о чем я рассказывал в статье Как сделать свой курсор на сайте при помощи CSS.
Кто из вас мог заметить в коде смайлов выше вот такой путь /wp-includes/images/smilies/. Заходите на ftp сайта и далее по указанному адресу: здесь можете заменить стандартные смайлы на свои произвольные. Но:
- не забудьте сделать их с таким же именем
- при обновлении движка возможно придется снова заменить смайлы
На этом все. Делимся результатами в комментариях к статье.