Руководство - создание шаблона для Joomla 2.5

0 Пользователей и 1 Гость просматривают эту тему.
  • 5 Ответов
  • 19441 Просмотров
*

dynamit

  • Практически профи
  • *******
  • 1745
  • 264
  • Winter Is Coming
Для создания собственного шаблона создадим папку с названием test. Таким будет название нашего шаблона. Создаём её в директории (далее /SITEROOT/) с установленой Joomla,   в папке /SITEROOT/templates/.
[spoiler title=/SITEROOT/][/spoiler]

1. СТРУКТУРА ШАБЛОНА.

[spoiler title= /SITEROOT/templates/test][/spoiler]

2. ПАПКИ

[css] - для файлов *.css отвечающих за стилевое оформление сайта
[hml] - для файлов переопределения макетов вывода. При обновлении движка эти файлы не изменяются.
По умолчанию мы помещаем туда файл modules.php, который поможет нам при переопределении макета модуля. Подробнее см. в описании index.php
[images] - для изображений используемых в шаблоне.
[js] - для скриптов подключаемых в шаблоне
[language] - для языковых пакетов шаблона.
[spoiler title=использование локализации]
Считается, что использование пакета не обязательно при создании шаблона, так что выбор остается за вами.
Использование языкового пакета шаблона.
Папка /SITEROOT/templates/test/language содержит подпапки для каждой локализации языкового пакета.

Рассмотрим папку [ru-RU] для русского языка (паку [en-GB] в наш шаблон включать не будем). Она содержит два файла локализации
ru-RU.tpl_test.sys.ini - системный файл названия шаблона отображаемого после установки
[spoiler title=ru-RU.tpl_test.sys.ini]
Код
; Комментарии
; или данные лецензии

TPL_TEST_XML_DESCRIPTION="Мой новый шаблон"
[/spoiler]
и
ru-RU.tpl_test.ini - файл для необходимых описаний шаблона
[spoiler title=ru-RU.tpl_test.ini]
Код
; Комментарии
; или данные лецензии

TPL_TEST_COLOR="выбирите цвет шаблона"
TPL_TEST_COLOR_DESC="Выбор основного цвета шаблона"
TPL_TEST_COLOR_OPTION_LIGHT="светлый"
TPL_TEST_COLOR_OPTION_DARK="темный"
TPL_TEST_XML_DESCRIPTION="Мой новый шаблон для Joomla 2.5"
[/spoiler]
Эти константы вы сможете увидеть далее по тексту в файле templateDetails.xml
TPL_TEST_XML_DESCRIPTION - локализация шаблона test (к примеру, для шаблона beez_20 - TPL_BEEZ_20)

[/spoiler]

ВНИМАНИЕ. Все файлы должны быть в кодировке UTF-8 без BOM. В каждой папке шаблона, включая подпапки, должен быть размещен пустой файл index.html или с кодом
Код
<!DOCTYPE html><title></title>

3. ФАЙЛЫ

templateDetails.xml - основная декларация шаблона. Описывает файлы и папки входящие в состав шаблона, и позиции управления шаблоном находящиеся в "Менеджере шаблонов"
[spoiler title=templateDetails.xml]
Код
<?xml version="1.0" encoding="utf-8"?>

<extension
version="2.5"
type="template"
client="site">
<name>test</name>
<creationDate>06/07/13</creationDate>
<author>Vasya Pupkin</author>
<authorEmail>pupkin@pupkin.pu</authorEmail>
<authorUrl>http://www.pupkin.pu</authorUrl>
<copyright>Copyright (C) 2013 Pupkin, Inc All rights reserved.</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<version>1.0</version>
 <!-- <description>Мой новый шаблон</description>  Пример без использования языкового пакета -->
<description>TPL_TEST_XML_DESCRIPTION</description>

<files>
<folder>html</folder>
<folder>css</folder>
<folder>images</folder>
<folder>language</folder>
<folder>js</folder>
<filename>index.php</filename>
<filename>index.html</filename>
<filename>favicon.ico</filename>
<filename>templateDetails.xml</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>component.php</filename>
<filename>error.php</filename>
</files>

<positions>
<position>test-mainmenu</position>
<position>test-left</position>
<position>test-right</position>
<position>test-footer</position>
</positions>

