"Как сделать свой сайт самому". Joomla как создать шаблон

Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Важные особенности шаблонов Joomla.

Теперь, когда вы морально подготовились к созданию шаблона, прошли курсы верстки или научились cамостоятельно, не важно, будем делать ручками подобный магазин женского белья (макет не мой, но я скачал не джумловский шаблон, а простой бесплатный html-макет, поскольку нет времени и желания рисовать и верстать оформление с нуля):

У нас должен получиться работающий интернет-магазин с очень похожим дизайном. Но прежде, чем переходить к практике, проведу небольшой экскурс в теорию создания шаблонов для Жумлы. Не переживайте, букв там не настолько много, чтобы забить на этот пост и перейти к следующему. Лучше прочтите его.

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

Как и в любом сайте, сначала нам нужно определиться с его структурой. Какие будут разделы, виды менюшек, сетки страниц, и так далее. Но в этом посте я опущу эту тему и начну с главного. Первое, что нам нужно сделать — сверстать макет страниц, который мы и будем «натягивать» на джумлу в самых простых html и css-файлах.

После скачивания макета, нам необходимо обратить внимание не только на его внешний вид, но еще и на вписанные метатеги. В Джумле есть стандартный набор классов относящихся к com_content (а еще для Виртуемарта, K2 и т. д.), которые несложно поменять, но, тем не мемнее, я не вижу в этом абсолютно никакого смысла. Чтобы не «делать себе мозги» при каждом создании нового шаблона, гораздо проще и быстрее в каждый новый шаблон прописывать стандартные джумловские классы и айдишники. Это одна из особенностей верстки под джумлу. В процессе ознакомления с этой и последующими статьями, вы поймете почему и в чем их преимущества. В предоставленном макете классы и id-шники отличаются от нужным, мы будем поэтапно их переделывать.

Для того, чтобы найти эти классы и прояснить ситуацию, установите Joomla 1.7 в стандартной комплектации (напомню, в апреле 2012-го года Joomla 1.5, 1.6, 1.7 уходят на пенсию, а вместо них вступает в должность Джумла 2.5, но бояться этого не стоит, поскольку статья актуальна для версий 1.6, 1.7, 2.5 нашей любимой CMS).

Раз и навсегда нам нужно запомнить структуру файлов и папок любого джумловского шаблона:

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

В папке CSS хранятся все файлы стилей, которые будут доступны для редактирования из админки сайта. Если один из css-файлов находится за пределами папки CSS, его просто не будет видно из админки. В этом случае вам нужно будет самим выкручиваться.
favicon.ico. Его можно расположить в корне сайта и браузер сам будет находить, можно расположить в корневой папке шаблона и прописать путь к нему. Второй вариант приемлем для тех сайтов, у которых несколько шаблонов для разных страниц или возможность смены шаблона пользователем. Тогда для разных шаблонов будут показаны совершенно разные фавиконки.

Папка images, как вы поняли, содержит графические элементы шаблона — такие, как фоны, градиенты, уголки, тени (если, конечно, вы не делаете сайт на CSS3), логотип, возможно, копирайты, баннеры... Словом, все те картинки, которые не нужно постоянно менять и лучше уберечь от случайного удаления.
Самый интересный файл — index.php, в котором и прописано все-все-все оформление. По сути, это никакой не пхп. Это скорее html-файл с вкраплениями пхп-команд. Не более того. Ну, его структуру я сейчас объяснять не буду, оставлю это для практики.
js — папка с java-скриптами. Никакой особенной роли она не играет, скрипт вы можете засунуть хоть коню в жопу, главное ссылку на него поставьте, все будет работать. Здесь эта папка играет скорее эстетическую роль. Ну, и еще помогает структурировать тот бардак, который получается у начинающих верстальщиков под джумлу.
template_preview.png и template_thumbnail.png сами по себе большое и маленькое изображение сгенерированного в html внешнего вида шаблона. Другими словами скриншот сайта и миниатюра. Они имеют некоторые пороговые значения величины. Оптимальные размеры для template_preview.png — 640х390, а для template_thumbnail.png — 205х150.

