Главная » Wordpress » Смайлики на WordPress – изменение и установка
Смайлики на wordpress

Смайлики на WordPress – изменение и установка

Здравствуйте уважаемые читатели блога history-of-blog.ru. В четвертом выпуске Истории блога я говорил что следующая (эта) статья будет всецело посвящена смайликам на WordPress – по сути это подробный мануал по изменению, установке и корректировке смайлов. В данной статье будет рассмотрен способ вставки смайликов без использования плагинов, а так же корректировка вида смайлов в постах.

Смайлики на wordpressСмайлики на WordPress – зачем они нужны?

Для начала следует разобраться, а нужны ли вообще смайлы или это лишняя примочка к блогу? Главная задача любого интернет ресурса нести полезную информацию (ясно, что смайлики такой информации не несут), но не стоит забывать о том, что сайт должен быть удобен для пользователя во всех смыслах: начиная от внешнего восприятия, и заканчивая удобной навигацией и формой комментирования.

Наглядный пример: на моем блоге Qbici.ru стоит авторазмещение комментариев, то есть они не проходят модерацию. И люди часто выражают свое мнение с помощью смайликов, одних смайликов! Конечно пользы от таких комментариев нет, но если хорошенько это обдумать, то становится ясно, что это не так:

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

В общем, подводя черту я считаю, что смайлики должны быть на блоге, так как с их помощью блог становиться более удобным. Но если Вы делаете ГС, то не стоит заморачиваться ;)

Выбираем смайлики для сайта на WordPress

В стандартной версии WordPress установлены довольно банальные и неинтересные смайлики: Стандартные смайлики wordpress

Поэтому было бы логичней сделать что-нибудь поинтересней, и это осуществить не так уж сложно! Для начала нужно определиться какие смайлики Вы хотите видеть на своем блоге?

Можно выбрать из предложенных ниже вариантов или сделать свои уникальные смайлики (для этого всего-то и нужно знать азы фотошопа).

Смайлики из Skype: скачать (32 KB)смайлики из skype

Смайлики из ICQ (большие): скачать (90 KB)Смайлики из ICQ (большие)

Смайлики из ICQ (маленькие): скачать (46 KB)Смайлики из ICQ (маленькие)

Но не стоит зацикливаться только на этих смайлах, так как в интернете можно найти много наборов и подобрать то, что Вам действительно понравится.

Стоит отметить тот момент, что все смайлики должны называться так же как и стандартные вордпрессовские и размеры их должны быть квадратными и одинаковыми: 16*16 px, 32*32 px или же 64*64 px, и находится в расширении .gif.

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

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

Замена старых смайликов на WordPress

Папка в которой располагаются смайлики находится по адресу: /wp-includes/images/smilies/. Найти ее Вы можете через Панель управления хостингом, либо связавшись с сайтом по FTP через программу Filezilla (предпочтительнее второй вариант).

Теперь следует заменить стандартные смайлики на новые, то есть распаковать архив со смайлами прямо в эту папкой с заменой файлов.

Вот и все! Теперь у Вас новые отличные смайлики. Но это еще так сказать пол дела, смайлы вроде бы и есть, но вроде и нет.

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

Установка смайликов над формой комментирования

Смайлы лучше разместить над формой комментирования – при наборе комментария они будут под рукой!Смайлики на WordPress

Перед тем как править код сохраните у себя на компьютере все файлы в которые вносятся изменения!

Для начала нужно найти поле для ввода комментария в файле 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 класс присвоен для наших смайликов:

Просмотр кода элементаwp-smile

Теперь открываем файл style.css и в самом конце добавляем строки:

.wp-smiley {
margin-bottom:-6px;
}

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

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

Надеюсь эта статья побудила Вас установить на свой WordPress блог смайлики и удачно это реализовать. Если возникают какие-либо трудности, то готов оказать всяческую помощь – комментирование всегда открыто!

Комментировать через ВКонтакте:
Отзывов к посту "Смайлики на WordPress – изменение и установка" уже 34:
  • Руслан | 03.04.2012 в 20:20

    Да, смайлы отличная вещь! Особенно если выводятся еще и без плагина. Что ж очередной раз буду пробовать уже по твоей инструкции, может хоть теперь будут нормально читаться

    • admin | 03.04.2012 в 20:24

      Попробуй :smile: Хотя этот скрипт все и используют, только стили меняют

  • Лариса | 04.04.2012 в 19:01

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

    • admin | 04.04.2012 в 19:18

      Это скорей всего задано в файле style.css, стоит позиционирование или выравнивание (возможно). Это вполне можно исправить, но вкратце сложно будет объяснить как. Как только интернет починиться (а то сейчас даже письмо с почты отправить не могу) я сделаю страницу контакты – напишите мне на почту попробуем починить Вашу тему :smile:

      • Лариса | 04.04.2012 в 19:59

        Спасибо. У меня тема вообще мало-юзабильная, давно бы надо поменять, но все как-то не складывается.

  • Владимир Жданов | 06.04.2012 в 12:45

    Антон, можно стиль margin-bottom задать сразу в коде скрипта в последней строчке

    • admin | 06.04.2012 в 19:34

      Да немного подредактировал style – поставил другой margin, да курсор

  • Все отлично заработало :| , недавно искал инфу, как это сделать но на других сайтах все так непонятно было :sad:

    • admin | 12.06.2012 в 22:19

      Рад что пригодилось :)

    • admin | 05.07.2012 в 23:23

      Знаю, отредактируй файл style.css. Там есть стиль img.wp-smiley (просто открой файл через админку и найди через ctrl+f), в нем нужно убрать максимальную высоту, то есть вот эту строчку max-height: 12px;

  • Александр | 05.07.2012 в 23:26

    Ну вот… Другое дело :idea:

    Спасибо ;-)

    • admin | 05.07.2012 в 23:27

      Да не за что ;) зацени новую статейку – только написал)

  • Лариса | 29.09.2012 в 1:02

    Спасибо, Антон! Наконец-то установила и заменила. Правда, не поняла как “распаковать архив со смайлами прямо в эту папку”, пришлось добавлять по одному :smile:

    • admin | 29.09.2012 в 1:11

      Пожалуйста)) вижу – классные смайлики, мне они тоже больше других нравятся. А чтобы разархивировать нужна специальная программа – filezzila, через панель хостинга только по одному можно заменять

      • Лариса | 29.09.2012 в 1:23

        Ну и ладненько :)
        Антон, а ты вообще сейчас сильно занят? Ну то есть не прямо сейчас, но в ближайшую неделю-две. Возьмешься за подработку?

        • admin | 29.09.2012 в 12:59

          В ближайшие дней 5 не смогу, а позже можно :)

          • Лариса | 29.09.2012 в 13:22

            Ок, буду ждать. Я пока подготовлю список недоработок. ;-)

  • Артём | 22.02.2013 в 16:56

    Простите, а как вы сделали на этом сайте такие красивые комментарии? Поля для ввода имени, e-mail и сайта в одни строку… и комментарии обведены овальным контуров, красивая кнопочка “ответить”…. как? научите…

    • admin | 23.02.2013 в 12:48

      Спасиб :)
      Ну как бы объяснить – всю тему делал сам, поэтому немножко разбираюсь в верстке, соответственно и расположить все могу, так как захочется. В этом случае могу лишь посоветовать бесплатный курс по созданию шаблонов worpress (фотошоп, верстка, перевод кода в шаблон) Банер есть в шапке (на нем еще написано: Бесплатно! Жми и учись!)

    • admin | 28.02.2013 в 17:33

      В админке зайдите “Дизайн” -> “Редактор” и справа выберите этот файл

  • Татьяна Белокурская | 01.03.2013 в 5:40

    Я нашла,а там вот такой код и в нем нет .И что делать?
    Спасибо.

    • admin | 01.03.2013 в 17:21

      Вот огромные куски кода в комментарии точно кидать не нужно.
      Если знания не позволяют сделать все самой – обратиться к фрилансерам (за определенную плату они сделают все как нужно), ведь каждый шаблон разный и единого решения нет.
      Хотел помочь – посмотреть исходный код через инспектирование элементов, и определить класс поля ввода. Но стоит защита, которая дает всплывающее окно “Создай свой контент” – мой совет, уберите, если и захотят взять контент (что маловероятно), то обязательно скопируют (ctrl+u – и все как на ладони). Бесполезная и раздражающая защита, хотя у каждого свое мнение наверно :)

  • Татьяна Белокурская | 01.03.2013 в 20:34

    Убрала.Спасибо за помощь.

    • admin | 17.03.2013 в 23:09

      Выберите какое-нибудь необычное слово и вставляйте в код в разные места, затем ищите где оно отображается – простой пример определить нужное место ;)

  • Polikor | 04.10.2013 в 22:01

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

    • admin | 04.10.2013 в 22:12

      А вот это без понятия =)

  • Сергей | 19.11.2013 в 17:35

    Спасибо, Антон! По твоей статье установил смайлики в комментарии без проблем. ;-)

  • Евгений | 15.10.2016 в 20:51

    На денвере у меня все нормально получилось, а вот на хостинге не работает, почему то названия файлов со смайликами не корректные. Вместо, например, icon_arrow.gif отображаются то квадратики, то лампочки, то еще что. В чем может быть дело?

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: