Наверх

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


CodeMatrix

A+ R A-

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

Читать: создание шаблона Joomla часть 1

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

11. включаем в админке наш шаблон

16

И сразу перейдем на сайт. Там мы увидим белый лист, то есть ничего не увидим, поскольку никакого рабочего кода в нашем шаблоне еще нет. 

12. Чистое поле для творчества - в коде страницы ничего нет

18

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

13. Примерный макет будущего сайта.

19

Теперь, когда мы прикинули примерно, что мы будем делать, идем в папку нашего шаблона и открываем для редактирования файл index.php. Для начала подключим вывод головных метатегов Joomla. Прописываем html теги каркаса, и в блок <head>...вписываем строчку:

<jdoc:include type="head" />

14. Подключаем головные мета теги Joomla

20

Теперь идем на наш сайт, заглядываем в код и видим, что блок <head>... у нас заполнился стандартным выводом тегов Joomla. 

15. Подключили стандартный вывод содержимого <head>... в Joomla

21

Теперь идем в папку css, удалим оттуда всё содержимое и создадим наш файл template.css, в который будем писать стили нашего шаблона. Когда файл создан, снова открываем index.php и ниже подключения head подключаем наш css таким образом:

16. Подключение файла стилей с использование определения пути к папке шаблона

23

Где php вставка echo $this->baseurl указывает url сайта, а $this->template путь к папке шаблона. В принципе, вы можете указать эти пути и как обычно, без использования php, но в таком случае у вас могут начаться проблемы при использовании ЧПУ ссылок, например. Или при установке сайта в подкаталог домена. 

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

Теперь нам нужно сделать html разметку будущего шаблона. Вы можете создавать структуру сайта и стили и смотреть, как оно выглядит на сайте. Я думаю, с этим вы справитесь вполне легко. Лично я создала такую разметку будущей страницы:

17. Моя разметка будущей страницы

25

Так же для удобства я подкрасила основные блоки в css

18. Вид будущего шаблона в браузере, с окрашиванием блоков для удобства

27

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

Идем в файл templateDetails.xml и в блок <positions>... дописываем <position>topmenu</position> (вы можете добавить позицию с любым именем, какое вам будет удобно)

19. Добавление в файл templateDetails.xml позиции модуля topmenu

28

Сохраняем, идем снова в файл index.php и привязываем вывод этой позиции в нужном нам месте. Для этого используем строку 

<jdoc:include type="modules" name="topmenu" />

20. Выводим модуль в нужном месте. В качестве параметра name используем имя позиции из файла templateDetails.xml

29

Соответственно теперь, в блоке #topmenu у нас выводится позиция модуля topmenu. И если мы в админке поместим какой нибудь модуль в позицию topmenu он выведется именно там. Кстати говоря, длятого чтобы просматривать позиции модулей в браузере, нам нужно включить эту функцию в админке. Зайдем в менеджер шаблонов, откроем options (или настройки по-русски) и укажем "отображать поля шаблона"

21. нажали options в менеджере шаблонов

30

22. Включили отображение полей шаблона

31

Теперь если вы зайдете на ваш сайт и впишете в адресную строку http://адрес-сайта/?tp=1 вы увидите, какие поля есть в вашем шаблоне.

Итак, давайте теперь выведем меню в позицию topmenu, идем в менеджер модулей, выбираем модуль меню, публикуем в позицию topmenu, указываем отображать на всех страницах и смотрим - на сайте появилось меню (я уже добавила картинку на шапку для красоты =))

23. Вывод меню в позиции topmenu

37

Оно, пока, конечно всё криво/косо, но стили мы поправим, а факт налицо - меню у нас появилось. Теперь можете приступать к оформлению вашего меню. Я оформила так, вы оформляйте по вашему вкусу.

24. Оформляем меню по вкусу используя template.css

38

Теперь, когда меню более менее готово, мы выведем контент страницы. (хотя мы, конечно, могли оформить меню и потом, но мне нравится делать все по порядку =))

Для вывода контента используем строку <jdoc:include type="component" />

Помещаем эту строку в том месте, где хотим выводить контент страницы. (тип - компонент, назван абсолютно верно, поскольку он выводит страницу любого компонента, в данном случае это com_content)

25. Подключаем вывод контента в нужном месте страницы

39

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

26. Контент на странице

40

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

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