Шаблон joomla 3 верстка

Создание простого шаблона для Joomla!

It has been suggested that this article or section be split into specific version Namespaces. (Discuss). If version split is not obvious, please allow split request to remain for 1 week pending discussions. Proposed since 7 >> ago.

Введение

Цель этого урока — послужить введением в создание Joomla! шаблонов. Он будет охватывать необходимые файлы и код, который нужен для создания базового шаблона. Код представлен в таком виде, что его можно скопировать и вставить в Ваш шаблон с незначительными адаптациями.

Установка структуры каталогов

Чтобы создать самый простой шаблон, «»создайте новую папку» в папке «шаблоны». Назовите папку по названию Вашего шаблона, т. е. «mynewtemplate».

Используя ваш любимый текстовый редактор, создайте файлы index.php и templateDetails.xml Для поддержания порядка в файлах, создайте «‘две новые папки» » с названием «images» и «css». Внутри папки «css» создайте файл с названием template.css .

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

Это самые простые практичные найстройки. Структура папок и файлов может быть такой:

* mynewtemplate/ ** css/ *** template.css ** images/ ** index.php ** templateDetails.xml

Создание базового templateDetails.xml файла

TemplateDetails.xml файл необходим. Без него, ваш шаблон не будет виден в Joomla!. Этот файл содержит ключи метаданных о шаблоне.

Структура и синтаксис файла зависит от той или иной версии Joomla.

Для , используйте следующее:

   mynewtemplate 2008-05-01 John Doe john@example.com http://www.example.com John Doe 2008 GNU/GPL 1.0.2 My New Template index.php templateDetails.xml images css  breadcrumb left right top user1 user2 user3 user4 footer  

Для и более поздних, используйте следующую версию файла. Измените цифры версии version=»2.5″ на версию вашего Joomla! пакета.

  mynewtemplate 2008-05-01 John Doe john@example.com http://www.example.com John Doe 2008 GNU/GPL 1.0.2 My New Template index.php templateDetails.xml images css  breadcrumb left right top user1 user2 user3 user4 footer  

Так что, как видите, у нас есть набор установок между тегами разметки (в ). Наилучший способ это скопировать и вставить этот фрагмент кода в Ваш templateDetails.xml файл и изменить соответствующие параметры (такие как и ).

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

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

Создание базового index.php файла

index.php файл является ядром каждой страницы Joomla!. По сути, вы делаете обычну html-страницу, в которую вставляете PHP код, который будет вставлять содержание вашего сайта. Шаблон создается путем добавления кода в Joomla с указанием позиций модулей и компонентов в соответствующем разделе вашего шаблона. Все, что добавляется в шаблон будет отображаться на всех страницах, кроме разделов сформированных через систему управления сайтами Joomla (или индивидуальным кодом).

На этой странице мы покажем приготовленный базовый код, который Вы можете вырезать и и использовать в вашем дизайне.

Начнем

Шаблон Joomla начинается с следующих строк:

Первая строка предотвращает действия злоумышленников, которые хотели бы использовать код вашей страницы в своих целях.

Вторая строка-это Объявление типа документа (DOCTYPE), который сообщает браузеру (и Веб-краулерам) какой тип HTML-кода используется на вашей странице. Тип документа, используемый здесь совместим с HTML5, новой версией HTML, которая во многом сохраняет обратную совместимость, но содержит много новых возможностей. Вы должны знать, что это не будет хорошо работать в Internet Explorer 8 или более ранних без патчей. Вам стоит продумать это и учесть пожелания ваших клиентов, прежде чем решить, какой Тип документа использовать. Так или иначе указанный тип документа является основным в Joomla версии и более поздних.

Третья строка начинает наш HTML-документ и указывет язык сайта. HTML-документ делится на две части, заголовок (head) и тело (body). Заголовок будет содержать информацию о документе, а тело будет содержать код сайта, который управляет макетом.

Заголовок

  baseurl ?>/templates/system/css/system.css" type="text/css" /> baseurl ?>/templates/system/css/general.css" type="text/css" /> baseurl ?>/templates/template; ?>/css/template.css" type="text/css" /> 

Первая строка просит Joomla вставить соответствующую заглавную информацию. Это включает в себя Заголовок страницы, Мета-данные, а также код JavaScript. Следующие строки создают ссылки на две страницы стилей и собственную таблицу стилей (если это именованный шаблон.в CSS и находится в папке «CSS», в папке вашего шаблона каталога. Так что если ваш шаблон в http://www.mysite.com/templates/my_template/ тогда CSS-файлы будут идти в http://www.mysite.com/templates/my_template/css/ ).

Тело (Основная часть страницы)

Невероятно, но этого будет вполне достаточно! Да, это очень простой макет, но это будет работать. Все остальное будет сделано на Joomla!. Эти линии, обычно называют декларациями jdoc, которые сообщають Joomla запрос на вставку информации из определенных частей системы Joomla. Внимание: убедитесь, что ваше меню готово быть размещено в «верхней» позиции модуля.

Module Positions

Above, the line which says name=»top» adds a module position called top and allows Joomla to place modules into this section of the template. The type=»component» line contains all articles and main content (actually, the component) and is very important. It goes in the centre of the template.

Note: You can add your own module lines anywhere you want in the body, but you have to add a corresponding line to the templateDetails.xml file which sits alongside the index.php of your template.

End

Finish it off — one last bit:

Custom Images

If you want to add any images to the template you can do so like this:

Here the template variable will fill in the name of your template.

Custom CSS

You can add custom css like this:

baseurl ?>/templates/template;?>/css/styles.css" type="text/css" />

Every file which is added must have a line in the templateDetails.xml file for the template, unless it resides in a sub-folder (which can be included in a element).

Это будет в окончательной версии файла:

Тестирование шаблона

Найдите шаблон в менеджере шаблонов (в меню Расширения), выделите его и нажмите кнопку «‘по умолчанию»‘ (в виде звездочки), чтобы сделать его шаблоном по умолчанию.

В Joomla! 1.5, новый шаблон будет отображаться непосредственно в Диспетчере шаблонов, которые доступные также через меню Расширения -> менеджер шаблонов.

+ в Joomla! 2.5 и позже, сначала надо указать для Joomla!, что Вы создали новый шаблон. Эта функция называется «Откройте для себя расширения» и может быть доступна через Расширения -> менеджер расширений -> Найти (например выбрать «одну из вкладок»). Нажмите кнопку «‘открыть»‘ (т. е. найти «кнопку»), чтобы найти свой шаблон, то выберите его и нажмите «установить», чтобы установить его. Теперь Ваш шаблон должен отображаться в менеджере шаблонов (стилей), доступный через Расширения -> менеджер шаблонов.

Кроме того Вы можете создать свой шаблон вне Joomla! и просто установить его как любое обычное расширение.

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

Архивизация шаблона для установки

Подведение итогов

Теперь у вас должен быть создан работающий шаблон. Он пока не производит впечетление. То, что можно сделать сейчас — это начать экспериментировать с макетом.

Источник