Наверх

Загрузка постов


CodeMatrix

A+ R A-

Как создать свой Joomla шаблон - 1.

Очень часто я сталкиваюсь с вопросом "Как самостоятельно создать Joomla шаблон" и уже давно хотела написать большую статью на эту тему. Наконец у меня появилось время и я могу перейти от слов к делу :)

Сразу хочу оговориться, - эта статья не обучает html/css верстке. Предполагается что вы уже знаете html и css. В этой статье мы рассмотрим технику и особенности верстки именно joomla шаблона, на примере создания темы для Joomla 2.5. Если вы не знаете или плохо знаете html/css, вам стоит начать именно с них. Если же вы в состоянии сверстать хотя бы самый простой html-сайт, - тогда вы можете попробовать свои силы и прочитав эту статью взяться за собственный шаблон для Joomla.

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

 

Важно:

Минимальные знания:

- html/css

- Знание Joomla на уровне администратора

- Знание основ php


Итак, начнем.

Для начала установим свежую версию Joomla 2.5 c демо-данными на наш сервер. Я установила на свой LAMPP, вы можете поставить на веб хостинг или на свой локальный сервер, если таковой у вас имеется (если у вас не установлен локальный сервер я настоятельно рекомендую его установить. Если вы используете ОС Windows вы можете использовать Денвер или Microsoft Web Platform Installer) После того как joomla установлена, зайдем в папку с шаблонами и скопируем оттуда папку beez20 на рабочий стол (на его основе мы будем делать свой шаблон. Нет, мы не будем переделывать beez20, мы будем создавать именно собственный шаблон, но с использованием файлов beez20, дабы нам не создавать их все заново и не писать много стандартных конструкций)

1. Папка beez20 на моем рабочем столе

1

Зайдем в папку и найдем внутри файл templateDetails.xml

2. Файл templateDetails.xml в папке шаблона beez20

2

Открываем файл в текстовом редакторе и в верхний блок вносим информацию о версии и авторских правах, а так же пишем имя и описание шаблона.

3. Информация, которую я внесла для моего шаблона

3

Соответственно, тут я думаю вам всё будет понятно: 

<name>... - имя шаблона (у меня NewTemplate)

<creationDate>... - дата создания (у меня 02 June 2012)

<author>... - Ваше имя

<authorEmail>... - Ваш email

<authorUrl>... - Адрес сайта вашей студии или личного сайта

<copyright>... - Копирайт

<license>... - Лицензия

<version>... - Версия (Можно указать произвольную версию, я указала 1.0) 

<description>... - описание шаблона (выводится в админке)

 

Далее прокручиваем файл ниже и находим блок <positions>

4. Блок <positions> в файле templateDetails.xml

4

Всё его содержимое мы сейчас удалим, оставив только <positions></positions>. Так же удаляем полностью блоки languages и config (рис. 5)

5. Удалено содержимое блока <positions> и выделен блок language который вам тоже нужно удалить.

5

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

Итак, если в конечном счете ваш файл templateDetails.xml должен принять вид как на рисунке 6

6. То, к какому виду файла мы должны прийти в итоге

6

Однако, я заметила что в блоке <files> у нас осталось упоминание о папке languages (как, кстати и сама папка) Эту строчку мы тоже удаляем.

7. Удаляем строчку <folder>language</folder>

7

И сносим саму папку languages из папки шаблона. Все остальное пока оставляем, оно нам может еще пригодиться.

8. Сносим папку language

8


После того как мы всё это сделали, нам нужно открыть для редактирования файл index.php и удалить всё его содержимое, кроме запрещения прямого доступа, и в конечном виде все должно выглядеть так:

9. После удаления всего содержимого кроме запрещения прямого доступа наш файл index.php должен выглядеть так.

10

После этого переименовываем папку beez20 в название вашего шаблона (в моем случае это newtemplate) и запаковываем в zip-архив. Все дальнейшие действия мы будем совершать уже после установки его на Joomla

10. Переименовываем папку, запаковываем в zip

11

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

Справка:

строка defined('_JEXEC') or die; - запрещает прямое обращение к файлу. Вы можете попробовать обратиться к индексному файлу любого шаблона через браузер по его адресу, и увидите, что у вас ничего не получится.


создание Joomla шаблона часть 2