Пишем шаблон для Joomla c нуля. Урок 2.
- Пишем простой шаблон для joomla. Урок 1.
- Пишем шаблон для Joomla c нуля. Урок 2.
Популярность joomla неоспорима, и в то же время найти хорошие мануалы и примеры для новичков по разработке под эту CMS весьма сложно. Цель данных уроков - помочь начинающим разобраться как написать шаблон для joomla с нуля.
В прошлой статье мы создали простой шаблон для joomla, вернее даже скелет шаблона. В завершении мы установили его и стёрли все содержимое index.php, чтобы написать шаблон для joomla с нуля. Теперь можно переходить к изучению всех «фишек», которые даёт нам CMS Joomla.
Строить свои страницы мы будем по такому макету
Как видно каждая страницы разбита на логические блоки, которые мы зададим в index.php. Для начала пропишем в файле следующие строки:
<?php
defined('_JEXEC') or die();
?>
<!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
</head>
<body>
</body>
</html>
Кроме стандартного html- и php-кода здесь также присутствует тег jdoc:include, который собственно и позволяет работать с движком joomla. Строчка type="head" говорит о том, что в указаное место необходимо помещать все js-, css-файлы и meta-теги.
Тепер если посмотреть исходный код страницы, то мы увидим что-то наподобии такого:
<!DOCTYPE html>
<html>
<head>
<base href="http://joomla/" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>Home</title>
<link href="/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/templates/cucumbler/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
</script>
</head>
<body>
</body>
</html>
Теперь давайте удалим все содержимое папки css и создадим новый файл style.css внутри нее. Для подключения своего CSS в шаблоне joomla необходимо прописать:
<?php
defined('_JEXEC') or die();
$tpl_path = '/templates/'.$this->template;
$document = JFactory::getDocument();
$document->addStyleSheet($tpl_path.'/css/style.css');
?>
Перед началом создания HTML разметки шаблона, зайдите на сайт и убедитесь, что все пути к CSS прописаны правильно. Если все в порядке, то смело переходим к созданию HTML-кода. Для примера измени index.php следующим образом:
<?php
defined('_JEXEC') or die;
$tpl_path = '/templates/'.$this->template;
$document = JFactory::getDocument();
$document->addStyleSheet($tpl_path.'/css/style.css');
?><!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
</head>
<body>
<!-- Шапка сайта -->
<div id="header"></div>
<!-- Меню-->
<div id="navbar"></div>
<!-- Контент -->
<div id="content"></div>
<!-- Правая колонка -->
<div id="aside"></div>
<!-- Подвал сайта -->
<div id="footer"></div>
</body>
</html>
Если в CSS прописать следующее:
#header {
background: #ffde4a;
color: #808080;
text-align: center;
font-size: 24px;
height: 100px;
}
#navbar {
background: #c0c0c0;
color: #555;
height: 48px;
}
#content {
background: #37a42c;
color: #555;
width: 66%;
float: left;
min-height: 400px;
}
#aside {
width: 34%;
float: right;
background: #80b3ff;
color: #555;
min-height: 400px;
}
#footer {
clear: both;
width: 100%;
background: #b3925c;
color: #555;
height: 100px;
}
То наш шаблон для joomla будет выглядеть следующим образом
