SiteIS

Joomla - мощная расширяемая система для разработки сайтов!

- Разработка сайтов любой сложности и функциональности.

- Огромное количество шаблонов, модулей и расширений для любых нужд

- Возможность увеличения функционала с помощью дополнительных расширений

- Настраиваемая схема расположения элементов на основном шаблоне сайта

Главная / Тимизация Joomla / Сайт-визитка - адаптируем шаблон для joomla

Сайт-визитка - адаптируем шаблон для joomla

Что бы, что называется, "въехать в тему" и не испугаться в самом начале, начнем изучение с простенького примера. Попробуем, используя CMS Joomla сделать сайт-визитку.

Делать сайт будем на локальном сервере. Поэтому, если вы еще не установили apache, php, базу данных и Joomla, то вам следует сначала сделать это самостоятельно, или ознакомиться с рядом статей:

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

Итак, у вас все готово - установлен сервер и одна из версий Joomla (какая - выбирать вам, мы рассмотрим все три варианта). Вы свободно можете войти в админ панель и запустить главную страницу в браузере. Если все так, то можем приступать к темизации.

За основу возьмем сайт-визитку, верстка которого была подробно описана в разделе этого ресурса "Верстка шаблонов". Ссылки на демо версию и исходный код расположены ниже.

Посмотреть Demo html скачать html версию сайта

Качаем исходник, распаковываем архив к себе на компьютер и приступаем к делу. Если все сделано правильно, у вас должна появиться папка synchronous_14, внутри которой будет следующая структура:

  • Папка css - в ней хранится файл стилевого оформления сайта style.css.
  • Папка images и папка images/pic - хранят графические элементы, используемые в оформлении сайта.
  • Папка js - тут находятся библиотека jQuery jquery-1.7.1.min.js и файл со скриптами my_script.js, которые применяются для динамического отображения элементов сайта.
  • Файл company.html - страница сайта "О компании".
  • Файл contact.html - страница с контактами.
  • Файл index.html - главная страница сайта.
  • Файл news.html - страница с анонсами новостей.
  • Файл PIE.htc - файл скрипта, помогающий применять технику css 3 в ИЕ 7-8.

Для инсталяционного пакета нам понадобятся папки css, images, js со всем их содержимым и файлы index.html, PIE.htc.

В директории synchronous_14 создаем папку synchronous (так будет называться наш шаблон в joomla) и копируем туда все, перечисленные выше папки и файлы. Если вы боитесь запутаться, то папку synchronous можно создавать в любом месте вашего жесткого диска. Важно, что бы вам потом было просто ее отыскать.

Далее потребуется внести изменения в существующие файлы и создать несколько новых, без которых joomla не распознает шаблон при установке. Этот процесс имеет небольшие отличия в зависимости от версии CMS, для которой делается шаблон, поэтому разделим описание в соответствии с требуемыми задачами:

  • Думаю, процесс для версии Joomla 1.5.х покажется самым трудоемким.

    Прежде всего подготовим изображение, которое будет отображаться в административной панели в менеджере шаблонов, если мы наведем мышь на название шаблона (пред осмотр). Размер изображения должен быть 206рх на 150рх.

    Заходим в папку synchronous, открываем в браузере файл index.html и делаем его скриншот. Загружаем скриншот в фотошопе и с помощью инструмента Crop Tool, с предварительно заданными размерами, получаем картинку главной страницы сайта. Готовое изображение сохраняем в корень папки synchronous с именем template_thumbnail.png.

    Далее переименовываем файл index.html в index.php

    Открываем блокнот, создаем новый файл. Прописываем в нем следующие строки:

    <html>
	<body bgcolor="#FFFFFF"></body>
</html>

    Сохраняем созданный файл в корень шаблона с именем index.html

    В папке synchronous, копируем файл index.html и вставляем в каждую папку шаблона (css, js, images, images/pic).

    В блокноте создаем новый файл и сохраняем его в корень шаблона с именем params.ini. В этот файл ничего писать не надо, просто оставляем его пустым. Он требуется joomla для сохранения параметров шаблона (если таковые будут изменяться) и должен присутствовать в инсталяционном пакете обязательно.

    В блокноте создаем новый файл и сохраняем его в корень шаблона с именем templateDetails.xml.

    Ну вот мы, наконец, подошли к самой противной работе на стадии создания инсталятора шаблона для joomla 1.5 - нам предстоит написать один из наиболее значимых и капризных файлов.

    Создаем в блокноте новый файл, сохраняем его в корне шаблона с именем templateDetails.xml и пишем следующий код:

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
	<name>synchronous</name>
	<creationDate>19.06.2013</creationDate>
	<author>gluck1966</author>
	<authorEmail>Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра.</authorEmail>
	<authorUrl></authorUrl>
	<copyright></copyright>
	<license>GNU/GPL</license>
	<version>1.0.0</version>
	<description>Шаблон сайта-визитки для Joomla 1.5</description>
	<files>
		<filename>css/style.css</filename>
		<filename>css/index.html</filename>	
		<filename>js/jquery-1.7.1.min.js</filename>
		<filename>js/my_script.js</filename>		
		<filename>js/index.html</filename>
		<filename>images/fon_body.jpg</filename>	
		<filename>images/home_pic.jpg</filename>	
		<filename>images/logo.png</filename>
		<filename>images/pagenav.png</filename>
		<filename>images/sity.png</filename>
		<filename>images/velcom.png</filename>		
		<filename>images/index.html</filename>
		<filename>images/pic/banner_1.jpg</filename>
		<filename>images/pic/banner_2.jpg</filename>	
		<filename>images/pic/map.jpg</filename>	
		<filename>images/pic/pic_1.jpg</filename>
		<filename>images/pic/pic_2.jpg</filename>
		<filename>images/pic/pic_3.jpg</filename>
		<filename>images/pic/pic_4.jpg</filename>		
		<filename>images/pic/index.html</filename>	
		<filename>index.php</filename>	
		<filename>params.ini</filename>						
		<filename>PIE.htc</filename>
		<filename>template_thumbnail.png</filename>
		<filename>templateDetails.xml</filename>
		<filename>index.html</filename>		
	</files>
	<positions>
		<position>left</position>
	</positions>
	<params>
	</params>
</install>

    Теперь коротко о том, что все эти строки значат. Первая и вторая строки - шапка xml документа (остаются неизменными для joomla 1.5 всегда).

    Далее идет парный тэг install в котором содержатся в виде атрибутов инструкции для инсталятора админки joomla.

    Между тэгов name прописываем название шаблона (такое же, как и название корневой папки).

    В тэгах creationDate указывается дата создания шаблона.

    В тэгах author прописываем имя автора.

    В тэгах authorEmail указываем emal автора.

    Тэг authorUrl содержит ссылку на сайт автора.

    В Тэгах copyright и license указывается информация о лицензии и копирайте (можно оставить не заполненными).

    Тэг version содержит инфо о версии шаблона.

    Между тэгами description пишем краткое описание, которое будет отображено в админ панели в менеджере шаблонов.

    Далее идут парные тэги files, внутри которых, между тэгами filename идет перечисление абсолютно всех файлов, содержащихся в шаблоне.

    Следующая секция positions между тэгами position содержит перечень всех позиций для модулей, предусмотренных в шаблоне. У нас пока там обозначена только одна позиция с именем left.

    И, наконец, в секции params указываются изменяемые параметры шаблона, если таковые есть. В этом шаблоне изменяемых параметров делать не будем, так что секцию можно и не прописывать.

    Подошла очередь файла index.php. Открываем его в блокноте. В самом верху вставляем следующие стороки.

    <?php 
	defined( '_JEXEC' ) or die( 'Restricted access' ); 
?>

    Этой конструкцией мы запрещаем обращаться к файлу напрямую (в целях безопасности).

    В атрибуте lang тэга html параметр ru меняем на следующую php конструкцию <?php echo $this->language; ?>:

    // было
<!DOCTYPE html>
<html lang="ru">	
// стало
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">

    Далее, строки <meta charset="utf8"> и <title>Главная</title> заменяем на строку <jdoc:include type="head" >. Мета данные будут формироваться CMS динамически.

    // было
<meta charset="utf8">
<title>Главная</title>				
// стало
<jdoc:include type="head" >

    И последнее. что необходимо сделать на подготовке шаблона к инсталляции, указать путь к фалам со скриптами, изображениям и стилевым файлам. Делается это с помощью следующей конструкции <?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>

    // было
<link rel="stylesheet" href="/css/style.css" media="screen" />
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>		
<script type="text/javascript" src="/js/my_script.js"></script>	
// стало
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/style.css" media="screen" />
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/jquery-1.7.1.min.js"></script>		
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/my_script.js"></script>

    Те же действия потребуется повторить и с путями к изображениям, которые встречаются в коде файла index.php.

    // было
<img alt="banner" src="/images/pic/banner_1.jpg" />
// стало
<img alt="banner" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/images/pic/banner_1.jpg" />

    Шаблон готов к установке через инсталятор CMS.

    Упаковываем содержимое папки synchronous в zip архив с таким же именем, как и родительская категория (т.е. synchronous.zip).

    Заходим в админ панель joomla, в верхнем меню выбираем Расширения - Установить/Удалить. В открывшемся окне жмем на кнопку Обзор, выберем только что созданный архив (synchronous.zip) и кликаем по кнопке Загрузить файл & установить. Через небольшой промежуток времени появляется сообщение об успешной установке.

    Если появилось сообщение типа Не найден XML-файл установки Joomla!, то первое, что требуется проверить, это корректность заполнения файла templateDetails.xml. При малейшей ошибке (пропущена скобка, файл не в той кодировке и т.д.) чтение файла прекращается и на экран выводится сообщение об ошибке. Самый простой способ - открыть templateDetails.xml в каком нибудь из браузеров - если в нем содержится ошибка, то браузер любезно об этом сообщит.

    Ну и последнее, что потребуется сделать - активировать установленный шаблон.

    В верхнем меню админ панели выбираем Расширения - Менеджер шаблонов, в открывшемся окне ищем в списке название своего шаблона, отмечаем радио кнопку напротив его и кликаем по кнопке со звездочкой (По умолчанию) в верхнем правом углу экрана.

    Теперь можно перезагрузить главную страницу сайта в браузере и полюбоваться на дело рук своих.

  • Приятная новость заключается в том, что адаптируются шаблоны под joomla 3 и 2.5 абсолютно одинаково (описанные ниже рекомендации позволят установить этот шаблон как на версию joomla 2.5.x, так и на версию joomla 3.1.x).

    Однако не стоит забывать, что версия 3 на данный момент находится в разработке и в дальнейшем все может измениться (т.е. описанный ниже способ к моменту выхода joomla 3.5.x может стать не актуальным).

    Так же, как и в случае с шаблоном под версию joomla 1.5.x, подготовим изображения, которые будут отображаться в административной панели в менеджере шаблонов. Для данной версии их понадобится два - одно размером 206рх на 150рх (его нужно сохранить в корне шаблона с именем template_thumbnail.png), второе размером 640рх на 384рх (сохраняем тоже в корне шаблона, но уже с именем template_preview.png).

    В корне шаблона находим и переименовываем файл index.html в index.php

    Открываем блокнот, создаем новый файл. Прописываем в нем следующие строки:

    <html>
	<body bgcolor="#FFFFFF"></body>
</html>

    Сохраняем созданный файл в корень шаблона с именем index.html

    Копируем только что созданный файл index.html и вставляем в каждую папку шаблона (css, js, images, images/pic).

    Создаем в блокноте новый файл, сохраняем его в корне шаблона с именем templateDetails.xml и пишем следующий код:

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd>
<extension version="2.5" type="template" client="site">
	<name>synchronous</name>
	<creationDate>19.06.2013</creationDate>
	<author>gluck1966</author>
	<authorEmail>Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра.</authorEmail>
	<authorUrl></authorUrl>
	<copyright></copyright>
	<license>GNU/GPL</license>
	<version>1.0.0</version>
	<description>Шаблон сайта-визитки для Joomla 2.5</description>
	<files>
		<folder>css</folder>
		<folder>js</folder>
		<folder>images</folder>
		<filename>index.php</filename>
		<filename>PIE.htc</filename>
		<filename>template_thumbnail.png</filename>
		<filename>template_preview.png</filename>						
		<filename>templateDetails.xml</filename>
		<filename>index.html</filename>		
	</files>
	<positions>
		<position>left</position>
	</positions>
</extension>

    Если вы ранее создавали этот файл для joomla 1.5, то, скорее всего, заметите, что теперь не требуется перечислять все файлы шаблона, если они содержаться во вложенной папке. Достаточно указать название папки в специальных тэгах. Так же не требуется создавать файл params.ini.

    Теперь коротко о том, что все эти строки значат. Первая и вторая строки - шапка xml документа (остаются неизменными для joomla 2.5 всегда).

    Далее идет парный тэг extension (для joomla 1.5 это был тэг install) в котором в виде атрибутов содержатся инструкции для инсталятора админки joomla.

    Между тэгов name прописываем название шаблона (такое же, как и название корневой папки).

    В тэгах creationDate указывается дата создания шаблона.

    В тэгах author прописываем имя автора.

    В тэгах authorEmail указываем emal автора.

    Тэг authorUrl содержит ссылку на сайт автора.

    В Тэгах copyright и license указывается информация о лицензии и копирайте (можно оставить не заполненными).

    Тэг version содержит инфо о версии шаблона.

    Между тэгами description пишем краткое описание, которое будет отображено в админ панели в менеджере шаблонов.

    Далее идут парные тэги files, внутри которых, между тэгами folder перечисляются папки шаблона лежащие в корневой папке (при этом вложенные папки - images/pic, прописывать не нужно), а между тэгами filename идет перечисление абсолютно всех файлов, содержащихся в корне шаблона.

    Следующая секция positions между тэгами position содержит перечень всех позиций для модулей, предусмотренных в шаблоне. У нас пока там обозначена только одна позиция с именем left.

    Cекцию params, в которой указываются изменяемые параметры шаблона, если таковые есть, мы пока трогать не будем.

    Проверяем, файл на наличие ошибок (запускаем его в браузере - если файл открылся, то все сделано правильно) и переходим к редактированию файла index.php. Открываем его в блокноте. В самом верху вставляем следующие строки.

    <?php 
	defined( '_JEXEC' ) or die; 
?>

    Этой конструкцией мы запрещаем обращение к файлу напрямую (в целях безопасности).

    В атрибуте lang тэга html параметр ru меняем на следующую php конструкцию <?php echo $this->language; ?>:

    // было
<!DOCTYPE html>
<html lang="ru">	
// стало
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">

    Далее, строки <meta charset="utf8"> и <title>Главная</title> заменяем на строку <jdoc:include type="head" >. Мета данные будут формироваться CMS динамически.

    // было
<meta charset="utf8">
<title>Главная</title>				
// стало
<jdoc:include type="head" >

    И последнее. что необходимо сделать на подготовке шаблона к инсталляции, указать путь к фалам со скриптами, изображениям и стилевым файлам. Делается это с помощью следующей конструкции <?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>

    // было
<link rel="stylesheet" href="/css/style.css" media="screen" />
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>		
<script type="text/javascript" src="/js/my_script.js"></script>	
// стало
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/style.css" media="screen" />
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/jquery-1.7.1.min.js"></script>		
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/my_script.js"></script>

    Те же действия потребуется повторить и с путями к изображениям, которые встречаются в коде файла index.php.

    // было
<img alt="banner" src="/images/pic/banner_1.jpg" />
// стало
<img alt="banner" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/images/pic/banner_1.jpg" />

    Шаблон готов к установке через инсталятор CMS.

    Упаковываем содержимое папки synchronous в zip архив с таким же именем, как и родительская категория (т.е. synchronous.zip).

    Заходим в админ панель joomla 2.5, в верхнем меню выбираем Расширения - Менеджер расширений. В открывшемся окне жмем на кнопку Обзор, выбираем только что созданный архив (synchronous.zip) и кликаем по кнопке Загрузить и установить. Через небольшой промежуток времени появляется сообщение об успешной установке.

    Ну и последнее, что потребуется сделать - активировать установленный шаблон.

    В верхнем меню админ панели выбираем Расширения - Менеджер шаблонов, в открывшемся окне ищем в списке название своего шаблона (вкладка "Стили должна быть активна по умолчанию), отмечаем checkbox напротив его и кликаем по кнопке со звездочкой (Использовать по умолчанию) в верхнем правом углу экрана. Либо же просто кликаем по звездочке в колонке По умолчанию справа от названия шаблона (она должна изменить цвет на желтый).

    Теперь можно перезагрузить главную страницу сайта в браузере - шаблон отобразится во всей своей красе.

Если что то не получилось, то можно скачать архив с инсталляционными пакетами для всех версий joomla по ссылке ниже и посмотреть, что же сделано не так.

Скачать готовый код

На этом работы еще не закончены, но оставшиеся манипуляции (с моей точки зрения) удобнее будет делать, если шаблон уже установлен на CMS. В следующей статье поговорим об этом.