
Смайлики на WordPress – изменение и установка
Здравствуйте уважаемые читатели блога history-of-blog.ru. В четвертом выпуске Истории блога я говорил что следующая (эта) статья будет всецело посвящена смайликам на WordPress – по сути это подробный мануал по изменению, установке и корректировке смайлов. В данной статье будет рассмотрен способ вставки смайликов без использования плагинов, а так же корректировка вида смайлов в постах.
Смайлики на WordPress – зачем они нужны?
Для начала следует разобраться, а нужны ли вообще смайлы или это лишняя примочка к блогу? Главная задача любого интернет ресурса нести полезную информацию (ясно, что смайлики такой информации не несут), но не стоит забывать о том, что сайт должен быть удобен для пользователя во всех смыслах: начиная от внешнего восприятия, и заканчивая удобной навигацией и формой комментирования.
Наглядный пример: на моем блоге Qbici.ru стоит авторазмещение комментариев, то есть они не проходят модерацию. И люди часто выражают свое мнение с помощью смайликов, одних смайликов! Конечно пользы от таких комментариев нет, но если хорошенько это обдумать, то становится ясно, что это не так:
- Во-первых: посетители задерживаются на сайте, подбирая какой бы смайлик поставить. А как известно, чем дольше времени посетитель провел на сайте, тем лучше.
- Во-вторых: комментарии и статьи подкрепленные смешными колобками приятней читать, комментарий приобретает некий облик, лицо.
- В-третьих: люди привыкли к смайликам, для них уже привычно если не общаться с помощью них, то по-крайней мере использовать их для передачи некоторых эмоций
В общем, подводя черту я считаю, что смайлики должны быть на блоге, так как с их помощью блог становиться более удобным. Но если Вы делаете ГС, то не стоит заморачиваться
Выбираем смайлики для сайта на WordPress
В стандартной версии WordPress установлены довольно банальные и неинтересные смайлики:
Поэтому было бы логичней сделать что-нибудь поинтересней, и это осуществить не так уж сложно! Для начала нужно определиться какие смайлики Вы хотите видеть на своем блоге?
Можно выбрать из предложенных ниже вариантов или сделать свои уникальные смайлики (для этого всего-то и нужно знать азы фотошопа).
Смайлики из Skype: скачать (32 KB)
Смайлики из ICQ (большие): скачать (90 KB)
Смайлики из ICQ (маленькие): скачать (46 KB)
Но не стоит зацикливаться только на этих смайлах, так как в интернете можно найти много наборов и подобрать то, что Вам действительно понравится.
Стоит отметить тот момент, что все смайлики должны называться так же как и стандартные вордпрессовские и размеры их должны быть квадратными и одинаковыми: 16*16 px, 32*32 px или же 64*64 px, и находится в расширении .gif.
Смайлики из наборов выше уже подготовлены к установке, так что переименовывать или как-нибудь переделывать их не нужно.
После того, как Вы определились с выбором смайликов следует перейти к их установке.
Замена старых смайликов на WordPress
Папка в которой располагаются смайлики находится по адресу: /wp-includes/images/smilies/. Найти ее Вы можете через Панель управления хостингом, либо связавшись с сайтом по FTP через программу Filezilla (предпочтительнее второй вариант).
Теперь следует заменить стандартные смайлики на новые, то есть распаковать архив со смайлами прямо в эту папкой с заменой файлов.
Вот и все! Теперь у Вас новые отличные смайлики. Но это еще так сказать пол дела, смайлы вроде бы и есть, но вроде и нет.
Теперь нужно настроить отображение смайлов, там где требуется.
Установка смайликов над формой комментирования
Смайлы лучше разместить над формой комментирования – при наборе комментария они будут под рукой!
Перед тем как править код сохраните у себя на компьютере все файлы в которые вносятся изменения!
Для начала нужно найти поле для ввода комментария в файле comments.php . У меня оно выглядит вот так:
<textarea name="comment" id="comment" 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="all-smiley">'.$dm_showsmiles.'</div>'; ?>
Смайлики в постах WordPress
Чтобы вставлять смайлики в посты WordPress для начала нужно разрешить их преобразование. Для этого из Админки заходим в раздел Настройки -> Написание и ставим галочку в следующем окне:
Теперь можно разнообразить свои посты забавными колобками
Вроде бы просто, но у меня да и у многих других смайлики отображаются не совсем корректно – они образуют большой межстрочный интервал:
Для его уменьшения нужно понять суть проблемы и найти ее возможное решение. Кликнув правой клавишей мыши и нажав на Просмотр кода элемента (для браузера Google Chrome) мы узнаем какой div класс присвоен для наших смайликов:
Теперь открываем файл style.css и в самом конце добавляем строки:
.wp-smiley { margin-bottom:-6px; }
Таким образом мы задали определенный стиль для всех смайликов, а конкретно отступ снизу на минус 6 пикселей, то все смайлики опустились чуть-чуть вниз, что и обеспечило нормальное межстрочное расстояние.
В некоторых темах уже могут быть прописаны стили для смайлов – и это решение не является универсальным.
Надеюсь эта статья побудила Вас установить на свой WordPress блог смайлики и удачно это реализовать. Если возникают какие-либо трудности, то готов оказать всяческую помощь – комментирование всегда открыто!
Похожие статьи:
-
Лариса | 04.04.2012 в 19:01
Классно. Тоже хочу смайлики. Только я убрала галочку с преобразователя, потому что мой шаблон преобразованный смайлик ставил почему-то строго в начале строки, из-за чего весь смысл фразы искажался до безобразия. Теперь пишу скобки с двоеточиями, но зато там, где мне нужно.
-
Лариса | 04.04.2012 в 19:59
Спасибо. У меня тема вообще мало-юзабильная, давно бы надо поменять, но все как-то не складывается.
-
Владимир Жданов | 06.04.2012 в 12:45
Антон, можно стиль margin-bottom задать сразу в коде скрипта в последней строчке
-
Евгений Комиссаров | 12.06.2012 в 21:21
Все отлично заработало
, недавно искал инфу, как это сделать но на других сайтах все так непонятно было
-
Александр | 05.07.2012 в 22:15
У меня возникла небольшая проблема… Над формой комментариев смайлы отображаются нормально, а после публикации становятся в 2-3 раза меньше, не знаешь с чем это связано?
Вот пример комментария – http://love-my-hobby.ru/velosiped-i-zdorove/progulki-na-velosipede-put-k-zdorovomu-serdcu.html#comment-572
-
Александр | 05.07.2012 в 23:26
Ну вот… Другое дело
Спасибо
-
Лариса | 29.09.2012 в 1:02
Спасибо, Антон! Наконец-то установила и заменила. Правда, не поняла как “распаковать архив со смайлами прямо в эту папку”, пришлось добавлять по одному
-
Лариса | 29.09.2012 в 1:23
Ну и ладненько
Антон, а ты вообще сейчас сильно занят? Ну то есть не прямо сейчас, но в ближайшую неделю-две. Возьмешься за подработку? -
Лариса | 29.09.2012 в 13:22
Ок, буду ждать. Я пока подготовлю список недоработок.
-
Артём | 22.02.2013 в 16:56
Простите, а как вы сделали на этом сайте такие красивые комментарии? Поля для ввода имени, e-mail и сайта в одни строку… и комментарии обведены овальным контуров, красивая кнопочка “ответить”…. как? научите…
-
Татьяна Белокурская | 01.03.2013 в 5:40
Я нашла,а там вот такой код и в нем нет .И что делать?
Спасибо.
-
Татьяна Белокурская | 01.03.2013 в 20:34
Убрала.Спасибо за помощь.
-
сергей | 18.03.2013 в 18:33
СПАСИБОЧКИ
-
Polikor | 04.10.2013 в 22:01
Огромное спасибо, за статью! Очень полезный материал. Давно уже хотел межстрочный интервал подправить, да все руки не доходили, да и знаний маловато
Может подскажете еще как после нажатия на смайлик, вернуть фокус в текстовое поле, чтобы можно было без отрыва писать текст?
-
Сергей | 19.11.2013 в 17:35
Спасибо, Антон! По твоей статье установил смайлики в комментарии без проблем.
-
Евгений | 15.10.2016 в 20:51
На денвере у меня все нормально получилось, а вот на хостинге не работает, почему то названия файлов со смайликами не корректные. Вместо, например, icon_arrow.gif отображаются то квадратики, то лампочки, то еще что. В чем может быть дело?
Да, смайлы отличная вещь! Особенно если выводятся еще и без плагина. Что ж очередной раз буду пробовать уже по твоей инструкции, может хоть теперь будут нормально читаться