Установка смайликов на сайт


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

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

 Для чего нужны смайлы.

Согласно Википедии: смайлик(англ. smiley-“улыбающийся”)-стилизованное графическое изображение улыбающегося человеческого лица.

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

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

В этом посте разберем два способа установки:

  • c помощью плагина wp-Monalisa

  • без плагина с помощью скрипта

Устанавливаем смайлы на сайт с движком WordPress c помощью плагина wp-Monalisa.

Это самый простой способ и многих он устраивает. Чтобы воспользоваться данным плагином следует зайти в админпанель движка в раздел “Плагины”  и перейти в “Добавить новый”. В окно поиска вбиваем название плагина и затем “Поиск”. Затем активируем его.

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

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

 плагин wp-Monalisa

Панель смайлов находится в правой колонке в разделе записей.

 плагин wp-Monalisa в панели управления

Если при активировании плагина в консоли раздела wp-Monalisa  появляется вот такая красная строка, то нужно сделать одну несложную процедуру. Заходим в раздел “Параметры” далее “Написание”.

 плагин wp-Monalisa настройка

Убираем галочку в строке “Преобразовывать смайлики наподобие такие то в картинки”. Не забываем в самом низу нажать “Сохранить изменения”.

Устанавливаем смайлы на сайт с движком WordPress без плагина c помощью скрипта.

Этот вариант мне подходит больше, потому что стараюсь минимизировать наличие плагинов на своем блоге. На самом деле на движке вордпресс установлен стандартный набор смайликов, просто надо прописать к нему путь. В первом способе мы убрали галочку в строке “Преобразовывать смайлики наподобие такие то в картинки”, но в этом она должна быть. Затем заходим в админпанели в “Внешний вид” далее “Редактор”. Что такое редактор вордпресс я писал в этой статье. В редакторе ищем файл “Комментарии”(comments.php) и находим там вот такой код:

<textarea id="comment" tabindex="4" cols="100%" name="comment" rows="10"></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>';
?>

Все стандартный набор смайликов появился на сайте.

установка стандартных смайлов

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

установка смайлов с помощью кода

Путь к смайлам мы уже прописали, теперь остается только скачать, так сказать изображения новых смайлов и поменять их на старые. Скачать вышеуказанные смайлы можно здесь. Чтобы сменить старые на новые понадобится ftp-доступ к коневому каталогу блога. Я использую программу FileZilla. Путь к папке со смайлами такой: public_html>wp-includes>images>smilies. Лично я просто поменял папку со старыми на папку с новыми, потому что названия изображений должны оставаться теми же.

Еще можно сделать так, чтобы при вставке смайла в комментарий при наведении на него курсора была не просто обычная стрелка, а рука. Для этого в стилях CSS нужно прописать вот такой код:

 .smiles {cursor: pointer;}

Как увеличить размер смайлов на сайте.

Таким вопросом я задался сразу после их установки. При вставке смайликов в текст комментария они оказались чуть ли ни в два раза меньше.

увеличение размера смайла

Но немного покапавшись в интернете нашелся и ответ. В стилях CSS максимальная высота была прописана 12 пикселей (max-height: 12 px;). Я прописал 30 пикселей и смайлики приняли нормальный вид.

 img.wp-smiley {
    border: medium none;
    margin: 0;
    max-height: 12px;
    padding: 0;

Не забывайте после любых манипуляций в редакторе нажимать “Обновить файл”, а то изменения не будут сохранены.

26 комментариев

  1. Спасибо за статью, раньше даже не задумывался об этом. Уже поставил себе на блог!
    Хоккей — это тема, тоже болею за наших на ОИ, сегодня старт, надеюсь на победу! 😉

    1. Смайлы, кстати, можно вставить в сам текст статьи. При написании текста нужно вставить код смайла в текстовом редакторе. Это при втором способе, где без плагина. Че то я эту заметку упустил, надо было ее в самой статье указать.
      Сегодня,дааа, наши хоккеисты играют первую игру. Будем болеть! ❗

  2. Андрей — у тебя потрясающий блог, сразу видно, что ты творческая натура, однако — почему у тебя нет о себе никакой информации, фото …

    Это так изначально задумано или это какое-то упущение? :mrgreen:

  3. Это так изначально задумано, Александр! 😳 Попозже все появится. Спасибо за клевое мнение обо мне и о блоге! У Вас тоже блог хороший, а особенно информацию отлично преподносите, с юморком. С такими людьми интересно общаться. 😆

  4. Заголовок статьи у вас не совсем корректный. не у всех же сайты и блоги на wordpress. Информации о том, как установить смайлики на сайт на другой cms, я здесь не увидел. 😐

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

    И поэтому я стал твоим подписчиком — не прогонишь? 😛 😀

    1. Я Очень рад, что тебе понравилось и ты подписался.Как в мультике, не помню его название, Джигарханян озвучивал: «Ну, ТЫ если что ЗАХОДИ» ➡

  6. У меня нет строки textarea name …. в файле comment.php А плагином не хотелось бы пользоваться. Незнаю, все пересмотрел, тема у меня pablik называется admired. Может вы знаете куда скрипт подключать? ❓

    1. Егор, попробуй найти в файле comment.php что то похожее на такую строчку name=»submit» type=»submit» class=»tinput» id=»submit» value=»Отправить комментарий» и затем перед ней поставь скрипт отображения смайлов. 😉

  7. Андрей,я установила смайлики с помощью плагина.В записях появились,а в комментариях нет 😐 ,можете подсказать,что можно сделать.

    1. Даже не знаю, как Вам помочь. 😐 С такой проблемой не сталкивался. Попробуйте установить без плагина.

Ответить

Ваш e-mail не будет опубликован. Обязательные поля помечены *