WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Наши преимущества
- Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
- Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
- Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
- Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.
Регистрация на сайте
Дополнительные материалы
- API WEB - уведомлений (Notifications)
- CSS - шрифты
- CSS3 адаптивные блоки (Flex Box Model)
- HTML5 - элемент CANVAS, рисование
- HTML5 семантические элементы
- Joomla, компонент Sourcerer
- Visual Studio Code для HTML, CSS, SASS, JavaScript
- WordPress - дочерние темы
- Вставка видео в HTML документ
- Построение многоязычных сайтов на CMS WordPress
- Создание шаблонов для Joomla 3.x
Создание шаблонов для 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">© 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">© 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" />