Создаем шаблон для Joomla с нуля. Часть 2

Вернуться
Опубликовано: 25.02.2015 г.

Как мы разобрались ранее, наш шаблон будет сверстан при помощи блочной структуры расположения элементов. Также нам понадобятся две папки, где мы будем складировать дополнительные файлы шаблона – это каталог images и css. Из названия и так понятно, каково их предназначение: в images будут лежать все изображения, а в css – каскадные таблицы стилей. Для того чтобы Joomla корректно восприняла наши папки и подключила их, они не могут быть пустыми. Поэтому кинем в images любую картинку, а в css – пустой файл template.css. Теперь всё готово для того, чтобы начать писать главный файл нашего шаблона – index.php. Как упоминалось в первой части статьи, он представляет собой HTML-код со вставками PHP-кода, поэтому вам понадобятся знания этих языков, хотя бы базовые. HTML отвечает за разметку страницы, а PHP – за динамику и взаимодействие с движком сайта.

Собираем index.php

Редактировать файл можно любой программой, которая вам нравится – Visual Studio, Notepad++ или даже простым блокнотом. Структура index.php достаточно проста. Файл состоит из заголовка, подключения всех необходимых модулей и собственно разметки. Заголовок традиционно задается тегом <head> и начинается с участка кода, который проверяет, чтобы к файлу не было обращений напрямую, это требование безопасности:

После этого мы указываем браузеру, что он имеет дело именно с HTML-кодом. Делается это при помощи DOCTYPE:

<!DOCTYPE html>

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

После этого мы подключаем как стандартные CSS движка Joomla, так и только что созданный нами template.css:

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

Теперь нам нужно задать возможность сворачивания блоков left и right, и тем самым устанавливать ширину центрального блока в 60, 80 или 100% в зависимости от того, свернуты блоки или нет:

Это последняя часть заголовка, теперь тег <head> можно закрыть.

Раздел BODY

После заголовка идет тело страницы, задаваемое тегом <body>. Вся разметка будет находиться именно здесь. Создаем основной блок с page и помещаем в него блоки top, navbar, header, content, left, right, footer. Раздел top дополнительно содержит в себе блоки logo и search. Каждый из блоков описывается примерно таким кодом:

Как видите, название блока трижды указывается в каждом элементе. Для раздела logo также нужно задать имя сайта:

<?php echo $app->getCfg('sitename'); ?>

Чтобы поисковые роботы лучше воспринимали ваш сайт, эту строчку можно заключить в тег <h1></h1>.

Описание блока content также должно содержать две специфические инструкции. Первая из них получает ширину блока, определённую ранее в заголовке, а вторая позволяет выводить сообщение в данном блоке:

Теперь остается закрыть тег <body>, и наш index.php готов.

В следующей части мы будем создавать файл templateDetails.xml, который поможет инсталлировать свежесозданный шаблон.

Создаем шаблон для Joomla с нуля. Часть 1

Создаем шаблон для Joomla с нуля. Часть 3

Создаем шаблон для Joomla с нуля. Часть 4

Создаем шаблон для Joomla с нуля. Часть 5

1895 0

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *