Добавляем смайлики на WordPress блог без плагинов. Смайлики: добавляем и удаляем Фильтрация - удаление кода смайликов из текста

Коничуа, друзья! С появлением WordPress 4.2 у многих пользователей возникает проблема в том, как использовать или отключить смайлики Emoji. По сути это даже не смайлы, а расширенный набор иконок. Кому-то он может пригодиться. Например, для использования каких-то иероглифов, музыкальных или астрологических знаков. А для кого-то эти иконки будут лишними. Поэтому этот материал я подготовил сразу для двух категорий людей.

Раньше существовал специальный плагин WP Emojis One , который позволял добавлять такие смайлы на сайт. Но начиная с WordPress 4.2 разработчики решили внедрить такой функционал в саму CMS. Я когда первый раз увидел эти лица, то сразу вспомнил про китайцев. Ведь на смайликах были узкие глаза. Что-то типа этого: (^_^). В общем, хватит вступлений. Давайте что-то делать с этой функцией. Либо использовать ее на своем блоге, либо полностью удалять. Но прежде чем определиться, обязательно дочитайте этот пост до конца!

Как использовать смайлики Emoji в WordPress?

Начнем с тех, кто хочет использовать смайлы. Вот обновились вы на WordPress 4.2, но не знаете, как использовать смайлики Emoji на своем сайте. Ведь в редакторе CMS нет никакой новой кнопки для добавления иконок. И как нам добавить эти смайлы на сайт? Прежде чем отвечать на этот вопрос, скажу вам, что тут многое зависит от операционной системы. В разных ОС и браузерах Emoji обрабатываются по-разному. Поэтому я вам перечислю несколько способов использования этих иконок. А вы в свою очередь выбираете подходящий для вас вариант и начинаете действовать.

IOS для iPhone, IPad и iPod

Скажу, что начиная с 5 версии Emojis уже внедрены в систему. Поэтому чтобы их использовать в системе IOS, вам достаточно просто подключить новую клавиатуру. Если вы используете IOS 8, то вам повезло. В этой системе клавиатура Emoji уже установлена. Если же у вас другая версия системы, то делаем следующие телодвижения. Заходим в меню «Настройки » —> «Основные » —> «Клавиатура » —> «Международные клавиатуры «.

После этого выбираем «Новые клавиатуры » и в самом списке выбираем «Эмодзи «.

Все, клавиатура теперь добавлена. В самой нижней части экрана вы увидите смайлик (1) . Нажмите на него чтобы посмотреть набор смайликов Эмодзи. Если вы используете несколько клавиатур, то выбирать нужную можно с помощью значка в виде глобуса (2) .

Теперь при работе со своим сайтом на мобильном устройстве типа iPhone, IPad или iPod, вы с легкостью сможете добавлять смайлы Emojis. Также такие иконки можно использовать и в комментариях на блогах своих друзей. Однако это будет работать при условии, что на чужом блоге включена поддержка Эмодзи.

Android

Для тех, кто пользуется устройствами на системе Android, придется добавить приложение для создания клавиатуры Emoji. Похожих приложений довольно много. Поэтому я тут не буду здесь их все перечислять. Для начала можете попробовать такие, как TouchPal X Keyboard или Emoji Keyboard . После установки приложения нажимаем на кнопку смайлика для доступа к иконкам.

Windows Phone 8

Для обладателей Windows Phone 8 подойдет отличное приложение [+]Emoji . Все смайлики группируются на отдельные категории, что очень удобно.

Windows 8 и выше

Теперь для тех, кто пользуется настольными компьютерами. Для операционной системы Windows 8 и выше здесь будет достаточно просто. Смайлы Эмодзи уже встроены в систему и их нужно только включить. Для этого на панели задач (3) (она в самом низу) щелкаем правой кнопкой мыши. Выбираем «Панели инструментов » —> «Сенсорная клавиатура (Touch Keyboard) «. После этого в нижнем правом углу появится новый значок в виде клавиатуры (4) .

Когда захотите добавить Emoji смайлы в Windows 8, то просто кликните на клавиатуру и выберите значок в виде смайла (5) .

Windows 7 и ниже

Для более ранних версий Виндовс, Эмодзи не встроены. Поэтому придется немного повозиться. Скажу вам, что есть два способа добавления иконок. Во-первых, можно использовать специальные расширения для браузеров. К примеру, я для Google Chrome установил расширение Emoji Input . Теперь чтобы добавить смайлы Emojis на WordPress блог, мне достаточно кликнуть на значок расширения, выбрать и скопировать нужную иконку.

После этого нужно зайти в текстовый редактор сайта и вставить иконку.

Во-вторых, вместо расширения можно воспользоваться сайтом (getemoji.com) или (classic.getemoji.com) и брать иконки оттуда. Тут по аналогии с первым вариантом. Копируем нужную иконку и сразу вставляем в редактор WordPress.


Вот такими способами можно добавлять и использовать смайлики Emoji на своем сайте WordPress. Конечно, такие иконки можно использовать и на других операционных системах. Более подробно вы найдете в кодексе Вордпресса (codex.wordpress.org/Emoji).

По умолчанию иконки выглядят мелковато. Поэтому если захотите подогнать размер, то вам нужно переключиться на html-редактор и вставить такой код:

иконка

Вместо 14 вставляем свое число. Получится так:

Как отключить Emojis в WordPress 4.2?

Ну а теперь, о наболевшем. В связи с некоторыми проблемами, многие пользователи WordPress 4.2 захотели бы просто отключить эти смайлики Emoji. Причин тут несколько. Кому-то банально, не нравятся такие иконки. У кого-то возникают различные ошибки и так далее. Я лично отключил Эмодзи, потому что у меня начали возникать проблемы со старыми смайликами.

Дело в том, что когда я обновил WordPress, то все смайлики в моих комментариях начали отображаться некрасиво. В основном они были сплющены и плохо заметны. Такой вариант меня не устраивал. Поэтому решил отключить новую функцию. А еще, как правило, сами иконки в посты я редко добавляю. Если и использую, то только иконочные шрифты (пальцы, плюсики, галочки и тому подобное) . Мне этого хватает.

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

И сейчас вы спросите: «Так как же отключить смайлики Emoji в WordPress 4.2? » Да очень просто! Достаточно просто установить плагин Disable Emojis . Расширение не имеет никаких настроек. Поэтому когда вы его активируете, то поддержка Эмодзи полностью исчезнет.

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

Если вам нужно вывести что-либо другое, то устанавливаем подходящее для этого расширение. В общем если захотите вывести свои смайлики и отключить Эмоции, вам нужно установить Disable Emojis + скрипт или плагин, который выведет нужные вам лица. Если вы вообще, полностью хотите отключить вывод смайлов на сайте WordPress, то просто устанавливаем Disable Emojis и в меню «Настройки » —> «Написание » —> «Форматирование » убираем галочку с «Преобразовывать смайлики наподобие… »

Использовать смайлики Эмодзи или нет?

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

Да и к тому же могут возникать проблемы с отображением иконок. Особенно это касается ОС в которых нет поддержки Emojis. К примеру, у меня седьмая Винда стоит. Но все равно, при просмотре этих смайликов с сайта (getemoji.com) у меня возникают ошибки в виде квадратов.

Это говорит о том, что даже если вы добавите эти иконки на свой сайт, многие пользователи могут их просто не увидеть. Чтобы этого можно было как-то избежать, стоит ставить классические смайлики с сайта (classic.getemoji.com) . Там у меня проблем с отображением не было.

Есть еще и второй вариант — это использовать специальные расширения для браузеров (типа Emoji Input для Хрома) . Они помогают распознать все виды смайликов. Но тут опять же, нужно чтобы такие расширения были установлены на стороне пользователя. Иначе вместо ваших иконок он увидит пустые квадраты.

Также стоит учесть, что вот эта новая функция Эмодзи может дополнительно подгружать сайт. Когда пользователь заходит на ваш сайт, то WordPress автоматом с помощью специального скрипта проверяет поддержку Emoji на стороне пользователя. Если ее не будет, то CMS будет дополнительно загружать иконки с другого сайта. В итоге для пользователя (со старой ОС и без расширения) сайт будет грузиться на 1 — 1,5 секунды больше обычного. Поэтому если вы не планируете использовать Emoji, то лучше полностью отключите эту функцию.

Как по мне, так все это нововведение в новой версии WordPress будет лишним. Зачем мудрить то, что и так работает нормально! А если кто-то захочет подключить Эмодзи, то достаточно просто установить плагин WP Emojis One . В итоге у человека появится право выбора. Сейчас же, к сожалению, его у нас нет. Приходится бегать за и возвращать прежний функционал обратно.

