Как эффективнее использовать 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;
}
Инструкция подготовлена на основе практического опыта, если вам требуется добавить больше эмодзи в форму комментариев, тогда дополните код из третьего шага. Подсказка по сопоставлению графических символов изображениям находится в статье про смайлики. Удачи!
Попробуем-с и эти, спасибо, Денис! 🙂
Ответить
Прикольные смайлики. Нужно будет попробовать 🙂
Ответить
Спасибо Денис, почаще обновляй блог. Респект за дизайн, мне очень понравился.
Ответить
Сергей, спасибо! Над дизайном работаю, стараюсь идти в ногу со временем, улучшать 🙂
Ответить
Здравствуйте, у меня форма комментариев в шаблоне темы выглядит следующим образом.
Я не знаю как вставить html код emoji, с php не знаком 🙁 Помогите пожалуйста, может предложите функцию, в файл function.php чтобы вставить html разметку.
Ответить
Алексей, добрый день. В комментариях спецсимволы автоматически фильтруются, поэтому отправленный код не читаем.
Полагаю, используется стандартная форма WordPress. Вы можете переопределить ее с помощью функции:
<?php wp_list_comments( 'callback=my_comment' ); ?>
А затем настраивать на свой вкус, добавлять Emoji придерживаясь данной инструкции или другие полезные фишки.
Ответить
Инструкция многим пригодится, конечно легче самому добавить смайлы в форму комментирования 😀
Ответить
Мне кажется с Эмоджи текст выглядит непрофессионально. Скорее для развлекательного контента, и то в малом количестве. Чем больше смайликов, тем несерьезнее получается пост.
Ответить
Менеджер, поддерживаю вашу точку зрения. В статьях я стараюсь значительно реже их использовать. Не случайно эмодзи добавлены именно в форму комментариев, думаю в обсуждениях уместно ими пользоваться, почему нет?
Ответить