Смайлы в статьи WordPress

Свои смайлы в статьи WordPress

Вставлять смайлы в статьи WordPress фишка не очень востребованная. Действительно, большинство серьёзных статей обходятся без этих рюшек-плюшек.

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

Что не устраивает в стандартных способах

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

Есть, конечно ещё и Emoji, но, опять-таки на мой взгляд, как-то убого там всё... К тому же частенько выбираешь какой нибудь из Emoji, а в статье выглядит эта эмоция совершенно не так...

Когда-то, в далёком уже 2014 году я писал статью Смайлы в статьях WordPress, в которой рассказывал как усовершенствовать стандартный способ вставки смайлов в статьи WordPress. Я и сам какое-то время использовал тот способ. Он заключался в изменении скрипта редактора TinyMCE Advanced. И всё бы хорошо, но при каждом обновлении редактора приходилось делать всё заново. Да и набор, как я уже говорил - не очень...

В конце-концов мне это надоело и я понял, что это не то, что нужно... k0515 - Свои смайлы в статьи WordPress

Свои смайлы в статьи WordPress

Способ, который я использую сейчас... В корне сайта создаём папку, например mysmiles. В эту папку закидываем два файла: clipboard.min.js и index.php. Ниже расскажу об этих файлах подробнее.

Дальше, в папке mysmiles создаём подпапку images, в которую закидываем любые смайлы, какие нам только нравятся. Причём форматы тоже могут быть различными - и GIF, и PNG, и JPG.

Смайлы в статьи WordPress

Вот содержимое папки 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/».

Она будет выглядеть примерно так:

Смайлы в статьи WordPressНу это в моём случае. А в Вашем будет зависеть от того каких и сколько смайлов Вы закинете в папку images.

При клике мышкой на любом из смайлов ссылка на него помещается в буфер обмена. В статье вставляем как обычное изображение без премудростей... Открываем функционал вставки изображения, в поле «Источник» вставляем ссылку из буфера стандартной комбинацией «Ctrl+V».

Вставляем смайл k05102 - Свои смайлы в статьи WordPress Несколько секунд практического показа...

Вот и всё.

Ах да, обещанная ссылка на скачивание папки mysmiles... Скачать mysmiles

Заключение

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

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

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

Представленное решение - не шедевр, это понятно, кто-то скажет, что неудобно так делать и т.п... Ни с кем спорить не буду. Мне удобно и я показал как я это делаю. Если пригодится - пользуйтесь на здоровье.

Удачи!

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

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

WordPress изображения. Как избавиться от лишних…

WordPress изображения. Как избавиться от лишних…

Изображения WordPress, пожалуй, самая неудачная часть реализации этого, в общем-то, неплохого движка. Я уже писал …

Видео с YouTube без чёрных рамок

Видео с YouTube без чёрных рамок

