Joomla 2.5 + bootstrap: faq по разработке шаблонов

Всем привет.
Думаю, тема будет полезной и в будущем мы сможем её развивать.

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

Ну а пока стабильная версия Joomla 3 ещё не вышла - в этой теме будем обсуждать разработку шаблонов с использованием Twitter Bootstrap на Joomla 2.5
1. Качаем Bootstrap.

Идём на сайт разработчика и скачиваем пакет Bootstrap 2 (например, 2.3.2).
Нам нужен обычный архив (по состоянию на 15.03.2014 - это самая левая ссылка на странице - Bootstrap).
Так же можно взять архив на русскоязычном сайте проекта.
2. Подключаем Bootstrap к шаблону Joomla

Распаковываем содержимое архива, скаченного в пункте 1.
Получаем 3 папки:

• css - папка с основными стилями и стилями для адаптивной вёрстки
• fonts - шрифты, используемые в шаблоне при подключении Bootstrap
• js - скрипт для работы всплывающих окон, JS-слайдеров и т.д.

Устанавливаем на сайт любую болванку шаблона для Joomla 2.5 (я пользуюсь своей).

Далее нам нужно поместить файлы из архива Bootstrap в соответствующие папки нашего шаблона. Открываем каталог нашего сайта (FTP), файл index.php.

Подключаем CSS и JS файлы Bootstrap в файл нашего шаблона: (templates/{название-шаблона}/index.php)

Код (html):

1. <!-- Основной файл стилей -->
2. <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" rel="stylesheet" type="text/css" media="screen" />
3.  
4. <!-- Подключаем, если будет используеться адаптивная вёрстка -->
5. <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" media="screen" />
6.  
7. <!-- Подключаем, если будут использоваться стандартные всплывающие окна, слайдеры и т.д. -->
8. <script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/jquery.js" type="text/javascript"></script>

Вуаля: теперь мы можем использовать в своём шаблоне классы из Twitter Boostrap Framework!

3. Переопределяем шаблоны вывода

Как мы знаем (я надеюсь, что и Вы тоже! , в админке Joomla можно управлять внешним видом макета блога категории, главной страницы сайта ("Избранные материалы") и т.д. В том числе, можно изменять количество колонок, в которых будют выводиться наши материалы. По умолчанию, для разбивки на колонки используются стандартные классы Joomla (cols-N, col-N...). Но раз уж мы используем Bootstrap, давайте сделаем вёрстку стандартными средствами этого фреймворка (row\row-fluid, spanN).

3.1 Шаблон главной страницы ("Избранные материалы")

В штатной сборке Joomla! CMS 2.5 шаблон вывода главной страницы сайта ("Избранные материалы") находится по адресу:

Копируем этот файл в папку нашего шаблона:

Далее ищем определение переменных $rowcount и $row. Сразу после них вписываем следующий блок:

Код (PHP):

1. switch($this->columns) {
2.     case '1': $columns = ' span12';
3.     break;
4.     case '2': $columns = ' span6';
5.     break;
6.     case '3': $columns = ' span4';
7.     break;
8.     case '4': $columns = ' span3';
9.     break;
10.     case '5': $columns = ' span2';
11.     break;
12.     case '6': $columns = ' span2';
13.     break;
14.     default: $columns = ' span1';
15. }

Этот код берёт кол-во колонок из настроек в админке и в зависимости от этого формирует класс колонки Bootstrap (span)... Я не стал заморачиваться с расчётом точных процентов, думаю, что большинству будет достаточно и этого. Хотя, в теме можно пообсуждать и другие варианты!

Находим начало вывода самого блока материала:

Код (PHP):

1. <div class="items-row cols-<?php echo (int) $this->columns;?> <?php echo 'row-'.$row ; ?>">
2. <?php endif; ?>
3.     <div class="item column-<?php echo $rowcount;?><?php echo $item->state == 0 ? ' system-unpublished"' : null; ?>">
4.         <?php
5.             $this->item = &$item;
6.             echo $this->loadTemplate('item');
7.         ?>
8.     </div>
9.     <?php $counter++; ?>
10.     <?php if (($rowcount == $this->columns) or ($counter ==$introcount)): ?>
11.     <span class="row-separator"></span>
12. </div>

И заменяем его на код:

Код (PHP):

1. <div class="row-fluid row-<?php echo $row ; ?>">
2.     <?php endif; ?>
3.     <div class="item span<?php echo $columns; ?> <?php echo $item->state == 0 ? ' system-unpublished"' : null; ?>">
4.         <?php
5.             $this->item = &$item;
6.             echo $this->loadTemplate('item');
7.         ?>
8.     </div>
9.     <?php $counter++; ?>
10.     <?php if (($rowcount == $this->columns) or ($counter ==$introcount)): ?>
11. </div>

Теперь шаблон главной страницы сайта ("Избранные материалы") будет меняться в соответствии с настройками колонок в админке.


Продолжение следует...