FAQ Разработка шаблона "с нуля" для Joomla 2.5 / Joomla 3

Тема в разделе "Создание шаблона", создана пользователем AKopytenko, 17.02.2015.

  1. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 963
    Симпатии:
    168
    Пол:
    Мужской
    Здравствуйте, товарищи.

    Данная статья - курс молодого бойца по разработке шаблонов Joomla 2.5 / Joomla 3 "с нуля" с использованием штатных средств CMS без применения сторонних фреймворков.

    В этом пособии НЕ будут вложены файлы с исходниками, т.к. оно направлено на ОБУЧЕНИЕ разработчиков, а не на предоставление заготовок для разработки шаблонов.

    Название тестового шаблона: myTemplate.


    Шаг 1: Создаем структуру шаблона (пустые файлы)
    • myTemplate/
      • html/
        • html/modules.php
        • html/index.htm
      • images/
        • images/index.htm
      • css/
        • css/main.css
        • css/index.htm
      • scripts/
        • scripts/index.htm
      • language/
      • index.php
      • templatedetails.xml
    Папка HTML:
    Здесь содержится файл, который определяет формат вывода модулей Joomla (modules.php). Так же в эту папку помещаются папки компонентов и модулей, которые нужно кастомизировать при выводе на страницу (изменить Layout компонента/модуля по-умолчанию).

    Папка images:
    Все картинки, используемые в шаблоне.

    Папка styles:
    Все файлы стилей, используемые в шаблоне.

    Папка scripts:
    Все JavaScript-файлы, используемые в шаблоне.

    Папка language:
    Содержит языковые файлы, доступные в шаблоне. Они могут использоваться, например, для перевода текста полей для настройки шаблона через админку или при переводе описания шаблона.

    Файл index.php:
    Входной файл шаблона. Здесь содержится HTML страниц Вашего шаблона, включаемые области Joomla (JDOC)*.


    Шаг 2: Файл index.php

    Типичная структура файла:
    Код (html):
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <jdoc:include type="head" />
    5.     <link href="<?php echo $this->baseurl(); ?>/templates/<?php echo $this->template(); ?>/styles/main.css" type="text/css" rel="stylesheet" />
    6. </head>
    7. <body>
    8.  
    9. <div class="wrapper">
    10.  
    11.     <header>
    12.         <jdoc:include type="modules" name="block-1" />
    13.     </header>
    14.  
    15.     <nav role="navigator">
    16.         <jdoc:include type="modules" name="block-2" />
    17.     </nav>
    18.  
    19.     <div id="middle">
    20.  
    21.         <?php if($this->countModules("block-3")) { ?>
    22.  
    23.        <div id="col-left">
    24.            <jdoc:include type="modules" name="block-3" />
    25.        </div>
    26.        <div id="col-right">
    27.             <jdoc:include type="message" />
    28.             <main role="main">
    29.                <jdoc:include type="component" />
    30.            </main>
    31.         </div>
    32.  
    33.        <?php } else { ?>
    34.  
    35.        <main role="main">
    36.            <jdoc:include type="component" />
    37.         </main>
    38.  
    39.        <?php } ?>
    40.  
    41.     </div>
    42.  
    43.     <footer>
    44.         <jdoc:include type="modules" name="block-4" />
    45.     </footer>
    46.  
    47. </div>
    48.  
    49. </body>
    50. </html>


    jdoc:include
    Позиция для вывода динамического содержимого страницы. Отличаются в зависимости от значения атрибута type:
    • head: стили, скрипты и meta-теги и прочая инфо. области <head>
    • modules: модули (админ-панель: Расшерения - Менеджер модулей). Дополнительный атрибуты:
      • name: имя позиции вывода моделей. Не забывайте указать его в templateDetails.
      • style: стиль вывода модуля (templates/myTemplate/html/modules.php)
    • component: вывод основного содержимого, контента страницы (материалы, блоги категорий и т.п.)
    • messages: сообщения системы (ошибки, успех, предупреждения)

    $this->baseurl();
    Выводит путь до корневой директории сайта (корневая папка).

    $this->template();
    Выводит название шаблона, установленного по-умлочанию.

    $this->countModules("название_позиции");
    Определяет есть ли модуль в указанной позиции и опубликован ли он. Возвращает true, если модель есть и false, если нет.



    ШАГ 3: Файл templateDetails.xml

    Этот файл находится в корневой папке шаблона и при инсталяции предоставляет системе (CMS) информацию о его структуре:
    - информация от авторе (имя, веб-сайт, контактный e-mail...);
    - информация о лицензии, используемой при распространении шаблона в Интернет;
    - список файлы и папки входят в состав шаблона;
    - список доступных языковых файлов;
    - список полей, доступных для настройки параметров шаблона через админку;

    Типичный файл templateDetails.xml для Joomla 3:
    Код (xml):
    1. <?xml version="1.0" encoding="utf-8"?>
    2.  
    3. <!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "[URL='http://http://www.joomla.org/xml/dtd/1.6/template-install.dtd']http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
    4.  
    5. <extension version="3.1" type="template" client="site">
    6.  
    7.    <name>myTemplate</name>
    8.    <creationDate>31 November 2019</creationDate>
    9.    <author>Ivan Petrov</author>
    10.    <authorEmail>adres@pochty.ogo</authorEmail>
    11.    <authorUrl>[URL='http://http://www.pri.mer</authorUrl>']http://www.pri.mer</authorUrl>
    12.    <copyright>Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.</copyright>
    13.    <license>GNU General Public License version 2 or later; see LICENSE.txt</license>
    14.    <version>3.1.0</version>
    15.    <description>Текст описания шаблона для вывода в админке</description>
    16.  
    17.    <files>
    18.      <folder>css</folder>
    19.      <folder>html</folder>
    20.      <folder>images</folder>
    21.      <folder>scripts</folder>
    22.      <folder>language</folder>
    23.      <filename>index.php</filename>
    24.      <filename>templateDetails.xml</filename>
    25.      <filename>favicon.ico</filename>
    26.    </files>
    27.    <positions>
    28.      <position>block-1</position>
    29.      <position>block-2</position>
    30.      <position>block-3</position>
    31.      <position>block-4</position>
    32.    </positions>
    33.  
    34.    <languages folder="language">
    35.      <language tag="en-GB">en-GB/en-GB.tpl_mytemplate.ini</language>
    36.      <language tag="en-GB">en-GB/en-GB.tpl_mytemplate.sys.ini</language>
    37.    </languages>
    38.  
    39.    <config>
    40.  
    41.      <fields name="params">
    42.  
    43.        <fieldset name="advanced">
    44.  
    45.          <field name="wrapperSmall"  class="validate-numeric" type="text" default="53"
    46.           label="TPL_MYTEMPLATE_FIELD_WRAPPERSMALL_LABEL"
    47.           description="TPL_MYTEMPLATE_FIELD_WRAPPERSMALL_DESC"
    48.           filter="integer" />
    49.  
    50.          <field name="logo" type="media"
    51.           label="TPL_MYTEMPLATE_FIELD_LOGO_LABEL" description="TPL_MYTEMPLATE_FIELD_LOGO_DESC" />
    52.  
    53.          <field name="templatecolor" type="list" default="nature"
    54.           label="TPL_MYTEMPLATE_FIELD_TEMPLATECOLOR_LABEL"
    55.           description="TPL_MYTEMPLATE_FIELD_TEMPLATECOLOR_DESC"
    56.           filter="word"
    57.         >
    58.            <option value="nature">TPL_MYTEMPLATE_OPTION_NATURE</option>
    59.            <option value="personal">TPL_MYTEMPLATE_OPTION_PERSONAL</option>
    60.            <option value="red">TPL_MYTEMPLATE_OPTION_RED</option>
    61.            <option value="turq">TPL_MYTEMPLATE_OPTION_TURQ</option>
    62.            <option value="image">TPL_MYTEMPLATE_OPTION_IMAGE</option>
    63.          </field>
    64.  
    65.          <field name="backgroundcolor" type="color" default="#eee"
    66.           label="TPL_MYTEMPLATE_FIELD_HEADER_BACKGROUND_COLOR_LABEL"
    67.           description="TPL_MYTEMPLATE_FIELD_HEADER_BACKGROUND_COLOR_DESC" />
    68.  
    69.        </fieldset>
    70.  
    71.      </fields>
    72.  
    73.    </config>
    74.  
    75. </extension>


    Итак, мы создали минимальный набор для инсталяции шаблона в CMS. Запаковав файлы и папки в архив формата ZIP можно установить наш шаблон обычным методом через админку: Расширения -> Менеджер расширений -> Загрузить файл пакета.



    ШАГ 4: Стили вывода модулей (modules.php)

    Для вывода на страницу сайта меню, форм, последних новостей и т.п. в Joomla используются модули. Все модули, установленные в CMS находится в папке modules, в корневой директории CMS.

    При выводе модуля на страницу, мы можем изменять его отображения, управляя им через админку:
    • показать/скрыть заголовок;
    • добавить ID или суффикс к CSS-классу модуля;
    • включить/выключить кеширование модуля;
    • ...
    Мы можем управлять оболочкой модуля и стилем вывода его информации, указав при вставке на страницу позиции модуля атрибут style:
    Код (html):
    1. <jdoc:include type="modules" name="block-1" style="html5" />

    Стандартный системный файл с перечислением всех доступных стилей вывода модулей можно посмотреть здесь:
    Объясняя на пальцах - принцип работы такой: если функция называется modChrome_xyz - в атрибуте style блока JDOC мы указываем xyz:


    Для того, чтобы создать свой стили - нужно создать файл modules.php в папке своего шаблона:
    Пример содержания файла:
    Код (PHP):
    1. <?php
    2.  
    3. defined('_JEXEC') or die('Отказано в доступе');
    4.  
    5. function modChrome_simple($module, &$params, &$attribs) { ?>
    6.  
    7. <div<?php if($params->get('moduleclass_sfx')) { ?> class="<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>"<?php } ?>>
    8.  
    9.     <div class="spacer">
    10.         <?php if ($module->showtitle) { ?>
    11.         <div class="title">
    12.             <?php echo $module->title; ?>
    13.         </div>
    14.         <div class="content">
    15.             <?php echo $module->content; ?>
    16.         </div>
    17.         <?php } else {
    18.             echo $module->content;
    19.         }
    20.         ?>
    21.     </div>
    22.  
    23. </div>
    24.  
    25. <?php } ?>



    ПРОДОЛЖЕНИЕ СЛЕДУЕТ...

    ____________________________
    СНОСКИ:

    * включаемые области Joomla (JDOC) - служебная разметка шаблонов Joomla, обозначающая места для вставки кода модулей (type="modules") или компонентов (type="component"). Так же используется для вставки системных файлов в область страницы <head> (type="head") и вывода системных сообщений (type="message").
     
    AKopytenko, 17.02.2015
    #1
    inb нравится это.

  2. Наши спонсоры

     
< Генератор шаблонов (установочных файлов) - в помощь верстальщикам | MadeYourWeb Elastic - разработка универсального современного шаблона CMS Joomla >

Поделиться этой страницей

Загрузка...