От автора: приветствую Вас дорогой друг. В данной статье мы с Вами продолжаем говорить о том как создать шаблон для Joomla 3. При этом, по сути, шаблон уже готов, то есть общий каркас будущего сайта, но что касается, отображения основного содержимого — данные элементы ни как не оформлены, а значит, давайте это исправим.
Итак вопрос, как создать шаблон 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-Мастер. С нуля до премиум шаблона.
Таким образом, теперь Вы знаете, как создать шаблон joomla. В данной статье, мы с Вами практически завершили работу над главной страницей данного сайта, конечно, еще есть над чем работать, но надеюсь, дальше Вы уже справитесь самостоятельно.
На этом данная статья завершена. Всего Вам доброго и удачного кодирования!!!