И второй по важности файл — templateDetails.xml. Он имеет строгую структуру, без него не удастся установить шаблон, а если заполнить его с ошибками, можно напартачить. Из того, что нам предстоит заполнить при создании учебного шаблона: название и копирайты, файловая структура шаблона, перечень позиций для модулей. На этом в данном курсе остановимся.

Итак, подведем итоги статьи. Создать шаблон для Джумлы совсем несложно. Для этого требуется лишь знать верстку HTML-CSS и несколько важных, но простых и понятных нюансов, которые нужно учесть при разработке шаблона под нашу любимую систему управления сайтом. Продолжение следует.

Содержание курса:

Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Введение.
Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Важные особенности шаблонов Joomla.
Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Создаем шаблон и устанавливаем его.
Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Настраиваем Virtuemart.
Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Оформляем блог на K2.

Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Заключение.

joomla-show.ru

Как создать свой собственный шаблон для Joomla 2.5 и Joomla 3 — Site on!

Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

03.12.2013

Здравствуйте, дорогие читатели! Из-за моего отъезда у нас с вами получился опять долгий промежуток между выходом новых статей. Не знаю как вы, а я соскучился и потому сегодня мы рассмотрим очень важную тему, без которой, как я считаю, создать качественный сайт на Joomla просто невозможно!

Да, сегодня мы научимся создавать свои собственные шаблоны для Joomla версии 2.5 и выше. Да не просто лишь бы какие, а чтобы их потом и продавать не стыдно было! Но чтобы так громко говорить, нужно сначало хорошо потрудиться, а потому я планирую написать цикл статей по этой теме, чтобы максимально погрузить вас в данную атмосферу.

Тезисно о том, почему свой шаблон всегда лучше скачанного:

Быстрее загружается;
Не содержит скрытых ссылок и вирусов;
Авторские права принадлежат вам;
Настраивайте его так, как душе угодно, никаких ограничений!

Но взамен от вас потребуются:

Минимальные знания PHP, советую заглянуть сюда;
Хотя бы средние знания HTML и CSS;
Дочитать данную статью, и подписаться, чтобы следить за продолжением.

Совсем не знаете PHP? Ничего страшного, дочитав статью, вы сможете делать всё по аналогии.

Итак, начнём!

Где находятся шаблоны Joomla?

Существуют 2 вида шаблонов для Joomla: front-end (лицевая сторона) и back-end (административная панель). Чтобы не растягивать статью до неприличия, сегодня мы рассмотрим только front-end, то есть ту часть сайта, которая создана для пользователей (ваших клиентов), а не для администраторов.

Так вот все front-end шаблоны находятся в папке /templates/, в ней есть несколько папок, одна из которых system (её не трогаем), а все остальные папки – это и есть установленные нами (или по умолчанию) шаблоны.

С чего начать?

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

Внимание:

в названиях файлов и папок лучше всегда избегать пробелов и прочих символов кроме цифр, латинского алфавита, дефиса и символа подчёркивания.

Я всё делаю вместе с вами и назову свою папку site-on. Далее в этой папке вы можете создавать сколько угодно любых других файлов и папок. Но есть 2 обязательных файла – это index.php и templateDetails.xml

Создайте их и пока что оставьте пустыми, далее (это уже не обязательно) я советую создать вам папку images, куда мы будем складывать всю графику (картинки), из которой будет состоять наш шаблон.

Внимание:

каждая папка вашего сайта должна содержать пустой файл index.html, это приём для защиты от парсинга директорий. Кстати, на хостинге "Украина" это реализовано на уровне сервера, но всегда нужно рассчитывать только на себя, тем более не на всех хостингах будет эта опция.

Далее в англоязычной документации для разработчиков нам предлагают создать ещё отдельную папку для наших CSS файлов. С точки зрения программирования – иметь множество разных CSS файлов и подключать необходимые из них в нужные моменты – логичней, чем держать всё в одном файле.

Но те, кто читал мою статью о создании правильного SEO макета сайта, знают, что каждый HTTP запрос для подключения файлов занимает достаточное количество времени, чтобы в итоге сильно замедлить загрузку страниц вашего сайта. Поэтому на практике все выигрывают, если CSS файл будет один на весь сайт.

Поэтому мы не будем создавать отдельную папку для CSS файлов, а создадим наш файл стилей прямо в корне шаблона, заодно и путь до него будет короче :)

