Знания, полученные на этом уроке, позволят вам создавать свои и изменять чужие шаблоны сайта выполненного на CMS «Joomla!».

Несколько замечаний перед началом урока:

  • В этом уроке я отказываюсь от своих любимых «раз-два-три», разделяющих урок на смысловые части. Логика урока будет подчинена логике создания шаблона.
  • В конце урока представлена ссылка на zip-файл с шаблоном, вы можете скачать установить и сравнить его с вашей работой. В тексте я буду идти к этому шаблону «по шагам».
  • Урок не ставит цель научить создавать дизайн сайта, это отдельный разговор. Дизайн учебного шаблона master-class предельно прост. Уже позже, самостоятельно вы сможете усложнить его.
  • Большая часть работы будет происходить с текстовыми файлами, в которых мы будем писать код нашей страницы. Вы можете работать со стандартным Блокнотом, входящим в поставку Windows, но я рекомендую скачать и установить бесплатную, но несоизмеримо более функциональную программу Notepad++. Ссылка располагается в конце урока.

Итак, предположим, что у нас есть дизайн-макет и по нему нам необходимо сделать шаблон.
 

Схема нового шаблона
Рис. 43. Схема нового шаблона.

Шаг первый, создаем файл с HTML-шаблоном страницы.
В отдельном каталоге на рабочем столе вашего компьютера создаем файл index.htm. В нем в текстовом редакторе Notepad++ набираем предложенный код без номеров строк. Они даны для комментариев к коду, а также для более удобного обсуждения кода на форуме проекта.
Создаем каталог images, в нем размещаем файлы logo.gif, fon.gif, line.gif. Они используются в макете сайта (ссылка на изображения в конце урока).

 

Листинг 1. html-код
Рис. 44. html-код (листинг 1)

комментарии к коду:

  • Весь шаблон – это таблица, состоящая из четырех строк и двух столбцов. В ячейках таблицы будут располагаться контент и модули сайта.
  • Все объекты на странице представлены в виде текста: «поиск по сайту», «контентная часть» и т. д. В финальном коде эти слова будут замещены программным кодом.  
  • Ширина и высота таблицы – 100% от ширины вашего браузера, толщину границ таблицы изначально задаем равной одному (строка 4). Это позволит видеть этот каркас в браузере.
  • В первой строке таблицы находится логотип с названием школы (строка 7). Разумеется здесь может находиться любое изображение размером 250 на 100 пикселей.
  • Вторая строка таблицы отведена под главное меню и поле поиска. Ячейки имеют фоновое изображение выделяющее эту строку на странице (строка 10-11).
  • Для модулей отведена отдельная ячейка в таблице. Она также имеет фоновое изображение (строка 15)

Сохранив файл index.htm и открыв его в браузере, мы страницу, напоминающую макет, представленный на рисунке 1.

Шаг второй, создаем структуру вашего шаблона.
В папке с джумлой, внутри каталога templates создаем следующую структуру файлов и каталогов:

  • Создайте новый каталог master-class (в нем будет храниться наш шаблон).
  • Внутрь созданного каталога скопируйте файл index.htm и переименуйте его в index.php.
  • Внутрь созданного каталога скопируйте каталог images со всеми вложенными файлами.
  • Внутри созданного каталога master-class создайте каталог css.
  • В нем создаем пустой текстовый файл с именем style.css. Файл будет хранить таблицы стилей, которые мы научимся  создавать в девятом уроке.
  • Внутри созданного каталога master-class создайте текстовый файл templateDetails.xml
Структура каталога вашего шаблона
Рис. 45. Структура каталога вашего шаблона.

Шаг третий, изменяем основной файл шаблона index.php.
В коде цветом выделены места, которые отличают php-файл от исходного html-шаблона.

Листинг 2. Добавляем блоки для модулей и контента
Рис. 46. Добавляем блоки для модулей и контента (листинг 2)

комментарии к коду:

  • Вместо слов «главное меню» добавлен именованный блок «main_menu», в нем можно разместить модуль, отвечающий за вывод меню сайта (строка 11). За создание именованного блока отвечает директива <?php mosLoadModules ('main_menu');?>. Имя блока может быть любым.
  • Всего в шаблон добавлено шесть блоков: «main_menu», «top», «bottom», «user1», «user2», «bottom_menu».
  • За вывод «хлебных крошек» отвечает директива <?php include «pathway.php»;?> (строка 16).  Хлебными крошками называют ссылки, показывающими место страницы в структуре сайта, например, главная > уроки > 10 класс > алгебра логики.
  • За вывод контентной части отвечает строка 17. В ней находится директива <?php include («mainbody.php»);?>
  • Контактная информация представлена в «обычном виде» без вставки кода. Текст, размещенный в этом месте будет повторяться на всех страницах сайта (строки 25-27).
  • Граница таблицы приняла значение равное нулю (строка 4).

