component.php - файл используемый Joomla для вывода материала без оформления, таких, например, как страница печати. Особо мудрить тут незачем, но для верстки попадаются разные макеты.
index.php Ну и, основной файл шаблона. Создадим простенький макет (хедер, контент, правый сайдебар, футер) и разберемся как все описанное выше подключается и работает в нашем шаблоне.
[spoiler title=создаем файл шаблона]
Я не буду углубляться в подробности верстки, моя задача объяснить основы создания шаблона для CMS Joomla на основе уже созданного файла HTML, поэтому
на онлайн-сервисе быстро генерируем макет.
Переименуем имеющийся файл index.html в index.php и поместим его в наш шаблон.
[spoiler title=чистый html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">
<strong>Header:</strong> Верхний блок сайта
</div><!-- #header-->
<div id="middle">
<div id="container">
<div id="content">
<strong>Content:</strong> Блок для отображения контента сайта
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideRight">
<strong>Right Sidebar:</strong> Правый блок
</div><!-- .sidebar#sideRight -->
</div><!-- #middle-->
</div><!-- #wrapper -->
<div id="footer">
<strong>Footer:</strong> Подвал сайта.
</div><!-- #footer -->
</body>
</html>
[/spoiler]
Файл стилей обзываем template_l.css (для отображения сайта в светлых тонах), меняем цветовую схему на темную (template_d.css) и сохраняем оба файла в папку /SITEROOT/templates/test/css. Там же создадим пустой файл template_ie.css для подключения стилей для браузеров InternetExplorer старых версий (не к ночи будут помянуты).
Вносим необходимые изменения и получаем готовый файл шаблона:
[spoiler title=index.php]
<?php
/**
* @package Joomla.Site
* @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
* Это блок комментариев и служебной информации
*/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$Itemid = JRequest::getInt( 'Itemid', 1, 'get' );
$home = JURI::current() == JURI::base();
?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('tpl_color'); ?>.css" type="text/css" />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script>
<?php
if($this->countModules('test-right') == 0) $contentwidth = "1000";
if($this->countModules('test-right')!= 0) $contentwidth = "750";
?>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo">
<?php if(!$home) : ?>
<a href="<?php echo $this->baseurl ?>">
<?php endif; ?>
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/logo.png" alt="LOGO DESCRIPTION" />
<?php if(!$home) : ?>
</a>
<?php endif; ?>
</div>
<span class="phone">
<?php echo $this->params->get('phone'); ?>
</span>
<strong>Header:</strong> Верхний блок сайта
<div class="mainmemu">
<jdoc:include type="modules" name="test-mainmenu" style="xhtml" />
</div>
</div><!-- #header-->
<div id="middle">
<div id="container">
<div id="content" style="width:<?php echo $contentwidth; ?>px">
<jdoc:include type="message" />
<br />
<strong>Content:</strong> Блок для отображения контента сайта<br />
<jdoc:include type="component" />
</div><!-- #content-->
</div><!-- #container-->
<?php if($this->countModules('test-right')) : ?>
<div class="sidebar" id="sideRight">
<strong>Right Sidebar:</strong> Правый блок
<jdoc:include type="modules" name="test-right" style="div" />
</div><!-- .sidebar#sideRight -->
<?php endif; ?>
</div><!-- #middle-->
</div><!-- #wrapper -->
<div id="footer">
<strong>Footer:</strong> Подвал сайта.
<jdoc:include type="modules" name="test-footer" style="none" />
</div><!-- #footer -->
</body>
</html>
[/spoiler]
Как видно, наш файл это комбинация кода HTML и php. Код php отображается в файле в тегах
<?php ?>.
Структура шаблона осталась неизменной, мы добавили только правки необходимые для взаимодействия с системой Joomla. Программную и служебную информацию в начала файла до тега
<head>, в сам
<head> также внесли нужные правки и, наконец, оформили
<body> для отображения элементов Joomla.
[spoiler title=СЛУЖЕБНАЯ И ПРОГРАММНАЯ ИНФОРМАЦИЯ]
Код php в самом начале файле крайне важен для корректного отображения шаблона.
В многострочном комментарии указана служебная информация, как лицензия, права владельца, версия и т.п.
defined('_JEXEC') or die; предотвращает доступ к сайту доступ к файлу не из среды Joomla. Это крайне важный параметр для безопасности сайта.
$app = JFactory::getApplication(); вызываем функцию для получения различных параметров Joomla. Что бы иметь представление об этих параметрах, полчим пока один, сделаем проверку на главную страницу и внесем полученные данные в произвольные переменные($Itemid и $home), которые в дальнешем сможем использовать в шаблоне
$Itemid = JRequest::getInt( 'Itemid', 1, 'get' ); - получаем id пункта меню открытой страницы.
[spoiler title=использование]
К примеру мы переходим на страницу по пункту меню имеющего id=44. получив в шаблоне id меню, с помощью условия на php мы сможем вывести только на этой странице определенный блок:
<?php if($Itemid == 44) : ?>
<div class="example">Lorem ipsum</div>
<?php endif; ?>
или изменить его оформление
<?php if($Itemid == 44) { ?>
<div id="example" class="page44">Lorem ipsum</div>
<?php } else { ?>
<div id="example" class="all_page">Lorem ipsum</div>
<?php } ?>
эту конструкцию можно сократить
<div id="example" class="<?php echo ($Itemid == 44)? 'page44' : 'all_page'; ?>">Lorem ipsum</div>
В виде бонуса - проверка на несколько пунктов
<?php
$ids = array("100", "200", "123", "1"); //перечисляем нужные id и собираем в массив
if (in_array($Itemid, $ids)) { //проверяем на совпадение
?>
<div class="example">Lorem ipsum</div> // показываем блок только для этих id
<?php } ?>
//исключение
if (!(in_array($Itemid, $ids)))
[/spoiler]
Более подробно об условиях в шаблоне можно прочитать в статье -
Различные условия в шаблонах Joomla 1.5$home = JURI::current() == JURI::base(); - проверка на главную страницу.
[spoiler title=использование]
В нашем шаблоне мы используем проверку, что бы логотип в шапке сайте был ссылкой на главную страницу везде, кроме самой главной:
<div class="logo">
<?php if(!$home) : ?>
<a href="<?php echo $this->baseurl ?>">
<?php endif; ?>
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/logo.png" alt="LOGO DESCRIPTION" />
<?php if(!$home) : ?>
</a>
<?php endif; ?>
</div>
- в данном виде это условие означает "не главная страница" и заключенный в него код будет отображен на всем сайте исключая Главную страницу.
[/spoiler]
Далее указываем кодировку сайта и у станавливаем тип документа через директиву
!DOCTYPE. !DOCTYPE является важным элементом сайта. Он указывает браузеру как отображать страницы.
Советую хотя бы в общих чертах охватить эту тему (подробнее о !DOCTYPE)[/spoiler]
[spoiler title=HEAD]
<jdoc:include type="head" /> Подключаем <title>, мета-теги и скрипты расширений сгенерированные в системе. Метод
jdoc:include мы будем еще неоднократно использовать в шаблоне.
файлы стилей. Стандартно файл стилей подключается следующей директивой
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/MYSTYLE.css" type="text/css" />
корень сайта
<?php echo $this->template ?> папка шаблона
но, у нас задумана смена цветового оформления, из админки шаблона.
Выше было сказано, что мы передаем параметры из админки (templateDetails.xml) в шаблон (index.php) атрибутом
name. Напомню, что смену цветы мы передаем через значение name="tpl_color". В шаблоне эти параметры получаем так
<?php echo $this->params->get('xxx'); ?>
где, ххх - значение атрибута
nameи нам осталось подставить этот код в ссылку на файл стилей
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('tpl_color'); ?>.css" type="text/css" />
еще одно использование параметров шаблона мы рассмотрим в body.
файлы стилей для IE Для InternetExplorer подключаем файл используя условный комментарий
<!--[if lte IE 8]>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/template_ie.css" type="text/css">
<![endif]-->
стили увидит IE8 и более ранние версии.
файлы скриптов Файлы JavaScript подключаем аналогично файлам стилей
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script>
[/spoiler]
[spoiler title=BODY]
Как мы уже заметили, структура сайта HTML не изменилась. Нам просто необходимо подключить в нужных местах шаблона вывод компонента определенный связанным пунктом меню, модули на своих позициях и значение параметра шаблона.
параметр шаблона<span class="phone">
<?php echo $this->params->get('phone'); ?>
</span>
<jdoc:include type="message" />
<jdoc:include type="component" />
для вывода модулей используется подключение
<jdoc:include type="modules" name="test-mainmenu" style="xhtml" />
это значение позиции модуля указанный в
templateDetails.xml в тегах
<position></position>.
style стиль макета модуля. Я вывел для примера три стиля
"xhtml" - макет с заголовком и стандартным оформлением
"none" - макет без оформления, без заголовка
"div" - макет определенный в файле /SITEROOT/templates/test/html/modules.php. В этом файле вы можете создать свое оформление для любого модуля и показать его в шаблоне указав нужный стиль.
счетчик модулейинстркцией
<?php if($this->countModules('MODULENLAME')) : ?><?php endif; ?>
мы можем проверить существует ли модуль на определенной позиции и в случае его отсутствия не показывать определенные элементы сайта:
<?php if($this->countModules('test-right')) : ?>
<div class="sidebar" id="sideRight">
<strong>Right Sidebar:</strong> Правый блок
<jdoc:include type="modules" name="test-right" style="div" />
</div><!-- .sidebar#sideRight -->
<?php endif; ?>
если в позиции
test-right нет опубликованных модулей, то блок <div class="sidebar" id="sideRight"></div> показан не будет. Но блоки имеют определенную ширину и контент не будет отображен на всю ширину сайта. Выходим из положения
в
<head> вставляем следующую конструкцию
<?php
if($this->countModules('test-right') == 0) $contentwidth = "1000";
if($this->countModules('test-right')!= 0) $contentwidth = "750";
?>
если в позиции
test-right нет опубликованных модулей, то переменная
$contentwidth принимает значение "1000", если есть "750".
осталось указать ширину блока контента. Добавим переменную в стиль для блока.
<div id="content" style="width:<?php echo $contentwidth; ?>px">
теперь этот блок имеет ширину 1000px или 750px в зависимости от присутствия или остутствия модулей на позиции
test-right соответственно.
[/spoiler]
[/spoiler]
И последнее.
4. УСТАНОВКА ШАБЛОНАЕсть два споба установки шаблона на сайт
первыйесли папка шаблона создавалась в директории сайта /SITEROOT/templates/, то установить шаблон можно в "Менеджере расширений" на закладке "Поиск".
сначала нажмите кнопку "Поиск", система обнаружит расширение. в нашем случае шаблон
test[spoiler title=изображение]
[/spoiler]
нажимаем кнопку "Установить". Если все было сделано правильно шаблон будет установлен и готов к работе.
второйСоздадим архив *.zip и установим его через стандартный установщик Joomla!
13.08.2025, 16:25:06