Назвать его можно как угодно: в стиле Джумлы положено назвать его template.css, но слово template слишком длинное, поэтому я люблю называть свои файлы в стиле WordPress - style.css

И последний нюанс, давайте создадим папку html – это зарезервированное название папки в системе шаблонов Джумла. В папку html мы будем размещать файлы альтернативных макетов той или иной части сайта. Например, альтернативный макет для категории товаров VirtueMart, или альтернативный макет меню – неважно. Подробнее об этом в следующих статьях, а сейчас главное, что вы узнали об этой папке, и увидев её в чужих шаблонах, хоть немного представите о чём речь.

Не забудьте и в неё поместить пустой index.html !

Итак, мы создали полноценную структуру шаблона для Джумла, осталось лишь наполнить бокалы файлы содержимым.

структура шаблона

Index.php – главный файл шаблона

Файл index.php шаблона загружается каждый раз, когда посетитель заходит на ваш сайт. Это фундамент макета вашего сайта, его скелет. Вот, как приблизительно должен выглядеть этот файл в начале пути:

<?php defined( '_JEXEC' ) or die; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" dir="ltr"> <head> <jdoc:include type="head" /> <link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/templates/<?php echo $this->template; ?>/style.css" type="text/css" /> </head> <body> <jdoc:include type="message" /> <jdoc:include type="component" /> </body> </html>

Первая строка – это защита от прямого обращения к файлам, более подробно об этом я писал в статье про константы в PHP. Эта строка обязательна, если не хотите, чтобы вас взломали.

2 и 3 строки – указываем тип документа для браузеров, можете изменить на свой, в данном примере тип документа XHTML 1.0, язык – русский, правописание: слева направо.

Далее идёт блок head, в 5 строке мы подключаем метод Джумлы, который выводит необходимую информацию в голове сайта (title страницы, мета-теги, css и js файлы модулей и компонентов). Эта строка обязательна!

В 6-8 строках мы подключаем стили нашего сайта, 6-7 строки – это стандартные стили Джумла (советую их подключить, хотя необязательно), а 8 строка, это созданный нами style.css

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

12 строка – это вывод основной информации страницы (текста статьи, карточки товара и тд.). Если говорить терминами джумлы, то вывод компонента для каждой страницы. Она обязательна.

Как добавить новую позицию для модуля?

Выше мы рассмотрели простейшую структуру файла index.php, вы уже можете использовать её как каркас для создания собственных шаблонов. Теперь разберёмся, как добавлять позиции для модулей, которыми так любят хвастаться производители шаблонов: "Наш шаблон содержит 69 продуманных позиций…"

Чтобы не копировать лишнего, вернёмся к блоку body:

Чего не хватает нашему макету? Я думаю шапки, пары колонок и подвала (футер, footer). Давайте создадим для них позиции модулей:

Мы создали 4 новых позиции для модулей Джумлы:

top-menu
left-column
right-column
footer

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

позиции шаблона

Но это был короткий вариант создания модуля. На самом деле в тех позициях, где вы собираетесь отображать несколько модулей один за другим, например, в правой и левой колонках сайта, будет удобно использовать «обрамление модуля» (оригинальное название: module chrome).

Обрамление (обёртка) модуля – это HTML структура, в которую будет обёрнут наш модуль при выводе в конкретной позиции. Обрамление служит для удобства стилизации при вёрстке и расширяет возможности вывода. Чтобы лучше понять, просто сравните 2 варианта вывода одного и того же модуля. Перед вами стандартный модуль меню (состоит из 2ух пунктов меню) без использования module chrome:

<ul> <li> <a href="/">Главная</a> </li> <li> <a href="/vasha-korzina">Ваша корзина</a> </li> </ul>

С использованием module chrome:

<div> <h4>Верхнее меню</h4> <ul> <li> <a href="/">Главная</a> </li> <li> <a href="/vasha-korzina">Ваша корзина</a> </li> </ul> </div>

Отличий не так уж и много, но они есть и играют свою роль, во-первых, при использовании module chrome у нас на странице появилось название, которое мы записали в административной панели для этого модуля: «Верхнее меню» (см. предыдущую картинку).

Во-вторых, весь модуль обернулся в тег div с классом moduletable_menu.

Мне известна только одна обёртка, которой все пользуются, она была представлена в примере выше и называется xhtml (это просто название, не проводите аналогий с языком разметки XHTML).

Чтобы обернуть наши модули, мы должны к тегу позиции добавить атрибут style с названием нужной обёртки (не путайте с атрибутом style в языке HTML, они не имеют ничего общего, в нашем случае - это чисто синтаксис Joomla):

<jdoc:include type="modules" name="left-column" />

Обертки, как и шаблоны, тоже можно создавать самим, но об этом в следующей статье, а теперь давайте придадим немного лоска нашему макету:

А в файл style.css напишем:

*{margin:0;padding:0;} #layout{width:990px;margin:0 auto;} #header{margin-bottom:20px;} #header ul{text-align:center;} #header ul li{list-style:none;display:inline-block;margin:0 5px;} #left,#content,#right{float:left;} #left{width:176px;} #content{width:610px;margin:0 10px;} #right{width:176px;} #footer{margin-top:20px;} #header,#left,#content,#right,#footer{border:1px solid grey;} .clear{clear:both;}

И в итоге у меня получился вот такой макет:

мой макет

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

Как убрать пустую колонку?

На скриншоте я через админ. панель добавил несколько модулей в позицию right-column и несколько модулей в позицию left-column. Но что делать, если вы хотите, например, иметь 3 колонки только на главной странице, а на всех остальных по две?

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

структура шаблона

И вот что мы получаем на всех остальных страницах:

структура шаблона

А именно: внутри правой колонки ничего нет, но сама колонка осталась, мы видим её границу и она продолжает занимать место.

Чтобы полностью убрать пустую колонку, мы можем использовать проверку на PHP. Как именно ей пользоваться, дело ваше, я покажу вам свой вариант:

<?php if (($this->countModules('right-column')==0) and ($this->countModules('left-column')==0)){ $column = 'all-hidden'; }elseif ($this->countModules('right-column')==0){ $column = 'right-hidden'; }elseif ($this->countModules('left-column')==0){ $column = 'left-hidden'; } ?> <body>

Что мы сделали? Объясняю:

if (($this->countModules('right-column')==false) and ($this->countModules('left-column')==false)){ $column = 'all-hidden'; }

Если в позициях right-column и left-column нет модулей, то в придуманную мной переменную $column заносим текст: all-hidden. Но если в одной из этих колонок есть модули, то проверяем по аналогии каждую колонку отдельно и в зависимости от того, в какой позиции нет модулей – заносим произвольный текст. Этот текст, например, all-hidden – это название класса, которое мы выводим в самой последней строчке описанного выше кода.

То есть если у нас в правой колонке нет модулей, то мы получим:

<body>

А если, например, у нас везде будут модули (и справа и слева), то получим:

<body>

Body с пустым классом.

А дальше дело за CSS:

/* скрыли обе колонки */ .all-hidden #right,.all-hidden #left{display:none;} .all-hidden #content{width:100%;} /* скрыли только правую колонку */ .right-hidden #right{display:none;} .right-hidden #content{width:786px;} /* скрыли только левую колонку */ .left-hidden #left{display:none;} .left-hidden #content{width:786px;}

Результат:

структура шаблона

Это лишь вариант, как можно было применять эту проверку:

if ($this->countModules('название позиции')==0){ … }

Где $this->countModules() – это встроенный PHP метод Джумлы, который возвращает число модулей в данной позиции.

Только что был представлен элементарный кусок PHP кода, поэтому если вы ничего не поняли – ничего страшного, просто зайдите в раздел PHP данного блога и внимательно прочитайте всё с первой статьи до статьи под названием: урок 3 (включительно). Не пугайтесь, там немного, но вам сразу станет гораздо понятней.

Настройки файла templateDetails.xml – установочный пролог

Шаблон мы создали, осталось установить.

Файл templateDetails.xml – это файл установки, без него невозможно установить созданный нами шаблон через установщик Джумлы.

В нашем случае он будет выглядеть так (и для версии 2.5 и для Joomla 3.x):

<?xml version="1.0" encoding="utf-8"?> <extension version="2.5" type="template" client="site"> <name>site-on</name> <creationDate>01.12.2013</creationDate> <author>Rud Sergey</author> <authorEmail>[email protected]</authorEmail> <authorUrl>http://site-on.net</authorUrl> <copyright>Rud Sergey 2013</copyright> <license>GNU/GPL</license> <version>1.0.0</version> <description><![CDATA[Профессиональный шаблон, созданный по инструкции блога о создании и продвижении сайтов: <a target="_blank" href="http://site-on.net/">Site on!</a>]]></description> <files> <filename>index.php</filename> <filename>index.html</filename> <filename>templateDetails.xml</filename> <filename>style.css</filename> <folder>images</folder> <folder>html</folder> </files> <positions> <position>top-menu</position> <position>left-column</position> <position>right-column</position> <position>footer</position> </positions> </extension>

В начале мы перечислили общую информацию о шаблоне, указали имя автора, описание шаблона и тд:

<name>site-on</name> <creationDate>01.12.2013</creationDate> <author>Rud Sergey</author> <authorEmail>[email protected]</authorEmail> <authorUrl>http://site-on.net</authorUrl> <copyright>Rud Sergey 2013</copyright> <license>GNU/GPL</license> <version>1.0.0</version> <description><![CDATA[Профессиональный шаблон, созданный по инструкции блога о создании и продвижении сайтов: <a target="_blank" href="http://site-on.net/">Site on!</a>]]></description>

Затем мы перечисляем все папки и файлы, которые находятся в корне нашего шаблона:

<files> <filename>index.php</filename> <filename>index.html</filename> <filename>templateDetails.xml</filename> <filename>style.css</filename> <folder>images</folder> <folder>html</folder> </files>

Если вы забудете здесь написать какой-то файл или папку, они попросту не загрузяться на сайт, но вы всегда сможете загрузить их вручную.

Внимание:

папки не должны быть пустыми! В них должен быть хотя бы 1 файл, как минимум – пустой index.html

Далее мы перечисляем названия всех позиций:

<positions> <position>top-menu</position> <position>left-column</position> <position>right-column</position> <position>footer</position> </positions>

Те позиции, которые мы забыли здесь перечислить, всё равно будут работать также хорошо, просто они не появятся в окошке выбора позиций (в настройках модуля), мы должны будем вписывать название вручную. На самом деле вручную бывает даже быстрее (чем кликать мышью), просто в таком случае вы должны знать названия позиций наизусть :)

Упаковка шаблона для инсталляции

Всё готово, осталось только создать архив с шаблоном. Поддерживаются архивы форматов: ZIP (.zip), TAR-gzip (.tar.gz) и TAR-bz2 (.tar.bz2). После создания архива, вам остаётся установить свой шаблон через стандартный установщик Джумла, так, как вы делаете с любым другим шаблоном или расширением. Прямая ссылка на скачивание шаблона из данной статьи:

Скачано 742 раз.

Давайте подведём итоги. Сегодня мы получили все необходимые знания для создания шаблонов под Joomla 2.5 и Joomla 3. Создали трёх колоночный макет сайта и научились динамически менять количество колонок.

Этого более чем достаточно, для создания качественного сайта на Joomla. Однако в следующих статьях мы продолжим изучение тонкостей создания шаблонов для Джумлы.

Всем спасибо за внимание, незабываем подписываться удобным для вас способом (почта, соц. сети, RSS). Для вас – только актуальная информация из мира веб-технологий!

Другие статьи по теме шаблонов в JoomlaПожалуйста, оцените эту статью Средняя оценка: 4.87 из 5 (проголосовало: 150)

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:Спасибо!

site-on.net

Как создать шаблон Joomla?

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

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

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

Создание шаблона Joomla

Конечно, вряд ли кто станет спорить с тем, что в процессе создания сайта его внешнему виду нужно уделить должное внимание. Разработка дизайна и его дальнейшая верстка – это крайне непростая, трудоемкая и дорогостоящая задача. Но для того, чтобы сайт мог бы создать любой человек, который не владеет навыками в области дизайна и верстки, в Joomla добавлена возможность использования разнообразных готовых шаблонов.

