Пишем шаблон для Joomla c нуля. Урок 2.

21:08 23 июня 2016

Популярность joomla неоспорима, и в то же время найти хорошие мануалы и примеры для новичков по разработке под эту CMS весьма сложно. Цель данных уроков - помочь начинающим разобраться как написать шаблон для joomla с нуля.

В прошлой статье мы создали простой шаблон для joomla, вернее даже скелет шаблона. В завершении мы установили его и стёрли все содержимое index.php, чтобы написать шаблон для joomla с нуля. Теперь можно переходить к изучению всех «фишек», которые даёт нам CMS Joomla.

Строить свои страницы мы будем по такому макету

как создать шаблон для 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&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />

<link href="/index.php?format=feed&amp;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 будет выглядеть следующим образом

шаблон для joomla с нуля


Теги: joomla шаблоны CSS HTML CMS
Категория Web-мастер   |   0 комм.
Нет результатов.