Домой / WordPress / Полезное / Смайлы в статьях WordPress
Смайлы в статьях

Смайлы в статьях WordPress

Как в редакторе TinyMCE Advanced при редактировании статьи вставлять смайлы не в виде текста, который потом уже в опубликованной статье будет смайлом, а сразу изображением этого смайла?

Возможно-ли такое?

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

🙂   😛    😎   😉   😀

И только в опубликованной статье эти символы преобразятся в нормальные смайлики. Такая реализация вставки смайликов присутствует во всех редакторах линейки TinyMCE. И это мне кажется очень неудобным.

А вот редактор CKEditor сразу вставляет смайлики как есть - и наглядно, и практично. Почему-бы так-же не сделать и в TinyMCE? Для меня это загадка. Казалось-бы - ну перейди на CKEditor и радуйся... Только вот этот редактор мне не подходит по некоторым причинам. Впрочем, здесь не об этом. У каждого свои предпочтения - я использую TinyMCE Advanced.

И вот захотелось мне это неудобство исправить. Это оказалось совсем несложно. Если интересно, то расскажу как.

Всё, о чём буду говорить ниже, относится к редактору TinyMCE Advanced. Если у Вас другой, то смотрите как-то по аналогии, что-ли, но лучше установите себе такой-же.

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

Настройки публикации

Может быть это только у меня так, не знаю, но это просто надоело. Поэтому, «ничтоже сумняшеся» принимаемся за дело. Смайлы в статьях WordPress

Итак, за вставку и вывод смайлов отвечает скрипт, находящийся в файле:

/wp-content/plugins/tinymce-advanced/mce/emoticons/plugin.min.js

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

Вот его и будем корректировать.

Он небольшой, открываем его и ищем строки:

var linkElm = editor.dom.getParent( e.target, 'a' );