Таких шаблонов в интернете можно найти огромное количество. Естественно, лучшие макеты продаются за деньги. В свою очередь, бесплатные шаблоны зачастую попросту не подходят для создания качественного и большого ресурса. Несмотря на это, даже среди бесплатных вариантов можно найти вполне приемлемый шаблон. Кроме того, можно использовать и взломанные платные шаблоны, но это станет причиной разбирательств с правообладателем в дальнейшем, да вряд ли кому будет приятно с раскрученного и приносящегося доход сайта платить огромные штрафы за незаконное использование или в срочном порядке кардинально менять его внешний вид. Да и воровать, в принципе, нехорошо. Именно по этим причинам умение создавать уникальные шаблоны наверняка не станет лишним. Кроме того, многие заказчики нуждаются в неповторимом дизайне для своих сайтов или дают уже нарисованный, который необходимо превратить в цельный шаблон.

В интернете можно встретить массу руководств и уроков по созданию шаблонов, поэтому писать еще несколько смысла просто нет. Чтобы избавить вас от длительных поисков, на нашем сайте мы выложим руководство, где довольно подробно рассказывается обо всех этапах и базисах создания действительно качественного шаблона. Стоит напомнить, что для создания хорошего шаблона нужно хотя бы в какой-то степени знать CSS и HTML. Если таких знаний нет, то придется приложить упорство и терпение. Это руководство станет основной для множества дальнейший статей, поэтому нужно понимать то, что в нем написано и что имеется в виду. Если же какие-то моменты окажутся непонятными, всегда можно спросить у Гугла, тем более, что информации об этом в интернете множество.

Скачать пошаговое руководство по созданию шаблон для Joomla 1.5

joomlaz.ru

Как сделать шаблон с нуля для CMS Joomla

joomla_3 На горизонте замаячила Joomla 3.0. За разработчиками этого движка трудно угнаться, но мы попытаемся. Будем разбираться как сделать шаблон для Joomla 2.5 и 3.0 с нуля. Для тех кто смутно догадывается что такое шаблон для сайта, для начала рекомендую прочесть статью «Шаблон для Joomla сайта».

В отличии от предыдущих уроков «Разработка шаблона для сайта Joomla 1.5» и «Разработка шаблона для сайта Joomla 2.5», этой серии уроков я решила поменять тактику, и создать вместе с вами шаблон для Joomla 2.5 и 3.0 с нуля, т.е. с самого начала, чтобы вы более подробно разобрались, как создается и отрабатывается шаблон.

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

Как было сказано в предыдущей статье при создании шаблона мы будем использовать блочную верстку при помощи тегов <DIV>.

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

На прошлом уроке мы разобрались из каких блоков будет состоять шаблон trip, поэтому можно приступать к работе. Для начала создадим две папки:

images - эта папка будет содержать любые графические файлы, используемые для оформления шаблона. Т.к. у нас нет еще никаких дизайнерских наработок, то киньте в эту папку один любой графический файл, иначе Joomla не установит шаблон и будет выдавать ошибку в том случае если папка будет пустой.

ВНИМАНИЕ: В папке images шаблона не размещается графика контента!

css - эта папка будет содержать в себе файлы каскадных таблиц стилей. Для начала поместим в нее пустой файл template.css, с помощью которого будет осуществляется назначение различных стилей оформления элементам сайта.

Далее можно приступать к созданию самого главного файла index.php, который будет определять визуальное расположение элементов сайта и сообщать CMS Joomla в какой блок поместить различные компоненты и модули. Файл является комбинацией PHP и HTML.

Чтобы мы могли инсталлировать шаблон в Joomla 3 (Joomla 2.5) , необходимо создать файл templateDetails.xml. Именно он сообщает CMS , какие файлы необходимы для отображения страницы, которая использует данный шаблон.

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

На данном этапе разработки шаблона мы имеем:

Файл index.php
Папку images в которую пока, что вложен только один графический файл. Т.к. мы еще не работали над дизайном, то у нас нет еще графических файлов оформления шаблона, но папка не должна быть пустой, иначе будет выдаваться ошибка при инсталляции, поэтому киньте в папку любой графический файл.
Папку CSS с одним файлом template.css. Пока этот файл пустой и не содержит никаких стилей оформления.

Другие статьи...

likbez-net.ru