Набор своих иконок или эмодзи на сайте Wordpress

Иногда для написаний новостей или текстов, очень привлекательно смотрятся эмодзи, или маленькие иконки. С эмодзи проблема в том, что они не везде отображаются, и по разному. А вот набор своих иконок для сайта — очень полезная вещь.

Чтобы реализовать подобный функционал, необходимо:

• подготовить маленькие изображения, png, svg или webp и загрузить на сервер
• вставить код в functions.php или в сниппет, я предпочитаю сниппет
• при написании статей использовать специальный набор символов (я использую заглавную букву и ++)

Код самого сниппета:

function replace_mytext($text){
    $replace = array(
    // Список заменяемых слов
    // 'Что меняем' => 'На что меняем'
    'С++' => '<img src="/wp-content/uploads/2023/10/emodzi_s.webp" class="icon_emodzi">', 
    'З++' => '<img src="/wp-content/uploads/2023/10/emodzi_z.webp" class="icon_emodzi">', 
    'Д++' => '<img src="/wp-content/uploads/2023/10/emodzi_d.webp" class="icon_emodzi">', 
    'Ч++' => '<img src="/wp-content/uploads/2023/10/emodzi_s2.webp" class="icon_emodzi">',
    '1++' => '<img src="/wp-content/uploads/2023/10/emodzi_pervyi.webp" class="icon_emodzi">',
    '2++' => '<img src="/wp-content/uploads/2023/10/emodzi_vtoroi.webp" class="icon_emodzi">',
    '3++' => '<img src="/wp-content/uploads/2023/10/emodzi_tretii.webp" class="icon_emodzi">',
    'ЛОГО++' => '<img src="/wp-content/uploads/2023/10/emodzi_logo.webp" class="icon_emodzi">',
    'ДО++' => '<img src="/wp-content/uploads/2023/10/emodzi_dom.webp" class="icon_emodzi">'
    );
    $text = str_replace(array_keys($replace), $replace, $text);
    return $text;
}
add_filter('the_excerpt', 'replace_mytext'); // Добавляем фильтр к краткому описанию статьи
add_filter('the_content', 'replace_mytext'); // Добавляем фильтр к самой статье

Также нужно подправить немного стиль для этих иконок, чтобы они смотрелись аккуратно в тексте.

.icon_emodzi {
    height: 29px;
    margin: 0 0 -8px 0;
}