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

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

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

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

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

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

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

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

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

<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 и общий файл со скриптами main.js. Поэтому я поступил следующим образом:

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

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

// Отключаем 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> после которой необходимо разместить следующий код, изменив путь к файлам изображений:

<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:

.emojis img {
	width: 20px;
	height: 20px;
	padding-right: 5px;
}
.emojis img:hover {
	cursor:pointer;
}

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

(4 голоса, в среднем: 4.5 из 5)

Читайте похожие статьи

Комментарии

Дмитрий
в 20:44

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

Ответить
Александр
в 23:18

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

Ответить
Сергей Овчинников
в 08:26

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

Ответить
Webliberty
в 12:10

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

Ответить
Алексей
в 21:32

Здравствуйте, у меня форма комментариев в шаблоне темы выглядит следующим образом.

Я не знаю как вставить html код emoji, с php не знаком 🙁 Помогите пожалуйста, может предложите функцию, в файл function.php чтобы вставить html разметку.

Ответить
Webliberty
в 10:33
Алексей, добрый день. В комментариях спецсимволы автоматически фильтруются, поэтому отправленный код не читаем.

Полагаю, используется стандартная форма WordPress. Вы можете переопределить ее с помощью функции:
```
<?php wp_list_comments( 'callback=my_comment' ); ?>
```
А затем настраивать на свой вкус, добавлять Emoji придерживаясь данной инструкции или другие полезные фишки.

Ответить
Максим Бойко
в 22:15

Инструкция многим пригодится, конечно легче самому добавить смайлы в форму комментирования 😀

Ответить
Менеджер
в 17:31

Мне кажется с Эмоджи текст выглядит непрофессионально. Скорее для развлекательного контента, и то в малом количестве. Чем больше смайликов, тем несерьезнее получается пост.

Ответить
Webliberty
в 10:49

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

Ответить

Оставьте свой комментарий