устанавливаем свои иконки для сайта WordPress

Удаляем Genericons из WordPress Twenty Fifteen, устанавливаем пакет иконок Font Awesome

Что вообще за пакет такой Genericons: зачем, почему его установили Twenty Fifteen, для чего он нужен, да бог его знает зачем его запихнули в стандартную тему WordPress. Есть свободный и весьма обширный пакет иконок Font Awesome. Есть встроенный пакет иконок в WordPress Dashicons.

  1. Зачем внедрили? Да, одному богу известно.
  2. Почему стоит? Не известно!
  3. Для чего нужен? Не нужен, т.к. иконок там мало, стили закодированы, целый огромный кусок, грузит сайт.

Вывод! Надо провести проверку и по её результатам снести этот иконочный шрифт Genericons с WordPress. Заходим в Google Page Speed закидываем домен на проверку и смотрим пункт – «Устраните ресурсы, блокирующие отображение».  И мы видим, как набор в 50 иконок кушает скорость загрузки сайта.

тестируем twenty fifteen в google page speed
Как шрифт грузит сайт

Решено! Удаляем данный пакет шрифт. Но важно понимать, что просто удалить, может любой дилетант. Мы же разделим работу на два этапа.

Удаляем стандартный иконочный шрифт Genericons из Twenty Fifteen

Первый этап. Удалим обращение к Genericons. Вызывается подключаемый стиль из файла function.php, вообще странно, я бы вызывал все данные из header.php. Потом обязательно перенесу.

отключаем подключение стилей genericons wordpress function php
Отключаем подключение стилей genericons wordpress function.php

Следующая запись в function.php. Просто закомментируем её // и проверяем что же в итоге получилось.

Отключаем подключение стилей genericons wordpress function.php
Отключаем подключение стилей genericons wordpress function.php

Итог после отключения этих стилей мы получили ускорение на 0,12 секунд к загрузке. Избавились от лишнего непонятно и ненужного пакета. Немного обезопасили свой сайт. Т.к. нельзя допускать использование непонятных решений в рамках своего проекта.

Ускорили немного сайт на WordPress

Удаляем папку с Genericons стилями, чтобы не занимала место на сервере. Всегда старайтесь удалять все неиспользуемое. Сайт должен быть чистым и понятным вам!

Удаляем папку с уже ненужными стилями иконок Genericons

Этот иконочный шрифт Genericons часто глючит, поэтому на экране вместо иконок выводятся уродливые квадратики. Лучшем вариантом будет подвязать самостоятельно font-awesome и по заменять уже использующиеся иконки старого Genericons на аналогичные от Awesome.

Заменяем старые иконки Genericons на Font Awesome в файле style.css

Второй этап.  У нас есть таблица стилей в файле style.css. В ней уже заданы иконки от старого шрифта, нам надо их заменить на новые, которые нам нравятся. Нажимаем ctrl+f в редакторе и ищем Genericons.

Ищем стили в style.css

Буквально сразу находим нужный блок в стилях отвечающий за элементы темы и их иконки.

правим стили twenty fiftyn
Вот наш блок со всеми классами стилей, теперь остается их содержимое слегка подправить.

Сначала задаем нашему блоку правильный и коночный шрифт:

font: normal normal normal 32px/1 FontAwesome;
задаем основной шрифт иконок FontAwesome
задаем основной шрифт иконок FontAwesome

И начинаем искать по названию класса нужные блоки.

как искать элементы style.css по названию класса.
как искать элементы style.css по названию класса.

Нас интересует вот этот стиль:

content: обращается к имеющейся в нашей папке иконке
content: обращается к имеющейся в нашей папке иконке

Идем на сайт Font Awesome. И ищем подходящую иконку. Можно пользоваться переводчиком в данном случае это стрелка для меню, чтобы оно красиво разворачивалось.

Всегда смотрите на классы и то, где они расположены

Подбираем подходящую иконку, открываем её и копируем название, вставляем в стили. Пишем toggle или down.

как найти название иконки awesome
название нужной нам иконки Awesome

Заменяем в стилях название. Сохраняем и смотрим. Прикольно получилось. Экспериментируем.

Вот мы и добавили свои иконки для меню сайта WordPress
Вот мы и добавили свои иконки для меню сайта WordPress

Если добавил иконки Font Awesome но ничего не выводится, подключаем стили Font Awesome

Чтобы все заработало, вам остается лишь подвязать стили Font Awesome. Качаем архив со всем необходимым на официальном сайте Download Awesome. Разархивируем и закидываем в папку с темой WordPress.

Заливаем папку Font Awesome в каталог.

Открываем файл header.php и перед закрывающим тегом </head> пишем строчку.

<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/font-awesome-4.7.0/css/font-awesome.css" />

не забывайте вставить правильное название папки.) Перезагружайте страницу и все будет работать.

Спасибо за прочтение статьи! Пожалуйста оставляйте комментарий получилось у вас или нет. Оставляйте предложения по доработке статей.

Видео как удалить Genericons

Автор

Bondap SEO-команда

Команда оптимизаторов. Мы профильно занимаемся контентным белым продвижением сайтов в Яндексе и Google.

Удаляем Genericons из WordPress Twenty Fifteen, устанавливаем пакет иконок Font Awesome: 8 комментариев

  1. Реально за долбали разработчики всякую хрень пихать в код. Нафиг нужны эти джериконы, если есть авесом. Да и картинками же можно вставить.

  2. Следовал по вашей инструкции в статье и видео по удалению genericons с заменой иконок из font awesome. Тема моего сайта Twenty Sixteen. С удалением проблем не возникло, по инструкции вообще все просто, а вот с заменой иконок пришлось повозиться. Загрузил папку (отдельное спасибо за ссылку на файл) на ФТП с font awesome, прописал в файле header.php путь к папке и файлу с иконками, но ничего не вышло. Попробовал много разных способов, все равно не выходило. Ошибку понял только спустя несколько часов мозгового штурма. Оказывается, ошибка была в пути к конечному файлу, я скачал обновленный пакет и не открывая папку прописал путь, как в примере. А нужно было в строке link rel вместо font-awesome.css прописать all.css – прямой путь ко всем иконкам! Все получилось!

  3. Наконец-то хоть кто-то понял, что пакет Genericons тот еще сюрприз для сайта на WordPress. Во-первых, действительно непонятно зачем он там, в плане дизайна это вообще прошлый век, невозможно на него смотреть. Про перегрузку сайта я вообще молчу. К тому же полностью согласен на счет использования непонятных решений в проекте, лучше уделить время качественной чистке своего сайта от мусора, чем потом не понимать, как его спасать

    1. Там еще и код какой-то закодированный, одному богу известно что он делает. Разрабы видимо джуны.

  4. Спасибо за статью, очень пригодилась) В ходе реализации возникли сложности с добавлением иконок «prew» и «next» в блоке, где выводятся последние записи. Если с кнопкой «далее» все сработало, «prew» никак не хотела отображаться, т.к. php ее вообще не выводил и игнорировал тег . Пришлось лезть в стили и оказалось, что эта замечательная кнопка выводится через псевдоэлемент after. В итоге, добавление тега в код не единственный способ добавить иконки фонтавесом на сайт. Можно заменить старые стили в необходимом классе на:

    content: «\f100»;
    font-family: ‘Font Awesome 5 Free’;

    и все заработает)))

    Кстати, пока возилась с кнопками, обнаружилась еще одна неприятность. Функция, отвечающая за эти кнопки (the_posts_pagination) заодно выводит содержательный заголовок второго уровня:

    Навигация по записям

    И, в связи с этим, вопрос – вредит ли это SEO? И если да, как его удалить?

    1. Разработчики просто решили упростить себе жизнь, там половина стилей такая в любой теме, любой cms. Спасибо за обратную связь

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *