post
Бесплатная школа YouTube 3.0

Некоторые темы оформления WordPress загружают более чем один файл стилей CSS. Когда CSS-файлов много, увеличивается число запросов к серверу, скорость работы сайта падает. Необходимо объединить CSS-файлы стилей темы оформления в один.

Также помните, что многие плагины подключают свои CSS-файлы, которые тоже необходимо объединять либо отключать — у нас на эту тему есть статья.

1. Анализ загрузки сайта: сколько файлов стилей подключается в теме оформления?

 1) Посмотрим лог загрузки нашего сайта. Для этого зайдем на сервис Pingdom Website Speed Test. Указываем адрес нашего сайта и нажимаем кнопку «Test Now».

анализ сайта pingdom tools

2) Какие CSS файлы загружает тема оформления? Прокручиваем страницу ниже, сразу к последовательности загружаемых файлов. Находим, где загружаются файлы с расширением .css

Далее наводим курсор на название каждого CSS-файла и смотрим, по какому пути он лежит на сервере. Нам нужны только те CSS-файлы, которые лежат в папке нашей темы оформления WordPress. Путь к этим файлам имеет вид:

/wp-content/themes/ваша_тема_оформления/

На картинке показаны CSS-файлы, загружаемые темой оформления:

css тема wordpress

Рамкой выделены те файлы стилей, которые загружаются нашей темой оформления. Их аж 6 штук — очень много, это целых 6 запросов к серверу.

Выпишем или запомним имена файлов стилей CSS.

2. Где подключаются CSS-файлы стилей темы оформления?

Чтобы определить, где подключаются CSS-файлы, зайдем в админ.панель WordPress --> Внешний вид --> Редактор --> Смотрим на правую колонку.

Обычно CSS-файлы подключаются темой в файле шапки сайта — header.php. Находим его в правой колонке файлов и кликаем на него.

файл header.php wordpress

Далее смотрим на код и пытаемся найти нам CSS-файлы. Выполним быстрый поиск css-файлов. Нажимаем ctrl+F и вводим в поисковой строке css

Если нужные нам CSS-файлы нашлись — отлично.

css гугл шрифт

На картинке выделено подключение внешнего Гугл-шрифта. Если он нам не нужен — удалим эту строку и затем в файле CSS-стилей темы оформления везде сотрем упоминание этого шрифта.

А если файлы стилей не найдены? Тогда надо продолжить поиск, CSS-файлы могут подключаться в разных местах в зависимости от темы оформления.

На картинке пример, когда файл стилей подключается в init.php, причем способ подключения отличается от такового  в шапке сайта :

подключение css файлов

Как искать CSS-файлы эффективно? Для этого нам потребуется файловый менеджер, например, Total Commander.

Мы копируем все файлы темы оформления на наш компьютер. Далее заходим в Total Commander, открываем в нем папку темы оформления. Нажимаем «Поиск файлов», ставим галовку «С текстом» и вписываем имя нужного файла стилей:

поиск css в total commander

Далее нажимаем «Начать поиск».

Среди найденных файлов будут тот, в котором подключается наш CSS-файл стилей. Если файл найти не удалось — расширим поисковый запрос до простого css

После чего открываем каждый из найденных файлов и смотрим его на предмет подключение файла стилей в нем.

3. Копируем стили в главный файл стилей темы оформления.

Мы не может просто отключить все лишние CSS-файлы, иначе мы потеряем стилевое оформление сайта. Прежде нам нужно скопировать все их содержимое в главный файл стилей темы оформления (обычно это файл style.css).

Он лежит по пути: /wp-content/themes/ваша_тема_оформления/style.css

Смотрим в логе загрузки сайта, где лежат остальные загружаемые CSS-файлы, заходим по указанному пути, открываем файлы блокнотом, копируем их содержимое в файл style.css.

где найти css файл

Все, стили мы скопировали.

4. Отключение лишних CSS-файлов темы оформления.

Теперь просто удаляем ранее найденный код, в котором подключаются эти дополнительные файлы стилей.

Удалять следует код такого вида:

1) <link rel="stylesheet" href="/wp-content/themes/twentytwelve/css/dop-style.css" type="text/css" media="screen" />

2) wp_register_style ( 'elements_style', $directory_uri . '/elements/lib/css/elements.css' );
wp_enqueue_style ('elements_style');

3) <link href='http://fonts.googleapis.com/css?family=Droid+Serif|Arimo' rel='stylesheet' type='text/css'>

Делаем это по одному для каждого файла и после удаления каждый раз проверяем работоспособность сайта и наличием в нем изменений. Перед проверкой не забываем очистить кеш браузера и кеш сайта, особенно если вы используете плагины кеширования (например, Hyper Cache).

После того, как ненужные файлы отключены, проверяем сайт сервисом Pingdom, чтобы убедиться, что CSS-файлы действительно не загружаются.

Бесплатная школа YouTube 3.0

Поделитесь этой записью с друзьями, буду благодарен!

3 thoughts on “WordPress: как объединить css файлы темы оформления

  1. Здравствуйте!

    Вопрос такого рода: как удалить css-файл, который подгружается каким-либо плагином и не виден в header.php?

    • Здравствуйте, Роман! Нужно смотреть, где происходит подключение CSS-файла. Все индивидуально — назовите какой плагин Вы рассматриваете и мы попробуем на его примере решить вопрос отключения CSS.

  2. Роман, подскажите: что будет стоить описанная выше работа в Вашем исполнении на моем сайте? Напишите в личку пожалуйста.

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

Ваш адрес email не будет опубликован.