Если Вы еще не активировали установленный шаблон, то обязательно сделайте это в менеджере шаблонов, так как дальнейшую разработку мы будем вести непосредственно на рабочем проекте. Далее содержимое файла index.html скопируем и добавим в файл index.php. После этого в пользовательской части сайта, мы увидим следующий результат.
Отображение данных свидетельствует о том, что заготовка шаблона успешно работает, при этом в данный момент не правильно подключены стили CSS, так как каталог с шаблоном располагается не в корне сайта и такая же проблема с путями изображений.
Соответственно давайте правильно пропишем пути для подключаемых элементов страницы. При этом содержимое тегов head формируется непосредственно в ядре CMS, то есть подключаемые элементы страницы, вместе с тегом title. А значит, используя специальные методы, необходимо указать какие элементы должны быть подключены.
В нашем случае подключается только один единственный файл CSS, поэтому, в начале index.php добавим следующий код.
|
1
2
3
4
|
<?php
$doc = JFactory::getDocument();
$doc->addStyleSheet(JUri::base().'templates/'.$doc->template.'/css/style.css');
?>
|
Обратите внимание, что используя класс конструктор JFactory и его статический метод getDocument(), мы получаем объект глобального класса jDocumentSite, который представляет документ – то есть формирующуюся страницу.
Далее вызываем на исполнение у данного объекта метод addStyleSheet(), который регистрирует файл стилей к подключению, путь к которому передается в качестве первого аргумента.
Статический метод base(), класса JUri возвращает базовый путь к сайту, к которому мы добавляем имя папки с шаблонами (templates), затем имя активного шаблона, которое хранится в свойстве template объекта jDocumentSite, и конечно же, указываем каталог и имя подключаемого файла.
Таким образом, мы зарегистрировали файл стилей для дальнейшего подключения, а значит, все содержимое тега head можно смело удалить и заменить следующей конструкцией:
|
1
|
<jdoc:include type="head" />
|
Тег <jdoc:include /> с набором определенный атрибутов, используется в Joomla для подключения различных элементов сайта, в данном случае на его месте будет подключено содержимое тега head, то есть зарегистрированные стили, кодировка страниц и тег title.
Аналогично давайте правильно пропишем пути к отображаемым изображениям:
|
1
|
<img src="<?php echo JUri::base();?>templates/<?php echo $doc->template;?>/images/icon1.jpg" alt="" />
|
Теперь можно перейти на сайт и посмотреть, что изменилось.
Как вы видите, теперь дизайн отображается верно, но так как мы создаем шаблон для joomla 3 с нуля, сейчас пока что весь контент статический, то есть не формируется движком Joomla, потому как прописан вручную в файле index.php шаблона, за исключением тега head, конечно. А значит давайте это исправим.
Как Вы помните, мы виртуально разделили шаблон на позиции еще на прошлом уроке. Поэтому давайте пропишем это разделение на программном уровне. То есть участки кода шаблона, соответствующие определенным позициям, в том числе и участок отображения основного контента, необходимо заменить, на рассмотренную выше конструкцию <jdoc:include />, правда с несколько иными атрибутами.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<?php
$doc = JFactory::getDocument();
$doc->addStyleSheet(JUri::base().'templates/'.$doc->template.'/css/style.css');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<jdoc:include type="head" />
</head>
<body>
<div id="main">
<div id="logoarea">
<p class="logo"><a href="#"><img src="<?php echo JUri::base();?>templates/<?php echo $doc->template;?>/images/logo.jpg" alt="" border="0" /></a></p>
<p class="logoicon"><img src="<?php echo JUri::base();?>templates/<?php echo $doc->template;?>/images/logoicon.jpg" alt="" /></p>
</div>
<div id="menuarea">
<jdoc:include type="modules" name="position-0" />
</div>
<div class="welcomearea">
<jdoc:include type="modules" name="position-1" />
</div>
<div class="bodycontainer1">
<jdoc:include type="modules" name="position-2" />
</div>
<div class="bottomcon">
<div class="bodycontainer2">
<div class="postarea">
<jdoc:include type="modules" name="position-3" />
<div class="postarea_bottom"><img src="<?php echo JUri::base();?>templates/<?php echo $doc->template;?>/images/postbg_bottom.jpg" alt="" /></div>
</div>
<div class="bottom_right_container">
<jdoc:include type="component"/>
</div>
</div>
</div>
<br class="spacer"/>
</div>
<div class="footerback">
<div class="footerarea">
<div class="footertext_area">
<jdoc:include type="modules" name="position-4" />
</div>
</div>
</div>
</body>
</html>
|
Для формирования позиции отображения контента модуля, в шаблоне, атрибуту type, конструкции <jdoc:include />, необходимо присвоить значение modules. При этом так же необходимо использовать атрибут name, в котором будет указано имя создаваемой позиции. Напомню, что имена позиций мы с Вами указывали на прошлом уроке при создании установочного файла.
Для формирования блока отображения основного контента, необходимо в атрибуте type, указать значение component.
Таким образом, пользовательская часть, теперь выглядит следующим образом:
Обратите внимание, что в шаблоне теперь отображаются материалы и модули, правда позиции модулей еще необходимо править. После настройки модулей и выбора правильных позиций, дизайн сайт немного улучшился.
Теперь необходимо переопределять макеты элементов формирующих контент, то есть модулей и компонентов. Начнем с модуля главного меню. А значит, в каталоге html создадим папку mod_menu, далее в данный каталог скопируем файл default.php, который располагается по адресу modules/mod_menu/tmpl. Вот его код:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<?php
/**
* @package Joomla.Site
* @subpackage mod_menu
*
* @copyright Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
// Note. It is important to remove spaces between elements.
?>
<?php // The menu class is deprecated. Use nav instead. ?>
<ul class="nav menu<?php echo $class_sfx;?>"<?php
$tag = '';
if ($params->get('tag_id') != null)
{
$tag = $params->get('tag_id') . '';
echo ' id="' . $tag . '"';
}
?>>
<?php
foreach ($list as $i => &$item)
{
$class = 'item-' . $item->id;
if (($item->id == $active_id) OR ($item->type == 'alias' AND $item->params->get('aliasoptions') == $active_id))
{
$class .= ' current';
}
if (in_array($item->id, $path))
{
$class .= ' active';
}
elseif ($item->type == 'alias')
{
$aliasToId = $item->params->get('aliasoptions');
if (count($path) > 0 && $aliasToId == $path[count($path) - 1])
{
$class .= ' active';
}
elseif (in_array($aliasToId, $path))
{
$class .= ' alias-parent-active';
}
}
if ($item->type == 'separator')
{
$class .= ' divider';
}
if ($item->deeper)
{
$class .= ' deeper';
}
if ($item->parent)
{
$class .= ' parent';
}
if (!empty($class))
{
$class = ' class="' . trim($class) . '"';
}
echo '<li' . $class . '>';
// Render the menu item.
switch ($item->type) :
case 'separator':
case 'url':
case 'component':
case 'heading':
require JModuleHelper::getLayoutPath('mod_menu', 'default_' . $item->type);
break;
default:
require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
break;
endswitch;
// The next item is deeper.
if ($item->deeper)
{
echo '<ul class="nav-child unstyled small">';
}
elseif ($item->shallower)
{
// The next item is shallower.
echo '</li>';
echo str_repeat('</ul></li>', $item->level_diff);
}
else
{
// The next item is on the same level.
echo '</li>';
}
}
?></ul>
|
Обратите внимание, что переменная $list хранит массив объектов пунктов меню, которые необходимо отобразить на экране. Соответственно данный макет необходимо изменить в соответствии с дизайном шаблона, следующим образом:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<?php
defined('_JEXEC') or die;
$menu = JFactory::getApplication()->getMenu();
?>
<div class="menu">
<ul>
<?php
foreach ($list as $i => &$item)
{
$current = FALSE;
if ($item->id == $menu->getActive()->id)
{
$current = TRUE;
}
echo '<li>';
if($current) {
echo "<a class='nav1active' href='".$item->flink."'>".$item->title."</a>";
}
else {
echo "<a class='nav2' href='".$item->flink."'>".$item->title."</a>";
}
echo '</li>';
}
?>
</ul>
</div>
|
При этом, используя foreach(), мы проходимся по массиву $list и на каждой итерации цикла, формируем отдельный пункт меню. Для определения активного пункта, используем метод getActive(), объекта jMenu, доступ к которому получаем из выражения $menu = JFactory::getApplication()->getMenu(). Теперь давайте посмотрим, как выглядит главное меню пользовательской части.
Как Вы видите дизайн меню, полностью соответствует шаблону.
Хотел бы подчеркнуть, что каталог html используется для переопределения макетов Joomla, то есть как правило, CMC при отображении информации на экран, пытается отыскать альтернативный макет непосредственно в данном каталоге, и если его нет, то использует стандартный макет компонента или модуля. При этом в папке html, необходимо располагать каталоги, имена которых соответствуют именам переопределяемых элементов.
Собственно на этом данный урок мы закончим и продолжим доработку в следующий раз. В любом случае Вы теперь знаете, как создать шаблон joomla 3 самостоятельно, и я бы рекомендовал Вам, не дожидаясь выхода следующей статьи попытаться самостоятельно переопределить макет очередного модуля сайта. Так же хотел бы напомнить, что подробнейшим образом тема создания собственных шаблонов раскрыта в курсе Joomla-Мастер. С нуля до премиум шаблона.