Видео без чёрных рамок? Легко! YouTube настолько прочно вошёл в нашу жизнь, что сложно представить …

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

  1. Александр, насчет "рюшек-плюшек" – ну да, не всем они нужны. Но ведь и развлекательных ресурсов на Вордпресс с аудиторией, активно использующей смайлы, тоже достаточно. У меня, кстати, тоже TinyMCE Advanced установлен, правда, смайлов я там не видел, признаться и не искал, т.к. сам всегда предпочитаю минимализм в виде упрощенного смайла-скобки ))

  2. Cаша, я как – то отвыкла от этих плюшек. Раньше было по приколу выражать эмоции, а сейчас… у нас жара и обещают завтра +36, а может и выше. В статьях и комментариях остались тексты *ROSE*Но можно попробовать, единственное попозже – жара расхолаживает и размягчает все подряд) А вчера вечером ливень пролил колоссальный, сегодня земля высыхает, парево немыслимое – сильнее, чем в Джамбуле. Сейчас по всем социалкам раскидаю, пусть устанавливают, ведь все блогеры разные: кому – то они ох как нравятся. Спасибо тебе за статью! kiss

    • Надя, ты не поверишь – у нас под 40 официально прогноз. А в реальности, например сегодня все 45 было…

      Метод действительно, что называется "на любителя"… Не претендую на оригинальность…

      • Саша приветствую! А 45 наверное в тени было))) У нас сегодня по моему +37 было, влага испаряется, капец) Вышла вечером хоть огурцы пролить, две лейки притащила, вся как после сауны) Помню Джамбул, когда шпильки тонули в расплавленном асфальте и я на всякий случай каждый день летом брала шлёпанцы с собой или тапочки… чтоб потом с ацетоном не отмывать шпильки)

        Попопзже установлю возможно смайлы, я подумаю после жары. Сейчас немного дует ветер, такая лепота – ты не поверишь 

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

    Например, я могу пошутить и тут же возмутиться или даже обидится.

    Теперь у нас появилась возможность, вставлять любые смайлы в комментарии на других сайтах, ведь каждый смайлик имеет свой УРЛ,

    Я то, думаю, откуда у меня на сайте в комментарии Александра появился такой большой смайл.

    Содержимое папки mysmiles конечно подарок всем нам.

    Это очередная благотворительная акция  от Александра Каратаева.

    Пора уже очередное спасибо конвертировать в более твёрдую  валюту.

    • Да, Андрей, мы уже так привыкли к этим эмоциям в виде смайлов, что даже порой при обычном разговоре начинаешь жалеть, что нельзя вставить смайл… cheeky

      Иногда это гораздо выразительнее кучи слов бывает…

    • Пора уже очередное спасибо конвертировать в более твёрдую  валюту.

      Кстати, категорически поддерживаю эту идею. И, кстати, даже нашла у Александра номер ЯД и ещё пару вариантов поблагодарить автора блога, плагинов и прочих полезных примочек для WP. 😉

      • Кстати, категорически поддерживаю эту идею. И, кстати, даже нашла у Александра номер ЯД

        Друзья, остановитесь! Я же не ради этого…

        За перевод, конечно, спасибо, но мне даже неудобно – я ведь не из-за денег…

        • Да, Александр, вы так взволнованы, будто вам караван денег пришёл… 

          Мы все знаем, что вы не из-за и не за ради денег творчеством в программировании занимаетесь. smiley Просто отлично, что есть возможность выразить наше уважение не только на словах, но и самой скромной материальной капелькой тепла. 

  4. Спасибо, Саша! Есть тексты, где эмоции нужны!
    А у меня сняли АГС и дали тиц 10 (одновременно!!!) блогу Смешная школа – честно, я вообще там НИЧЕГО не делала для снятия фильтра – просто удалила форум ибо уже третий год им не пользуюсь.
    Вот туда мне смайлики пригодятся!

    • Галина, поздравляю! Это здорово! У меня вообще такое ощущение, что Яндекс попросту сам с собой играется… Ну вот какой тебе фильтр АГС?

      У меня точно также с ТИЦ происходит. То снимет в ноль, то вернёт. Хотя я тоже ничего не предпринимаю…

    • Галинка! Мои поздравления тебе со снятием!!!! У меня сейчас тоже тиц нулевой после того, как установила https. Ну и… Я все равно самая счастливая wink Только что вылезла с кухни после консервации огурцов. А трафик на блоге непонятно почему понесся ввысь…. Яша шутник, к этому нужно привыкнуть: дал, взял, вернул…  А жизнь продолжается.

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

  6. Спасибо за подробный алгоритм. Я как раз большая любительница всяких "рюшек-плюшек"

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

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

  8. Ох, а сейчас сайт перестал открываться, выдает ошибку 500. Написала письмо в техподдержку хостинга. 

  9. Сайт восстановила из резервной копии, как посоветовали в техподдержке, пока на этом и остановлюсь.

  10. Привет, Саш!

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

    …мол, как загрузить туда ещё и свои какие-то смайлы… В плагин – никак…

    Точно никак или не хочется объяснять людям как правильно это сделать?   Ведь ты же их туда как-то вставил?

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

    А если воспользоваться хранилищем картинок, то наверное можно и в комменты друзей вставлять свои смайлы?
     

    • Можно и библиотекой, я про это упоминал… А вот со своего хранилища на другие блоги может быть не совсем удачно для того блога, куда свой смайл вставляешь… Вот смотри ситуация, например, у тебя HTTP, а у меня HTTPS и ты мне свой смайл вставляешь, со всеми вытекающими, как ты понимаешь… Я потом затрахаюсь выискивать отчего это у меня замочек в адресе вдруг не зелёненький… devilНу и другие нюансы могут быть… Так что, на мой взгляд, не надо свои смайлы вставлять другим ресурсам…

      • Прости, не подумал. Удали грузина в моём комменте. Он правда из https вставлен для пробы, но всё же, лишняя ссылка…

        • Миш, я его убрал… Тем более, что код картинки был такой, глянь:

           <img alt="" src="https://lh3.googleusercontent.com/vfD6CTcwLDb9rHJJiCVYmxlhL866nZ9MkK21utZ1mpc1c3MLVZK7niYXmzTUzBDBo5wNXEZ4vlewDbL3OBXt7YEerzAmqoj7ncG6lvJ3gbHhBJVZPbFWpzVfhrvM_8jCgnoRsOHzTxYUNLvuQ8nUX9FDzQpUvq3LVsHh2QwFAwNYnqZmYgj3M8pkBAg1ODZl607DyGmcXXWnT4UEu4stC9qvYD2em79LdEoU9THJTRFz023KlS59uWZtBILBh8agH5dS2SuSE7D2DgwQDFiC-lTDj99yjxQM9satEwDU7qHMUhH89hJ2nhNttV_MfZkJnSTafINnEwrPXXsfNVhaOxpIIbfIJ8jgdhsR8InDXbd3Wt1ynEbyuiFkVHSYblLWdrrtxxydyZBI5gpr-EvXur4YFCo1BqJW2TbXJ35XI2ynH5YjBx2ov34YbJnwmlaUgYQ8MZZdvSsZBHPuBr40vTTsaaf1I4A8nLiNc4F_zQGRvWHzOlz-hombKb72oolI6C1gkpiHvLFA7aSJhsoQGy-KDQj_uNU2vkVOOVmo55X2Ie4ovP5jkHmRJU71utwHfdnVOzZ33I_jxjZbzGeU0NcXmp2-P3Qt1bdIPuPTIabPyib8vTbwCF8Z=w29-h25-no" />
          

           

          • Ну да! У меня все картинки имеют такой код. Я правда ещё в конце добавляю [?.jpg] для возможности увеличения картинки при клике по ней. Укорачивать ссылки не пробовал, времени всё не хватает разобраться с гугловскими ссылками .

          • Ну, вот и разобрался сразу. Всё оказалось настолько просто! Вот ссылка на гугловский сервис по упрощению ссылок: https://goo.gl/

            Та ссылка, что ты показал, теперь выглядит вот так: https://goo.gl/2YQCEX

        • Я такие ссылки стараюсь не вставлять вообще. Если картинка, то делаю стандартную ссылку на изображение, хотя почти все мои изображения хранятся на сторонних хостингах…

  11. Я к смайликам отношусь очень прохладно, какие-то есть на сайте и те не использую. Нажму на кнопочки, может кому-то и будут они полезны.

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

  13. А мне, Александр, ваш плагин вполне устраивает. Но в большей степени, конечно, банальная лень. 😉 Но ваш талант делать простые и полезные вещи – восхищает.angry

  14. Эмоции просто необходимо выражать. Смайлы в этом очень помогают.

  15. Мария Коротина

    Очень полезная статья. Смайлы многим читателям нравятся и не всегда они удачно устанавливаются. Помню у меня проблемы были с установкой. Пока что то не решаюсь плагины ставить да и копаться во всем этом времени нет. Хотя теперь буду знать где информацию черпать, если вдруг решу установить на блоге смайлы.

    • Ну… времени у нас у всех вечно не хватает…   А смайлы в статьи иногда очень хочется вставить… Причём, смайлы не встроенные в редактор, а какие-то свои…

      … если вдруг решу установить на блоге смайлы

      Если что-то не получится – обращайтесь, помогу…

      Спасибо за отзыв.

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

  17. Я как-то в статье эмоцию выделил скобками, как это обычно делается, а потом читая статью, увидел, что эти скобки превратились в смайл. Значит в Вордпресс уже были заложены эти смайлы?

  18. Классно придумали!smileyобожаю смайлики, они придают какое-то веселое настроение и вызывают хорошие эмоции.

  19. Ух ты, сегодня сделаю ) давно мечтал свои сообственные смайлы)

  20. Прикольное решение. Нужно будет как то попробовать. 

  21. Хочу предложить следующее, над смайликами добавить поле, при клике на смайлик, в поле будет выводиться полный путь до картинки. Подобное можно сделать на js, жаль что я его не знаю cheeky

    Ещё один варинт через саму ВП, создать дочернию тему, и через создание страницы указать шаблон.

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

    • Да в принципе меня устраивает как есть.

      отключить вывод картинок на других ресурсах, что то там в htaccess делается

      Да, уже думал об этом. Можно просто в роботс запрет прописать. Можно и в htaccess, но пока нет необходимости, а лишних телодвижений делать не хочется – лень… cheeky 

  22. Спасибо за урок !

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

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

 Ясогласен с политикой конфиденциальности сайта и пользовательским соглашением