Создаем шаблон для Joomla с нуля

Вернуться
Опубликовано: 25.02.2015 г.

Бесплатный и свободный движок (CMS) Joomla является чрезвычайно популярным в последние годы, и его популярность только растёт. Связано это не только с богатым функционалом и бесплатностью, но и с легкостью написания расширений и шаблонов. Сегодня в сети можно найти тысячи различных шаблонов, но большинство из них потребуют адаптации при установке на ваш проект. И часто по времени это вполне сопоставимо с написанием собственного шаблона. Эта статья поможет вам научиться создавать свои собственные шаблоны для Joomla (для версий 2.5 и 3.0+) с нуля.

Что такое шаблон в Joomla

Для того чтобы лучше вникнуть в тему разработки шаблона, вначале стоит разобраться, что это и что он собой представляет. Так вот, шаблон – это визуальное оформление для вашего сайта. Он состоит из нескольких файлов, которые устанавливаются на сервер и используются движком для вывода информации. Стандартный шаблон содержит в себе описание всех частей сайта – шапки, подвала, сайдбара, навигационного меню, области контента и т.д. По сути, это набор html-файлов со вставками кода  PHP, которые управляют содержимым. Удобство использования шаблона в том, что контент и оформление разделены, поэтому при смене шаблона содержимое сайта останется на месте.

Основы создания шаблона

Для нашего шаблона мы будем использовать блочную верстку на основе тегов <div>. Всё оформление будет вынесено в CSS файлы – так код получается более чистым и удобным для восприятия, а кроме того, это грамотно с точки зрения верстки. Также такую структуру лучше воспринимают поисковые роботы, что позитивно отразится на позициях сайта в выдаче. Что касается структуры шаблона, то мы используем фиксированную ширину в 950px («резиновая» верстка не очень хорошо подходит для использования в Joomla и плохо воспринимается посетителями, особенно если у них широкие экраны) и три колонки, которые могут сворачиваться, если в них нет контента. Для того чтобы полноценно обкатать наш новый шаблон, в самой Joomla нужно будет создать несколько тестовых материалов различного объема.

Приступаем к созданию структуры

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

logo – здесь будет находиться логотип нашего сайта. Поскольку он будет выводиться всегда, его размеры должны быть фиксированными, и он не может свернуться. Зададим ему размеры 650х60 пикселей (вы можете использовать другие размеры под свой логотип). Местоположение элемента – левый верхний угол;

search – блок для поиска по сайту. Он также должен быть доступен на всех страницах, а значит, будет иметь фиксированные размеры в 350х60 пикселей и находиться справа от логотипа;

navbar – здесь содержится навигационное меню для перехода по разделам сайта. Ширина его должна быть фиксированной и равной ширине всего шаблона, т.е. 950px, а вот высота может варьироваться – она будет зависеть от пунктов меню, помещенных в элемент. Если на каких-то страницах навигационное меню не нужно, оно будет свёрнуто;

header – шапка сайта. Мы сделаем этот блок универсальным, чтобы легко модифицировать наш шаблон под различные цели. Поэтому туда сможет выводиться либо шапка, либо, к примеру, слайдер с изображениями, как сейчас стало модно. Поэтому ширина блока будет фиксированной и занимать всю страницу (950 пикселей), а вот высота будет зависеть от контента. Если контента нет, блок будет свернут;

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

left и right – боковые блоки. Слева, к примеру, можно показывать сайдбар (навигация, ссылки на публикации и т.д.), а справа – поле для ввода логина и пароля, а если юзер авторизирован – то его профиль. Поставим ширину каждого из них в 200 пикселей, высота будет зависеть от контента. Блоки могут быть свернутыми – это позволит легко сделать двухколоночный сайт, а также вообще без колонок;

content – основной раздел нашего шаблона, поскольку именно сюда будет выводиться контент сайта (статьи, публикации и т.д.). Для него нужно задать три возможных ширины – 550 пикселей, если включены левая и правая колонки, 750 пикселей, если используется только одна из колонок, и 950 пикселей, если и левая, и правая колонка отключены;

footer – самый нижний блок, он же «подвал». Сюда можно будет выводить информацию о копирайте, контактные данные, ссылку на автора сайта и другую подобную информацию. Жестко зафиксируем его размеры в 950х60 пикселей и разрешим ему сворачиваться.template_joomla

Этой информации достаточно, чтобы приступать к непосредственному написанию кода – редактированию файла index.php, а также связанного с ним CSS. Об этом – во второй части статьи.

Создаем шаблон для Joomla с нуля. Часть 2

Создаем шаблон для Joomla с нуля. Часть 3

Создаем шаблон для Joomla с нуля. Часть 4

Создаем шаблон для Joomla с нуля. Часть 5

1955 0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *