WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit 
counter

Наши преимущества

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


Регистрация на сайте

Создание шаблонов для Joomla 3.x

Создание шаблонов для 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.html </file> <file>index.php </file> <file>templateDetails.xml </file> </files> <positions> <position>position1</position> <position>position2</position> <position>debug</position> </positions> </extension>

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 id="wrapper"> <div id="content"> <div id="header">JoomTest1 site</div> <div id="left"> <jdoc:include type="modules" name="position1" /></div> <div id="articles"> <jdoc:include type="component" /> </div> </div> <div id="footer"><jdoc:include type="modules" name="position2" /></div> </div> <div id="copy">&copy; All rights reserved.</div> <jdoc:include type="modules" name="debug" /> </body> </html>


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.css │ ├───images │ index.html │ ├───js │ JoomTest1.js │ └───language ├───en-GB │ en-GB.tpl_JoomTest2.ini │ en-GB.tpl_JoomTest2.sys.ini │ └───ru-RU ru-RU.tpl_JoomTest2.ini ru-RU.tpl_JoomTest2.sys.ini


Содержимое файлов

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.html </file> <file>index.php </file> <file>templateDetails.xml </file> <file>template_preview.png</file> <file>template_thumbnail.png</file> </files> <positions> <position>position1</position> <position>position2</position> <position>debug</position> </positions> <languages folder="language"> <language tag="en-GB">en-GB/en-GB.tpl_JoomTest2.ini</language> <language tag="ru-RU">ru-RU/ru-RU.tpl_JoomTest2.ini</language> </languages> <config> <fields name="params"> <fieldset name="basic"> <field name="siteTitle" type="text" size="50" label="TPL_SITE_TITLE" description="TPL_SITE_TITLE_DESCRIPTION"/> </fieldset> </fields> </config> </extension>

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 id="wrapper"> <div id="content"> <div id="header"><?php echo $this->params->get( 'siteTitle' ) ?></div> <div id="left"> <jdoc:include type="modules" name="position1" /></div> <div id="articles"> <jdoc:include type="component" /> </div> </div> <div id="footer"><jdoc:include type="modules" name="position2" /></div> </div> <div id="copy">&copy; 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" />