Что вообще за пакет такой 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" />
не забывайте вставить правильное название папки.) Перезагружайте страницу и все будет работать.
Спасибо за прочтение статьи! Пожалуйста оставляйте комментарий получилось у вас или нет. Оставляйте предложения по доработке статей.
