Создание шаблонов для Joomla 3.x
Шаблоны (templates) для Joomla совместимы, начиная с версии 2.5.
Шаблоны предыдущих версий Joomla имеют иную структуру и не подходят для текущих версий (3.x).
Для CMS Joomla шаблон — это один из возможных типов расширений (другие типы: модули, компоненты, плагины).
Шаблон определяет дизайн сайта, задаёт позиции в окне браузера для размещения компонентов сайта (модулей, страниц сайта).
Шаблон создаётся в виде наборов определённых папок и файлов, упаковывается в формат ZIP и затем импортируется на сайт Joomla через пранель управления сайтом.
Простой шаблон Joomla
Тестовый шаблон назовём JoomTest1 и будем создавать внутри папки с именем JoomTest1.
Внутри этой папки создаём дочерние папки с именами:
css
js
и файлы с именами:
index.php — PHP файл с кодом шаблона.
templateDetails.xml — XML файл с описанием шаблона.
В папку css поместим файл с именем JoomTest1.css — это CSS стли, которые шаблон будет использовать.
В папку js поместим файл с именем JoomTest1.js — это программки на javaScripts для нашего шаблона.
│ │ index.php │ templateDetails.xml │ ├───css │ JoomTest1.css │ ├───images │ index.html │ └───js JoomTest1.js
Содержимое файлов
templateDetails.xml
<?xml version=»1.0″ encoding=»utf-8″?>
<!DOCTYPE install PUBLIC «-//Joomla! 3.0//DTD template 1.0//EN» «http://www.joomla.org/xml/dtd/1.6/template-install.dtd»>
<extension version=»3.0″ client=»site» type=»template» method=»upgrade»>
<name>JoomTest1</name>
<creationDate>2017-07-01</creationDate>
<version>1.0</version>
<author>Admin</author>
<authorUrl>http://web-start.top</authorUrl>
<description>JoomTest1 site</description>
<files>
<folder>css </folder>
<folder>images </folder>
<folder>js </folder>
<file>index.
index.php
<?php defined(‘_JEXEC’) or die; ?>
<!DOCTYPE html>
<html>
<head>
<jdoc:include type=»head» />
<link rel=»stylesheet» href=»/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/JoomTest1.css» type=»text/css» />
<script src=»/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/JoomTest1.js» ></script>
</head>
<body>
<div>
<div>
<div>JoomTest1 site</div>
<div> <jdoc:include type=»modules» name=»position1″ /></div>
<div> <jdoc:include type=»component» /> </div>
</div>
<div><jdoc:include type=»modules» name=»position2″ /></div>
</div>
<div>© All rights reserved.
JoomTest1.css
BODY{ padding :0px; margin :0px; background-color :#efefef; } #wrapper{ width :100%; text-align :center; } #content{ display :inline-block; min-height :200px; width :1000px; background-color :#eee; border :1px solid #aaa; text-indent :20px; text-align :left; padding :20px; } #header{ width :100%; height :50px; border-bottom :1px solid #ddd; text-align :center; font-weight :bolder; font-size :2em; } #left{ float :left; width :30%; min-height :600px; background-color :#aaa; } #articles{ float :right; width :65%; min-height :600px; background-color :#eee; } #footer{ width :100%; height :50px; text-align :center; } #copy{ text-align :center; } LI{ list-style-type :circle; text-align :left; }
Более сложный шаблон
Более сложный шаблон может использовать дополнительные файлы и папки.
В этом случае они должны быть описаны в XML — файле templateDetails.xml внутри тега <files>.
Файлы с именами: template_preview.png и template_thumbnail.png содержат картинки — preview шаблона.
Шаблон может использовать языковые переменные, которые находятся в файлах с именами типа: en-GB.tpl_JoomTest2.ini (ПРЕФИКС_ЯЗЫКА.tpl_ИМЯ_ШАБЛОНА.ini). Описываются они внутри тега <language> .
Можно в шаблоне предусматривать параметры. Это переменные, которым в тексте шаблона можно задать начальные значения, а в административной панели в свойствах шаблона эти значения менять. Параметры описываются внутри тега <config>, могут быть объединены в поименованные группы. Каждая отдельная переменная-параметр описывается тегом <field>. Эти переменные можно использовать в PHP-программе.
Струтура папок шаблона
│
│ index.php
│ templateDetails.xml
│ template_preview.png
│ template_thumbnail.png
│
├───css
│ JoomTest2.
Содержимое файлов
templateDetails.xml — XML файл, описывающий шаблон
<?xml version=»1.0″ encoding=»utf-8″?>
<!DOCTYPE install PUBLIC «-//Joomla! 3.0//DTD template 1.0//EN» «http://www.joomla.org/xml/dtd/1.6/template-install.dtd»>
<extension version=»3.0″ client=»site» type=»template» method=»upgrade»>
<name>JoomTest2</name>
<creationDate>2017-07-01</creationDate>
<version>2.0</version>
<author>Admin</author>
<authorUrl>http://web-start.top</authorUrl>
<description>JoomTest2 site</description>
<files>
<folder>css </folder>
<folder>images </folder>
<folder>js </folder>
<file>index.
index.php — PHP код страницы шаблона
<?php defined(‘_JEXEC’) or die; ?>
<!DOCTYPE html>
<html>
<head>
<jdoc:include type=»head» />
<link rel=»stylesheet» href=»/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/JoomTest2.
css» type=»text/css» />
<script src=»/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/JoomTest2.js» ></script>
</head>
<body>
<div>
<div>
<div><?php echo $this->params->get( ‘siteTitle’ ) ?></div>
<div> <jdoc:include type=»modules» name=»position1″ /></div>
<div> <jdoc:include type=»component» /> </div>
</div>
<div><jdoc:include type=»modules» name=»position2″ /></div>
</div>
<div>© All rights reserved.</div>
<jdoc:include type=»modules» name=»debug» />
</body>
</html>
JoomTest2.css — CSS стили
BODY{
padding :0px;
margin :0px;
background-color:#efefef;
}
#wrapper{
width :100%;
text-align :center;
}
#content{
display :inline-block;
min-height :200px;
width :1000px;
background-color:#eee;
border :1px solid #aaa;
text-indent :20px;
text-align :left;
padding:20px;
}
#header{
width :100%;
height :50px;
border-bottom :1px solid #ddd;
text-align :center;
font-weight :bolder;
font-size :2em;
}
#left{
float :left;
width :30%;
min-height :600px;
background-color:#aaa;
}
#articles{
float :right;
width :65%;
min-height :600px;
background-color:#eee;
}
#footer{
width :100%;
height :50px;
text-align :center;
}
#copy{
text-align :center;
}
LI{
list-style-type :circle;
text-align :left;
}
en-GB.
tpl_JoomTest2.ini — описание переменых и их значений для английского языка
TPL_SITE_TITLE = «Site header» ; TPL_SITE_TITLE_DESCRIPTION = «Site header text»;
ru-RU.tpl_JoomTest2.ini
TPL_SITE_TITLE = «Заголовок сайта» ; TPL_SITE_TITLE_DESCRIPTION = «Текст заголовка сайта»;
Дополнительные пояснения
PHP код, который проверяет, установлена ли Joomla, работает ли Joomla Framework:
<?php defined(‘_JEXEC’) or die; ?>
Если шаблон использует параметры (описанные в файле templateDetails.xml XML тегом <config>), то значения этих параметров могут быть измененв через административную пенель Joomla, в свойствах шаблона. Использовать их значение в PHP программе можно так:
echo $this->params->get( ‘ИМЯ_ПАРАМЕТРА’ )
Часто в файле index.php возникает необходимость получить путь к папке шаблона:
<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>
Задание позиции в файле index.
php с именем position1 (под этим же именем она должна быть описана в XML — файле templateDetails.xml XML
тегом <positions>):
<jdoc:include type=»modules» name=»position1″ />
Или
<jdoc:include type=»module» name=»breadcrumbs» title=»Breadcrumbs» />
<jdoc:include type=»module» name=»mainmenu» title=»Main Menu» />
Задание в файле index.php позиции, которую Joomla использует для вывода материалов сайта-статей (target для меню):
<jdoc:include type=»component» />
Определение позиции для вывода системных сообщений Joomla:
<jdoc:include type=»message» />
Настраиваем разные шаблоны для разных страниц в Joomla
Не все страницы вашего сайта на Joomla могут иметь одинаковый дизайн и выглядеть одинаково. Некоторые сайты имеют радикально различные цветовые схемы и расположение основных блоков для различных разделов сайта. И Joomla позволяет вам делать это.
В этом уроке мы покажем вам, как использовать различные шаблоны или различные стили одного и того же шаблона, для различных разделов вашего сайта на Joomla.
Шаг 1: Общая информация о шаблонах в Joomla
Joomla имеет три основных шаблона предустановленных по умолчанию: Atomic, Beez5 и Beez2.
Эти три шаблона отмечены как «Site» в столбце «Location» и предназначены для публичной части сайта. Шаблоны Bluestork и Hathor помечены как «Administrator» и предназначены только для админки. Вы можете также установить другие шаблоны сторонних разработчиков или разработать или создать свой собственный шаблон.
Один из шаблонов всегда отмечен как используемый по умолчанию для внешнего сайта и один для админки. Чтобы узнать, какой из них используется по умолчанию, найдите золотую звездочку в колонке «По умолчанию», как показано на рисунке ниже:
Вы можете изменить шаблон по умолчанию в любой момент, просто нажав на одну из пустых звездочек, и тогда она станет золотой, а соответствующий шаблон используемым по умолчанию.
При первой установке Joomla по умолчанию устанавливается шаблон Beez2. Если нажать на название шаблона, вы можете редактировать настройки шаблона.
Как вы можете видеть в этом примере, этот шаблон используется по умолчанию для всех страниц и не требует установки его для каждого пункта меню..
Шаг 2. Вывод различных шаблонов на разных страницах
Давайте взглянем на настройки других шаблонов и посмотрим, как назначить его для определенной категории.
- Откройте Менеджер шаблонов
- Отметьте шаблон Beez5.
- Нажмите кнопку Изменить.
- CMS устанавливает различные шаблоны на разных страницах, основываясь исключительно на ссылках меню. Перейдите в раздел «Привязка к меню», и вы можете выбрать, для каких ссылок меню этот шаблон будет использоваться.
- Для пункта «По умолчанию» установлено значение «Нет», потому что у нас уже установлен другой шаблон по умолчанию.
- Отметьте флажок напротив нужного пункта меню.
- Сохраните эту привязку к меню, а затем проверьте ваш сайт.
- После сохранения вы увидите, что у вас есть шаблон Beez_20, установленный по умолчанию.
- А шаблон Beez5 назначен (Assigned) на отдельный пункт меню и обозначен зеленой галочкой.
Вот так главная страница выглядит с шаблоном по умолчанию — Beez2:
А вот так выглядит категория на которую назначили шаблон Beez5:
Стоит напомнить вам, что изменение шаблона не влияет на содержание. Тем не менее, это изменит заголовок, логотип, оформление и позиции модулей. Это означает, что вы не можете просто сменить шаблон, не проделав некоторую дополнительную работу.
Вам нужно будет изменить логотип для обоих шаблонов и позиции модулей в соответствии с вашей общей структурой сайта.
Шаг 3. Объяснение различных позиций модулей в разных шаблонах
Позиции модулей Beez5 (вверху) и Beez2 (ниже) почти одинаковы, так что это не вызовет больших проблем при изменении дизайна. Однако есть и различия.
Одним из наиболее очевидных различий между двумя шаблонами является позиция модулей вокруг логотипа.
В Beez5 модули position-1 и position-0 находятся ниже логотипа:
В Beez 2 модуль position-0 находится над логотипом, а position-1 — ниже:
Это довольно незначительное различие, но хороший пример того, как шаблоны могут отличаться по своим позициям модулей. В данном случае это довольно простой пример, потому что все модули имеют одинаковые имена.
Но что делать, если позиции модулей совершенно разные, в разных местах под разными именами?
- Вернитесь в Менеджер шаблонов и привяжите шаблон Atomic к другой категории.
- Вы увидите, что он имеет совершенно другие позиции модулей, их вы можете посмотреть на картинке ниже:
На этой странице имеются только следующие позиции модулей:
- atomic-topmenu
- atomic-topquote
- atomic-search
- atomic-sidebar
- atomic-bottomleft
- atomic-bottommiddle
Если вы хотите, чтобы этот шаблон был на вашем сайте, в дополнение к Beez2, то вы должны проделать больше работы.
Шаг 4. Добавляем модуль меню для нового шаблона
- Выбираем в меню Расширения > Менеджер модулей и жмем кнопку Создать.
- Выбираем Меню.
- Привязываем новый модуль к позиции atomic-sidebar.
- Новая функция в Joomla 2.5 — поле Примечание. Это поможет вам не запутаться в модулях, при большом их количестве.
- Теперь мы привязываем модуль к определенным страницам.
- Выбираем «Только на выбранных страницах».
- Устанавливаем флажок рядом с пунктом меню, который вам нужен.
- Теперь у меня меню находится в боковой панели. Вы можете видеть, что это горизонтальное меню и места для него там маловато. Мы должны попробовать найти для него лучшую позицию.
- Перейдите в Менеджер модулей и переместите меню в позицию atomic-topmenu. Теперь меню должно выглядеть как на картинке ниже:
Я привел этот пример просто для иллюстрации того, с какого рода проблемами вы можете столкнуться, когда начинаете добавление шаблонов без предварительного исследования.
Вы так же можете использовать копию имеющегося у вас шаблона в качестве темы для альтернативного раздела или страницы. Большим преимуществом является то, что все будет в одном месте, и вам нужно внести только необходимые изменения с CSS и это позволит избежать серьезных переделываний.
Шаг 5. Стили шаблона vs Различные шаблоны
Вместо того, чтобы использовать совершенно разные шаблоны для разных страниц на вашем сайте, можно просто создать различные варианты вашего шаблона по умолчанию. Это новая возможность в Joomla 2.5. Она позволяет создавать различные варианты дизайна на каждой странице без необходимости проходить все шаги, что мы изложили выше.
- Переходим в Менеджер шаблонов.
- Установите флажок рядом с шаблоном, для которого вы хотите создать копию. В данном случае мы будем использовать Beez2.
- Нажмите на иконку «Дублировать».
- Установите флажок рядом с Beez2-Default (2).
- Нажмите кнопку «Изменить».
- Beez2 поставляется с двумя цветовыми схемами, Personal и Nature. Выберите Nature из выпадающего списка.
- Привяжите шаблон к категории в секции «Привязка к меню».
- Обратите внимание, что там есть и другие опции, вы можете изменить также логотип, название сайта, и положение навигации.
- Теперь у вас есть один сайт с двумя разными стилями одного шаблона, привязанными к различным пунктам меню.
- Вы также можете привязывать шаблон при создании пунктов меню.
- Когда вы находитесь в Менеджере меню, можно установить понравившийся вариант шаблона для этого пункта меню (см. ниже).
Перевод статьи с www.ostraining.com
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
- ВКонтакте
Очень простой шаблон, который скоро станет шаблоном Joomla 3.1
Обновлено Брэдом Марклом 19 ноября 2021 г.
В следующих нескольких статьях мы планируем показать вам, как создать с нуля полнофункциональный адаптивный шаблон Joomla 3.0.
Первое, что мы сделали, это создали очень стандартный шаблон. В этом нет ничего необычного. Он имеет верхний и нижний колонтитулы, боковую панель и основную область содержимого. В этой статье мы начнем с того, что покажем вам, как выглядит этот шаблон и файлы, которые его составляют.
Как изначально выглядел наш шаблон
Итак, обо всем по порядку, вы можете увидеть справа, как выглядит наш начальный шаблон. Как мы уже говорили, это немного, но продолжайте читать и смотрите, как мы превращаем это в шаблон Joomla 3.0!
Файлы, составляющие наш шаблон
Следующие файлы составляют наш шаблон:
|-- index.php |CSS | |-- стиль.css |js | |-- main.js |изображения | |-- пустое_изображение.jpg
index.php
Первый файл, который мы рассмотрим, это наш индексный файл index.php. Он вызывает 2 других файла, файл css и файл javascript.
Сейчас это очень просто, но в нашем следующем уроке мы добавим к нему позиции модуля, используя jdoc:include.
<голова>
<тело>
<дел>
Заголовок
<дел>
<дел>
Область основного содержимого
css содержит базовый CSS, который мы используем для оформления нашего документа.
jpg.
