Янв
22
2013

Улучшаем размещение JS/CSS в W3 Total Cache

banner-772x250

Если у вас есть свой блог на WordPress и Вы хотите выжать из него максимальную производительность, значит плагин W3 Total Cache то что Вам надо. В этом уроке поговорим о размещении минифицированых js/css файлов этим плагином.

Как Вы уже наверняка знаете, W3 Total Cache может автоматически комбинировать и уменьшать отдельные CSS и JavaScript файлы. И это здорово! Однако, если Вы уже пользовались этой возможностью и смотрели исходный код полученной страницы, то Вы могли заметить, что W3 Total Cache, по умолчанию, размещает уменьшенные файлы сразу за тэгом <head>. Это иногда может вызывать проблемы, если Вы используете CSS таблицы, предполагающие загрузку других таблиц стилей до своего вызова, например если Вы используете Yahoo’s CSS Reset или Google Web Fonts. Скорее всего, Вы хотите, чтобы Ваши CSS файлы размещались сразу перед </head>, а JS файлы перед тэгом </body>.

Чтобы добиться этого, потребуется изменить исходные файлы плагина W3 Total Cache, поскольку он не предлагает нам выбирать место размещения минифицированных файлов.

Используем редактор плагинов

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

  1. После того, как Вы вошли в центр администрирования, в выпадающем меню «Плагины» выбирите пункт «Редактор».
  2. В правой части экрана есть выпадающее меню, в котором нужно выбрать “W3 Total Cache” и нажать кнопку «Выбрать».
  3. Затем выбираем “w3-total-cache/lib/index.html”.
  4. Теперь выбираем “w3-total-cache/lib/W3/Plugin.php”.
  5. И наконец выбираем “w3-total-cache/lib/W3/Plugin/Minify.php”.

Изменяем код

    • Теперь, кода мы открыли “w3-total-cache/lib/W3/Plugin/Minify.php”, нажмите Ctrl+F в своем браузере, это поможет Вам искать нужные фрагменты кода. Для начала найдите:
$head_prepend = '';

И сразу за этой строчкой добавьте следующую:

$head_append = '';
    • Теперь находим:
$head_prepend .= $style;

И заменяем следующим кодом (этот фрагмент присутствует 2 раза, и заменить нужно оба):

//$head_prepend .= $style;
$head_append .= $style;
    • Теперь находим следующий код:
$head_prepend .= $script;

Как и в прошлый раз, меняем на нижеприведенный код (этот фрагмент встречается в коде 3 раза, но нам нужно заменить только первый!):

//$head_prepend .= $script;
$body_append .= $script;
    • И наконец определим, что должен делать $head_append (его нет в изначальном коде). Чтобы сделать это, находим следующий код:
if ($head_prepend != '') {
    $buffer = preg_replace('~<head(\s+[^<>]+)*>~Ui', '\\0' . $head_prepend, $buffer, 1);
}

И сразу за ним дописываем следующее:

if ($head_append != '') {
    $buffer = preg_replace('~<\\/head>~', $head_append . '\\0', $buffer, 1);
}

Готово!

Нажимаем «Обновить файл» чтобы сохранить изменения. Если все сделано правильно, то Вы увидите сообщение вверху экрана «Изменения сохранены».

Если у Вас что-то не получается, или Вы боитесь править вручную, а может просто не хотите делать это сами, то можете скачать финальную версию файла

Если WordPress найдет какую-то ошибку, то он автоматически отключит плагин. В это случае Вам нужно восстановить оригинальный Minify.php. А обратиться за помощью можно в комментарии прямо здесь или на форуме WordPress в этой теме.

Спасибо за чтение! Если у Вас возникли какие-то вопросы, то не стесняйтесь и задавайте из здесь.

Похожие записи

Немного об авторе: Сергей Белянин

Основной автор этого блога. Еще совсем недавно студент, а сегодня уже Microsoft Certifed Professional, с неукротимым желанием сделать жизнь людей проще, автоматизировав скучную рутинную работу :)