Создание шаблона для Joomla 3. Часть 3

Создание шаблона для Joomla 3. Часть 3

От автора: приветствую Вас дорогой друг. В данной статье мы с Вами продолжаем говорить о том как создать шаблон для 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 практикуется всеобщая универсальность, в данном макете предусмотрены различные варианты отображения данных, в зависимости от состояния настроек. Но нам это не нужно, а значит, весь код данного макета мы заменим на следующий.

<?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 и заменим его содержимое на следующий код.

<?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.

$this->item = & $item;

Код дочернего макета blog_item.php выглядит следующим образом.

<?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 в самом низу расположен блок кода, который необходим для формирования элементов управления постраничной навигацией. Вот данный участок кода:

<?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. В данной статье, мы с Вами практически завершили работу над главной страницей данного сайта, конечно, еще есть над чем работать, но надеюсь, дальше Вы уже справитесь самостоятельно.

На этом данная статья завершена. Всего Вам доброго и удачного кодирования!!!

Хотите узнать, как создать собственный шаблон на CMS Joomla с нуля

Все очень просто!

Получите бесплатную пошаговую авторскую систему, которая научит Вас с полного нуля создавать уникальные шаблоны на движке Joomla – с неповторимым дизайном

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree