Лайки, посетители и подписчики на сайт!Подробнее

Как эффективнее использовать Emoji на WordPress

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

Emoji

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

  1. Замена символов Unicode на PNG файлы на тех устройствах, которые не поддерживают Emoji. При масштабировании страницы изображения теряли четкость и свою привлекательность.
  2. Подключение inline скрипта и стилей в исходном коде страницы негативно влияет на уровень оптимизации HTML. Снижается количество уникального содержимого по сравнению с HTML тегами в процентном отношении.
  3. За шесть лет накопилось достаточное количество страниц, где активно использовались смайлики, в том числе в комментариях. Необходимо проверить каждую статью, каждый комментарий и убедиться, что новые эмодзи стали равнозначной заменой.

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

Вынос inline скрипта и стилей в отдельный файл

Если у Вас установлена версия WordPress 4.2 и выше, то откройте просмотр исходного кода любой страницы сайта и увидите, что в секции <head> подключен скрипт:

1
2
3
4
<script type="text/javascript">
	window._wpemojiSettings = {...}
	(window,document,window._wpemojiSettings);
</script>

Я привел лишь его фрагмент, на самом деле это огромный кусок кода. А ниже точно также подключены стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>

Рекомендую вынести их в отдельные файлы. Например, на блоге webliberty.ru у меня используется всего один файл стилей style.css и общий файл со скриптами allscript.js. Поэтому я поступил следующим образом:

  • скопировал код между тегами <script type="text/javascript"></script> в файл allscript.js
  • скопировал код между тегами <style type="text/css"></style> в файл style.css

Скрипт и стили, необходимые для полноценной поддержки Emoji, теперь вынесены в отдельные файлы. Для того чтобы предотвратить их дублирование и исключить из секции <head> добавим в файл functions.php эти строки:

1
2
3
// Отключаем Emoji стили и скрипты
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );

На этом мероприятия по оптимизации HTML завершены. Роботы поисковых систем при посещении URL сайта сканируют исходный код, поэтому, чем больше полезного контента и меньше кода будет на странице, тем лучше для SEO. К тому же файлы .js и .css кэшируются в браузере пользователя, снижая нагрузку на сервер.

Как добавить Emoji в форму комментариев

Как я уже говорил, не все устройства поддерживают Emoji. Если зайти на сайт с мобильного устройства и перейти к форме комментариев, то появится всплывающая клавиатура, где из большого набора можно выбрать любой символ. На операционных системах Windows такой номер не пройдет!

Чтобы вставить Emoji в сообщение, придется копировать символы со специальных сайтов или использовать текстовые символы наподобие :) или :D. Для замены графических символов на эмодзи в настройках публикации должен быть поставлен соответствующий флажок.

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

1. Загрузите из архива каталог Emoji на свой сервер.

2. В архиве Вы также найдете файл emoji.js — подключите его в секции <head> или лучше скопируйте его содержимое в общий файл скриптов.

3. Найдите в файле comments.php строку с тегом <textarea> после которой необходимо разместить следующий код, изменив путь к файлам изображений:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="emojis">
	<img src="/emoji/smile.svg" alt=":)" onclick="smile(':)');">
	<img src="/emoji/wink.svg" alt=";)" onclick="smile(';)');">
	<img src="/emoji/biggrin.svg" alt=":D" onclick="smile(':D');">
	<img src="/emoji/sad.svg" alt=":(" onclick="smile(':(');">
	<img src="/emoji/cry.svg" alt=":cry:" onclick="smile(':cry:');">
	<img src="/emoji/neutral.svg" alt=":|" onclick="smile(':|');">
	<img src="/emoji/surprised.svg" alt=":o" onclick="smile(':o');">
	<img src="/emoji/razz.svg" alt=":P" onclick="smile(':P');">
	<img src="/emoji/cool.svg" alt="8-)" onclick="smile('8-)');">
	<img src="/emoji/redface.svg" alt=":oops:" onclick="smile(':oops:');">
	<img src="/emoji/rolleyes.svg" alt=":roll:" onclick="smile(':roll:');">
	<img src="/emoji/idea.svg" alt=":idea:" onclick="smile(':idea:');">
</div>

4. Назначим стили для класса .emojis и сделаем смену курсора при наведении на изображение. Добавьте в файл style.css:

1
2
3
4
5
6
7
8
.emojis img {
	width: 20px;
	height: 20px;
	padding-right: 5px;
}
.emojis img:hover {
	cursor:pointer;
}

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

  1. Дмитрий

    Попробуем-с и эти, спасибо, Денис! 🙂

    Ответить

  2. Александр

    Прикольные смайлики. Нужно будет попробовать 🙂

    Ответить

  3. Сергей Овчинников

    Спасибо Денис, почаще обновляй блог. Респект за дизайн, мне очень понравился.

    Ответить

  4. Webliberty

    Сергей, спасибо! Над дизайном работаю, стараюсь идти в ногу со временем, улучшать 🙂

    Ответить

Ваш комментарий:

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea: