Как создать шаблон для 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, то это выглядит примерно так:
/templates/element /templates/voodoo
Заметьте, что имя папки шаблона должно в точности совпадать с именем самого шаблона – эти имена регистрозависимы и не должны содержать пробельных символов.
В папке шаблона имеется два ключевых файла:
/element/templateDetails.xml /element/index.php
Имена этих файлов и их размещение должно быть именно таким, как показано в примере. Потому что они используются ядром joomla. Первый из этих файлов – XML файл.
Он содержит метаданные в формате XML, которые необходимы для ядра Joomla. Эти данные необходимы для загрузки страницы, которая использует данный шаблон. Также здесь указываются данные об авторстве, копирайтинге, и с каких файлов состоит шаблон. Заметьте, что в имени файла буква D, должна быть заглавной!
Также этот файл необходим при распаковке и инсталлировании шаблона, когда шаблон устанавливается с администраторской стороны движка joomla.
Второй ключевой файл, это главный файл, который генерирует страницы (index.php).
Этот файл наиболее важный во всем joomla шаблоне. Он отображает сайт и сообщает joomla, где отображать необходимые компоненты и модули. Он состоит с PHP и HTML.
Хотя, все шаблоны содержат дополнительные файлы. Они также нужны (хотя и не запрашиваются ядром Joomla), смотрите их названия и размещения на примере шаблона Element.
/element/template_thumbnail.png /element/params.ini /element/css/template.css /element/images/logo.png
Давайте рассмотрим, зачем нужны эти файлы и папки.
/element/template_thumbnail.png – Скриншот шаблона (как правило сжат до 140x90). После установки шаблона, он будет отображаться как превью в joomla панели управления.
/element/params.ini – текстовый файл, который содержит переменные разных параметров шаблона.
/element/css/template.css – CSS файл шаблона. Создание папки не обязательное, но лучше ее создать, чтобы при расширении количества файлов все было на своих местах. Это даст возможность не запутаться в файлах.
/element/images/logo.png – в этой папке будут храниться все изображения, которые используются при создании joomla шаблона. Как пример вы видите, что в папке находиться изображение – логотип.
templateDetails.xml
Этот файл, как манифест шаблона, он содержит названия всех файлов и папок шаблона (компонентов). Также он содержит информацию об авторе и копирайтинге. Пример XML файла смотрите ниже:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <install version="1.6" type="template"> <name>960TemplateTutorialStep1</name> <creationDate>1/10/10</creationDate> <author>Moroz Taras</author> <authorEmail>[email protected]</authorEmail> <authorUrl>http://sitear.ru</authorUrl> <copyright>Copyright (C) Moroz Taras</copyright> <license>GPL</license> <version>1.6.0</version> <description>Example Joomla template</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>params.ini</filename> <folder>images</folder> <folder>css</folder> </files> <positions> <position>breadcrumbs</position> <position>left</position> <position>right</position> <position>top</position> <position>footer</position> <position>debug</position> </positions> <config> <fields name="params"> <fieldset name="basic"> <field name="colorVariation" type="list" default="white" label="Color Variation" description="Base Color of template"> <option value="blue">blue</option> <option value="red">red</option> </field> </fieldset> </fields> </config> </install>
Давайте разберемся, что означают строки этого кода:
<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>. Подробнее смотрите на примере:
<files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>params.ini</filename> <folder>images</folder> <folder>css</folder> </files>
Вы видите, в какой форме мы перечисляем главные компоненты при создании шаблона для joomla.
<positions> - Указываются позиции модулей доступных в шаблоне. Это список локализаций странички (top, left, right …). Позиции должны соответствовать тем, которые мы пропишем в index.php файле.
<config> - Указываются основные параметры шаблона, например – цветовая схема.
index.php
Этот файл будет состоять из комбинации HTML и PHP кода. Давайте рассмотрим важную вещь, которая необходима при создании валидного шаблона для joomla. Это тег DOCTYPE, который пишется в самом начале любой веб странички. Посмотрите на примере, как он пишется:
<?php /** * @copyrightCopyright (C) 2005 - 2010 SiteAR.ru. * @licenseGPL */ defined('_JEXEC') or die; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Первая часть показывает лицензию/копирайт, а также удостоверяется в безопасности файла для системы. Тег DOCTYPE это фундаментальный компонент каждой странички, который показывает браузеру – какие HTML теги могут использоваться, а также, как браузер должен интерпретировать CSS.
Далее идет строка XML кода:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
Эта информация необходима для IE6. Это позволит меньше использовать хаков при создании шаблона.
Давайте посмотрим полную структуру шапки index.php файла:
<?php /** * @copyrightCopyright (C) 2005 - 2010 Taras Moroz. * @licenseGPL */ defined('_JEXEC') or die; $app = JFactory::getApplication(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this- >language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> </head>
Что это все означает?
Некоторые строки шапки шаблона мы уже разобрали. <?php echo $this->language; ?> - этот участок PHP кода, вставляет информацию о языке, которая храниться в глобальных настройках Joomla.
$app = Jfactory::getApplication(); - эта переменная позволяет получить доступ к различным параметрам, например – имя сайта, а также дает возможность использовать эти параметры при создании шаблона.
<jdoc:includetype="head" /> - подключает другую head информацию.
Этот код будет вставляться во всех автоматически сгенерированных страницах joomla сайта. Если вы устанавливаете шаблон с помощью инсталлятора, он будет иметь следующие теги:
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="keywords" content="joomla, Joomla" /> <meta name="rights" content="" /> <meta name="language" content="en-GB" /> <meta name="description" content="Joomla! - the dynamic portal engine and content management system" /> <meta name="generator" content="Joomla! 1.6 - Open Source Content Management" /> <title>Home</title> <link href="/Joomla_1.6/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> <link href="/Joomla_1.6/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
Множество этой информации сгенерировано на лету, вы видите, что здесь подключаются RSS фиды, и другие метатеги.
Последние строки, подключают CSS файлы для страниц, давайте посмотрим как это выглядит в файле index.php:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
Первые два файла (system.css, general.css) содержат стили необходимые для системы joomla. Последний – это CSS файл самого шаблона. <?php echo $this->template ?> - возвращает имя шаблона, то есть имя папки шаблона.
В шаблон могут подключаться несколько CSS файлов, например можно подключить CSS файл для IE6:
<!--[if lte IE 6]> <link href="templates/<?php echo $this->template ?>/css/ieonly.css" rel="stylesheet" type="text/css" /> <![endif]-->
Также можно создать несколько идентичных файлов, только с разными цветовыми гамами. Подключаться они будут следующим образом:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params- >get('colorVariation'); ?>.css" type="text/css" /> Эти строки будут выдавать следующий код: <link rel="stylesheet" href="/templates/960TemplateTutorialStep1/css/red.css" type="text/css" />
Пожалуй, это все, что касается создания head тегов в index.php файле шаблона joomla. Перейдем к более серьезным вещам.
Создание тела (body) шаблона joomla
Для создания тела шаблона, вам необходимо использовать стандартизованные теги joomla, которые позволяют подключать различные модули:
<body> <?php echo $app->getCfg('sitename');?><br /> <jdoc:include type="modules" name="top" /> <jdoc:include type="modules" name="left" /> <jdoc:include type="modules" name="breadcrumbs" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="right" /> <jdoc:include type="modules" name="footer" /> <jdoc:include type="modules" name="debug" /> </body>
Интуитивно можно понять в каком порядке будут отображаться модули на страничке, для большей наглядности, посмотрим скриншот. Смотрите, как это выглядит:
Вам нужно знать, что вышепоказанные теги используются только при создании joomla шаблона, они специфичны.
Первая строка PHP кода, получает из конфигурационного файла необходимую информацию. В данном случае, это имя сайта. Вы также можете использовать эти куски кода подобным образом:
Название этого сайта <?php echo $mainframe->getCfg('sitename');?><br /> Email администратора: <?php echo $mainframe->getCfg('mailfrom');?><br /> Имя шаблона: <?php echo $this->template?> directory<br /> URL: <?php echo JURI::base();?>
Теги jdoc, позволяют вставлять различные части HTML кода, которые хранятся в других компонентах и модулях. Например, давайте вставим определенный компонент в шаблон: <jdoc:include type="component" />. Эта строка будет вставлять определенный модуль шаблона: <jdoc:include type="modules" name="right" />.
Продолжаем создание шаблона: пишем CSS – Шаг 2
В этом разделе, мы будем использовать чистый CSS код, который позволит нам создать трех-колоночный шаблон joomla.
Для экономии вашего времени, сначала выложу коды CSS файлов, а также полный код index.php файла. После создания этих файлов мы рассмотрим некоторые основные моменты. Если кто-то, чего-то не поймет, вы можете всегда задать вопрос в комментариях.
layout.css
.container_12 { margin-left:auto; margin-right:auto; width:960px; } .alpha { margin-left:0 !important; } .omega { margin-right:0 !important; } .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9, .grid_10,.grid_11,.grid_12,.grid_12 {display:inline; float:left; position:relative; margin-left:10px; margin-right:10px; } .container_12 .grid_1 { width:60px; } .container_12 .grid_2 { width:140px; } .container_12 .grid_3 { width:220px; } .container_12 .grid_4 { width:300px; } .container_12 .grid_5 { width:380px; } .container_12 .grid_6 { width:460px; } .container_12 .grid_7 { width:540px; } .container_12 .grid_8 { width:620px; } .container_12 .grid_9 { width:700px; } .container_12 .grid_10 { width:780px; } .container_12 .grid_11 { width:860px; } .container_12 .grid_12 { width:940px; }
typography.css
#header{ font-size:2em; } #footer{ border-top: 1px solid #999; } a{ text-decoration:none; } a:hover{ text-decoration:underline; } h1,.componentheading{ font-size:1.7em; } h2,.contentheading{ font-size:1.5em; } h3{ font-size:1.3em; } h4{ font-size:1.2em; } h5{ font-size:1.1em; } h6{ font-size:1em; font-weight:bold; } #footer,.small,.createdate,.modifydate,.mosimage_caption{ font:0.8em Arial,Helvetica,sans-serif; color:#999; } .moduletable{ margin-bottom:1em; padding:0 10px; /*padding for inside text*/ border:1px #CCC solid; } .moduletable h3{ background:#666; color:#fff; padding:0.25em 0; text-align:center; font-size:1.1em; margin:0 -10px 0.5em -10px; /*negative padding to pull h3 back out from .moduletable padding*/ ul.actions li{ float:rightright; list-style:none; border:0;} ul.actions li a img{ border:0;} .moduletablemenu{ padding:0; color: #333; margin-bottom:1em; } .moduletablemenu h3 { background:#666; color:#fff; padding:0.25em 0; text-align:center; font-size:1.1em; margin:0; border-bottom:1px solid #fff; } .moduletablemenu ul{ list-style: none; margin: 0; padding: 0; } .moduletablemenu li{ border-bottom: 1px solid #ccc; margin: 0; } .moduletablemenu li a{ display: block; padding: 3px 5px 3px 0.5em; border-left: 10px solid #333; border-right: 10px solid #9D9D9D; background-color:#666; color: #fff; text-decoration: none; } html>body .moduletablemenu li a { width: auto; } .moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited{ border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
Финальный index.php файл будет выглядеть следующим образом:
<?php /** * @copyrightCopyright (C) Taras Moroz * @licenseGPL */ defined('_JEXEC') or die; $app = JFactory::getApplication(); $leftcolgrid= "3"; $rightcolgrid = "3"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/layout.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/typography.css" type="text/css" /> <?php if ($this->countModules('left') == 0):?> <?php $leftcolgrid= "0";?> <?php endif; ?> <?php if ($this->countModules('right') == 0):?> <?php $rightcolgrid= "0";?> <?php endif; ?> </head> <body> <div id="header" class="container_12"> <?php echo $app->getCfg('sitename');?><br /> <jdoc:include type="modules" name="top" style="xhtml" /> </div> <div class="clear"></div> <div id="content" class="container_12"> <?php if($this->countModules('left')) : ?> <div id="sidebar" class="grid_<?php echo $leftcolgrid;?>"> <jdoc:include type="modules" name="left"style="xhtml"/> </div> <?php endif; ?> <div id="maincolumn" class="grid_<?php echo (12-$leftcolgrid-$rightcolgrid);?>"> <jdoc:include type="modules" name="breadcrumbs" style="xhtml" /> <jdoc:include type="component" /> </div> <?php if($this->countModules('right')) : ?> <div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>"> <jdoc:include type="modules" name="right" style="xhtml" /> </div> <?php endif; ?> </div> <div class="clear"></div> <div id="footer" class="container_12"> <jdoc:include type="modules" name="footer" style="xhtml" /> </div> <jdoc:include type="modules" name="debug" /> </body> </html>
В блоке head мы подключаем все необходимые стили CSS, а также вычисляем количество модулей в правом и левом блоке шаблона. В зависимости от количества модулей мы будем использовать нужный стиль из файла layout.css.
Также обратите внимание на интересное свойство тега jdoc, style="xhtml". Это своего образа опция модуля, или стиль использования модуля. Вы можете найти все эти опции в файле templates/system/html/modules.php. Этот стиль определяет отображение (HTML образ) модуля. Он может иметь значения: table (отображается по умолчанию), horz(горизонтальное отображение модуля), xhtml (модуль отображается в виде divблока, title модуля содержится в h3 теге), rounded (позволяет отображать модуль в блоке с закругленными углами), none (возвращает код модуля чистой строкой, без, его title).
Вот что у меня получилось:
Дальше: Где купить ссылки? - вечные, качественные и эффективные!














Development — Taras Moroz