Итак вопрос, как создать шаблон joomla 3 самостоятельно мы начали с Вами рассматривать еще в первой части данной статьи и по итогам предыдущих уроков, мы реализовали следующий вид сайта.
Область левой боковой панели, используется для отображения информации модуля под названием mod_articles_category, который отображает материалы определенной категории по заданным условиям фильтрации. Соответственно внешний вид содержимого данного модуля, формируется непосредственно в его файловой структуре, а именно (как правило) в стандартном макете default.php, который располагается по адресу — \modules\mod_articles_category\tmpl\default.php. Поэтому в разрабатываемом шаблоне необходимо переопределить вышеуказанный макет, и таким образом изменить дизайн отображаемого содержимого на экран.
Для переопределения макета модуля, необходимо в каталоге html шаблона, создать папку, имя которой совпадает с именем модуля, макет которого подлежит переопределению, и в данной папке, создать файл default.php. Или же, если сказать более правильно – создать файл, имя которого совпадает с именем переопределяемого макета, так как для одного модуля, можно создать сколько угодно макетов.
Поэтому, скопируем файл default.php, то есть макет отображения данных модуля mod_articles_category, по адресу \modules\mod_articles_category\tmpl\default.php. Затем создадим в каталоге html папку mod_articles_category и в нее добавим скопированный файл. Таким образом, мы переопредели макет и теперь можем изменить дизайн отображения содержимого модуля.
Открыв данный файл в текстовом редакторе, Вы увидите что, он содержит достаточно большой объем кода.
Так как в CMS Joomla практикуется всеобщая универсальность, в данном макете предусмотрены различные варианты отображения данных, в зависимости от состояния настроек. Но нам это не нужно, а значит, весь код данного макета мы заменим на следующий.
|
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
|
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
*
* @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;
?>
<div class="postarea_bg">
<p class="posttext"><span style="padding-left:45px;"><?php echo $module->title?></span></p>
<div class="postcontent_area">
<?php foreach ($list as $item) : ?>
<div class="postcontent">
<p style="margin-bottom:3px;"><span class="postheadtext"><?php echo $item->title; ?></span><br />
<?php if ($params->get('show_introtext')) : ?>
<?php echo $item->displayIntrotext; ?>
</p>
<?php endif; ?>
<p><a href=href="<?php echo $item->link; ?> class="more">More...</a></p>
</div>
<?php endforeach; ?>
</div>
<br class="spacer" />
</div>
|
Как Вы видите, код достаточно небольшой, но и скорее всего, не совсем понятен Вам, а значит, давайте поясню, некоторые моменты. В данном макете доступна переменная $list, которая содержит массив объектов, с информацией по выбранным материалам, которые будут отображаться на экране. Его структура следующая:
Таким образом, используя цикл foreach(), мы можем обойти данный массив и на каждой итерации, получить доступ к объекту, значения свойств которого, можно использовать для отображения необходимой информации на экран. Что собственно и сделано в макете. Обратите внимание, что свойство link, содержит путь на страницу просмотра содержимого материала, который можно использовать для создания ссылки “Читать далее”. Теперь обновив макет в браузере, мы увидим следующий результат.
То есть левая колонка, полностью завершена, а значит идем дальше.
В центральной области, отображается основной контент сайта и в нашем случае содержимое, которое формируется компонентом com_content, то есть материалы. Опять же дизайн и оформление определено непосредственно в его видах, которые также необходимо переопределить.
Виды компонентов, как правило, располагаются в каталоге views.
При этом, компонент – это достаточно сложное расширение, если сравнивать с модулями и видов, может быть несколько, как в случае с компонентом com_content. Соответственно переопределить Вы можете, как отдельный макет, так и все сразу.
Для главной страницы нас интересует вид category, так как именно он, отображает список материалов определенной категории. Напомню, что на главной страницы мы отображаем материалы некой категории в виде блога.
Если перейти в данную папку мы увидим следующее.
В каталоге tmpl располагаются макеты, которые определяют оформление при отображении информации на экран.
Как Вы видите макетов много, но если присмотреться более внимательно, мы увидим некие общие черты в именах файлов. Смотрите, в данной папке содержатся два глобальных макета blog.php и default.php, все остальные – это дочерние макеты в соответствии с префиксом в имени.
При этом, так как на главной странице отображается список материалов категории в виде блога, значит нас интересует макет blog.php и все его дочерние макеты, в имени которых присутствует приставка blog_. Поэтому скопируем данные макеты.
Далее в каталоге html шаблона, создаем папку com_content, затем в ней – каталог category, то есть, переопределяем макет отображения списка материалов категории, а далее добавляем в него, только что скопированное содержимое из каталога tmpl. Теперь откроем в текстовом редакторе главный макет blog.php и заменим его содержимое на следующий код.
|
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
|
<?php
/**
* @package Joomla.Site
* @subpackage com_content
*
* @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;
?>
<?php foreach ($this->lead_items as &$item) : ?>
<?php
$this->item = & $item;
echo $this->loadTemplate('item');
?>
<?php endforeach; ?>
<?php if (($this->params->def('show_pagination', 1) == 1 || ($this->params->get('show_pagination') == 2)) && ($this->pagination->get('pages.total') > 1)) : ?>
<div class="pagination">
<?php if ($this->params->def('show_pagination_results', 1)) : ?>
<p class="counter pull-right"> <?php echo $this->pagination->getPagesCounter(); ?> </p>
<?php endif; ?>
<?php echo $this->pagination->getPagesLinks(); ?> </div>
<?php endif; ?>
|
Теперь хотел бы отметить, что в данном макете Вы получаете доступ к объекту $this (ContentViewCategory Object), в котором содержится информация о материалах, отображаемых на главной странице. Структура данного объекта примерно следующая.
В свойстве lead_items, содержится массив объектов с материалами, которые должны отображаться во всю ширину страницы, а в свойстве intro_items – массив объектов материалов, которые могут отображаться в колонках, в соответствии с настройками. Поэтому, как Вы видите, я используя первое свойство, и зная что в нем содержится массив, используем цикл foreach() для обхода. Таким образом, на каждой итерации цикла в переменную $item, попадет объект в свойствах которого, содержатся данные по одному определенному материалу. При этом для его отображения на экран, мы задействуем дочерний макет blog_item.php, который подгружается при помощи вызова метода loadTemplate(‘item’) (в качестве первого аргумента необходимо передать имя интересующего макета, без префикса, указывающего родителя). Но так как в дочернем макете, так же открыт доступ к объекту $this, объект материала мы предварительно сохраняем в свойство item.
|
1
|
$this->item = & $item;
|
Код дочернего макета blog_item.php выглядит следующим образом.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?php
/**
* @package Joomla.Site
* @subpackage Layout
*
* @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;
?>
<p class="didyoutext"><?php echo $this->item->title;?></p>
<div class="bottom_right_content"><?php echo $this->item->introtext; ?></div>
<?php $link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language));?>
<p class="readmorearea2"><a href="<?php echo $link; ?>" class="readmore2">Read More</a></p>
|
Как Вы видите, обращаясь к свойствам объекта, хранящегося в $this->item мы отображаем необходимую информацию на экран (title — заголовок, introtext — вводный текст).
Для создания ссылки “Читать далее”, необходимо сформировать путь к странице детального просмотра информации по конкретному материалу. Для этого мы обращаемся к классу JRoute и вызываем на исполнение статический метод _(), который как раз и вернет интересующий путь, в виде ЧПУ. В качестве первого параметра при вызове данного метода, необходимо передать URL, который будет преобразован в ЧПУ. Для формирования данного URL, мы воспользуемся классом–хелпером ContentHelperRoute и вызовем его статический метод getArticleRoute(), который вернет путь к материалу определенной категории. И для его работы передаем следующие переменные:
$this->item->slug – так называемый слуг, то есть строка, состоящая из идентификатора материала и его псевдонима;
$this->item->catid – идентификатор категории материала;
$this->item->language – текущая локализация.
Таким образом, создав путь, мы формируем ссылку читать далее. В глобальном макете blog.php в самом низу расположен блок кода, который необходим для формирования элементов управления постраничной навигацией. Вот данный участок кода:
|
1
2
3
4
5
6
7
|
<?php if (($this->params->def('show_pagination', 1) == 1 || ($this->params->get('show_pagination') == 2)) && ($this->pagination->get('pages.total') > 1)) : ?>
<div class="pagination">
<?php if ($this->params->def('show_pagination_results', 1)) : ?>
<p class="counter pull-right"> <?php echo $this->pagination->getPagesCounter(); ?> </p>
<?php endif; ?>
<?php echo $this->pagination->getPagesLinks(); ?> </div>
<?php endif; ?>
|
Теперь если обновить информацию в браузере мы увидим следующее.
Как Вы видите, макет спешно отображает информацию в требуемом дизайне. Более подробно, тема создания шаблонов для CMS Joomla раскрыта в курсе Joomla-Мастер. С нуля до премиум шаблона.