Икинки и шорткоды
Что еще делать в глухое межсезонье, как не постить всякие полезные плюшки-задолбушки? Весной, когда я сделал капитальную переделку блоговой темы, я встроил возможность добавлять в текст в произвольном порядке так называемые «иконочные шрифты», то есть разнообразные значки, без бубна вписывающиеся в стили и размеры текста и являющиеся составляющими таблицы юникода, а не рисунками. Fontawesome — внешний, icomoon — внутрений.
Планы по использованию были наполеоновские, но за все это время реально я пользовался от силы раз . А почему? По качану.
Сделав гА, я не сдедал Бэ — юзабилити этого дела. Ибо вспоминать каждый раз — какой код нужно вставить — эххааа, ломает. Лезть, искать запись со списком, копировать, или руками вбивать, посреди написания батального полотна — тануна… Вот и вышло, что эта полезная штука была приделана зазря. А так быть не должно, потому что иногда хочется что-то выделить таким нехитрым и популярным способом .
Поэтому в самый скучный хэллоуинский вечер в моей истории я набросал два шорткода для вордпресса: [aw]code[/aw] и [ic]pingwin[/ic] — что дает, к примеру, и .
<?php
function fontaw($attr,$content= null){
return'<i class="fa fa-'.$content.'" aria-hidden="true"></i>';
}
add_shortcode('aw', 'fontaw');?>
<?php
function icomoon($attr,$content= null){
return'<span class="icon-'.$content.'""></span>';
}
add_shortcode('ic', 'icomoon');?>
Второй шорткод пригодится только тем, у кого собран и подключен в стили сет с icomoon (отдельная сага). Иногда это полезно.
А fontawesome подключается проще: в <head> вносится следующая строка: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> — и 675 иконок доступны задарма (на сегодня). Важно просто помнить их названия после fa-
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
[aw]long-arrow-right[/aw]
Любой, знакомый со стилизацией в html, поймет, как «на лету» расширить контент шорткода для своих нужд. К этим значкам применяется почти все, что можно применить к обычному тексту.
—-=•=-—
Пара слов об эмодзи. Раз уж речь зашла о подобном. В обычных условиях для блогера за компьютером явный функционал их вставления не доступен. Кроме того, они не отображаются, например в свежем Хроме (я специально обновился до 62-го) — ?. В Мозиллах виден «Jack-o’-lantern».
Я попытался повесить ссылку с гифо-видяшкой на это (в связи с изв. рыбными высказываниями Теда Лигети о OSV), но зайдя через Хром получил только пустые квадратики. Поэтому мой «метод» делать иконки через icomoon лучше .
Копипастить эмодзи (это тоже просто юникодные символы) если уж на то пошло, можно с таких ресурсов как emojipedia. Но толку, если в популярнейшем браузере на популярнейшей платформе их не видно?
Несколько однотемных публикаций:
- 28.07.2017 Графика под Вуэльту
- 17.07.2017 La Course 2017. Poster
- 30.06.2017 Плашек пять восьмых нету
- 07.06.2017 Le Tour de France — 2017. Этапы
- 30.05.2017 OVO Energy Women’s Tour
- 01.05.2017 Ревизия икомунового шрифта
- 28.04.2017 Икошрифт