Шаг четвертый, изменяем файл шаблона templateDetails.xml.
Изменения, внесенные в файл index.php мы не сможем увидеть до тех пор, пока не изменим файл templateDetails.xml в нем заданы имя шаблона, а также из каких частей он состоит. В редакторе Notepad++ внесите изменения в файл:


Рис. 47. Файл templateDetails.xml (листинг 3)

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

  • строка 1 задает кодировку файла, в данном случае – кодировка windows 1251;
  • вся информация о шаблоне заключена в теги <mosinstall></mosinstall>, строки 2 и 22;
  • в строке 3 задается имя шаблона, оно должно повторять имя папки с вашими файлами;
  • в строке 12 задается основной файл шаблона – index.php;
  • строки 14–18 определяют все графические файлы, используемые в шаблоне;
  • строки 19–21 задают место и имя файла с таблицами стилей.

Шаг пятый, подключаем шаблон, выполняем его настройку.
Если теперь вы запустите джумлу, определите в административной частив в «менеджере шаблонов», что master-class является шаблоном «по умолчанию», то вы увидите, что внешний вид вашего проекта изменился. Здесь необходимо два замечания.

Во-первых, содержимое контентной части, скорее всего, будет отражаться без проблем, а вот все модули, будут не видны. Это, скорее всего, будет связано с тем, что новый шаблон содержит блоки, о которых джумла ничего не знает. Задавать новые имена блоков можно в окне «Расположение модулей» меню Сайт – Шаблоны – Расположение модулей.

Добавление новых имен блоков для модулей «Joomla!».
Рис. 48. Добавление новых имен блоков для модулей «Joomla!».

Всего в джумле может быть до пятидесяти блоков. Задайте в свободном поле «Расположение» название новых блоков: «main_menu» и «b_menu».
В менеджере модулей (меню Модули – Модули сайта) для модуля Главное меню сделайте привязку к блоку «main_menu». Аналогично нужно привязать модуль «Поиск» к блоку «top», модуль «DatsoGallery Ultimate» привяжите к блоку «bottom» и т. д.

Во-вторых, в вашем шаблоне нет рисунков, для их корректного отображения необходимо внести еще одно изменение в файл index.php. Изменения показаны цветом.

Изменения в файле index.php (листинг 4)
Рис. 49. Изменения в файле index.php (листинг 4)

 
комментарий к коду:
Как вы заметили, изменения коснулись строк, в которых происходит обращение к файлам изображения. Директива <?php echo $mosConfig_live_site;?>/templates/master-class/ скажет джумле, что рисунок нужно искать в папке, где установлен сайт, в каталоге templates/master-class/

Шаг шестой. Создаем zip-файл шаблона.
Если вы хотите в дальнейшем применить ваш шаблон на сайте, расположенном в сети интернет, вам нужно будет загружать ваш шаблон на удаленный сервер. Для этого ваш шаблон должен быть представлен в виде zip-архива, имеющего имя вашего шаблона и содержащего все компоненты, описанные в файле templateDetails.xml.

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

Практическая работа:

  1. Повторите проект по созданию нового шаблона master-class, описанный в уроке, внесите в него изменения (ваш логотип, ваши адреса и т. д.).
  2. Найдите в шаблоне «Paranoia» блоки отвечающие за вывод контента, модулей. Выполните изменение/упрощение шаблона. Вставьте в него свои изображения.

Контрольные вопросы:

  1. Почему редактор Notepad++ предпочтительней стандартного Блокнота?
  2. Какая директива отвечает за добавления блока в шаблон?
  3. Какая директива отвечает за добавление контента в шаблон?
  4. Что такое «хлебные крошки»? Как их добавить в шаблон?
  5. За что отвечает директива <?php echo $mosConfig_live_site;?>?
  6. Сколько блоков в шаблоне paranoia?
  7. Как добавить имя блока в «Joomla!»?
  8. Привязать модуль к блоку шаблона?
  9. Если ваш шаблон содержит еще дополнительный рисунок, что нужно изменить в файле templateDetails.xml?

Результатом работы может стать либо измененный шаблон master-class (более простой вариант) либо измененный вариант шаблона paranoia (более сложный).