if ( linkElm ) {
	editor.insertContent(
		' ' + linkElm.getAttribute('data-mce-alt') + ' '
	);

  Их меняем на это:

 

 

var linkElm = editor.dom.getParent( e.target, 'img' );

if ( linkElm ) {
	editor.insertContent(
		' <img src="' + linkElm.getAttribute('src') + '" /> '
	);

  Остальное в файле оставляем без изменения. Сохраняем.

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

Лёгким движением руки мы изменили скрипт таким образом, что теперь он возвращает само изображение смайла. И теперь мы видим реальный смайл прямо в админке в редакторе статей.

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

Это тоже не сложно. Заходим вот на этот сервис: Online Javascript compressor и в верхнее окно вставляем полностью содержимое файла plugin.js.

Обратите внимание вставлять надо не только ту часть кода, которую меняли, а всё что в этом файле есть полностью.
JavaScript Compressor

Нажимаем кнопку Compress и всё, что отобразилось в нижнем окне копируем и этим содержимым перезаписываем содержимое файла plugin.min.js.

Сохраняем plugin.min.js на сервере.

Всё! Открываем на редактирование любую свою статью и радуемся нормальной вставке смайлов.

Смайлы в статьях WordPress

Возможно в редакторе понадобится нажать Ctrl+F5, чтобы скрипт загрузился заново, а не брался из кэша...

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

/wp-content/plugins/tinymce-advanced/mce/emoticons/plugin.min.js

с перезаписью уже существующего файла.

Скачать скрипт.

Вот и всё.

Удачи Вам и до встречи на моём блоге.

Смотрите также

Огни большого города http://obg.kz

Как масштабировать изображения в CSS

В этой статье поделюсь способом как масштабировать изображения в css.    Конечно-же придуман этот способ …

Огни большого города http://obg.kz

Как по клику на кнопке открыть страницу в новой вкладке

Как по ссылке открыть страницу в новой вкладке знают все. Добавляем в ссылку атрибут target="_blank" …

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

  1. Спасибо, Александр! Как всегда актуально и понятно. Надо будет попробовать, а то действительно иногда хочется вставить пару смайликов.pitchup При этом желательно видеть то что вставляешь.

    • Спасибо, Андрей! Да вот сам не нарадуюсь.

      Над этой проблемой я дня три голову ломал… Искал какие-то сторонние скрипты, пытался менять редактор… Пока не додумался просто открыть файл плагина и внимательно, как говорится —  «покурить» код.

      Так, что если у Вас установлен TinyMCE Advanced, то забирайте скрипт и заливайте его себе… Так писать статьи намного приятнее…

      drink

      • Александр, у меня не стоит плагин TinyMCE Advanced, тоесть мне надо его установить, а потом заменить файл. Я правильно понял? 

  2. Александр, у меня не установлен TinyMCE редактор, может и установлю со временем- все руки не доходят, но для вывода смайликов на блоге я пользуюсь плагином wp-Monalisa, он позволяет в редакторе вставлять смайлики сразу в виде изображений — они все сбоку справа показаны — щелкаешь нужный, он вставляется, не код, а сразу шарик-колобок yes3— тоже очень удобноgood

    • Анжелика, я пробовал этот плагин… Мне показалось неудобным то, что в редакторе своя кнопочка смайликов, а тут ещё панель этой Джоконды… Лишнее нагромождение. Тот способ, который я показал в статье позволяет как раз вставлять не код, а сразу колобок и при этом не использовать совершенно лишний плагин.

      Точно так-же и при редактировании коментариев — во внедрённом мной визуальном редакторе комментариев уже есть смайлики, их набор я изменил под себя, они тоже вставляются сразу, а не кодом… так, что wp-Monalisa и тут не пригодилась.

      Тем не менее, если используется встроенный редактор для статей — TinyMCE, то в нём, если мне не изменяет память, смайлики не предусмотрены вообще, кроме ручной вставки кода. И, если, к тому-же не использовать для комментариев никакой визуальный редактор, а лишь то, что предлагает WordPress по умолчанию, то тогда да, Джоконда — лучшее решение из тех, которые я встречал.

  3. Я вообще не представляю, как я раньше жила без редактора. Хотя смайлики меня не особо интересуют, но в нем же еще можно в комменты картинки вставлять.

    • но в нем же еще можно в комменты картинки вставлять

      Ольга, я уже где-то в комментариях Вам писал, что в Вашем редакторе, как раз ни картинка, ни таблица не вставляется… в комментариях…

      Ага, нашёл…  вот тут я Вам про это писал…

  4. Кстати, хорошая идея — смайлики использовать. Это очень оживляет текст, передает так сказать всю гамму эмоций. И Вы, Александр, так подробно описали весь процесс, что только ленивый не справится!

  5. Отличная идея с редактором. Как сказала Юлия выше, смайлики действительно оживляют текст, а при помощи различных плагинов для WordPress, можно ещё больше расширить выбор этих прелестных жёлтых мордашек. Ещё только разбираюсь с вопросом, но уже гляжу в сторону плагина под названием Zaazu Emoticons с более чем 100 разных смайлов. Спасибо и удачи! 04

    • Да, сколько времени прошло с момента написания этой статьи, сколько всяких обновлений было, а этот вариант по-прежнему работает на Ура!

      21

    • Лиза, здравствуйте! Плагин очень хороший и смайлики прикольные, но он очень тяжелый раз, а второе он простоял у меня больше полугода. Поверьте некто их не ставил. и вот буквально два дня назад, я его снес. Вот как то так. На днях может быть напишу статью про смайлики, и как можно в редактор Александра вставлять красивые, большие и прикольные смайлы.

  6. У меня вообще всё просто: активировал плагин smiles, затем просто вставляешь знак смайла, например, :-), а он меняется на картинку автоматически: гораздо удобнее.

  7. Отличная статья, которая разложила все по полочкам. Возьмем на вооружение Ваши советы и будем применять в работе. 

    • А я вот, со всеми своими обновлениями совершенно про это забыл. Ваш комментарий был мне напоминанием — скачал свой-же скрипт и залил на блог — всё работает, несмотря на то, что после выхода этой статьи уже несколько раз обновлялся, как и сам WordPress, так и редактор TinyMCE Advanced… И так действительно нагляднее и удобнее. Спасибо за напоминание. 

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

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