Добавление своих смайликов на сайт WordPress

Эта статья написана для темы TwentyTen и для редактора TinyMCE Advanced, поэтому может не подойти под другие, хотя алгоритм действий может быть схож.

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

Можно добавлять любые смайлы и картинки. Все ограничено лишь фантазией.

Можно даже заменять матерные слова на картинку и многое другое.

Для работы нам понадобятся сами смайлы (я приложу к статье базовый набор «колобков»), доступ к файлам движка, прямые руки и чашка кофе, желательно не порошкового Pele

Кофе-пелеЭто важно, иначе ничего не получится.

Перед тем, как редактировать файлы, делайте их резервные копии!

Для работы смайлов в админке в настройках «Написание» (настройка публикации) должна стоять галочка «Преобразовывать смайлики наподобие :-) и :-P в картинки«

Для начала отключим поддержку встроенных смайлов. Для этого в свободное место файла functions.php прописываем следующий код:

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

/wp-content/smiles/

Заливаем прилагаемые смайлы в эту папку (именно в эту, больше внутри папок быть не должно)

Далее, пропишем в этом же файле functions.php правила для интерпретации «смайлового» текста в сами смайлы. Не забываем указывать путь до смайлов.

Итак, готовый код выглядит следующим образом:

Первый смайл для примера, я создал гифку смеющегося кота и решил включить ее в набор :looskee:

Вот, казалось бы, и все: пишем двоеточие со скобочкой — получается смайлик.

Но мы-то хотим выбирать их мышкой, не так ли?

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

Что делать? Нужно добавить наши рожицы и туда. За это отвечает JS-скрипт, который и формирует содержимое панельки. Сам скрипт находится по адресу:

/wp-content/plugins/tinymce-advanced/mce/emoticons

И называется plugin.min.js

Но его мы трогать не будем, по крайней мере пока. Нас интересует несжатый файл plugin.js. Скачиваем этот файл, либо редактируем как удобно прямо на хостинге.

Внутри него видна некая «матрица» из смайлов и символов, за них отвечающих.

От первой строки

и до }]; вставляем следующий код:

Это не все, теперь нужно отредактировать функцию function getHtml()

Именно она формирует всплывающее окошко со смайлами, когда мы клацаем мышкой по рожице в панели редактора.

В ней находим такую строчку

var emoticonUrl = url + '/img/<span style="color: #ff00ff;"><strong>icon_</strong></span>' + name + '.gif';

Я выделил в ней часть, именно с нее начинаются названия встроенных смайлов, если обратить внимание. Нам половина из того, что там написано — не нужно.

Приводим строку к такому виду:

var emoticonUrl = <span style="color: #ff00ff;">'/wp-content/smiles/'</span> + name + '.gif';

Выделенное — это и есть наш реальный путь до новых смайлов. То есть именно по этому пути скрипт будет ожидать смайлы по тем именам, что мы прописали в матрице в начале и будет добавлять расширение gif.

Если так и оставить, то смайлы будут работать, но в панели редактора они будут сплюснуты и ужасны. Поэтому все еще ворошим скрипт.

Несколькими строками ниже мы видим, как верстается таблица, и без зазрения совести указываются размеры ячеек:

emoticonUrl + '" style="<span style="color: #ff0000;">width: 15px; height: 15px;</span> padding: 3px;" role="presentation" alt="' + icon + '" /&gt;&lt;/a&gt;&lt;/td&gt;';

То, что я выделил красным — нужно удалить. Будет:

Заливаем/сохраняем файл на хостинге, под исходным именем и под именем plugin.min.js

Это временно, чтобы проверить его работоспособность.

Теперь смайлы работают, но может возникнуть проблема с панелью, на которой они отображаются. Она может тупо не совпадать с размерами таблицы смайлов (на скрине выделено красным).

Инспекция-панели-смайлов

Беда в том, что эти стили — динамические, и вот так запросто не залезешь в какой-нибудь CSS-файл и ничего не отредактируешь.

Инспектируем панельку, например, в Chrom или Firefox и видим, что есть встроенный стиль inline (либо Element.Style, как в примере из хрома), который задает ширину и высоту панельки (выделено синим прямоугольником), при чем задает ее по каким-то своим личным соображениям. Да и в разных браузерах по-разному.

Это решаемо. Смотрим, как называется класс компонента, в нашем случае это — mce-panel.

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

В файл style.css дописываем следующее:

 

Очищаем кеш браузера (если необходимо) и наслаждаемся смайликами :yahoo:

Однако и это еще не все. Стили переопределить нужно и для админки.

Чтобы переопределить стили в админке, нужно отредактировать уже довольно потрепанный судьбой все тот же файл functions.php.

и дописываем

Настало время вернуться к тому самому файлу plugin.min.js.

Его копия, без «min» уже залита нами и делать с ним нам нечего. А этому мы еще попортим кровушки :jokingly:

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

Вставляем туда содержимого нашего файла и жмем «Compress Javascript».

В итоге получаем месиво, его мы или скачиваем по этой же кнопке и заливаем на хостинг под именем plugin.min.js, либо копипастим и сохраняем.

Смайлики можно использовать любые, делать любые текстовые сокращения для их вставки. Если вы не пьете кофе «Пеле», то фантазия быть должна.

А вот и базовый набор смайлов (с чего-то нужно начинать)

Скачать смайлы

Ну вот и все, желаю успеха. Творите с WordPress (c)





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


Что еще можно почитать

Spring 1987 Part II (Disco 80’s) (Декабрь 24, 2015)
Добавление собственных кнопок на панель редактора в WordPress (Декабрь 20, 2015)
Поиск файлов на диске с отловом исключений (Декабрь 4, 2015)
Обращение к элементу из потока (Декабрь 8, 2015)
Программа «Дневник» (Декабрь 21, 2015)

3 комментария: Добавление своих смайликов на сайт WordPress

  1. Svetik говорит:

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

  2. Памирыч говорит:

    Уточните, пожалуйста, стоит ли в настройках публикации флажок “Преобразовывать смайлики наподобие :- ) и :-P в картинки“?

  3. Svetik говорит:

    Срасибо! Как-то выпал этот момент из виду :D


Добавить комментарий