<languages folder="language">
<language tag="ru-RU">ru-RU/ru-RU.tpl_test.ini</language>
<language tag="ru-RU">ru-RU/ru-RU.tpl_test.sys.ini</language>
</languages>

     <config>
<fields name="params">
<fieldset name="advanced">
      <!-- Пример без использования языкового пакета -->
          <field name="phone" type="textarea" cols="35" rows="2" default=""
label="Телефон"
description="Телефон в шапке сайта."
filter="string" />
</fieldset>

   <fieldset  name="basic">
   <field
   name="tpl_color"
   type="list"
 default="template_l"
   label="TPL_TEST_COLOR"
 description="TPL_TEST_COLOR_DESC">
  <option
   value="template_l">TPL_TEST_COLOR_OPTION_LIGHT</option>
  <option
   value="template_d">TPL_TEST_COLOR_OPTION_DARK</option>
</field>
</fieldset>

</fields>
</config>


</extension>

[/spoiler]
[spoiler title=описание]
указываем версию XML и кодировку.

version="2.5" type="template"   client="site" устанавливаем шаблон для версии 2.5



<copyright> - информация о владельце прав на шаблон.
<license> - вид лицензии на шаблон.
<description> - описание шаблона. При использовании пакета локализации будет использовано описание из файла ru-RU.tpl_test.sys.ini

Секция <files>.
В теге <folder></folder> указываем папки, в теге <filename></filename> файлы. В отличие от версии 1.5 достаточно указать папку без описания её содержимого.

Секция <languages>.
Используется для подключения языковых пакетов.

Секция <positions>.
В тегах <position></position> последовательно указываем позиции для модулей, которые будем использовать на сайте. В дальнейшем, если понадобится добавить новую позицию, просто пишем её сюда.

Секция <config>. Параметры шаблона, которые используются в основном файле шаблона index.php. Здесь можно увидеть использование языковых констант из шаблона.
[spoiler title=описание]
 Здесь значение name должно иметь уникальное значение, так как именно его мы передаем в основной файл шаблона.
<field name="phone"> создаем текстовое поле для вывода телефона.
<field name="tpl_color"> создаем выпадающий список для изменения цветовой схемы сайта. В значении выпадающих списков (value) пишем название файлов стилей для разных цветовых схем без расширения.
  Получение и использование заданных значений мы разберем в описании для index.php.

 Более подробно о типах параметрах.
[/spoiler]
[/spoiler]

template_thumbnail.png  Превью сайта в "Менеджере шаблонов". Рекомендуемое разрешение 206х150 пикс.
template_preview.png Увеличенное изображение сайта по клике на превью в "Менеджере шаблонов". По размерам нет рекомендаций, кроме здравого смысла.
favicon.ico  значок веб-сайта

error.php шаблон страницы 404-ой ошибки. По умолчанию находится в папке /SITEROOT/templates/system. Если необходимо показать пользователю свою страницу ошибки, необходимо скопировать этот файл в свой шаблон и внести необходимые правки.
[spoiler title=оверрайд страницы ошибки]
первый способ
Можно создать стандартный материал в Joomla и показывать его для 404-ой.
удалите весь код из файла error.php и вставьте следующий код
Код
<?php
defined('JPATH_BASE') or die();
echo file_get_contents(JURI::root().'/index.php?option=com_content&view=article&id=XXX');
?>
где, XXX id созданного материала. Теперь страница ошибки будет показана пользователю как обычный материал.
второй способ
Просто работать с файлом error.php как с обычным файлом HTML, создав свое оформление.
И, собственно, можно просто отправить пользователя на главную страницу))
Код
<?php
defined('JPATH_BASE') or die();
echo file_get_contents(JURI::root().'/index.php');
?>
[/spoiler]
« Последнее редактирование: 26.11.2014, 22:57:34 от ELLE »
==================================================
  ТАМ ГДЕ ТЫ НИЧЕГО НЕ МОЖЕШЬ, ТЫ НЕ ДОЛЖЕН НИЧЕГО ХОТЕТЬ
==================================================
Сайты на Joomla!. Верстка. Консультации.  ||  Яндекс уже не ищет, он уже продает (с)  ||    Создание шаблона для Joomla 2.5

*

dynamit

  • Практически профи
  • *******
  • 1745
  • 264
  • Winter Is Coming
