Что вообще за пакет такой Genericons: зачем, почему его установили Twenty Fifteen, для чего он нужен, да бог его знает зачем его запихнули в стандартную тему WordPress. Есть свободный и весьма обширный пакет иконок Font Awesome. Есть встроенный пакет иконок в WordPress Dashicons.
- Зачем внедрили? Да, одному богу известно.
- Почему стоит? Не известно!
- Для чего нужен? Не нужен, т.к. иконок там мало, стили закодированы, целый огромный кусок, грузит сайт.
Вывод! Надо провести проверку и по её результатам снести этот иконочный шрифт Genericons с WordPress. Заходим в Google Page Speed закидываем домен на проверку и смотрим пункт – «Устраните ресурсы, блокирующие отображение». И мы видим, как набор в 50 иконок кушает скорость загрузки сайта.
Решено! Удаляем данный пакет шрифт. Но важно понимать, что просто удалить, может любой дилетант. Мы же разделим работу на два этапа.
Удаляем стандартный иконочный шрифт Genericons из Twenty Fifteen
Первый этап. Удалим обращение к Genericons. Вызывается подключаемый стиль из файла function.php, вообще странно, я бы вызывал все данные из header.php. Потом обязательно перенесу.
Следующая запись в function.php. Просто закомментируем её // и проверяем что же в итоге получилось.
Итог после отключения этих стилей мы получили ускорение на 0,12 секунд к загрузке. Избавились от лишнего непонятно и ненужного пакета. Немного обезопасили свой сайт. Т.к. нельзя допускать использование непонятных решений в рамках своего проекта.
Удаляем папку с Genericons стилями, чтобы не занимала место на сервере. Всегда старайтесь удалять все неиспользуемое. Сайт должен быть чистым и понятным вам!
Этот иконочный шрифт Genericons часто глючит, поэтому на экране вместо иконок выводятся уродливые квадратики. Лучшем вариантом будет подвязать самостоятельно font-awesome и по заменять уже использующиеся иконки старого Genericons на аналогичные от Awesome.
Заменяем старые иконки Genericons на Font Awesome в файле style.css
Второй этап. У нас есть таблица стилей в файле style.css. В ней уже заданы иконки от старого шрифта, нам надо их заменить на новые, которые нам нравятся. Нажимаем ctrl+f в редакторе и ищем Genericons.
Буквально сразу находим нужный блок в стилях отвечающий за элементы темы и их иконки.
Сначала задаем нашему блоку правильный и коночный шрифт:
font: normal normal normal 32px/1 FontAwesome;
И начинаем искать по названию класса нужные блоки.
Нас интересует вот этот стиль:
Идем на сайт Font Awesome. И ищем подходящую иконку. Можно пользоваться переводчиком в данном случае это стрелка для меню, чтобы оно красиво разворачивалось.
Подбираем подходящую иконку, открываем её и копируем название, вставляем в стили. Пишем toggle или down.
Заменяем в стилях название. Сохраняем и смотрим. Прикольно получилось. Экспериментируем.
Если добавил иконки Font Awesome но ничего не выводится, подключаем стили Font Awesome
Чтобы все заработало, вам остается лишь подвязать стили Font Awesome. Качаем архив со всем необходимым на официальном сайте Download Awesome. Разархивируем и закидываем в папку с темой WordPress.
Открываем файл header.php и перед закрывающим тегом </head> пишем строчку.
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/font-awesome-4.7.0/css/font-awesome.css" />
не забывайте вставить правильное название папки.) Перезагружайте страницу и все будет работать.
Спасибо за прочтение статьи! Пожалуйста оставляйте комментарий получилось у вас или нет. Оставляйте предложения по доработке статей.
Реально за долбали разработчики всякую хрень пихать в код. Нафиг нужны эти джериконы, если есть авесом. Да и картинками же можно вставить.
Согласен с вами, все делают на отвали, а сайты страдают.
Следовал по вашей инструкции в статье и видео по удалению genericons с заменой иконок из font awesome. Тема моего сайта Twenty Sixteen. С удалением проблем не возникло, по инструкции вообще все просто, а вот с заменой иконок пришлось повозиться. Загрузил папку (отдельное спасибо за ссылку на файл) на ФТП с font awesome, прописал в файле header.php путь к папке и файлу с иконками, но ничего не вышло. Попробовал много разных способов, все равно не выходило. Ошибку понял только спустя несколько часов мозгового штурма. Оказывается, ошибка была в пути к конечному файлу, я скачал обновленный пакет и не открывая папку прописал путь, как в примере. А нужно было в строке link rel вместо font-awesome.css прописать all.css – прямой путь ко всем иконкам! Все получилось!
Просто подключайте all.css и будет вам счастье
Наконец-то хоть кто-то понял, что пакет Genericons тот еще сюрприз для сайта на WordPress. Во-первых, действительно непонятно зачем он там, в плане дизайна это вообще прошлый век, невозможно на него смотреть. Про перегрузку сайта я вообще молчу. К тому же полностью согласен на счет использования непонятных решений в проекте, лучше уделить время качественной чистке своего сайта от мусора, чем потом не понимать, как его спасать
Там еще и код какой-то закодированный, одному богу известно что он делает. Разрабы видимо джуны.
Спасибо за статью, очень пригодилась) В ходе реализации возникли сложности с добавлением иконок «prew» и «next» в блоке, где выводятся последние записи. Если с кнопкой «далее» все сработало, «prew» никак не хотела отображаться, т.к. php ее вообще не выводил и игнорировал тег . Пришлось лезть в стили и оказалось, что эта замечательная кнопка выводится через псевдоэлемент after. В итоге, добавление тега в код не единственный способ добавить иконки фонтавесом на сайт. Можно заменить старые стили в необходимом классе на:
content: «\f100»;
font-family: ‘Font Awesome 5 Free’;
и все заработает)))
Кстати, пока возилась с кнопками, обнаружилась еще одна неприятность. Функция, отвечающая за эти кнопки (the_posts_pagination) заодно выводит содержательный заголовок второго уровня:
Навигация по записям
И, в связи с этим, вопрос – вредит ли это SEO? И если да, как его удалить?
Разработчики просто решили упростить себе жизнь, там половина стилей такая в любой теме, любой cms. Спасибо за обратную связь