Огни большого города Личный блог Александра Каратаева 
Вставлять смайлы в статьи WordPress фишка не очень востребованная. Действительно, большинство серьёзных статей обходятся без этих рюшек-плюшек.
Возможно, что именно по этой причине сам движок предоставляет довольно скудный функционал для этой цели. Но бывает, что иногда всё-же хочется по ходу изложения каким-то образом добавить эмоцию к написанному. В этой статье покажу самопальное, но простое как три копейки решение, позволяющее вставлять смайлы в статьи WordPress, причём любые... Какие кому нравятся.
Что не устраивает в стандартных способах
Вот такой набор смайлов предлагает продвинутый редактор TinyMCE Advanced... Уж не знаю по какому принципу отбирались изображения в этот набор, но лично мне он кажется маловыразительным и бедноватым...
Есть, конечно ещё и Emoji, но, опять-таки на мой взгляд, как-то убого там всё... К тому же частенько выбираешь какой нибудь из Emoji, а в статье выглядит эта эмоция совершенно не так...
Когда-то, в далёком уже 2014 году я писал статью Смайлы в статьях WordPress, в которой рассказывал как усовершенствовать стандартный способ вставки смайлов в статьи WordPress. Я и сам какое-то время использовал тот способ. Он заключался в изменении скрипта редактора TinyMCE Advanced. И всё бы хорошо, но при каждом обновлении редактора приходилось делать всё заново. Да и набор, как я уже говорил - не очень...
В конце-концов мне это надоело и я понял, что это не то, что нужно... 
Свои смайлы в статьи WordPress
Способ, который я использую сейчас... В корне сайта создаём папку, например mysmiles. В эту папку закидываем два файла: clipboard.min.js и index.php. Ниже расскажу об этих файлах подробнее.
Дальше, в папке mysmiles создаём подпапку images, в которую закидываем любые смайлы, какие нам только нравятся. Причём форматы тоже могут быть различными - и GIF, и PNG, и JPG.
Вот содержимое папки mysmiles.
В конце статьи я дам ссылку на скачивание папки «mysmiles» со всеми файлами, так, что не переживайте - закинете как есть в корень сайта, измените в файле index.php одну единственную строчку и на этом всё. Теперь вставлять смайлы в статьи WordPress становится проще простого. В папке images уже есть несколько смайлов, вы можете их удалить и заменить своими, либо просто добавить свои смайлы к существующим.
Файл index.php
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=utf-8">
<script src="clipboard.min.js"></script>
</head>
<body>
<script>
new Clipboard('.btn-clipboard');
</script>
<?php
$dir = 'images/'; // Папка с изображениями
$cols = 20; // Количество столбцов в будущей таблице с картинками
$files = scandir($dir); // Берём всё содержимое директории
echo "<table>"; // Начинаем таблицу
$k = 0; // Вспомогательный счётчик для перехода на новые строки
for ($i = 0; $i < count($files); $i++) { // Перебираем все файлы
if (($files[$i] != ".") && ($files[$i] != "..")) { // Текущий каталог и родительский пропускаем
if ($k % $cols == 0) echo "<tr>"; // Добавляем новую строку
echo "<td>"; // Начинаем столбец
$path = $dir.$files[$i]; // Получаем путь к картинке
$fileimg = 'https://ваш-сайт/mysmiles/'. $path;
echo "<button type='button' class='btn-clipboard' data-clipboard-text='$fileimg'><img src='$path' alt='' /> </button>"; // Вывод превью картинки
echo "</td>"; // Закрываем столбец
/* Закрываем строку, если необходимое количество было выведено, либо данная итерация последняя */
if ((($k + 1) % $cols == 0) || (($i + 1) == count($files))) echo "</tr>";
$k++; // Увеличиваем вспомогательный счётчик
}
}
echo "</table>"; // Закрываем таблицу
?>
</body></html>В строке с номером 21 «ваш-сайт» поменяйте на свой, ну и если у вас не «https», то поменяйте на «http». Как видите, скрипт хорошо закомментирован, так что должно быть всё понятно. Я показал его только для того, чтобы вы увидели строчку, в которой нужно сделать изменения.
Файл clipboard.min.js
Этот файл Java-скрипта показывать смысла нет. Скажу лишь, что он отвечает за помещение ссылки на смайлик в буфер обмена. Как вы уже поняли, подключается он в index.php.
Как это работает
Когда вы пишете статью, то на соседней вкладке откройте страничку «https://ваш-сайт/mysmiles/».
Она будет выглядеть примерно так:
Ну это в моём случае. А в Вашем будет зависеть от того каких и сколько смайлов Вы закинете в папку images.
При клике мышкой на любом из смайлов ссылка на него помещается в буфер обмена. В статье вставляем как обычное изображение без премудростей... Открываем функционал вставки изображения, в поле «Источник» вставляем ссылку из буфера стандартной комбинацией «Ctrl+V».
Вставляем смайл 
Несколько секунд практического показа...
Вот и всё.
Ах да, обещанная ссылка на скачивание папки mysmiles... Скачать mysmiles
Заключение
Да, да, знаю - есть соответствующие плагины и прочая, и прочая, и прочая... Можно даже просто нужные смайлы запихать себе в галерею... Правда потом попробуй найди их там - долго листать, пока доберёшься до нужного.
А здесь все смайлы сразу перед глазами и весь выбор сводится к простому клику мышкой. К тому-же ссылка на смайл содержит адрес Вашего блога, что тоже хорошо. WordPress может хоть каждый день выпускать обновления - нам это глубоко фиолетово, как говориться... Мы не правили никакие файлы движка, ничего не внедряли и т.д. Всё полностью независимо работает.
Меня иногда спрашивают насчёт моего плагина комментариев, мол, как загрузить туда ещё и свои какие-то смайлы... В плагин - никак. Но используя это решение, можно точно таким способом вставлять любые свои смайлы не только в статьи WordPress, но и в комментарии. Для этого использовать всё тот же функционал вставки изображения, в плагине он есть.
Представленное решение - не шедевр, это понятно, кто-то скажет, что неудобно так делать и т.п... Ни с кем спорить не буду. Мне удобно и я показал как я это делаю. Если пригодится - пользуйтесь на здоровье.
Удачи!
Александр, насчет "рюшек-плюшек" – ну да, не всем они нужны. Но ведь и развлекательных ресурсов на Вордпресс с аудиторией, активно использующей смайлы, тоже достаточно. У меня, кстати, тоже TinyMCE Advanced установлен, правда, смайлов я там не видел, признаться и не искал, т.к. сам всегда предпочитаю минимализм в виде упрощенного смайла-скобки ))
Ну я тоже не злоупотребляю смайликами в статьях, однако нет-нет, да и вставлю, бывает…
Cаша, я как – то отвыкла от этих плюшек. Раньше было по приколу выражать эмоции, а сейчас… у нас жара и обещают завтра +36, а может и выше. В статьях и комментариях остались тексты *ROSE*Но можно попробовать, единственное попозже – жара расхолаживает и размягчает все подряд) А вчера вечером ливень пролил колоссальный, сегодня земля высыхает, парево немыслимое – сильнее, чем в Джамбуле. Сейчас по всем социалкам раскидаю, пусть устанавливают, ведь все блогеры разные: кому – то они ох как нравятся. Спасибо тебе за статью!
Надя, ты не поверишь – у нас под 40 официально прогноз. А в реальности, например сегодня все 45 было…
Метод действительно, что называется "на любителя"… Не претендую на оригинальность…
Саша приветствую! А 45 наверное в тени было))) У нас сегодня по моему +37 было, влага испаряется, капец) Вышла вечером хоть огурцы пролить, две лейки притащила, вся как после сауны) Помню Джамбул, когда шпильки тонули в расплавленном асфальте и я на всякий случай каждый день летом брала шлёпанцы с собой или тапочки… чтоб потом с ацетоном не отмывать шпильки)
Попопзже установлю возможно смайлы, я подумаю после жары. Сейчас немного дует ветер, такая лепота – ты не поверишь
Возможность добавить эмоцию иногда бывает важнее, чем сам комментарий, потому, что слова каждый человек воспринимает по своему, менталитету. + возраст.
Например, я могу пошутить и тут же возмутиться или даже обидится.
Теперь у нас появилась возможность, вставлять любые смайлы в комментарии на других сайтах, ведь каждый смайлик имеет свой УРЛ,
Я то, думаю, откуда у меня на сайте в комментарии Александра появился такой большой смайл.
Содержимое папки mysmiles конечно подарок всем нам.
Это очередная благотворительная акция от Александра Каратаева.
Пора уже очередное спасибо конвертировать в более твёрдую валюту.
Да, Андрей, мы уже так привыкли к этим эмоциям в виде смайлов, что даже порой при обычном разговоре начинаешь жалеть, что нельзя вставить смайл…
Иногда это гораздо выразительнее кучи слов бывает…
Я Саша при эмоциях много скобок ставлю. Вот так))))))))))))
Чем сильнее эмоция – тем больше скобок?
Ну да конечно)))) Не на всех блогах ведь есть смайлы)
Потанцуем? Сегодня пятница)
Кстати, категорически поддерживаю эту идею. И, кстати, даже нашла у Александра номер ЯД и ещё пару вариантов поблагодарить автора блога, плагинов и прочих полезных примочек для WP. 😉
Друзья, остановитесь! Я же не ради этого…
За перевод, конечно, спасибо, но мне даже неудобно – я ведь не из-за денег…
Да, Александр, вы так взволнованы, будто вам караван денег пришёл…
Мы все знаем, что вы не из-за и не за ради денег творчеством в программировании занимаетесь.
Просто отлично, что есть возможность выразить наше уважение не только на словах, но и самой скромной материальной капелькой тепла. 
Ещё раз спасибо, Светлана!
Пришёл бы караван, я бы скромно промолчал…
Спасибо, Саша! Есть тексты, где эмоции нужны!
А у меня сняли АГС и дали тиц 10 (одновременно!!!) блогу Смешная школа – честно, я вообще там НИЧЕГО не делала для снятия фильтра – просто удалила форум ибо уже третий год им не пользуюсь.
Вот туда мне смайлики пригодятся!
Галина, поздравляю! Это здорово! У меня вообще такое ощущение, что Яндекс попросту сам с собой играется… Ну вот какой тебе фильтр АГС?
У меня точно также с ТИЦ происходит. То снимет в ноль, то вернёт. Хотя я тоже ничего не предпринимаю…
Галинка! Мои поздравления тебе со снятием!!!! У меня сейчас тоже тиц нулевой после того, как установила https. Ну и… Я все равно самая счастливая
Только что вылезла с кухни после консервации огурцов. А трафик на блоге непонятно почему понесся ввысь…. Яша шутник, к этому нужно привыкнуть: дал, взял, вернул… А жизнь продолжается.
Да, иногда хочется в тексте усилить эмоцию какой-нибудь рожицей, поярче, нежели скобка. Спасибо за статью, Александр. Думаю я воспользуюсь Вашим скриптом.
Попробуйте, ничего сложного тут нет…
Спасибо за подробный алгоритм. Я как раз большая любительница всяких "рюшек-плюшек"
На здоровье! Тут всё просто.
Александр, здравствуй! Конечно я сразу взялась попробовать ваш алгоритм, чтобы вставить смайлики. Сразу появился вопрос правильно ли я вставляю папку mysmiles.
Александр, как правильно
или в этом месте
?? потомучто страничка со ссылкой на мой сайт и смайлы не открывается. Пожалуйста поясни что не так делаю.
Софья, приветствую! В твоём случае корень сайта – это папка public_html…
Поэтому правильно как на втором твоём скриншоте…
Спасибо Александр, я это учту, если решусь снова на эксперимент, что-то ошибка 500 охладила мой пыл.
Софья, предложенный код никак не влияет на сайт. Вообще… Так, что можно смело пользоваться…
Ох, а сейчас сайт перестал открываться, выдает ошибку 500. Написала письмо в техподдержку хостинга.
Сайт восстановила из резервной копии, как посоветовали в техподдержке, пока на этом и остановлюсь.
Привет, Саш!
Я пользуюсь библиотекой с недавнего времени. Закинул туда все свои накопления смайлов. Раньше пользовался плагином от Камы, в него можно было вставлять свои смайлы, но после очередного обновления плагина в комментариях стали твориться нехорошие вещи. Каме написал, он говорит, что это странно, этого не должно быть, дал несколько рекомендаций по устранению, но, в итоге я удалил его плагин, который мне очень нравился.
Точно никак или не хочется объяснять людям как правильно это сделать?
Ведь ты же их туда как-то вставил?
Пользоваться вставкой смайла из библиотеки в авторежиме удобно, если вставить нужно в начале текста слева или справа, а также в конце статьи. Вставка же смайла в строку проделывается таким же методом, как ты показал в видеоролике – копируется ссылка на смайл и вставляется в строку между словами.
А если воспользоваться хранилищем картинок, то наверное можно и в комменты друзей вставлять свои смайлы?
Можно и библиотекой, я про это упоминал… А вот со своего хранилища на другие блоги может быть не совсем удачно для того блога, куда свой смайл вставляешь… Вот смотри ситуация, например, у тебя HTTP, а у меня HTTPS и ты мне свой смайл вставляешь, со всеми вытекающими, как ты понимаешь… Я потом затрахаюсь выискивать отчего это у меня замочек в адресе вдруг не зелёненький…
Ну и другие нюансы могут быть… Так что, на мой взгляд, не надо свои смайлы вставлять другим ресурсам…
Прости, не подумал. Удали грузина в моём комменте. Он правда из https вставлен для пробы, но всё же, лишняя ссылка…
Миш, я его убрал… Тем более, что код картинки был такой, глянь:
Ну да! У меня все картинки имеют такой код. Я правда ещё в конце добавляю [?.jpg] для возможности увеличения картинки при клике по ней. Укорачивать ссылки не пробовал, времени всё не хватает разобраться с гугловскими ссылками
.
Ну, вот и разобрался сразу. Всё оказалось настолько просто! Вот ссылка на гугловский сервис по упрощению ссылок: https://goo.gl/
Та ссылка, что ты показал, теперь выглядит вот так: https://goo.gl/2YQCEX
Я такие ссылки стараюсь не вставлять вообще. Если картинка, то делаю стандартную ссылку на изображение, хотя почти все мои изображения хранятся на сторонних хостингах…
Я к смайликам отношусь очень прохладно, какие-то есть на сайте и те не использую. Нажму на кнопочки, может кому-то и будут они полезны.
Ну да, я согласен – бывают статьи, где смайлы просто неуместны. Да и на любителя опять же…
Я тоже как-то равнодушна к смайликам, но если это сделать легко и просто, то почему бы не сделать. Попробую, хотя для меня просто не бывает, работа с разными кодами для меня сложная.
В самом начале статьи я написал, что это дело на любитела. Многие сайты обходятся и без этого. Но попробуйте, может быть Вам и понравится…
А мне, Александр, ваш плагин вполне устраивает. Но в большей степени, конечно, банальная лень. 😉 Но ваш талант делать простые и полезные вещи – восхищает.
Вот именно, Светлана! Банальная лень и заставляет таким образом облегчать себе жизнь этими маленькими фишками…
Эмоции просто необходимо выражать. Смайлы в этом очень помогают.
Не во всех статьях, но иногда – да, нужно смайлик вставить…
Очень полезная статья. Смайлы многим читателям нравятся и не всегда они удачно устанавливаются. Помню у меня проблемы были с установкой. Пока что то не решаюсь плагины ставить да и копаться во всем этом времени нет. Хотя теперь буду знать где информацию черпать, если вдруг решу установить на блоге смайлы.
Ну… времени у нас у всех вечно не хватает…
А смайлы в статьи иногда очень хочется вставить… Причём, смайлы не встроенные в редактор, а какие-то свои…
Если что-то не получится – обращайтесь, помогу…
Спасибо за отзыв.
Смайлы отлично оживляют любую статью и комментарии, спасибо, будем пробовать.
Попробуйте, тут ничего сложного нет. Если что-то не получится – напишите, подскажу…
Я как-то в статье эмоцию выделил скобками, как это обычно делается, а потом читая статью, увидел, что эти скобки превратились в смайл. Значит в Вордпресс уже были заложены эти смайлы?
Да, Али, там в настройках есть такое… Только смайлы там не очень, иногда хочется более выразительных…
Классно придумали!
обожаю смайлики, они придают какое-то веселое настроение и вызывают хорошие эмоции.
Спасибо, Екатерина! Я согласен – смайлики придают эмоции к тексту, а это немаловажный фактор…
Ух ты, сегодня сделаю ) давно мечтал свои сообственные смайлы)
Получилось?
Прикольное решение. Нужно будет как то попробовать.
Попробуй, Андрей, тут сложного ничего нет…
Хочу предложить следующее, над смайликами добавить поле, при клике на смайлик, в поле будет выводиться полный путь до картинки. Подобное можно сделать на js, жаль что я его не знаю
Ещё один варинт через саму ВП, создать дочернию тему, и через создание страницы указать шаблон.
Кстати у этих решений есть один минус, если вашу картинку зальют на посещаемый ресурс, то таким образом могут сломать вам серв, или как минимум, из-за чужого сайта будет нагрузка у вас, как решение, отключить вывод картинок на других ресурсах, что то там в htaccess делается
Да в принципе меня устраивает как есть.
Да, уже думал об этом. Можно просто в роботс запрет прописать. Можно и в htaccess, но пока нет необходимости, а лишних телодвижений делать не хочется – лень…
Спасибо за урок !
До сих пор пользуюсь этим способом – удобно…