component.php - файл используемый Joomla для вывода материала без оформления, таких, например, как страница печати. Особо мудрить тут незачем, но для верстки попадаются разные макеты.

index.php Ну и, основной файл шаблона. Создадим простенький макет (хедер, контент, правый сайдебар, футер) и разберемся как все описанное выше подключается и работает в нашем шаблоне.
[spoiler title=создаем файл шаблона]
Я не буду углубляться в подробности верстки, моя задача объяснить основы создания шаблона для CMS Joomla на основе уже созданного файла HTML, поэтому на онлайн-сервисе быстро генерируем макет.
Переименуем имеющийся файл index.html в index.php и поместим его в наш шаблон.
[spoiler title=чистый html]
Код
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">
<strong>Header:</strong> Верхний блок сайта
</div><!-- #header-->
<div id="middle">
<div id="container">
<div id="content">
<strong>Content:</strong> Блок для отображения контента сайта
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideRight">
<strong>Right Sidebar:</strong> Правый блок
</div><!-- .sidebar#sideRight -->
</div><!-- #middle-->
</div><!-- #wrapper -->
<div id="footer">
<strong>Footer:</strong>  Подвал сайта.
</div><!-- #footer -->
</body>
</html>
[/spoiler]
Файл стилей обзываем template_l.css (для отображения сайта в светлых тонах), меняем цветовую схему на темную (template_d.css) и сохраняем оба файла в папку /SITEROOT/templates/test/css. Там же создадим пустой файл template_ie.css для подключения стилей для браузеров InternetExplorer старых версий (не к ночи будут помянуты).

Вносим необходимые изменения и получаем готовый файл шаблона:
[spoiler title=index.php]
Код
<?php
/**
 * @package Joomla.Site
 * @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license GNU General Public License version 2 or later; see LICENSE.txt
 * Это блок комментариев и служебной информации
 */

defined('_JEXEC') or die;

$app = JFactory::getApplication();
$Itemid = JRequest::getInt( 'Itemid', 1, 'get' );
$home =  JURI::current() == JURI::base();
?>

<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>

<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('tpl_color'); ?>.css" type="text/css" />

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script>

<?php
if($this->countModules('test-right') == 0) $contentwidth = "1000";
if($this->countModules('test-right')!= 0) $contentwidth = "750";
?>

</head>
<body>

  <div id="wrapper">
<div id="header">
      <div class="logo">
              <?php if(!$home) : ?>
     <a href="<?php echo $this->baseurl ?>">
      <?php endif; ?>
      <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/logo.png" alt="LOGO DESCRIPTION" />
           <?php if(!$home) : ?>
     </a>
      <?php endif; ?>
    </div>
         <span class="phone">
         <?php echo $this->params->get('phone'); ?>
         </span>
<strong>Header:</strong> Верхний блок сайта
    <div class="mainmemu">
    <jdoc:include type="modules" name="test-mainmenu" style="xhtml" />
    </div>
</div><!-- #header-->
<div id="middle">
<div id="container">
<div id="content" style="width:<?php echo $contentwidth; ?>px">
      <jdoc:include type="message" />
      <br />
<strong>Content:</strong> Блок для отображения контента сайта<br />
        <jdoc:include type="component" />
</div><!-- #content-->
</div><!-- #container-->
    <?php if($this->countModules('test-right')) : ?>
<div class="sidebar" id="sideRight">
<strong>Right Sidebar:</strong> Правый блок
      <jdoc:include type="modules" name="test-right" style="div" />
</div><!-- .sidebar#sideRight -->
    <?php endif; ?>
</div><!-- #middle-->
</div><!-- #wrapper -->
<div id="footer">
<strong>Footer:</strong>  Подвал сайта.
      <jdoc:include type="modules" name="test-footer" style="none" />
</div><!-- #footer -->

</body>
</html>
[/spoiler]
Как видно, наш файл это комбинация кода HTML и php. Код php отображается в файле в тегах <?php  ?>.
Структура шаблона осталась неизменной, мы добавили только правки необходимые для взаимодействия с системой Joomla. Программную и служебную информацию в начала файла до тега <head>, в сам <head> также внесли нужные правки и, наконец, оформили <body> для отображения элементов Joomla.

[spoiler title=СЛУЖЕБНАЯ И ПРОГРАММНАЯ ИНФОРМАЦИЯ]
Код php в самом начале файле крайне важен для корректного отображения шаблона.

В многострочном комментарии указана служебная информация, как лицензия, права владельца, версия и т.п.

defined('_JEXEC') or die; предотвращает доступ к сайту доступ к файлу не из среды Joomla. Это крайне важный параметр для безопасности сайта.

$app = JFactory::getApplication(); вызываем функцию для получения различных параметров Joomla. Что бы иметь представление об этих параметрах, полчим пока один, сделаем проверку на главную страницу и внесем полученные данные в произвольные переменные($Itemid и $home), которые в дальнешем сможем использовать в шаблоне
$Itemid = JRequest::getInt( 'Itemid', 1, 'get' ); - получаем id пункта меню открытой страницы.
[spoiler title=использование]
К примеру  мы переходим на страницу по пункту меню имеющего id=44. получив в шаблоне id меню, с помощью условия на php мы сможем вывести только на этой странице определенный блок:
Код
<?php if($Itemid == 44) : ?>
 <div class="example">Lorem ipsum</div>
<?php endif; ?>
или изменить его оформление
 
Код
<?php if($Itemid == 44) { ?>
 <div id="example" class="page44">Lorem ipsum</div>
<?php } else { ?>
 <div id="example" class="all_page">Lorem ipsum</div>
<?php } ?>
эту конструкцию можно сократить
Код
 <div id="example" class="<?php echo ($Itemid == 44)? 'page44' : 'all_page'; ?>">Lorem ipsum</div>

 В виде бонуса - проверка на несколько пунктов
Код
<?php
$ids = array("100", "200", "123", "1"); //перечисляем нужные id и собираем в массив
if (in_array($Itemid, $ids)) { //проверяем на совпадение
?>
<div class="example">Lorem ipsum</div> // показываем блок только для этих id
<?php } ?>
//исключение
if (!(in_array($Itemid, $ids)))
[/spoiler]
Более подробно об условиях в шаблоне можно прочитать в статье - Различные условия в шаблонах Joomla 1.5

$home =  JURI::current() == JURI::base(); - проверка на главную страницу.
[spoiler title=использование]
В нашем шаблоне мы используем проверку, что бы логотип в шапке сайте был ссылкой на главную страницу везде, кроме самой главной:
Код
<div class="logo">
              <?php if(!$home) : ?>
     <a href="<?php echo $this->baseurl ?>">
      <?php endif; ?>
      <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/logo.png" alt="LOGO DESCRIPTION" />
           <?php if(!$home) : ?>
     </a>
      <?php endif; ?>
    </div>
if(!$home) - в данном виде это условие означает "не главная страница" и заключенный в него код будет отображен на всем сайте исключая Главную страницу.
[/spoiler]

Далее указываем кодировку сайта и у станавливаем тип документа через директиву !DOCTYPE. !DOCTYPE является важным элементом сайта. Он указывает браузеру как отображать страницы.
Советую хотя бы в общих чертах охватить эту тему (подробнее о !DOCTYPE)[/spoiler]

[spoiler title=HEAD]

<jdoc:include type="head" />  Подключаем <title>, мета-теги и скрипты расширений сгенерированные в системе. Метод jdoc:include мы будем еще неоднократно использовать в шаблоне.

файлы стилей. Стандартно файл стилей подключается следующей директивой
 
Код
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/MYSTYLE.css" type="text/css" />
<?php echo $this->baseurl ?> корень сайта
<?php echo $this->template ?> папка шаблона
но, у нас задумана смена цветового оформления, из админки шаблона.
Выше было сказано, что мы передаем параметры из админки (templateDetails.xml) в шаблон (index.php) атрибутом name. Напомню, что смену цветы мы передаем через значение name="tpl_color". В шаблоне эти параметры получаем так
Код
<?php echo $this->params->get('xxx'); ?>
где, ххх - значение атрибута name
и нам осталось подставить этот код в ссылку на файл стилей
Код
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('tpl_color'); ?>.css" type="text/css" />
еще одно использование параметров шаблона мы рассмотрим в body.

файлы стилей для IE  Для InternetExplorer подключаем файл используя условный комментарий
 
Код
 <!--[if lte IE 8]>
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/template_ie.css" type="text/css">
 <![endif]-->
стили увидит IE8 и более ранние версии.

