Делаем шаблон для Joomla!

 

И так, тема очень щекотливая, на мой взгляд и не менее актуальная проблема – создание шаблона для Joomla! CMS. Попробуем разобраться с самого начала и до конца, что бы всё было понятно.

По умолчанию, в скаченной версии Joomla! доступны два стандартных шаблона, к слову говоря, изрядно изъезженных и неоригинальных как корова. Список установленных шаблонов можно увидеть в "Менеджере шаблонов" (находится в админцентре самой CMS). Больше шаблонов для Joomla! вы с лёгкостью можете найти на сайтах, посвященных самой CMS, модулям и компонентам (опять же большинство низкого качества).

Сам шаблон (не обязательно шаблон Joomla) отвечает за вывод содержимого вашего сайта и его вывод. Под содержимым подразумеваются всевозможные компоненты, модули, статьи, новости и другая информация. Сам каркас шабона представляет собой файл или несколько файлов/страниц в которые «вшиты» модули. Точнее их вызов в необходимом месте. Макет для Joomla дизайнер с самого начала должен рисовать под возможность корректной вклейки. Оформлением же всего вышеперечисленного занимается css - стили вашего шаблона (файл template_css.css в папке css/).

Но нам это не подходит, ведь так? Мы хотим создать свой шаблон! Уникальный и красивый. Приступим…
Каждый шаблон имеет в своей папке файл, названный template_css.css. Этот файл должен находиться в папке ваш_сайт/templates/ваш_шаблон/css/ и он отвечает за css-стили вашего шаблона.
Структура же шаблона должна быть такой:

<em>site/templates/
|
+ - template/
|
+ - index.php
|
+ - template_thumbnail.png
|
+ - templateDetails.xml
|
+ - css/
|
+ - template_css.css
|
+ - images/</em>

В самом начале работы необходимо нарисовать дизайн нашего сайта. Лучше всего это делать в Photoshop. Как пример дизайна можно взять любой готовый шаблон Joomla!. Переделав его под свои нужды, мы получаем красивый уникальный дизайн:

Теперь переходим к нарезке макета и дальнейшей вёрстке в xHTML и CSS (мы же профессионалы?). Опять же данная тема затрагивает не эту статью, кому необходимо, вот уроки вёрстки. И так, мы его сверстали с использованием css для joomla использовав чистый css файл для Joomla (там уже всё расставлено за нас, необходимо лишь вписать свои стили каждому эллименту).

И так, свёрстанный макет готов. Теперь он представляет собой папку:

1. index.html
   
2. css/template_css.css
   
3. img/наши картинки
   

Как видите, всё привычно подготовленному глазу верстальщика. Теперь создаём в этой же папке файл templateDetails.xml. В этом XML файле мы опишем все необходимые данные и список файлов нашего шаблона. Файл должен иметь примерно такой вид:

<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template">
<name>CyberWoolfs</name>
<creationDate>june 2008</creationDate>
<author>NewFelix - Woolfs</author>
<copyright>This template is released under the GNU/GPL License</copyright>
<authorEmail>example @ email . ru</authorEmail>
<authorUrl>http://www.woolfs.ru/</authorUrl>
<version>1.0</version>
<description>CyberWoolfs Template</description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>img/10.jpg</filename>
<filename>img/11.jpg</filename>
</images>
<css>
<filename>css/template_css.css</filename>
</css>
</mosinstall>

Ну здесь всё понятно: сначала идёт «объяснение» браузеру, что мы от него хотим и что подсовываем:

<?xml version="1.0" encoding="iso-8859-1"?>

В тегах

<mosinstall type="template">
…
</mosinstall>

И станем описывать содержание нашего шаблона.

После идёт описание данных автора шаблона (указываем, конечно же, свои данные):

<name>CyberWoolfs</name>
<creationDate>june 2008</creationDate>
<author>NewFelix - Woolfs</author>
<copyright>This template is released under the GNU/GPL License</copyright>
<authorEmail>example @ email . ru</authorEmail>
<authorUrl>http://www.woolfs.ru/</authorUrl>
<version>1.0</version>
<description>CyberWoolfs Template</description>

список файлов в папке между:

<files>
…
</files>

затем список картинок нашего шаблона между тегами:

<images>
<filename>img/10.jpg</filename>
<filename>img/11.jpg</filename>
…
</images>

Как Вы понимаете, для примера мы показали только малую часть файлов в папке img/, но их стоит описать абсолютно все, что бы не было в дальнейшем проблем.

Теперь папка с шаблоном имеет вид:

index.html
css/template_css.css
img/наши картинки
templateDetails.xml

И так, и этот путь пройден. Переходим к превращению нашей статичной страницы в шаблон Joomla! Сперва сносим весь вверх страницы и вместо него вставляем вот этот код:

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';

error_reporting(0); // Это мы запрещаем вывод ошибок на страницу
// Во время отладки, стоит убрать
// но в конце обязательно поставить!

?>
<!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">

<head>
<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html <?php echo _ISO; ?>" />
<?php if ( $my->id ) { initEditor(); } ?><?php include($GLOBALS['mosConfig_absolute_path']."/templates/247shock_black_104/splitmenu.php"); ?><?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\" />" ; ?>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="alternate" title="<?php echo $mosConfig_sitename; ?>" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/index2.php?option=com_rss&no_html=1" type="application/rss+xml" />
</head>

Не очень аккуратно смотрится, но зато действует!

Картинки в шаблоне Joomla!

Переходим к немение важному действию – замене картинок в шаблоне вида:

<img scr=”img/background.jpg” alt=”” />

На вид:

<img class="top_navigation" src="<?php echo $mosConfig_live_site;?>/templates/cw/img/background.jpg" alt="" />

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

Добавление модуля в страницу

<?php mosLoadModules ( 'position_name'); ?>
// position_name" - название позиции.

Для начала необходимо вставить в нужное место главное поле, в которое будет выводиться вся информация:

<?php
mosMainBody();
?>

Приделываем поиск по сайту, голосование, панель входа пользователей, список самых популярных статей на сайте и так далее – кто на что горазд. Напомню, что 'position_name’ мы смотрим в админцентре в списке установленных модулей.

Ну вот наш шаблон готов, осталось его поместить в:

templates/название_шаблона/

И можно использовать всё с того же админцентра: «Сайт» -> «Шаблоны» -> «Шаблоны сайта».

Исправляем все неточности (а они скорее всего будут) и отлаживаем наш новенький шаблон для Joomla!. Вот и всё…

Несколько полезных ссылок по теме Joomla!

И на последок, вот несколько ссылок, которые Вам точно пригодяться, если Вы заинтересовались данной темой:

• Шаблоны Joomla