Как создать шаблон для Joomla
Чтобы узнать, как создать качественный шаблон для движка Joomla, читайте статью шаг за шагом. Мы рассмотрим все тонкости и нюансы создания темы для Joomla. Если вы знаете, что такое CSS и динамические страницы, можете сразу приступать к разработке joomla шаблона:
Создание простого шаблона для joomla
Пишем CSS для joomla шаблона
По ходу чтения нашей статьи вы получите ответы на следующие вопросы:
Что такое Joomla шаблон? Какие функции содержит в себе шаблон Joomla, и разница между шаблоном, который имеет контент и шаблоном, контент которого содержится в CMS?
В чем разница создания шаблонов на базе локального сервера (динамических шаблонов) от создания статических HTML шаблонов?
Какая последовательность при разработке дизайна под Joomla, и какая взаимосвязь между W3C стандартами, юзабилити, и доступностью дизайна.
С каких файлов состоит joomla шаблон, и какие они имеют функции?
Как создать качественный блочный шаблон, используя CSS, вместо устаревшего табличного дизайна?
Какие основные CSS стили должны быть в joomla шаблоне, и какие стили по умолчанию использует ядро движка joomla?
Какие модули можно использовать? А также техника создания закругленных углов блока для joomla шаблона.
Как контролировать отображение колонок с контентом и без него?
Какие шаги разработки joomla 1.6 шаблона?
Понятие о шаблоне Joomla
Шаблон joomla – это определенные файлы, которые подключены к движку joomla и позволяют управлять выводом контента. Шаблон joomla – это не сайт; это также нельзя назвать веб дизайном. Шаблон – это базовый фундаментальный дизайн видов, которые могут быть презентованы joomla сайтом. Уникальность шаблона в том, что он может подходить к любому сайту, ведь весь контент храниться в базе данных. Шаблон лишь определяет вид и презентацию контента в нужном месте.
Шаблон лишь стилизует контент, который автоматически вставляется в указанное место из базы данных. Joomla шаблон, может подключать к себе CSS файл стилей, который содержит определения дизайна ссылок, меню, элементов навигации и т.д. Использование шаблона для CMS, таких как Joomla, имеет ряд преимуществ:
Joomla, берет на себя всю работу по размещению контента на страницах. Вы можете с легкостью создавать новые страницы блога и указывать их структуру в шаблоне. Применение CSS позволит вам значительно выделить необходимый контент среди других элементов (блоков).
При создании шаблона, вы можете реализовать новейшую схему создания дизайна в котором стили (CSS), находятся в отдельности от блоков или слоев. Вы в любой момент сможете изменить дизайн вашего шаблона, при этом редактируя только один файл.
В любой момент, вы сможете создать кардинально новый шаблон (дизайн), при этом заменить его на хостинге в два клика. Если он вам не нравиться, вы сможете поставить старый обратно. Другими словами, joomla шаблон, дает вам возможность быть гибким в плане обновления дизайна вашего сайта.
Процесс создания динамического дизайна
Страницы, которые вы видите на joomla сайте, это динамические страницы. Как уже упоминалось, они генерируются динамически из контента, который храниться в базе данных. Когда изменяется контент в базе данных, все страницы на которых отображается контент, тоже изменяются. Страницы сайта, которые вы видите созданы с помощью различных PHP команд в шаблоне и основном ядре joomla. Так как шаблон создается строками кода, это создает некоторые неудобства при сотворении дизайна.
Эта проблема частично решена при использовании “what you see is what you get” (WYSIWYG) HTML редакторов, например Dreamweaver, вам не приходиться писать HTML код. Но при создании шаблона для Joomla, такой редактор вам не поможет, потому что он не сможет отображать динамические страницы. Поэтому вам придется создавать дизайн вручную, и смотреть получившийся результат при генерации страницы на локальном сервере. При этом делая изменения в коде нужно будет обновлять страницу, чтобы она сгенерировалась заново. Многие из веб дизайнеров используют localhost (локальный сервер), или Denwer. Если у вас не установлен локальный сервер, вам необходимо скачать его и установить. А также установить движок Joomla на ваш локальный сервер, чтобы вы имели возможность проводить всяческие эксперименты над ним.
W3C и блочный дизайн
Удобство, доступность и SEO – это три фактора, которыми руководствуются дизайнеры при создании высококачественного дизайна. Проще всего добиться этих целей, используя framework, который соответствует W3C стандартам и основам блочного дизайна.
Для понимания необходимости соответствия дизайна W3C стандарту, нужно понять некоторые вещи из истории. Что именно? Браузеры продолжают развиваться с тех пор, как зародилось само понятие интернета. Каждая новая версия содержит в себе новшества, и некоторые изменения свойств, тегов… Каждый браузер имеет тенденцию к собственному синтаксису, или «диалекту», хотя и используют базовый язык HTML. Поэтому были придуманы W3C стандарты, которые определяли в себе теги и их свойства с каждым новым дополнением языка HTML. Нам необходимо передавать в теге DOCTYPE правильную информацию о стандартах, которые мы будем использовать при создании сайта. Нарушение этих стандартов не смертельно, но все же, лучше делать как лучше, а хуже и само получиться.
Какой код семантически корректный?
Семантически корректный HTML код, это теги, которые описывают суть контента, а не его презентацию. Например, если мы ставим H1 тег, то он должен содержать в себе главный заголовок страницы. В таблице, должны содержаться только табличные данные. При написании шаблона для joomla, мы должны соблюдать семантику. Это позволить сделать код более понятным и доступным для поисковиков.
CSS (CascadingStyleSheets)
Для написания семантичного кода, просто необходимо использовать CSS, для контроля вида блоков и слоев веб страницы. CSS это простой механизм для добавления новых стилей (н-р: шрифт, цвет, пробелы) у веб документ.
CSS расширение – это параллель HTML кода, которая позволяет остаточно отделить контент (HTML), от его представления (CSS).
Создавая дизайн для Joomla сайта, как вы уже поняли необходимо соблюдать валидность кода. Но множество дизайнеров, старой закалки, до сих пор используют старые схемы создания шаблонов, при разработке которых они используют таблицы, вместо div блоков, что значительно корректнее в семаническом отношении.
Создание простого Joomla шаблона – Шаг 1
Для лучшего понимания, как создавать шаблон для joomla, нам необходимо изучить структуру файлов шаблона. Что мы сейчас и будем делать.
Компоненты шаблона
В данном разделе рассматривается процесс создания всех компонентов шаблона (файлов) вручную. Естественно, вы могли бы установить шаблон с помощью CMS Joomla, которая делает это автоматически.
При создании собственного шаблона, необходимо создать систему файлов и папок на скоординированной основе. Шаблон может содержать неограниченное количество файлов и папок. Эта система папок, принадлежащая одному шаблону, должна быть помещена в директорию templates/. Если вы имеете два установленных шаблона, с именами Elementи Voodoo, то это выглядит примерно так:
Заметьте, что имя папки шаблона должно в точности совпадать с именем самого шаблона – эти имена регистрозависимы и не должны содержать пробельных символов.
В папке шаблона имеется два ключевых файла:
Имена этих файлов и их размещение должно быть именно таким, как показано в примере. Потому что они используются ядром joomla. Первый из этих файлов – XML файл.
Он содержит метаданные в формате XML, которые необходимы для ядра Joomla. Эти данные необходимы для загрузки страницы, которая использует данный шаблон. Также здесь указываются данные об авторстве, копирайтинге, и с каких файлов состоит шаблон. Заметьте, что в имени файла буква D, должна быть заглавной!
Также этот файл необходим при распаковке и инсталлировании шаблона, когда шаблон устанавливается с администраторской стороны движка joomla.
Второй ключевой файл, это главный файл, который генерирует страницы (index.php).
Этот файл наиболее важный во всем joomla шаблоне. Он отображает сайт и сообщает joomla, где отображать необходимые компоненты и модули. Он состоит с PHP и HTML.
Хотя, все шаблоны содержат дополнительные файлы. Они также нужны (хотя и не запрашиваются ядром Joomla), смотрите их названия и размещения на примере шаблона Element.
Давайте рассмотрим, зачем нужны эти файлы и папки.
/element/template_thumbnail.png – Скриншот шаблона (как правило сжат до 140x90). После установки шаблона, он будет отображаться как превью в joomla панели управления.
/element/params.ini – текстовый файл, который содержит переменные разных параметров шаблона.
/element/css/template.css – CSS файл шаблона. Создание папки не обязательное, но лучше ее создать, чтобы при расширении количества файлов все было на своих местах. Это даст возможность не запутаться в файлах.
/element/images/logo.png – в этой папке будут храниться все изображения, которые используются при создании joomla шаблона. Как пример вы видите, что в папке находиться изображение – логотип.
templateDetails.xml
Этот файл, как манифест шаблона, он содержит названия всех файлов и папок шаблона (компонентов). Также он содержит информацию об авторе и копирайтинге. Пример XML файла смотрите ниже:
Давайте разберемся, что означают строки этого кода:
<install version="1.6" type="template"> - это инструкция для установочного приложения, она содержит информацию о том, что это шаблон и что он подходит для версии Joomla 1.6.
<name>960TemplateTutorialStep1</name> - это название вашего шаблона. Название, которые вы введете здесь, должно совпадать с названием папки шаблона. В названии не должно быть пробельных символов и кириллических символов.
<creationDate> - это дата создания шаблона. Это поле не имеет строгого значения и может быть заполнено следующим образом: May 2005, 08-June-1978, 01/01/2004 и т.д.
<author> - это имя автора шаблона, то есть – ваше имя.
<copyright> - здесь помещается информация о копирайтинге.
<authorEmail> - Email автора, по которому к нему можно будет обратиться.
<authorUrl> - Адрес домашней странички автора шаблона.
<version> - указывается версия шаблона.
<files></files> - здесь перечисляются все компоненты шаблона (файлы и папки). Если компонент файл ставиться тег <filename>, если компонент папка <folder>. Подробнее смотрите на примере:
Вы видите, в какой форме мы перечисляем главные компоненты при создании шаблона для joomla.
<positions> - Указываются позиции модулей доступных в шаблоне. Это список локализаций странички (top, left, right …). Позиции должны соответствовать тем, которые мы пропишем в index.php файле.
<config> - Указываются основные параметры шаблона, например – цветовая схема.
index.php
Этот файл будет состоять из комбинации HTML и PHP кода. Давайте рассмотрим важную вещь, которая необходима при создании валидного шаблона для joomla. Это тег DOCTYPE, который пишется в самом начале любой веб странички. Посмотрите на примере, как он пишется:
Первая часть показывает лицензию/копирайт, а также удостоверяется в безопасности файла для системы. Тег DOCTYPE это фундаментальный компонент каждой странички, который показывает браузеру – какие HTML теги могут использоваться, а также, как браузер должен интерпретировать CSS.
Далее идет строка XML кода:
Эта информация необходима для IE6. Это позволит меньше использовать хаков при создании шаблона.
Давайте посмотрим полную структуру шапки index.php файла:
Что это все означает?
Некоторые строки шапки шаблона мы уже разобрали. <?php echo $this->language; ?> - этот участок PHP кода, вставляет информацию о языке, которая храниться в глобальных настройках Joomla.
$app = Jfactory::getApplication(); - эта переменная позволяет получить доступ к различным параметрам, например – имя сайта, а также дает возможность использовать эти параметры при создании шаблона.
<jdoc:includetype="head" /> - подключает другую head информацию.
Этот код будет вставляться во всех автоматически сгенерированных страницах joomla сайта. Если вы устанавливаете шаблон с помощью инсталлятора, он будет иметь следующие теги:
Множество этой информации сгенерировано на лету, вы видите, что здесь подключаются RSS фиды, и другие метатеги.
Последние строки, подключают CSS файлы для страниц, давайте посмотрим как это выглядит в файле index.php:
Первые два файла (system.css, general.css) содержат стили необходимые для системы joomla. Последний – это CSS файл самого шаблона. <?php echo $this->template ?> - возвращает имя шаблона, то есть имя папки шаблона.
В шаблон могут подключаться несколько CSS файлов, например можно подключить CSS файл для IE6:
Также можно создать несколько идентичных файлов, только с разными цветовыми гамами. Подключаться они будут следующим образом:
Пожалуй, это все, что касается создания head тегов в index.php файле шаблона joomla. Перейдем к более серьезным вещам.
Создание тела (body) шаблона joomla
Для создания тела шаблона, вам необходимо использовать стандартизованные теги joomla, которые позволяют подключать различные модули:
