Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Как можно без проблем и последствий объединить CSS файлы в шаблоне Joomla 2.5.

По просьбе одного из пользователей JoomlaTown.net решил написать данную инструкцию по объединению CSS файлов шаблона в Joomla 2.5.

Для чего это нужно?

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

Во-вторых, мы уменьшим количество запросов к серверу, тем самым ускорив загрузку сайта.

Я постарался сделать эту инструкцию универсальной, но всё же мог что-то упустить.
Если что поправьте.

Для примера возьмём стандартный шаблон из комплекта Joomla 2.5 - Beez5.
Вот так он выглядит:

Объединение CSS файлов в шаблоне Joomla 2.5

Хороший шаблон, сделанный профессиональными разработчиками.

Давайте посмотрим, какие CSS файлы грузятся на сайте.

Подгружаемые CSS файлы в шаблоне

Мы видим, что у нас загружается 7 CSS-файлов = 7 запросов к серверу. Это достаточно много.

Давайте заодно посмотрим, что скажет Yslow.

Оценка Yslow

Yslow даёт оценку С и сайт зарабатывает 73 балла. Это неплохо.
Такая, достаточно высокая оценка поставлена, потому что на сайте нет ни счётчиков, ни рекламы, ни других тяжёлых элементов.
Если бы они стояли, то оценка была бы ниже.

Теперь разберём, что это за файлы и для чего они нужны.

1. system.css - содержит CSS стили для системных сообщений.

2. position.css - содержит стили для позиционирования макета шаблона.
Из строчки кода видно, что этот файл имеет дополнительный параметр media="screen,projection".
Это говорит о его принадлежности к какому-либо устройству. В нашем случае это экран монитора и проектор.

3. layout.css - это стили основных элементов шаблона, как видим тоже для монитора и проектора.

4. print.css - это стили для принтера. Тип файла имеет параметр media="print".
Т.е. если страница будет загружаться в принтер для распечатки, то будут использоваться эти стили.

5. beez5 - это файл CSS стилей различных элементов шаблона: заголовков, шрифтов, блоков и т.д.

6. general.css - файл содержит общие стили для элементов, такие как отображение всех кнопок, картинок, системных сообщений, всплывающих подсказок и т.д.

7. general_opera.css - дополнение стилей для браузера Opera.
Если бы сайт был открыт в Mozilla Firefox, то вместо этого файла загружался бы файл general_mozilla.css.
Так сделали разработчики.

В этом шаблоне больше нет загружаемых CSS файлов, но зачастую в клубных шаблонах их бывает больше.
Это могут быть стили для шапки, стили для футера, стили для основных блоков и т.д.

Почему так делают разработчики.

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

И во-вторых, эта некая культура кода, когда каждый файл отвечает за отдельные элементы.

Если пробежаться по этим файлам и посмотреть, что внутри, то в большинстве из них не так много кода, иногда всего по несколько строчек.

Хочу обратить ваше внимание на первый загружаемый CSS-файл - system.css.

Он загружается во всех шаблонах и находится в папке template/system/css
Начало у него такое:

CSS файл system.css и свойство import

В нём находится строчка @import url(...)

Это значит он загружает содержимое ещё одного файла, который находится в папке media/system/css/
Он тоже называется system.css и содержит дополнительные стили для системных сообщений.

Значит на практике у нас загружается не 7 CSS-файлов, а все 8.
Это хорошо видно в Yslow:

8-ой CSS файл, через @import

Так, ну это было небольшое отступление :)

Теперь наша задача узнать, как подключаются эти файлы в шаблоне. 
Для этого открываем основной файл шаблона - index.php

CSS файлы подключаются в секции <head>,
после строчки <jdoc:include type="head" />

Подключение CSS файлов в шаблоне

Первые 5 файлов имеют простое, так сказать прямое, подключение.
А последние два: general.css и дополнение для разных браузеров - подключаются через условие PHP.
В язык PHP мы не полезем, и объединим только те файлы, которые подключаются напрямую.

Это:

  • system.css + system.css, который из папки media
  • position.css
  • layout.css
  • print.css
  • beez5.css 

Итак, приступим неторопясь.

Объединять все CSS-файлы мы будем в основной файл beez5.css, у нас он будет главным.

Внимание!
Перед изменением сделайте копию папки с вашим шаблоном.

Объединение CSS файлов - копия папки шаблона

1. Открываем файл system.css, который находиться в папке: ваш_сайт/templates/system/css
Убираем из него строчку @import url (...)

2. Открываем файл с таким же названием system.css, но который находится в папке: ваш_сайт/media/system/css
Копируем всё его содержимое полностью, и вставляем в открытый файл: ваш_сайт/templates/system/css/system.css
Сохраняем!

3. Копируем всё содержимое этого сохранённого system.css + system.css(из папки media) и идём в папку: ваш_сайт/templates/beez5/css
Открываем файл beez5.css
И в самое начало вставляем скопированные данные.
Их можно разделить комментарием, типа:
/*       Здесь начинается файл system.css       */ 
...
...
/*       А здесь заканчивается system.css        */

После этого сохраняем файл beez5.css

Ещё!

В файле system.css из папки media, есть ссылки на изображения, и чтобы они работали, нам нужно перенести эти изображения из папки media в папку нашего шаблона.
Если быть точнее, то из папки: ваш_сайт/media/system/images
в папку: ваш_сайт/templates/beez5/images

Это три картинки:
- notice-info.png
- notice-alert.png
- notice-note.png

Перенсли, идём дальше...

4. Открываем файл position.css, который находится в папке: ваш_сайт/templates/beez5/css
Копируем его содержимое полностью и вставляем в beez5.css там где заканчивается содержимое system.css (после комментария)
Здесь тоже можно разделить комментарием, чтобы было понятно, что и где находится.
Сохраняем.

5. Аналогично поступаем с файлом layout.css, который находится в templates/beez5/css

Если в вашем шаблоне ещё есть простые CSS файлы, которые подключаются напрямую, то их тоже копируете в основной файл.
И так же разделяете комментариями.

6.  В стандартном же шаблоне, простые CSS закончились. Остались только файл для принтера и файлы, которые подключаются через PHP.
Мы договорились, что в PHP мы не лезем.
А вот CSS файл для принтера можно подключить по другому.
Если его содержимое просто скопировать в основной файл, то наш шаблон поломается и будет выглядеть некрасиво.
Его нужно подключать немного по другому.

Для этого идём в beez5.css, в самый конец, ставим комментарий, что здесь у нас будут стили для принтера.
И указываем такие строчки:

@media print {

}

Это условие для принтера.
Т.е. мы говрим: "Если ты принтер - используй эти стили".

Копируем содержимое файла print.css и вставляем его между фигурными скобками.
Вот так:

@media print {
... содержимое файла print.css ...
}

Сохраняем изменения.

Что мы сделали?

- мы объединили содержимое шести CSS-файлов: system.css + system.css + beez5.css + position.css + layout.css + print.css
- перенсли картинки из папки media в папку нашего шаблона
- файл для принтера мы подключили через условие, как и задумывалось в шаблоне изначально.
Кстати, у многих шаблонов таких стилей нет, поэтому в вашем случае всё может быть проще.

У нас остался ещё один шаг.

7. В файле index.php удаляем строчки, где подключаются CSS файлы. Все, кроме beez5.css
Они начинаются с <link rel="stylesheet" href="/...">

У нас должно получиться следущее:

Объединение CSS файлов в шаблоне Joomla 2.5

Ну и теперь проверяем как стал выглядеть наш сайт.
Если он выглядит также как и раньше, то всё отлично.
Если же он стал другим, значит что-то мы не доглядели..., но скорее всего такого не произойдёт.

Для большего эффекта можно сжать основной файл, в который мы скопировали все стили.
У меня он получился размером аж в 62 Кб.
Для этого существуют различные онлайн сервисы.

Но имейте ввиду, после сжатия все комментарии из файла будут удалены, и разделения его содержимого не будет.
Т.е. то что мы ставили /*   Здесь начинается такой-то файл    */ после сжатия уже не увидим.

Один из таких сервисов для сжатия CSS - http://www.cleancss.com
У меня этот файл сжался на 39,7%.
Вместо 62 Кб, стал 41 Кб.
Немного, но всё равно приятно.

Ну и для наглядности проверим в Yslow:

Оценка Yslow после объединения CSS

Уже лучше!

Вот таким образом можно объединять CSS файлы в шаблонах Joomla, и не только Joomla, но и других CMS: Wordpress, Drupal и т.д.

Желаю успехов!

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!