Читать: создание шаблона Joomla часть 1
Итак, продолжим создание нашего шаблона. Установим наш архив в Joomla через стандартный диалог установки удаления, зайдем в менеджер шаблонов и включим наш шаблон по умолчанию.
11. включаем в админке наш шаблон
И сразу перейдем на сайт. Там мы увидим белый лист, то есть ничего не увидим, поскольку никакого рабочего кода в нашем шаблоне еще нет.
12. Чистое поле для творчества - в коде страницы ничего нет
Перед тем как мы окунемся в сам процесс создания шаблона, давайте примерно прикинем, что у нас будет на выходе. Я буду делать простой шаблончик примерно такой структуры, - шапка, верхнее меню(навигация), контент, правая колонка и подвал.
13. Примерный макет будущего сайта.
Теперь, когда мы прикинули примерно, что мы будем делать, идем в папку нашего шаблона и открываем для редактирования файл index.php. Для начала подключим вывод головных метатегов Joomla. Прописываем html теги каркаса, и в блок <head>...вписываем строчку:
<jdoc:include type="head" />
14. Подключаем головные мета теги Joomla
Теперь идем на наш сайт, заглядываем в код и видим, что блок <head>... у нас заполнился стандартным выводом тегов Joomla.
15. Подключили стандартный вывод содержимого <head>... в Joomla
Теперь идем в папку css, удалим оттуда всё содержимое и создадим наш файл template.css, в который будем писать стили нашего шаблона. Когда файл создан, снова открываем index.php и ниже подключения head подключаем наш css таким образом:
16. Подключение файла стилей с использование определения пути к папке шаблона
Где php вставка echo $this->baseurl указывает url сайта, а $this->template путь к папке шаблона. В принципе, вы можете указать эти пути и как обычно, без использования php, но в таком случае у вас могут начаться проблемы при использовании ЧПУ ссылок, например. Или при установке сайта в подкаталог домена.
Обязательно зайдите на сайт, посмотрите в код и проверьте, правильно ли у вас подключился css файл. Если все в порядке мы можем продолжать.
Теперь нам нужно сделать html разметку будущего шаблона. Вы можете создавать структуру сайта и стили и смотреть, как оно выглядит на сайте. Я думаю, с этим вы справитесь вполне легко. Лично я создала такую разметку будущей страницы:
17. Моя разметка будущей страницы
Так же для удобства я подкрасила основные блоки в css
18. Вид будущего шаблона в браузере, с окрашиванием блоков для удобства
Теперь, когда основные блоки страницы сверстаны и мы можем убедиться, что наш шаблон не разваливается и выглядит корректно, мы можем приступить к добавлению позиций модулей. Я начну с добавления верхнего навигационного меню, и назову эту позицию topmenu.
Идем в файл templateDetails.xml и в блок <positions>... дописываем <position>topmenu</position> (вы можете добавить позицию с любым именем, какое вам будет удобно)
19. Добавление в файл templateDetails.xml позиции модуля topmenu
Сохраняем, идем снова в файл index.php и привязываем вывод этой позиции в нужном нам месте. Для этого используем строку
<jdoc:include type="modules" name="topmenu" />
20. Выводим модуль в нужном месте. В качестве параметра name используем имя позиции из файла templateDetails.xml
Соответственно теперь, в блоке #topmenu у нас выводится позиция модуля topmenu. И если мы в админке поместим какой нибудь модуль в позицию topmenu он выведется именно там. Кстати говоря, длятого чтобы просматривать позиции модулей в браузере, нам нужно включить эту функцию в админке. Зайдем в менеджер шаблонов, откроем options (или настройки по-русски) и укажем "отображать поля шаблона"
21. нажали options в менеджере шаблонов
22. Включили отображение полей шаблона
Теперь если вы зайдете на ваш сайт и впишете в адресную строку http://адрес-сайта/?tp=1 вы увидите, какие поля есть в вашем шаблоне.
Итак, давайте теперь выведем меню в позицию topmenu, идем в менеджер модулей, выбираем модуль меню, публикуем в позицию topmenu, указываем отображать на всех страницах и смотрим - на сайте появилось меню (я уже добавила картинку на шапку для красоты =))
23. Вывод меню в позиции topmenu
Оно, пока, конечно всё криво/косо, но стили мы поправим, а факт налицо - меню у нас появилось. Теперь можете приступать к оформлению вашего меню. Я оформила так, вы оформляйте по вашему вкусу.
24. Оформляем меню по вкусу используя template.css
Теперь, когда меню более менее готово, мы выведем контент страницы. (хотя мы, конечно, могли оформить меню и потом, но мне нравится делать все по порядку =))
Для вывода контента используем строку <jdoc:include type="component" />
Помещаем эту строку в том месте, где хотим выводить контент страницы. (тип - компонент, назван абсолютно верно, поскольку он выводит страницу любого компонента, в данном случае это com_content)
25. Подключаем вывод контента в нужном месте страницы
Заходим на сайт и смотрим, на странице должен появиться контент (если вы, конечно, не забыли поставить демо данные. Если забыли - создайте статью и выведите на сайт)
26. Контент на странице
Теперь вы можете начинать оформление стилей для статей, ссылок и всего остального. В следующей части мы продолжим и изучим еще некоторые важные и каверзные моменты.