файлы скриптов Файлы JavaScript подключаем аналогично файлам стилей
Код
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script>
[/spoiler]

[spoiler title=BODY]
Как мы уже заметили, структура сайта HTML не изменилась. Нам просто необходимо подключить в нужных местах шаблона вывод компонента определенный связанным пунктом меню, модули на своих позициях и значение параметра шаблона.

параметр шаблона
Код
<span class="phone">
         <?php echo $this->params->get('phone'); ?>
         </span>

системные сообщения
Код
<jdoc:include type="message" />

компонент
Код
<jdoc:include type="component" />

модули
для вывода модулей используется подключение
Код
<jdoc:include type="modules" name="test-mainmenu" style="xhtml" />
name это значение позиции модуля указанный в templateDetails.xml в тегах <position></position>.
style стиль макета модуля. Я вывел для примера три стиля
"xhtml" - макет с заголовком и стандартным оформлением
"none" - макет без оформления, без заголовка
"div" - макет определенный в файле /SITEROOT/templates/test/html/modules.php. В этом файле вы можете создать свое оформление для любого модуля и показать его в шаблоне указав нужный стиль.

счетчик модулей
инстркцией
Код
 <?php if($this->countModules('MODULENLAME')) : ?><?php endif; ?>
мы можем проверить существует ли модуль на определенной позиции и в случае его отсутствия не показывать определенные элементы сайта:
Код
    <?php if($this->countModules('test-right')) : ?>
<div class="sidebar" id="sideRight">
<strong>Right Sidebar:</strong> Правый блок
      <jdoc:include type="modules" name="test-right" style="div" />
</div><!-- .sidebar#sideRight -->
    <?php endif; ?>
если в позиции test-right нет опубликованных модулей, то блок <div class="sidebar" id="sideRight"></div> показан не будет. Но блоки имеют определенную ширину и контент не будет отображен на всю ширину сайта. Выходим из положения
в <head> вставляем следующую конструкцию
Код
<?php
if($this->countModules('test-right') == 0) $contentwidth = "1000";
if($this->countModules('test-right')!= 0) $contentwidth = "750";
?>
если в позиции test-right нет опубликованных модулей, то переменная $contentwidth принимает значение "1000", если есть "750".
осталось указать ширину блока контента. Добавим переменную в стиль для блока.
Код
<div id="content" style="width:<?php echo $contentwidth; ?>px">
теперь этот блок имеет ширину 1000px или 750px в зависимости от присутствия или остутствия модулей на позиции test-right соответственно.
[/spoiler]
[/spoiler]

И последнее.
4. УСТАНОВКА ШАБЛОНА
Есть два споба установки шаблона на сайт
первый
если папка шаблона создавалась в директории сайта /SITEROOT/templates/, то установить шаблон можно в "Менеджере расширений" на закладке "Поиск".
сначала нажмите кнопку "Поиск", система обнаружит расширение. в нашем случае шаблон test
[spoiler title=изображение]

[/spoiler]
нажимаем кнопку "Установить". Если все было сделано правильно шаблон будет установлен и готов к работе.
второй
Создадим архив *.zip и установим его через стандартный установщик Joomla!
« Последнее редактирование: 15.09.2013, 12:37:14 от dynamit »
==================================================
  ТАМ ГДЕ ТЫ НИЧЕГО НЕ МОЖЕШЬ, ТЫ НЕ ДОЛЖЕН НИЧЕГО ХОТЕТЬ
==================================================
Сайты на Joomla!. Верстка. Консультации.  ||  Яндекс уже не ищет, он уже продает (с)  ||    Создание шаблона для Joomla 2.5

*

tiraz

  • Осваиваюсь на форуме
  • ***
  • 60
  • 1
  • Правильное тиражирование CD DVD
А как вывести в бэкэнд template_preview.png шаблона ?
Дизайн + Joomla

*

Girmiona

  • Новичок
  • *
  • 3
  • 0
Доброго времени суток друзья помогите, пожалуйста как на стандартном шаблоне Joomla beez_20 сделать горизонтальным.................

*

Girmiona

  • Новичок
  • *
  • 3
  • 0
меню все время выходит вертикально

*

Girmiona

  • Новичок
  • *
  • 3
  • 0
и nav и .menu_gor li {display: inline;} пробовала не получается