Необходимо было сделать, чтобы модальное окно открывалось на смартфоне во всю ширину экрана. Поэтому пользователи...
Иногда для написаний новостей или текстов, очень привлекательно смотрятся эмодзи, или маленькие иконки. С эмодзи проблема в том, что они не везде отображаются, и по разному. А вот набор своих иконок для сайта — очень полезная вещь.
Чтобы реализовать подобный функционал, необходимо:
- подготовить маленькие изображения, png, svg или webp и загрузить на сервер
- вставить код в functions.php или в сниппет, я предпочитаю сниппет
- при написании статей использовать специальный набор символов (я использую заглавную букву и ++)
Код самого сниппета:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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'); // Добавляем фильтр к самой статье |
Также нужно подправить немного стиль для этих иконок, чтобы они смотрелись аккуратно в тексте.
|
1 2 3 4 |
.icon_emodzi { height: 29px; margin: 0 0 -8px 0; } |