Бляха-муха, они даже кнопку в редакторе не удосужились поставить, чтобы можно было быстро добавить иконку! Это вообще, ни в какие ворота не лезет! А говорят, что больше работают на улучшение юзабилити системы WordPress. Надеюсь, в новых версиях движка разработчики исправят все эти недочеты. Также обратите внимание, что . Обязательно почитайте эту новость. В общем, изучайте и внедряйте!

Продолжаем украшать ваш сайт. И на сей раз объектом нашего внимания является плагин для установки смайликов на блог WP-Monalisa . Кстати, а вы знаете, зачем они нужны? Что за глупый вопрос? Конечно же, они нужны для того, чтобы посетители сайта и заядлые комментаторы ярко выражали свои эмоции не только словами, но и весёлыми, грустными или злыми картинками. Вот так вот. Ну что ж, приступим к установке этого замечательного плагина.

Устанавливается он обычным способом через консоль. Консоль -> Плагины -> Добавить новый и в поиск вбиваем WP-Monalisa . Появляется один единственный плагин, его и устанавливаем, а затем активируем.

В меню консоли появились его настройки, переходим. Давайте приступим к настройкам плагина WP-Monalisa.

  • Iconpath – это путь к смайлам на вашем сайте. Как видим, по умолчанию это wp-content/plugins/wp-monalisa/icons Свои картинки можно закинуть по тому же пути.
  • Show smilies on edit – данный пункт отвечает за показ смайликов в редакторе записей. То есть все смайлы вы сможете вставлять и в ваши записи.
  • Show smilies on comment – а это позволить вашим посетителям вставлять смайлы в свои комментарии.
  • Replace emoticons with html-images – выбираем способ отображения смайлов. Если оставить пункт включённым, то при вставке картинки в комментарии будет отображаться длиннющий код. Поэтому лучше его отключить.
  • Show smilies in a table – поставив здесь галочку, можно сделать так, чтобы смайлы в выборе отображались в виде вертикальной таблицы, подстраиваясь под дизайн вашего сайта.
  • Show smilies as Pulldown – смайлы будут представлены виде выпадающего списка.
  • Show tooltip for icons – данный пункт будет показывать подсказки к смайлам, какую именно эмоцию означает смайлик.
  • Под настройками вы сможете поэкспериментировать со смайлами. Их очень много, а ещё у вас есть возможность удалить, заменить, поменять местами или закачать свой смайлик. Для установки своей сборки нужно его найти и скачать или даже нарисовать самому, а затем загрузить на свой хостинг по этому пути вашсайт.ру/wp-content/plugins/wp-monalisa/icons Такой вот полезный плагин!

    Подавляющее большинство блоггеров (если не все, то 95% точно) используют самый популярный движок для блогов — . Одним из самых интересных достоинств этого движка является встроенная система комментирования постов.

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

    Чтобы внести в этот полезнейший инструмент дополнительную эмоциональность — рекомендую обязательно добавить себе на блог возможность использования смайликов в комментариях.

    Тем более, что возможности для этого есть. Сегодня я расскажу Вам об одном замечательном плагине для WordPress — Qip smiles.

    Более того, я открою Вам некоторые секреты, о которых все умалчивают. Иногда этот плагин отказывается правильно работать. Я расскажу Вам, как с этим бороться. А также, расскажу как добавить в этот плагин дополнительные смайлики.

    Приступим к делу.

    1. Установка плагина qip smiles.

    Это самая простая часть из того, что Вам предстоит сделать. Об этом можно найти великое множество статей. Практически на каждом блоге есть подобные статьи.

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

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

    2. Настройка отображения смайлов на Вашем сайте.

    Просто установить плагин не достаточно. Нужно указать Вашей CMS куда именно добавить смайлики.

    Для этого надо добавить в код Вашего шаблона одну единственную php-инструкцию:

    Вопрос в другом — куда именно ее добавить. Логичнее всего добавить смайлики ниже формы ввода текста комментария.

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

    Для этого мы будем использовать дополнение к браузеру Mozilla Firefox — Firebug. На мой взгляд это самый необходимый инструмент веб-мастера. Где его взять и как им пользоваться я описал в

    Итак, смотрим видео, как найти место для вставки смайлов в WordPress:

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

    3. Возможные проблемы и неполадки.

    Когда я установил себе этот плагин, я долгое время не обращал внимания на то, что он у меня неправильно работает. И так было до тех пор, пока пользователи, писавшие комментарии, не обратили мое внимание на них.

    Большое им спасибо за это.

    Что же было не так? Смайлики не вставлялись по клику мыши. Их нужно было перетаскивать. Согласитесь, что до этого не каждый и додумается.

    Я начал искать решение. И обнаружил, что очень многие люди жалуются на подобную проблему.

    А вот решение я нашел только в одном месте (хотя, может есть и еще где-то... я просто потом дальше не искал )

    Итак, если у Вас наблюдается подобная проблема, то Вам нужно исправить всего одну строчку в коде самого плагина.

    А именно:

    Находим файл qips-js.php (находится он в папке плагина: /wp-content/plugins/qipsmiles). Открываем его.

    Находим в этом файле функцию: qips_code (qips_tag), а в ней строчку

    Сохраняем файл. Все! Теперь смайлы должны работать правильно.

    Иногда еще проблема бывает связана с отсутствием в файле footer.php вызова стандартной функции wp_footer ();. Ее просто нужно туда вставить. Просто перед закрывающим тегом прописываем:

    4. Добавление смайлов в плагин Qip Smiles.

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

    Можно самим редактировать и добавлять новые смайлики в плагин. Делается это не сложно.

    Заходим в папку плагина /wp-content/plugins/qipsmiles/smiles. В ней лежат картинки самих смайлов и файл с их описанием package.php

    Открываем этот файл и видим два массива:

    • $main_smiles_array — массив с основными смайликами, которые показываются по умолчанию;
    • $smiles_array — массив с дополнительными смайлами, которые отображаются после нажатия кнопки «Еще смайлы».

    Вы можете добавить новые записи в эти массивы (по образцу) или заменить старые. Записи имеют формат:

    То есть, для того, чтобы добавить новый смайлик, Вам нужно только написать ля него кодовое обозначение и прописать имя файла с картинкой смайлика. Ну и конечно же не забыть закинуть саму картинку в эту же папку. И все.

    Вот такой полезный и интересный плагин для WordPress — Qip Smiles.

    Пользуйтесь на здоровье. Удачи Вам.

    И снова здравствуйте!

    Не помню точно что натолкнуло меня на мысль установить смайлы на этот сайт. Вроде знакомый устроил мне разбор смайлов в мессенджере «QIP infium», которым я пользуюсь уже не первый год и я загорелся желанием прикрутить смайлики сюда.

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

    О плагине смайликов для WordPress

    Что делает плагин:

    • заменяет стандартные смайлики WordPress, на смайлики из QIP.
    • добавляет список смайликов к полю комментирования. Какие смайлики попадут в список указывается в настройках.
    • добавляет смайлики в админ-панель, где можно легко их вставлять при ответе на комментарии или написании поста.
    • упрощает поиск и замену кодов смайликов в тексте.
    Настройки Kama WP Smiles

    Расскажу немного о настройках

    Ручная вставка блока смайликов в форму комментирования

    Плагин автоматически добавляет смайлики к форме комментариев (textarea). Однако может получиться так, что нормально встроить список у плагина не получиться. В таком случае, вы можете вставить блок смайликов вручную, в любое место шаблона. Для этого оставьте поле "Авто-вставка смайлов" в настройках пустым, так вы отключите авто-вставку, и при помощи php кода вставьте блок в нужное место шаблона (обычно где-то в файле comments.php):

    Этот код выведет блок смайликов.

    HTML теги исключения

    В этой настройке можно указать HTML теги, текст в которых не будет обрабатывался плагином. Например, если там указать code , то следующий код не будет обработан плагином:

    улыбочка:) .

    Теги нужно указывать через запятую.

    Специальные обозначения смайликов (смайлики исключения)

    По умолчанию смайлики определяются в тексте по коду (:название_файла_смайлика:) , но есть исключения. Например смайлик обозначается как:-) или:) или =) , а его родной код (:smile:) . По умолчанию 3 таких исключения: :) :(:D . Такое ограничение связано с небольшой оптипизацией... Такие исключения можно настроить в плагине.

    Редактируем внешний вид

    Если вас не устраивает как выглядит список смайликов, то его можно отредактировать, при условии что вы знаете css, для этого нужно изменить CSS правила в поле "CSS стили". Чтобы стили не хранились в настройках, стили можно скопировать в свой файл стилей, при этом удалить их из настроек.

    Установка своего комплекта смайлов

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

    Чтобы дополнить список, всего-то нужно создать рядом с папкой плагина папку kama-wp-smile-packs и добавить в нее свой комплект смайликов-картинок. Т.е. в итоге у вас должна получиться такая папка с картинками смайликов: /wp-content/plugins/kama-wp-smile-packs/mypack/*.gif . После создания такой папки, нужно зайти в настройки и выбрать новый появившейся пакет смайликов.

    В тексте записи будет использоваться конструкция (:название_файла:) . Например, если вы добавите картинку emotion.gif в тексте этот смайл будет вставляться как (:emotion:) .

    В названии файлов допускаются только нижний регистр латинских букв a-z , цифры 0-9 , знаки - и _ . Если файл имеет какие то другие знаки, то он не будет работать.

    Фильтрация - удаление кода смайликов из текста

    Если нужно где-то отфильтровать текст (не показывать код смайликов), то примените такой фильтр:

    $text = "Пробный текст (:good:)"; $text = preg_replace("/\(:{0,15}:\)/", "", $text); echo $text; // вернет: Пробный текст

    Как встроить плагин в другие поля, например в BbPress, Quick Chat

    Плагин по умолчанию работает только для комментариев и записей. Если нужно «прикрутить» его куда-то еще, то вам пригодятся следующие функции и немного знаний css:

    • kws_get_smiles_html($textarea_id) - выводит блок смайликов для textarea
    • kws_convert_smiles($content) - обрабатывает контент на выходе, чтобы сделать из кодов смайлов картинки

    В случае внезапных проблем, глюков, багов и «ещечего» или если просто появится желание написать что-то примерно такое - , пишите в комментарии

    Здравствуйте, друзья! Давно я не публиковал новых статей про WordPress. Дело в том, что блог мой уже устоялся — установлены и настроены основные плагины, что-то где-то сделано чисто на коде, и особо менять или добавлять нового не приходится. Остается только допиливать некоторые мелочи, связанные в основном с внешним видом блога. Одна из таких мелочей — смайлики WordPress . Вот о них сегодня и поговорим.

    Смайлики в WordPress есть по умолчанию, только многие о них даже не знают, ибо их еще следует включить в настройках. Переходим в раздел «Параметры» — «Написание» и включаем опцию:

    Полный список всех доступных смайликов в настройках не указан, зато его можно найти в кодексе WordPress. Вот он:

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

    Поменять смайлики можно в ручную, благо это несложно.

    • с новыми смайликами себе на компьютер и распаковываем его.
    • Все иконки лежат на сервере в каталоге /wp-includes/images/smilies . Нам необходимо в ручную подменить стандартные файлы на новые. WP все равно, какую картинку выводить.
    • Если требуется добавить новый смайлик, аналога которому в WP нет, то его еще нужно прописать в файле /wp-includes/functions.php . По умолчанию в нем можно увидеть следующий код:
      function smilies_init() { global $wpsmiliestrans , $wp_smiliessearch ; // don"t bother setting up smilies if they are disabled if ( ! get_option( "use_smilies" ) ) return ; if ( ! isset ( $wpsmiliestrans ) ) { $wpsmiliestrans = array ( ":mrgreen:" => "icon_mrgreen.gif" , ":neutral:" => "icon_neutral.gif" , ":twisted:" => "icon_twisted.gif" , ... ":!:" => "icon_exclaim.gif" , ":?:" => "icon_question.gif" , ) ; }

      Просто добавляете новую строчку, в которой указываете ключевые символы и соответствующую им иконку. Для удаления смайлика — сотрите строчку, относящуюся к нему, и удали иконку из папки.

    Как добавить смайлики в комментарии WordPress в ручную

    Чтобы иметь возможность выбирать смайлики в комментариях WordPress, откройте на редактирование шаблон comments.php из вашей темы WP и перед кодом (в зависимости от темы он может несколько меняться):

    < textarea name= "comment" id= "comment" cols= "65" rows= "10" tabindex= "4" >

    вставьте скрипт:

    function addsmile($smile){ document.getElementById("comment").value=document.getElementById("comment").value+" "+$smile+" "; }