Joomla в каком файле шаблон
По умолчанию все шаблоны сайта должны раcполагаются в директории "/templates", которая находится в корне. Допустим наш шаблон будет называться "my_template", тогда струтктура типичного шаблона, будет следующая. Для примера назовем наш шаблон "my_template". Начиная с директории
- /templates/my_template/
- css/ - различные файлы стилей для шаблона (например reset.css , styles.css , ie.css и т. д.)
- html/ - папка, в которой лежат переназначеные шаблоны для модулей и компонентов системы
- modules.php - собственные chrome-функции
- pagination.php - шаблон для постраничной навигации
- com_content
- com_search
- mod_breadcrumbs
- mod_search
- . и т. д.
Элементы отмеченые звездочкой (*) обязательны для работы шаблона (для его минимального функционала).
а теперь обо всем подробно и по порядку
Шаблон должен быть сохранен в определенной структуре каталогов:
Имя шаблона не может содержать пробелов и других специальных символов. Рекомендуем называть шаблон строчными латинскими буквами. В зависимости от операционной системы, экзотические комбинации символов могут стать главной причиной массы проблем. В добавок имя должно быть осмысленным. Здесь в качестве имени шаблона выбрано "my_template".
В каталогах шаблона должны быть представлены различные файлы с предопределенными именами. Вот основные из них:
Основной файл разметки. Это -файл
Он должен заканчиваться на " .php ", поскольку элементы динамического модуля Joomla должны интерпретироваться РНР.
Изображение предварительного просмотра. Файл картинки
содержит изображение предварительного просмотра вашего шаблона, которое предназначено для предпросмотра в менеджере шаблонов. Изображения предварительного просмотра имеют тип-png размером примерно 200x150 пикселей. Вы можете создать этот файл позднее, когда увидите готовый шаблон.
Метаданные шаблона.
Файл представляет техническое руководство для инсталлятора шаблонов и содержит инсталляции для выбора шаблона в диспетчере шаблонов. Здесь вы специфицируете место, куда должны копироваться файлы, кто их автор, а также дополнительные метаданные о шаблоне. Во время последующей инсталляции этого файла инсталлятором Joomla, РНР читает его и копирует файлы в места, специфицированные XML-файлом. Для каждого файла, который применяется в шаблоне, соответствующий контейнер XML должен быть наполнен именем файла и корректным путем.
-файлы. Для разрабатываемого шаблона можно использовать несколько CSS-файлов. Какое имя вы дадите файлу CSS, и как создадите его — дело ваше. Однако для разных элементов CSS предусмотрены разные каталоги. Для первой попытки вам понадобится CSS-файл по имени /templates/my_template/css/template.css.
Графика, изображения, флеш. Здесь можно ввести определенные пользователем файлы изображений, которые понадобятся в шаблоне для дизайна. Инсталлятор затем скопирует эти файлы в папку images. Имя файла выглядит как
Версия для печати. Шаблон версии для печати для компонента.
Файл хранения настроек шаблона. (только для J!1.5) Через файл templateDetails.xml можно указать свои настройки. После сохранения настроек через Менеджер шаблонов, в папке появится файл
Шаблон offline-страницы. Если сайт отключен через панель управления, то отобразиться именно этот шаблон.
Чем на самом деле является файл index.php? Это комбинация (X)HTML и PHP, которая определяет все необходимое для отображения элементов страницы.
Сначала посмотрим на элемент, который крайне важен для создания валидных шаблонов — DOCTYPE в верхней части файла index.php. Этот фрагмент кода отображается в верхней части всех веб-страниц. На страницах нашего шаблона мы видим следующее:
Первое строчка на PHP предназначена просто для того, чтобы убедиться, что к файлу не обращаются напрямую, из соображений безопасности.
[Информация на сайте W3C о DOCTYPE] составлена гиками для гиков. И когда я говорю «гики», я не имею в виду обычных профессионалов Веб, таких как я или вы. Я имею в виду тех гиков, которые заставляют нас выглядеть как Бабушку в тот день, когда Она Впервые Получила E-mail.
В любом случае, вы можете использовать разные DOCTYPE. По существу, DOCTYPE говорит браузеру, как интерпретировать страницу. С самого начала, когда появился Веб, разные браузеры имели разные уровни поддержки CSS. Так, например, Internet Explorer не поймет команду «min-width», используемую для установки минимальной ширины страницы. Для того, чтобы продублировать эффект, вам придется использовать «хаки» в CSS.
Чтобы усложнить картину, добавим, что существует еще так называемый режим «quirks» (специальных ухищрений). Если DOCTYPE указан неверно, с неправильной датой, или вообще не указан, браузер переходит в режим «quirks». На самом деле, это попытка обеспечения обратной совместимости, так, например, Internet Explorer 6 будет интерпретировать страницу так, как это делал бы IE4.
- Они используют декларацию DOCTYPE, копируя ее непосредственно с сайта W3C, вследствие чего конец ссылки выглядит как DTD/xhtml1-strict.dtd, в то время как это относительная ссылка на сервере W3C. Вам нужно указывать путь полностью, как в примере, приведенном выше
- Фирма Microsoft разработала свой IE6 так, чтобы он выдавал валидные страницы, пребывая при этом в режиме «quirks». Это обычно случается, когда «xml declaration» указывется до DOCTYPE.
Далее указывается следующее XML-выражение (после DOCTYPE):
Пояснения насчет режима «quirks» в IE очень важны. В этой статье мы разрабатываем шаблон для IE6+, следовательно мы должны быть уверены, что он работает в стандартном режиме. Это минимизирует необходимость хаков, которые нам придется позже применить.
ПРИМЕЧАНИЕ
Создание страниц, соответствующих стандартам, когда вы видите «valid xhtml» в нижней части страницы, не означает в действительности трудоемкой верстки или использования малопонятных тегов. Это просто означает, что разрабатываемый вами код, соответствует заявленному DOCTYPE, и ничего более.Разработка сайта по стандартам может быть описана одной фразой как «говори, что ты делаешь, а затем делай то, что говоришь».
Что еще есть в файле index.php?
Посмотрите сначала на структуру заголовка. Мы хотим быть минималистичны, насколько это возможно, но при этом иметь все необходимое для создания работающего сайта. Мы используем следующий заголовок:
Что все это означает?
Мы уже рассказывали о значении DOCTYPE в файле index.php. Фрагмент извлекает установленный язык из глобальной конфигурации.
Следующий фрагмент включает дополнительную информацию для заголовка:
Это заголовочная информация, которая задана в глобальной конфигурации. Она включает в себя следующие теги (в инсталляции по умолчанию):
Большая часть этой информации генерируется «на лету» в соответствии с данными текущей страницы (статьи). Она включает в себя ряд мета-тегов для favicon, адресов RSS-потоков и некоторых стандартных JavaScript-файлов.
Последние строки в заголовке содержат ссылки на CSS-файлы шаблона:
Первые два файла — system.css and general.css содержат некоторые основные стили Joomla. Последний содержит все стили шаблона и называется здесь template.css. Фрагмент кода PHP возвращает название текущего шаблона. Указание его именно таким образом, вместо реального пути, делает код более переносимым. Когда вы создаете новый шаблон, вы можете просто скопировать его (включая весь заголовок), не беспокоясь о внесении исправлений.
В заголовке может быть указано любое количество CSS-файлов, например, для условных стилей, определяемых для разных браузеров. Например, следующий фрагмент определяет такую таблицу стилей для IE6:
Следующий пример показывает, как могут использоваться параметры шаблона:
Пустое тело шаблона
Создание нашего первого шаблона будет очень-очень простым! Вы готовы?
Все, что необходимо, — это использовать выражения Joomla, которые добавят содержимое всех модулей в основное тело страницы (mainbody):
В настоящий момент наш сайт не вылядит особенно впечатляюще (см.
иллюстрацию)- название сайта
- верхний модуль
- левые модули
- основной контент
- правые модули
Что необходимо знать
По существу, шаблон просто загружает модули Joomla и mainbody (компонент). Расположение элементов и дизайн — это дело CSS, а не Joomla.
Нашей целью является как можно ближе приблизиться к семантической разметке. С точки зрения Web, это означает, что страница может быть прочитана браузером, «пауком» поисковой системы или устройством чтения с экрана. Семантическая разметка является краеугольным камнем доступности.
Примечание
На самом деле, мы имеем здесь только некий потенциал для семантической разметки. Например, если размещать случайные модули в случайных местах, то мы получим полную путаницу. Важным взглядом на CMS-сайты является то, то шаблон ровно настолько хорош, насколько хорошо его наполнение контентом. Именно поэтому так часто придираются к дизайнерам, пытаясь проверять их сайты на валидность.Вы заметили, что мы впервые использовали набор команд, специфичных для Joomla:
PHP-выражение «echo» просто отображает строку из файла configuration.php. Здесь мы использовали название сайта, но можно, например, отобразить и другие параметры:
Выражение «jdoc» вставляет различные типы XHTML-вывода, как модулей, так и компонентов. Следующая строка вставляет вывод компонента. Какой компонент будет использован, будет определяться ссылкой в меню:
ПРИМЕЧАНИЕ
Достаточно интересно, вам кажется, что вывод компонента можно использовать несколько раз. Не уверен, что вам захочется сделать это, но я говорю вам, что это может быть ошибкой.Эта строка вставляет вывод всех модулей, заданных для места «right»:
На самом деле, полный синтаксис такой:
Мы рассмотрим различные варианты опций для стилей в разделе о модулях позднее.
CSSTemplateTutorialStep1
Шаблон, созданный на шаге 1, состоит только из двух файлов, index.php и templateDetails.xml. Я убрал ссылки на все остальные файлы, чтобы показать «голое» отображение, без CSS. На самом деле, это хороший диагностический шаблон, который позволяет установить его и отслеживать ошибки, которые возникают в компоненте или в модуле.
В предыдущей статье мы изучили, как создать тему для WordPress. Давайте сегодня на основе этого же шаблона Corporate Blue попробуем создать сайт на второй по популярности CMS – Joomla! Поскольку в статье описывается в основном вёрстка, будем считать, что Joomla! у вас уже установлена. Если вы не знаете, как установить Joomla!, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано в самой первой статье. Вместо этого рассмотрим детально особенности создания шаблона именно для Joomla!
Добавление шаблона
Для начала, в любом удобном для вас месте создайте папку нашего шаблона «whitesquare». В ней должны находиться три подпапки: css, images и language. В папках css и images создайте файлы index.html со следующим содержимым:
Эти файлы являются заглушками и, по требованиям CMS, должны отображать пустую страницу при обращении к этим папкам напрямую.
Далее, в папке css создайте пустой файл стилей template.css, а в папке language подпапку en-GB, которая будет содержать пустой файл en-GB.tpl_whitesquare.ini и файл en-GB.tpl_whitesquare.sys.ini со следующим содержимым:Давайте подробно разберем, что все это значит. Папка language нужна для локализации, она может содержать подпапки с различными языками: en-GB, ru-RU и т.д. Каждая языковая папка включает два файла с ключами. Ключи представляют собой пару с названием ключа и его значением. Названия ключей для разных языков будут одинаковыми, а значения – разными. Такой механизм позволяет использовать шаблон для создания сайтов на разных языках. Поскольку это учебный пример, будем использовать только английский язык – en-GB. Первый файл en-GB.tpl_whitesquare.ini будет содержать ключи, которые увидят пользователи сайта, а второй — en-GB.tpl_whitesquare.sys.ini будет содержать ключи административных функций.
Далее нужно создать пустые файлы component.php, error.php и index.php. Они нам понадобятся в будущем.
Следующим шагом добавим картинки: favicon.ico, template_preview.jpg и template_thumbnail.jpg. Последние две – это превьюшки будущего шаблона и они имеют размеры 640х480 и 206х150 соответственно.
Последний файл, который нужно добавить – это templateDetails.xml. На данном этапе — это самый важный файл, он содержит подробное описание нашего шаблона:
Большая часть содержимого этого файла понятна, необходимо пояснить только следующее:
Поле description содержит тот самый ключ локализации, который мы указали в en-GB.tpl_whitesquare.sys.ini
Поле files содержит полный перечень всех файлов и папок, лежащих в корне шаблона.
Поле languages содержит список языковых файлов, а поле positions нам понадобится чуть позже.
Теперь, когда каркас шаблона готов, давайте добавим его в CMS. Для этого откройте панель администратора Joomla!, выберите пункт меню Extension -> Extension manager, перейдите на вкладку Install from Directory и в поле Install Directory укажите путь до папки whitesquare, в которой мы создавали файлы шаблона.Предварительный осмотр
Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также, на всех страницах, кроме главной, есть сайдбар слева и название страницы. Поиск и все виды меню мы оформим в виде модулей Joomla!, а все тексты будут оформлены через механизм локализации.
Структура страниц
Большинство руководств по созданию шаблонов для Joomla! ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на Joomla! в рамках предоставленных макетов.
Давайте начнем со структуры страниц. Управление страницами осуществляется в панели администратора через меню Content -> Article Manager. Для добавления новой страницы нажмите кнопку New и заполните форму. В поле Title введите заголовок страницы. Остальные поля оставьте без изменений. Добавьте таким образом страницы Home, About us, Services, Partners, Customers, Projects, Careers, Contact. После добавления, список страниц должен выглядеть вот так:
Шаблон страницы
Следующим шагом нам нужно сделать шаблон страницы Joomla! Откройте файл index.php, который мы создали в папке нашего шаблона и добавьте в него код, который создаст каркас страницы:
После этих действий у нас должна появиться серая страница с большим нестилизованным заголовком. К нему мы вернемся позже.
Логотип
После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.jpg. В блок header нашего шаблона вставьте разметку для логотипа:
В качестве альтернативного текста для изображения вставляется текст через стандартную функцию локализации Text::_(). Ключа TPL_WHITESQUARE_LOGO у нас еще нет, поэтому давайте добавим его в файл \language\en-GB\en-GB.tpl_whitesquare.ini:
К сожалению, после этого текст не появится на странице сайта. Дело в том, что мы добавляем ключ локализации в шаблон, который уже используется системой, а Joomla! так устроена, что она читает ключи локализации из этого файла только при первоначальной установке шаблона. Можно конечно удалить шаблон и добавить его в систему заново, но мы поступим проще – добавим этот же ключ в системный файл \language\en-GB\en-GB.tpl_whitesquare.ini, где – это папка, в которую установлена Joomla!Форма поиска
Joomla! уже содержит собственный модуль формы поиска. Его можно найти разделе Extensions -> Module Manager панели администратора. Если в вашей CMS он не установлен, то установить его можно, нажав кнопку New и выбрав из списка пункт Search.
Для того, чтобы поместить этот модуль в шаблон – нужно создать собственную «позицию» для этого модуля. Позиции (positions) – это специально размеченные области шаблона, в которые вставляются модули. Позиции описываются в файле templateDetails.xml в блоке positions:
После этого вернитесь в Module Manager и откройте модуль Search на редактирование. И в полях укажите следующие значения:
Box Label: пробел
Box Text: Search
Search Button: Yes
Button position: Right
Search Button Image: No
Button text: GO
Show Title: Hide
Position: Whitesquare Search
А на вкладке Advanced в поле Module Class Suffix введите «-block». Это позволит разделить стили формы поиска от содержимого страницы поиска.
Теперь, когда модуль подготовлен, нужно вставить его в шаблон index.php:
Осталось добавить стили в template.css:Навигация
Меню на страницах сайта создается в три этапа: сначала нужно создать абстрактное меню и определить его пункты, затем определить для него позицию в шаблоне и последним этапом создать модуль, который свяжет абстрактное меню с конкретной позицией.
Управление списками меню осуществляется в разделе Menus -> Menu Manager панели администратора. По умолчанию там уже есть меню под названием Main Menu. Зайдите в него.
Для того, чтобы создать новый пункт меню – нажмите кнопку New и заполните открывшуюся форму – следующим образом:
Menu Title: название страницы, например About us
Menu Item Type: Single Article
Select Article: About us
Создайте аналогичным образом все пункты главного меню: Home, About us, Services, Partners, Customers, Projects, Careers, Contact.Далее откройте templateDetails.xml и добавьте позицию главного меню:
Далее нужно создать модуль, который будет содержать меню. Модуль главного меню по умолчанию уже установлен в Joomla!, он называется Main Menu. Откройте его через меню Extensions -> Module Manager -> Main Menu. В поле Select Menu укажите Main Menu, а в поле Position: Whitesquare Menu. Поле этого нужно перейти на вкладку Advanced и в поле Module tag выбрать значение nav, а в поле Menu Class Suffix ввести «-top». Это позволит нам задавать CSS классы для этого меню более гибко и семантично.
Давайте теперь добавим нужную позицию в сам шаблон сразу после шапки:
На данном этапе меню уже появится на страницах, но без стилей. Стилизуем его:Заголовок страницы
Joomla! автоматически вставляет заголовки статей в содержимое страницы, но на главной странице нам заголовок не нужен, а на других, он должен иметь совсем другую верстку, поэтому давайте просто отключим автоматическую вставку заголовка и вставим заголовок внутри шаблона так, как это нам нужно.
Для начала немного теории. Настройки отображения элементов страниц задаются в Joomla! в трёх местах:- В настройках Article Manager задаются глобальные настройки для всех статей.
- В свойствах каждой статьи задаются настройки этой статьи и перебивают глобальные
- Если на странице добавлено меню, то настройки пункта меню, указывающего на данную страницу, будут перебивать все остальные настройки
- В панели администратора зайдите в Content -> Article manager, нажмите кнопку Options и на первой вкладке Articles для всех полей поставьте значения Hide и No.
- Далее, там же, в Article manager зайдите в каждую статью на вкладку Options и поставьте для всех полей значение Use Global.
- И последним шагом зайдите в Menus -> Menu Manager -> Main Menu и для каждой станицы на вкладке Options так же поставьте для всех полей значение Use Global.
Теперь нужно стилизовать получившийся блок. Сохраните фон заголовка в файл images /h1-bg.jpg и добавьте стилевые правила:Футер
Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images
images/footer-logo.jpg – логотип футера
images/social.jpg – спрайты больших иконок
images/social-small.jpg – спрайты маленьких иконокПосле того, как все ресурсы подготовлены, давайте взглянем на блок Sitemap. Он состоит из двух колонок. Сейчас, когда нативная поддержка переноса текста по столбцам не очень хорошо поддерживается в популярных браузерах гораздо проще сделать меню, состоящее из двух столбцов. Для этого в разделе Menus -> Menu Manager создайте меню Sitemap left с пунктами Home, About, Services и Sitemap right с пунктами Partners, Support и Contact. Пункты меню должны ссылаться на соответствующие статьи. Для каждого из этих двух меню нужно создать позиции sitemap-left и sitemap-right и связать меню с позициями через новые модули Sitemap left и Sitemap right. При добавлении модулей на вкладке Advanced в поле Menu Class Suffix вставьте значение –sitemap, для того, чтобы в CSS стилях отличать этот тип меню от остальных.
Далее делаем вёрстку в блоке footer файла index.php:
В этом блоке используется несколько локализованных строк, давайте их добавим в файлы локализации, как мы делали в блоке логотипа:
Прописываем стили в template.css:В итоге внутренняя страница сайта должна выглядеть вот так:
Главная страница
Главная страница у нас уже создана. Наполнение ее контентом выходит за рамки создания шаблона Joomla!, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самого шаблона. Первым делом необходимо нарезать все изображения этой страницы и сохранить в папку images, которая находится в корне папки, где установлена Joomla!. Назовём эти изображения так:
home-1.jpg
home-2.jpg
home-3.jpg
home-4.jpg
home-5.jpg
clients-1.jpg
clients-2.jpg
clients-3.jpg
clients-4.jpg
clients-5.jpg
clients-6.jpg
clients-7.jpg
Далее, перейдите в панели администратора к форме редактирования главной страницы Content -> Article Manager -> Home и на вкладке Content нажмите Tools -> Source code и введите содержимое страницы:Теперь осталось стилизовать данный код.
Сайдбар
Если вы посмотрите на psd макеты, то увидите, что внутренние страницы отличаются от главной наличием левой колонки.
Давайте добавим его в index.php перед вызовом контента страницы:
Этот блок будет выводиться на всех страницах, кроме главной. Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов.
Для полноты картины в качестве подменю предлагаю показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали другие виды меню. Создайте статьи под названиями: Lorem ipsum, Donec tincidunt laoreet, Vestibulum elit, Etiam pharetra, Phasellus placerat. Затем создайте новое меню под названием Submenu и добавьте в него вышеперечисленные страницы. После этого, создайте позицию submenu в templateDetails.xml и модуль Submenu, использующий эту позицию и меню Submenu. В свойствах модуля на вкладке Advanced укажите Menu Class Suffix: «-aside»
Блок карты особых вопросов не вызывает, не забудьте только добавить новый ключ локализации:
В качестве заглушки для карты создайте пустой файл sample.jpg и сохраните его в папку images в корне сайта Joomla!
В заключение, нам нужно добавить стили для вёрстки:Теперь давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в папку images сайта Joomla! Назовите изображения вот так:
about-1.jpg
about-2.jpg
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpgДалее перейдите в редактирование статьи в панели администратора и добавьте код через меню Tools -> Source code:
И стили в template.css:
В самом начале, когда мы создавали шаблон шапки, мы добавили в него поиск. Результатом поиска является страница, которая сейчас не очень хорошо выглядит. Давайте добавим для нее стили:
Модуль поиска предусматривает, что в шаблоне должна быть иконка поиска для кнопки, но поскольку в дизайне ее нет, то придется добавить ее самим. Для этого найдите любую бесплатную иконку с изображением лупы и сохраните ее под названием search.jpg в папку images шаблона. Размер картинки должен быть 16х16 пикселей.
Помимо index.php в корне шаблона лежат еще 2 php файла. Первый из них – это сomponent.php. Этот файл отображает страницу печати, которую пользователь сможет открыть, кликнув на иконку печати в содержании каждой статьи. В самом начале мы отключили показ этих иконок в статьях через меню Content -> Article Manager -> Options -> Show Print Icon в панели администратора. Но, поскольку мы делаем универсальный шаблон, создать этот файл мы обязаны. Наполните его следующим содержимым:
Как вы видите, этот файл полностью повторяет структуру файла index.php. Отличие только в том, что мы убрали ненужные для печати блоки: шапку, футер и боковую колонку.Последняя страница, которую осталось оформить – это страница вывода ошибки. Ее шаблон описывается в файле error.php. Код этого файла будет выглядеть следующим образом:
Заключение
На этом создание шаблона Joomla! закончено. Готовый проект можно скачать здесь.
Весной 2008 года в блоге Compass Designs был опубликован неплохой цикл статей о создании «чистого» шаблона для Joomla 1.5 (под «чистым» в данном случае понимается шаблон, сверстанный по современным стандартам, т.е. без использования таблиц и с грамотным применением каскадных таблиц стилей). Первые две части цикла содержат в основном общие объяснения терминологии, советы по организации разработки на локальном хосте и т.д., поэтому я решил опубликовать переводы только основных 4-х статей, которые собственно и содержат небольшое руководство по созданию шаблона. Итак, сегодня первая часть, содержащая основные сведения о построении шаблонов Joomla.
Создание простого пустого шаблона
Для того, чтобы понять, из чего состоит шаблон, мы начнем с рассмотрения пустого шаблона Joomla.
Файлы шаблона
Шаблон Joomla содержит некоторый набор файлов и директорий. Шаблоны должны быть размещены в директории /templates/ установленного дистрибутива Joomla, каждый в собственной поддиректории. Т.е., если у нас установлены два шаблона, то директория /template/ выглядит примерно так:
Обратите внимание, что название директории для шаблона должно совпадать с названием этого шаблона, как в данном случае «element» и «voodoo». Как правило, названия чувствительны к регистру букв и не должны содержать пробелы. Внутри директории шаблона находятся два ключевых файла:
Имена этих файлов и их расположение должны быть в точности такими, поскольку именно так они вызываются ядром Joomla.
Первый из них — это XML-файл шаблона
templateDetails.xml
Это файл мета-данных в XML-формате, сообщающий Joomla, какие другие файлы, включая файлы изображений, нужны для отображения страницы, которая использует данный шаблон. Обратите внимание на букву «D» в верхнем регистре. Также он сожержит информацию об авторе и копирайте. И наконец, он используется при инсталляции шаблона в административном интерфейсе.
Второй файл — это основной движок шаблона:
index.php
Этот файл является самым важным. Он определяет визуальное расположение элементов сайта и сообщает Joomla CMS, куда поместить различные компоненты и модули. Этот файл является комбинацией PHP и (X)HTML.
Практически во всех шаблонах используются дополнительные файлы. Общепринято (хотя это и не является требованием ядра) называть и размещать эти файлы следующим образом:
Это просто примеры. Ниже приведено описание каждого файла:
/element/template_thumbnail.jpg
Скриншот шаблона (обычно уменьшенный до 140 пикселей в ширину и 90 пикселей в высоту). После установки шаблона, этот скриншот можно увидеть с помощью функции «Preview Image» в разделе «Template Manager» административного интерфейса, а также в модуле выбора шаблона оформления в публичной части (если этот модуль задействован).
/element/css/template.css
Таблица стилей шаблона. Название директории устанавливается произвольно, но вы должны указать, путь к этому файлу в index.php. Название файла тоже может быть любым. Обычно применяется указанные выше название файла, но ниже вы увидите, что есть некоторые преимущества и у использования дополнительных CSS-файлов.
/element/images/logo.jpg
Любые изображения, включенные в шаблон. Опять же, из организационных соображений, большинство разработчиков размещают их в директории images. Мы указали картинку с названием logo.jpg в качестве примера.
templateDetails.xml
templateDetails.xml должен содержать перечень всех файлов, содержащихся в шаблоне. Также он включает информацию об авторе и копирайте. Часть этой информации можно увидеть в менеджере шаблонов в административном интерфейсе Joomla. Ниже приведен пример XML-файла:
Поясним отдельные строки:
Содержимое XML-документа — это инструкции для инсталлятора в административном интерфейсе Joomla. Опция type=«template» сообщает инсталлятору, что мы устанавливаем шаблон, предназначенный для Joomla версии 1.5.
Определяет название шаблона. Это имя также будет использовано при создании поддиректории шаблона в директории templates. Если вы устанавливаете шаблон вручную, то вы должны создать поддиректорию с названием, идентичным названию шаблона.
Имя автора шаблона (вероятно, ваше имя).
Информация о копирайте. Руководство по лицензированию для разработчиков и дизайнеров вы можете найти в форумах Joomla.
E-mail для связи с автором шаблона.
Адрес сайта автора.
Различные файлы, используемые в шаблоне.Файлы, используемые в шаблоне, заключаются в теги :
Секция «files» содержит все основные файлы типа PHP-скриптов или изображений для превью шаблона. Каждый файл перечисляется в этой секции внутри тегов
и . Также здесь указываются дополнительные файлы, например JavaScript-файлы, используемые в шаблоне.Файлы картинок, используемых в шаблоне, также перечисляются в секции «files». Опять же, каждый файл заключается в теги
и . Пути к файлам указываеются относительно корневой директории шаблона. Например, если шаблон находится в директории 'YourTemplate', а все картинки находстя в поддиректории 'images', то правильный путь к файлу будет:Наконец, в секции files перечисляются все файлы стилей, используемые в шаблоне. И снова, имя файла заключается в теги
и , а путь файла указывается относительно корневой папки шаблона.
Позиции модулей, используемые в шаблоне.
Описывает параметры, которые могут задаваться для различных функций шаблона, например, для изменения его цвета.а теперь обо всем подробно и по порядку
Шаблон должен быть сохранен в определенной структуре каталогов:
Имя шаблона не может содержать пробелов и других специальных символов. Рекомендуем называть шаблон строчными латинскими буквами. В зависимости от операционной системы, экзотические комбинации символов могут стать главной причиной массы проблем. В добавок имя должно быть осмысленным. Здесь в качестве имени шаблона выбрано "my_template".
В каталогах шаблона должны быть представлены различные файлы с предопределенными именами. Вот основные из них:
Основной файл разметки. Это -файл
Он должен заканчиваться на " .php ", поскольку элементы динамического модуля Joomla должны интерпретироваться РНР.
Изображение предварительного просмотра. Файл картинки
содержит изображение предварительного просмотра вашего шаблона, которое предназначено для предпросмотра в менеджере шаблонов. Изображения предварительного просмотра имеют тип-png размером примерно 200x150 пикселей. Вы можете создать этот файл позднее, когда увидите готовый шаблон.
Метаданные шаблона.
Файл представляет техническое руководство для инсталлятора шаблонов и содержит инсталляции для выбора шаблона в диспетчере шаблонов. Здесь вы специфицируете место, куда должны копироваться файлы, кто их автор, а также дополнительные метаданные о шаблоне. Во время последующей инсталляции этого файла инсталлятором Joomla, РНР читает его и копирует файлы в места, специфицированные XML-файлом. Для каждого файла, который применяется в шаблоне, соответствующий контейнер XML должен быть наполнен именем файла и корректным путем.
-файлы. Для разрабатываемого шаблона можно использовать несколько CSS-файлов. Какое имя вы дадите файлу CSS, и как создадите его — дело ваше. Однако для разных элементов CSS предусмотрены разные каталоги. Для первой попытки вам понадобится CSS-файл по имени /templates/my_template/css/template.css.
Графика, изображения, флеш. Здесь можно ввести определенные пользователем файлы изображений, которые понадобятся в шаблоне для дизайна. Инсталлятор затем скопирует эти файлы в папку images. Имя файла выглядит как
Версия для печати. Шаблон версии для печати для компонента.
Файл хранения настроек шаблона. (только для J!1.5) Через файл templateDetails.xml можно указать свои настройки. После сохранения настроек через Менеджер шаблонов, в папке появится файл
Шаблон offline-страницы. Если сайт отключен через панель управления, то отобразиться именно этот шаблон.
Чем на самом деле является файл index.php? Это комбинация (X)HTML и PHP, которая определяет все необходимое для отображения элементов страницы.
Сначала посмотрим на элемент, который крайне важен для создания валидных шаблонов — DOCTYPE в верхней части файла index.php. Этот фрагмент кода отображается в верхней части всех веб-страниц. На страницах нашего шаблона мы видим следующее:
Первое строчка на PHP предназначена просто для того, чтобы убедиться, что к файлу не обращаются напрямую, из соображений безопасности.
[Информация на сайте W3C о DOCTYPE] составлена гиками для гиков. И когда я говорю «гики», я не имею в виду обычных профессионалов Веб, таких как я или вы. Я имею в виду тех гиков, которые заставляют нас выглядеть как Бабушку в тот день, когда Она Впервые Получила E-mail.
В любом случае, вы можете использовать разные DOCTYPE. По существу, DOCTYPE говорит браузеру, как интерпретировать страницу. С самого начала, когда появился Веб, разные браузеры имели разные уровни поддержки CSS. Так, например, Internet Explorer не поймет команду «min-width», используемую для установки минимальной ширины страницы. Для того, чтобы продублировать эффект, вам придется использовать «хаки» в CSS.
Чтобы усложнить картину, добавим, что существует еще так называемый режим «quirks» (специальных ухищрений). Если DOCTYPE указан неверно, с неправильной датой, или вообще не указан, браузер переходит в режим «quirks». На самом деле, это попытка обеспечения обратной совместимости, так, например, Internet Explorer 6 будет интерпретировать страницу так, как это делал бы IE4.
- Они используют декларацию DOCTYPE, копируя ее непосредственно с сайта W3C, вследствие чего конец ссылки выглядит как DTD/xhtml1-strict.dtd, в то время как это относительная ссылка на сервере W3C. Вам нужно указывать путь полностью, как в примере, приведенном выше
- Фирма Microsoft разработала свой IE6 так, чтобы он выдавал валидные страницы, пребывая при этом в режиме «quirks». Это обычно случается, когда «xml declaration» указывется до DOCTYPE.
Далее указывается следующее XML-выражение (после DOCTYPE):
Пояснения насчет режима «quirks» в IE очень важны. В этой статье мы разрабатываем шаблон для IE6+, следовательно мы должны быть уверены, что он работает в стандартном режиме. Это минимизирует необходимость хаков, которые нам придется позже применить.
ПРИМЕЧАНИЕ
Создание страниц, соответствующих стандартам, когда вы видите «valid xhtml» в нижней части страницы, не означает в действительности трудоемкой верстки или использования малопонятных тегов. Это просто означает, что разрабатываемый вами код, соответствует заявленному DOCTYPE, и ничего более.Разработка сайта по стандартам может быть описана одной фразой как «говори, что ты делаешь, а затем делай то, что говоришь».
Что еще есть в файле index.php?
Посмотрите сначала на структуру заголовка. Мы хотим быть минималистичны, насколько это возможно, но при этом иметь все необходимое для создания работающего сайта. Мы используем следующий заголовок:
Что все это означает?
Мы уже рассказывали о значении DOCTYPE в файле index.php. Фрагмент извлекает установленный язык из глобальной конфигурации.
Следующий фрагмент включает дополнительную информацию для заголовка:
Это заголовочная информация, которая задана в глобальной конфигурации. Она включает в себя следующие теги (в инсталляции по умолчанию):
Большая часть этой информации генерируется «на лету» в соответствии с данными текущей страницы (статьи). Она включает в себя ряд мета-тегов для favicon, адресов RSS-потоков и некоторых стандартных JavaScript-файлов.
Последние строки в заголовке содержат ссылки на CSS-файлы шаблона:
Первые два файла — system.css and general.css содержат некоторые основные стили Joomla. Последний содержит все стили шаблона и называется здесь template.css. Фрагмент кода PHP возвращает название текущего шаблона. Указание его именно таким образом, вместо реального пути, делает код более переносимым. Когда вы создаете новый шаблон, вы можете просто скопировать его (включая весь заголовок), не беспокоясь о внесении исправлений.
В заголовке может быть указано любое количество CSS-файлов, например, для условных стилей, определяемых для разных браузеров. Например, следующий фрагмент определяет такую таблицу стилей для IE6:
Следующий пример показывает, как могут использоваться параметры шаблона:
Пустое тело шаблона
Создание нашего первого шаблона будет очень-очень простым! Вы готовы?
Все, что необходимо, — это использовать выражения Joomla, которые добавят содержимое всех модулей в основное тело страницы (mainbody):
В настоящий момент наш сайт не вылядит особенно впечатляюще (см.
иллюстрацию)- название сайта
- верхний модуль
- левые модули
- основной контент
- правые модули
Что необходимо знать
По существу, шаблон просто загружает модули Joomla и mainbody (компонент). Расположение элементов и дизайн — это дело CSS, а не Joomla.
Нашей целью является как можно ближе приблизиться к семантической разметке. С точки зрения Web, это означает, что страница может быть прочитана браузером, «пауком» поисковой системы или устройством чтения с экрана. Семантическая разметка является краеугольным камнем доступности.
Примечание
На самом деле, мы имеем здесь только некий потенциал для семантической разметки. Например, если размещать случайные модули в случайных местах, то мы получим полную путаницу. Важным взглядом на CMS-сайты является то, то шаблон ровно настолько хорош, насколько хорошо его наполнение контентом. Именно поэтому так часто придираются к дизайнерам, пытаясь проверять их сайты на валидность.Вы заметили, что мы впервые использовали набор команд, специфичных для Joomla:
PHP-выражение «echo» просто отображает строку из файла configuration.php. Здесь мы использовали название сайта, но можно, например, отобразить и другие параметры:
Выражение «jdoc» вставляет различные типы XHTML-вывода, как модулей, так и компонентов. Следующая строка вставляет вывод компонента. Какой компонент будет использован, будет определяться ссылкой в меню:
ПРИМЕЧАНИЕ
Достаточно интересно, вам кажется, что вывод компонента можно использовать несколько раз. Не уверен, что вам захочется сделать это, но я говорю вам, что это может быть ошибкой.Эта строка вставляет вывод всех модулей, заданных для места «right»:
На самом деле, полный синтаксис такой:
Мы рассмотрим различные варианты опций для стилей в разделе о модулях позднее.
CSSTemplateTutorialStep1
Шаблон, созданный на шаге 1, состоит только из двух файлов, index.php и templateDetails.xml. Я убрал ссылки на все остальные файлы, чтобы показать «голое» отображение, без CSS. На самом деле, это хороший диагностический шаблон, который позволяет установить его и отслеживать ошибки, которые возникают в компоненте или в модуле.
В предыдущей статье мы изучили, как создать тему для WordPress. Давайте сегодня на основе этого же шаблона Corporate Blue попробуем создать сайт на второй по популярности CMS – Joomla! Поскольку в статье описывается в основном вёрстка, будем считать, что Joomla! у вас уже установлена. Если вы не знаете, как установить Joomla!, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано в самой первой статье. Вместо этого рассмотрим детально особенности создания шаблона именно для Joomla!
Добавление шаблона
Для начала, в любом удобном для вас месте создайте папку нашего шаблона «whitesquare». В ней должны находиться три подпапки: css, images и language. В папках css и images создайте файлы index.html со следующим содержимым:
Эти файлы являются заглушками и, по требованиям CMS, должны отображать пустую страницу при обращении к этим папкам напрямую.
Далее, в папке css создайте пустой файл стилей template.css, а в папке language подпапку en-GB, которая будет содержать пустой файл en-GB.tpl_whitesquare.ini и файл en-GB.tpl_whitesquare.sys.ini со следующим содержимым:Давайте подробно разберем, что все это значит. Папка language нужна для локализации, она может содержать подпапки с различными языками: en-GB, ru-RU и т.д. Каждая языковая папка включает два файла с ключами. Ключи представляют собой пару с названием ключа и его значением. Названия ключей для разных языков будут одинаковыми, а значения – разными. Такой механизм позволяет использовать шаблон для создания сайтов на разных языках. Поскольку это учебный пример, будем использовать только английский язык – en-GB. Первый файл en-GB.tpl_whitesquare.ini будет содержать ключи, которые увидят пользователи сайта, а второй — en-GB.tpl_whitesquare.sys.ini будет содержать ключи административных функций.
Далее нужно создать пустые файлы component.php, error.php и index.php. Они нам понадобятся в будущем.
Следующим шагом добавим картинки: favicon.ico, template_preview.jpg и template_thumbnail.jpg. Последние две – это превьюшки будущего шаблона и они имеют размеры 640х480 и 206х150 соответственно.
Последний файл, который нужно добавить – это templateDetails.xml. На данном этапе — это самый важный файл, он содержит подробное описание нашего шаблона:
Большая часть содержимого этого файла понятна, необходимо пояснить только следующее:
Поле description содержит тот самый ключ локализации, который мы указали в en-GB.tpl_whitesquare.sys.ini
Поле files содержит полный перечень всех файлов и папок, лежащих в корне шаблона.
Поле languages содержит список языковых файлов, а поле positions нам понадобится чуть позже.
Теперь, когда каркас шаблона готов, давайте добавим его в CMS. Для этого откройте панель администратора Joomla!, выберите пункт меню Extension -> Extension manager, перейдите на вкладку Install from Directory и в поле Install Directory укажите путь до папки whitesquare, в которой мы создавали файлы шаблона.Предварительный осмотр
Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также, на всех страницах, кроме главной, есть сайдбар слева и название страницы. Поиск и все виды меню мы оформим в виде модулей Joomla!, а все тексты будут оформлены через механизм локализации.
Структура страниц
Большинство руководств по созданию шаблонов для Joomla! ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на Joomla! в рамках предоставленных макетов.
Давайте начнем со структуры страниц. Управление страницами осуществляется в панели администратора через меню Content -> Article Manager. Для добавления новой страницы нажмите кнопку New и заполните форму. В поле Title введите заголовок страницы. Остальные поля оставьте без изменений. Добавьте таким образом страницы Home, About us, Services, Partners, Customers, Projects, Careers, Contact. После добавления, список страниц должен выглядеть вот так:
Шаблон страницы
Следующим шагом нам нужно сделать шаблон страницы Joomla! Откройте файл index.php, который мы создали в папке нашего шаблона и добавьте в него код, который создаст каркас страницы:
После этих действий у нас должна появиться серая страница с большим нестилизованным заголовком. К нему мы вернемся позже.
Логотип
После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.jpg. В блок header нашего шаблона вставьте разметку для логотипа:
В качестве альтернативного текста для изображения вставляется текст через стандартную функцию локализации Text::_(). Ключа TPL_WHITESQUARE_LOGO у нас еще нет, поэтому давайте добавим его в файл \language\en-GB\en-GB.tpl_whitesquare.ini:
К сожалению, после этого текст не появится на странице сайта. Дело в том, что мы добавляем ключ локализации в шаблон, который уже используется системой, а Joomla! так устроена, что она читает ключи локализации из этого файла только при первоначальной установке шаблона. Можно конечно удалить шаблон и добавить его в систему заново, но мы поступим проще – добавим этот же ключ в системный файл \language\en-GB\en-GB.tpl_whitesquare.ini, где – это папка, в которую установлена Joomla!Форма поиска
Joomla! уже содержит собственный модуль формы поиска. Его можно найти разделе Extensions -> Module Manager панели администратора. Если в вашей CMS он не установлен, то установить его можно, нажав кнопку New и выбрав из списка пункт Search.
Для того, чтобы поместить этот модуль в шаблон – нужно создать собственную «позицию» для этого модуля. Позиции (positions) – это специально размеченные области шаблона, в которые вставляются модули. Позиции описываются в файле templateDetails.xml в блоке positions:
После этого вернитесь в Module Manager и откройте модуль Search на редактирование. И в полях укажите следующие значения:
Box Label: пробел
Box Text: Search
Search Button: Yes
Button position: Right
Search Button Image: No
Button text: GO
Show Title: Hide
Position: Whitesquare Search
А на вкладке Advanced в поле Module Class Suffix введите «-block». Это позволит разделить стили формы поиска от содержимого страницы поиска.
Теперь, когда модуль подготовлен, нужно вставить его в шаблон index.php:
Осталось добавить стили в template.css:Навигация
Меню на страницах сайта создается в три этапа: сначала нужно создать абстрактное меню и определить его пункты, затем определить для него позицию в шаблоне и последним этапом создать модуль, который свяжет абстрактное меню с конкретной позицией.
Управление списками меню осуществляется в разделе Menus -> Menu Manager панели администратора. По умолчанию там уже есть меню под названием Main Menu. Зайдите в него.
Для того, чтобы создать новый пункт меню – нажмите кнопку New и заполните открывшуюся форму – следующим образом:
Menu Title: название страницы, например About us
Menu Item Type: Single Article
Select Article: About us
Создайте аналогичным образом все пункты главного меню: Home, About us, Services, Partners, Customers, Projects, Careers, Contact.Далее откройте templateDetails.xml и добавьте позицию главного меню:
Далее нужно создать модуль, который будет содержать меню. Модуль главного меню по умолчанию уже установлен в Joomla!, он называется Main Menu. Откройте его через меню Extensions -> Module Manager -> Main Menu. В поле Select Menu укажите Main Menu, а в поле Position: Whitesquare Menu. Поле этого нужно перейти на вкладку Advanced и в поле Module tag выбрать значение nav, а в поле Menu Class Suffix ввести «-top». Это позволит нам задавать CSS классы для этого меню более гибко и семантично.
Давайте теперь добавим нужную позицию в сам шаблон сразу после шапки:
На данном этапе меню уже появится на страницах, но без стилей. Стилизуем его:Заголовок страницы
Joomla! автоматически вставляет заголовки статей в содержимое страницы, но на главной странице нам заголовок не нужен, а на других, он должен иметь совсем другую верстку, поэтому давайте просто отключим автоматическую вставку заголовка и вставим заголовок внутри шаблона так, как это нам нужно.
Для начала немного теории. Настройки отображения элементов страниц задаются в Joomla! в трёх местах:- В настройках Article Manager задаются глобальные настройки для всех статей.
- В свойствах каждой статьи задаются настройки этой статьи и перебивают глобальные
- Если на странице добавлено меню, то настройки пункта меню, указывающего на данную страницу, будут перебивать все остальные настройки
- В панели администратора зайдите в Content -> Article manager, нажмите кнопку Options и на первой вкладке Articles для всех полей поставьте значения Hide и No.
- Далее, там же, в Article manager зайдите в каждую статью на вкладку Options и поставьте для всех полей значение Use Global.
- И последним шагом зайдите в Menus -> Menu Manager -> Main Menu и для каждой станицы на вкладке Options так же поставьте для всех полей значение Use Global.
Теперь нужно стилизовать получившийся блок. Сохраните фон заголовка в файл images /h1-bg.jpg и добавьте стилевые правила:Футер
Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images
images/footer-logo.jpg – логотип футера
images/social.jpg – спрайты больших иконок
images/social-small.jpg – спрайты маленьких иконокПосле того, как все ресурсы подготовлены, давайте взглянем на блок Sitemap. Он состоит из двух колонок. Сейчас, когда нативная поддержка переноса текста по столбцам не очень хорошо поддерживается в популярных браузерах гораздо проще сделать меню, состоящее из двух столбцов. Для этого в разделе Menus -> Menu Manager создайте меню Sitemap left с пунктами Home, About, Services и Sitemap right с пунктами Partners, Support и Contact. Пункты меню должны ссылаться на соответствующие статьи. Для каждого из этих двух меню нужно создать позиции sitemap-left и sitemap-right и связать меню с позициями через новые модули Sitemap left и Sitemap right. При добавлении модулей на вкладке Advanced в поле Menu Class Suffix вставьте значение –sitemap, для того, чтобы в CSS стилях отличать этот тип меню от остальных.
Далее делаем вёрстку в блоке footer файла index.php:
В этом блоке используется несколько локализованных строк, давайте их добавим в файлы локализации, как мы делали в блоке логотипа:
Прописываем стили в template.css:В итоге внутренняя страница сайта должна выглядеть вот так:
Главная страница
Главная страница у нас уже создана. Наполнение ее контентом выходит за рамки создания шаблона Joomla!, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самого шаблона. Первым делом необходимо нарезать все изображения этой страницы и сохранить в папку images, которая находится в корне папки, где установлена Joomla!. Назовём эти изображения так:
home-1.jpg
home-2.jpg
home-3.jpg
home-4.jpg
home-5.jpg
clients-1.jpg
clients-2.jpg
clients-3.jpg
clients-4.jpg
clients-5.jpg
clients-6.jpg
clients-7.jpg
Далее, перейдите в панели администратора к форме редактирования главной страницы Content -> Article Manager -> Home и на вкладке Content нажмите Tools -> Source code и введите содержимое страницы:Теперь осталось стилизовать данный код.
Сайдбар
Если вы посмотрите на psd макеты, то увидите, что внутренние страницы отличаются от главной наличием левой колонки.
Давайте добавим его в index.php перед вызовом контента страницы:
Этот блок будет выводиться на всех страницах, кроме главной. Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов.
Для полноты картины в качестве подменю предлагаю показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали другие виды меню. Создайте статьи под названиями: Lorem ipsum, Donec tincidunt laoreet, Vestibulum elit, Etiam pharetra, Phasellus placerat. Затем создайте новое меню под названием Submenu и добавьте в него вышеперечисленные страницы. После этого, создайте позицию submenu в templateDetails.xml и модуль Submenu, использующий эту позицию и меню Submenu. В свойствах модуля на вкладке Advanced укажите Menu Class Suffix: «-aside»
Блок карты особых вопросов не вызывает, не забудьте только добавить новый ключ локализации:
В качестве заглушки для карты создайте пустой файл sample.jpg и сохраните его в папку images в корне сайта Joomla!
В заключение, нам нужно добавить стили для вёрстки:Теперь давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в папку images сайта Joomla! Назовите изображения вот так:
about-1.jpg
about-2.jpg
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpgДалее перейдите в редактирование статьи в панели администратора и добавьте код через меню Tools -> Source code:
И стили в template.css:
В самом начале, когда мы создавали шаблон шапки, мы добавили в него поиск. Результатом поиска является страница, которая сейчас не очень хорошо выглядит. Давайте добавим для нее стили:
Модуль поиска предусматривает, что в шаблоне должна быть иконка поиска для кнопки, но поскольку в дизайне ее нет, то придется добавить ее самим. Для этого найдите любую бесплатную иконку с изображением лупы и сохраните ее под названием search.jpg в папку images шаблона. Размер картинки должен быть 16х16 пикселей.
Помимо index.php в корне шаблона лежат еще 2 php файла. Первый из них – это сomponent.php. Этот файл отображает страницу печати, которую пользователь сможет открыть, кликнув на иконку печати в содержании каждой статьи. В самом начале мы отключили показ этих иконок в статьях через меню Content -> Article Manager -> Options -> Show Print Icon в панели администратора. Но, поскольку мы делаем универсальный шаблон, создать этот файл мы обязаны. Наполните его следующим содержимым:
Как вы видите, этот файл полностью повторяет структуру файла index.php. Отличие только в том, что мы убрали ненужные для печати блоки: шапку, футер и боковую колонку.Последняя страница, которую осталось оформить – это страница вывода ошибки. Ее шаблон описывается в файле error.php. Код этого файла будет выглядеть следующим образом:
Заключение
На этом создание шаблона Joomla! закончено. Готовый проект можно скачать здесь.
Весной 2008 года в блоге Compass Designs был опубликован неплохой цикл статей о создании «чистого» шаблона для Joomla 1.5 (под «чистым» в данном случае понимается шаблон, сверстанный по современным стандартам, т.е. без использования таблиц и с грамотным применением каскадных таблиц стилей). Первые две части цикла содержат в основном общие объяснения терминологии, советы по организации разработки на локальном хосте и т.д., поэтому я решил опубликовать переводы только основных 4-х статей, которые собственно и содержат небольшое руководство по созданию шаблона. Итак, сегодня первая часть, содержащая основные сведения о построении шаблонов Joomla.
Создание простого пустого шаблона
Для того, чтобы понять, из чего состоит шаблон, мы начнем с рассмотрения пустого шаблона Joomla.
Файлы шаблона
Шаблон Joomla содержит некоторый набор файлов и директорий. Шаблоны должны быть размещены в директории /templates/ установленного дистрибутива Joomla, каждый в собственной поддиректории. Т.е., если у нас установлены два шаблона, то директория /template/ выглядит примерно так:
Обратите внимание, что название директории для шаблона должно совпадать с названием этого шаблона, как в данном случае «element» и «voodoo». Как правило, названия чувствительны к регистру букв и не должны содержать пробелы. Внутри директории шаблона находятся два ключевых файла:
Имена этих файлов и их расположение должны быть в точности такими, поскольку именно так они вызываются ядром Joomla.
Первый из них — это XML-файл шаблона
templateDetails.xml
Это файл мета-данных в XML-формате, сообщающий Joomla, какие другие файлы, включая файлы изображений, нужны для отображения страницы, которая использует данный шаблон. Обратите внимание на букву «D» в верхнем регистре. Также он сожержит информацию об авторе и копирайте. И наконец, он используется при инсталляции шаблона в административном интерфейсе.
Второй файл — это основной движок шаблона:
index.php
Этот файл является самым важным. Он определяет визуальное расположение элементов сайта и сообщает Joomla CMS, куда поместить различные компоненты и модули. Этот файл является комбинацией PHP и (X)HTML.
Практически во всех шаблонах используются дополнительные файлы. Общепринято (хотя это и не является требованием ядра) называть и размещать эти файлы следующим образом:
Это просто примеры. Ниже приведено описание каждого файла:
/element/template_thumbnail.jpg
Скриншот шаблона (обычно уменьшенный до 140 пикселей в ширину и 90 пикселей в высоту). После установки шаблона, этот скриншот можно увидеть с помощью функции «Preview Image» в разделе «Template Manager» административного интерфейса, а также в модуле выбора шаблона оформления в публичной части (если этот модуль задействован).
/element/css/template.css
Таблица стилей шаблона. Название директории устанавливается произвольно, но вы должны указать, путь к этому файлу в index.php. Название файла тоже может быть любым. Обычно применяется указанные выше название файла, но ниже вы увидите, что есть некоторые преимущества и у использования дополнительных CSS-файлов.
/element/images/logo.jpg
Любые изображения, включенные в шаблон. Опять же, из организационных соображений, большинство разработчиков размещают их в директории images. Мы указали картинку с названием logo.jpg в качестве примера.
templateDetails.xml
templateDetails.xml должен содержать перечень всех файлов, содержащихся в шаблоне. Также он включает информацию об авторе и копирайте. Часть этой информации можно увидеть в менеджере шаблонов в административном интерфейсе Joomla. Ниже приведен пример XML-файла:
Поясним отдельные строки:
Содержимое XML-документа — это инструкции для инсталлятора в административном интерфейсе Joomla. Опция type=«template» сообщает инсталлятору, что мы устанавливаем шаблон, предназначенный для Joomla версии 1.5.
Определяет название шаблона. Это имя также будет использовано при создании поддиректории шаблона в директории templates. Если вы устанавливаете шаблон вручную, то вы должны создать поддиректорию с названием, идентичным названию шаблона.
Имя автора шаблона (вероятно, ваше имя).
Информация о копирайте. Руководство по лицензированию для разработчиков и дизайнеров вы можете найти в форумах Joomla.
E-mail для связи с автором шаблона.
Адрес сайта автора.
Различные файлы, используемые в шаблоне.Файлы, используемые в шаблоне, заключаются в теги :
Секция «files» содержит все основные файлы типа PHP-скриптов или изображений для превью шаблона. Каждый файл перечисляется в этой секции внутри тегов
и . Также здесь указываются дополнительные файлы, например JavaScript-файлы, используемые в шаблоне.Файлы картинок, используемых в шаблоне, также перечисляются в секции «files». Опять же, каждый файл заключается в теги
и . Пути к файлам указываеются относительно корневой директории шаблона. Например, если шаблон находится в директории 'YourTemplate', а все картинки находстя в поддиректории 'images', то правильный путь к файлу будет:Наконец, в секции files перечисляются все файлы стилей, используемые в шаблоне. И снова, имя файла заключается в теги
и , а путь файла указывается относительно корневой папки шаблона.
Позиции модулей, используемые в шаблоне.
Описывает параметры, которые могут задаваться для различных функций шаблона, например, для изменения его цвета.Содержимое модуля
Можно также вывести содержимое одного модуля, для этого используется конструкция:
- name — это название модуля, в данном примере это будет mod_custom
- title — заголовок модуля, должен совпадать с настройками модуля
В эту конструкцию можно добавлять дополнительные атрибуты, для контроля вывода содержимого модуля, например style=«xhtml».
При добавлении позиций или модуля в шаблон, не забывайте проверять настройки модулей — публикацию модуля и доступность модуля для текущего пользователя.
Содержимое модулей
Для вывода содержимого модулей используется конструкция:
- name — позиция, в которой опубликованы модули
- style — стиль для вывода позиции модулей
Для контроля и подсчета модулей в позициях предусмотрен метод countModules.
Основное содержимое (компонент)
Для вывода основного содержимого, как правило это является содержимое компонента, используется следующая конструкция:
Руководство по созданию макета (болванки) для шаблона
Для начала необходима обычная XHTML страничка. Можно воспользоваться каким-нибудь сервисом для генератора шаблонов. Или создать шаблон самостоятельно. Рассмотрим, в качестве примера, часто используемый шаблон с шапкой, футером и двумя колонками по бокам.
Разметка HTML будет выглядеть так:
И файл стилей style., для данной разметки:
Использование параметров в шаблоне
Параметры для шаблона устанавливаются в XML файле описания шаблона. Их можно устанавливать в административной панели Joomla для нужного шаблона («Расширения» -> «Менеджер шаблонов»). С помощью этих параметров можно контролировать поведение шаблона, например, задать какой-то цвет для фона, вывести в качестве логотипа нужную картинку и т. п. Для получения значения параметра в шаблоне используется:
Соответственно для вывода значение параметра используется:
Стандартно в Joomla используется несколько типов для параметров, которые описываются в XML файле.
Содержимое HEAD
Здесь выводятся содержимое между тегами
…, мета описание, заголовок страницы, подключаемые JavaScript и т. д. Для этого используется конструкция:Обзор макета для Joomla
С точки зрения Joomla этот макет разбивается на области, где будет выводиться основное содержимое (компонент) и дополнительное (модули).
При создании шаблонов Joomla используются следующие конструкции для вывода содержимого:
Читайте также: