Joomla в каком файле шаблон
Обновлено: 04.07.2024
Split Page into Specific Joomla! Versions - J2.5 and 3.x
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 5 >> ago.
Содержание
Введение
Цель этого урока - послужить введением в создание Joomla! шаблонов. Он будет охватывать необходимые файлы и код, который нужен для создания базового шаблона. Код представлен в таком виде, что его можно скопировать и вставить в Ваш шаблон с незначительными адаптациями.
Установка структуры каталогов
Чтобы создать самый простой шаблон, ""создайте новую папку" в папке "шаблоны". Назовите папку по названию Вашего шаблона, т. е. "mynewtemplate".
Используя ваш любимый текстовый редактор, создайте файлы index.php и templateDetails.xml Для поддержания порядка в файлах, создайте "'две новые папки" " с названием "images" и "css". Внутри папки "css" создайте файл с названием template.css .
Конечно можно разместить весь Ваш код CSS напрямую в Вашем index.php файле, но многие веб-разработчики предпочитают размещать свой код CSS в отдельном файле, который может быть связан с несколькими страницами, используя тег ссылки . Это также может сократить время загрузки страниц, так как отдельный файл может быть кэширован.
Это самые простые практичные найстройки. Структура папок и файлов может быть такой:
Создание базового templateDetails.xml файла
TemplateDetails.xml файл необходим. Без него, ваш шаблон не будет виден в Joomla!. Этот файл содержит ключи метаданных о шаблоне.
Структура и синтаксис файла зависит от той или иной версии Joomla.
Для , используйте следующее:
Для и более поздних, используйте следующую версию файла. Измените цифры версии version="2.5" на версию вашего Joomla! пакета.
Так что, как видите, у нас есть набор установок между тегами разметки (в <element> ). Наилучший способ это скопировать и вставить этот фрагмент кода в Ваш templateDetails.xml файл и изменить соответствующие параметры (такие как <name> и <author> ).
В <files> части должны содержаться все файлы, которые Вы используете в шаблоне. Вероятно Вы еще не знаете как они будут называться, но не волнуйтесь, обновите эту часть файла позже. Элемент <folder> можно использовать, чтобы определить всю папку сразу.
Оставьте позиции такими как они есть - это обычный набор, который позволит Вам легко переключаться из стандартных шаблонов.
Создание базового index.php файла
index.php файл является ядром каждой страницы Joomla!. По сути, вы делаете обычну html-страницу, в которую вставляете PHP код, который будет вставлять содержание вашего сайта. Шаблон создается путем добавления кода в Joomla с указанием позиций модулей и компонентов в соответствующем разделе вашего шаблона. Все, что добавляется в шаблон будет отображаться на всех страницах, кроме разделов сформированных через систему управления сайтами Joomla (или индивидуальным кодом).
На этой странице мы покажем приготовленный базовый код, который Вы можете вырезать и и использовать в вашем дизайне.
Начнем
Шаблон Joomla начинается с следующих строк:
Первая строка предотвращает действия злоумышленников, которые хотели бы использовать код вашей страницы в своих целях.
Вторая строка-это Объявление типа документа (DOCTYPE), который сообщает браузеру (и Веб-краулерам) какой тип HTML-кода используется на вашей странице. Тип документа, используемый здесь совместим с HTML5, новой версией HTML, которая во многом сохраняет обратную совместимость, но содержит много новых возможностей. Вы должны знать, что это не будет хорошо работать в Internet Explorer 8 или более ранних без патчей. Вам стоит продумать это и учесть пожелания ваших клиентов, прежде чем решить, какой Тип документа использовать. Так или иначе указанный тип документа является основным в Joomla версии и более поздних.
Третья строка начинает наш HTML-документ и указывет язык сайта. HTML-документ делится на две части, заголовок (head) и тело (body). Заголовок будет содержать информацию о документе, а тело будет содержать код сайта, который управляет макетом.
Заголовок
Тело (Основная часть страницы)
Невероятно, но этого будет вполне достаточно! Да, это очень простой макет, но это будет работать. Все остальное будет сделано на 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.
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:
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 <folder> element).
Это будет в окончательной версии файла:
Тестирование шаблона
Найдите шаблон в менеджере шаблонов (в меню Расширения), выделите его и нажмите кнопку "'по умолчанию"' (в виде звездочки), чтобы сделать его шаблоном по умолчанию.
В Joomla! 1.5, новый шаблон будет отображаться непосредственно в Диспетчере шаблонов, которые доступные также через меню Расширения -> менеджер шаблонов.
Кроме того Вы можете создать свой шаблон вне Joomla! и просто установить его как любое обычное расширение.
Подсказка: есть несколько способов просмотреть главную страницу шаблона, если Вы поместили вместе, либо вставить стили в заголовок индексной страницы или подключаться непосредственно к таблице стилей что Вы будете использовать часто. Вы можете удалить эти ссылки перед упаковкой файла.
Архивизация шаблона для установки
Подведение итогов
Теперь у вас должен быть создан работающий шаблон. Он пока не производит впечетление. То, что можно сделать сейчас - это начать экспериментировать с макетом.
В этой статье пойдет речь о создании своего шаблона для Joomla 3.х с возможностью изменения настроек через административную панель самой системы управления.
Зачем это нужно? Наверняка вы слышали о том, что CMS Joomla «тяжелая», в ней постоянно выскакивают ошибки, «едет» верстка, «отваливаются» скрипты. В основном это связано с шаблоном, который вы используете, а именно – с подключением множества плагинов и скриптов, фреймворков (как css/js, так и php), которые в процессе работы сайта и для его продуктивности практически не нужны. Поэтому мы сталкиваемся с долгой загрузкой в Google Page Speed и многочисленными ошибками, которые влияют на продвижение сайта в поисковиках.
Для решения этой проблемы мы сделаем свой шаблон (template), в котором можно будет настраивать внешний вид, менять цвета, добавлять информацию. Настройками можно легко управлять с помощью административной панели самой Joomla.
Итак, статья для вас, если:
- Вы хотите создавать свои шаблоны для CMS Joomla 3.x и продавать их либо обеспечивать удобство для наполнения контентом и ведения для заказчика.
- Если вам надоели клубные «тяжелые» шаблоны с кучей ненужных настроек и скриптов.
- Если не хотите использовать шаблоны со сторонними ссылками и вредоносным кодом, что снижает шансы на продвижение ресурса.
Структура шаблона
Для начала нам необходимо создать папку со следующим содержимым. Попутно поясняю, что и зачем нужно, простым языком, чтобы разобраться мог каждый (начнем с конца):
1. templateDetails.xml – файл, в котором мы описываем информацию о разработчике, версии, вносим информацию о содержимом, позиции модулей, языковые файлы, настройки.
2. template_preview.jpg, template_thumbnail.jpg – изображения шаблона, можно в Adobe Photoshop сделать в виде иконок. У меня они такие:
3. index.php – главный файл, в котором будет подключение скриптов, параметров, модули. И самое главное – верстка.
4. index.html – пустой файл html, который должен содержаться в каждой папке, чтобы мошенники не смогли просмотреть содержимое.
5. error.php – страница 404, можно настраивать как угодно, тем самым уйти от стандартной страницы 404 Joomla, которая выглядит не очень презентабельно :)
6. language – языковые файлы, если собираетесь делать шаблон мультиязычным.
7. js – папка со скриптами, со временем можно подключить все самое необходимое для работы сайта.
8. images – говорит само за себя, здесь хранятся картинки шаблона. Рекомендую здесь хранить картинки, относящиеся только к оформлению, так как будет неудобно грузить картинки для статей именно в папку шаблона.
9. html – папка для переопределения модулей и компонентов Joomla. Об этом поговорим позже, но, забегая вперед, скажу, что в этой папке храним все то, что не должно перезаписаться при обновлении модуля или компонента.
10. fonts – в эту папку можно подключить шрифты для сайта, если таковых нет на Google Fonts. Гугл шрифты лучше подключать через основной шаблон. Так вы получите более высокую оценку в Google Page Speed.
11. css – папка со стилями для шаблона, которые мы подключим к нашему шаблону.
Файл templateDetails.xml
Дальше нам нужно заполнить этот файл содержимым, которое будет описывать позиции модулей, настройки, информацию о версии и разработчике, языковые файлы. Рассмотрим подробнее.
1. Первая строчка обязательная, содержит версию xml и кодировку:
2. Далее открываем тег extension и начинаем описывать наше приложение:
Указываем версию Joomla, тип расширения, клиент установки и метод установки.
3. Рассмотрим следующие строчки.
В данном виде содержится языковая переменная (как пример), ниже рассмотрим, как это используется на практике.
Здесь и так все понятно :)
Тоже не нуждается в пояснении:
Информация о лицензии:
Всю информацию в этом блоке описываете на свое усмотрение.
4. Следующим шагом нужно описать файловое содержание, то есть перечисляем в теге files все файлы и папки, которые необходимо установить.
Важно: частой ошибкой при установке бывает либо отсутствие файла index.html во всех папках, либо отсутствие самого файла – поэтому важно проверить соответствие файлов и папок в описании и по факту.
5. Языковые файлы. Если вы делаете шаблон для русскоязычной аудитории – в этом нет необходимости, можно не добавлять этот раздел, а в теге description выше в описании шаблона можно просто написать русское описание напрямую. Но, если приложение предназначено и для других стран, достаточно будет добавить англоязычную версию по примеру ниже.
Языковые файлы при установке добавятся в глобальную папку языков и автоматически будут подхватываться Джумлой в зависимости от выбранной локализации в админ-панели.
Самое главное – верно указать теги и названия файлов. Все аналогично для любой локализации, сейчас рассматриваем на примере русской локализации.
- ru-RU.tpl_universum.ini – для лицевой части шаблона, отображения на сайте.
- ru-RU.tpl_universum.sys.ini – для административной части. Описываем позиции модулей, переменные, описание настроек.
Выше мы добавили:
TPL_UNIVERSUM_DESCRIPTION – это и есть переменная, которую мы запишем в языковой файл, и Joomla будет «подтягивать» значение из него.
Открываем файл ru-RU.tpl_universum.ini и записываем значение переменной:
Важно: каждая языковая переменная описывается с новой строчки.Результат добавления description можно увидеть при установке шаблона:
Чтобы увидеть эту же информацию в настройках, необходимо эту же переменную добавить в файл ru-RU.tpl_universum.sys.ini:
Идем дальше.
6. Описываем позиции шаблона (что и где у нас будет выводится), для этого потребуется раздел positions:
Если у вас уже есть html-верстка, то важно заранее продумать, какие блоки и позиции нужны, где и что будет повторяться, и, исходя из этой информации, спланировать позиции модулей. Если прописать позиции напрямую в шаблоне и не указать ее в этом файле, это повлияет только на отображение списка позиций при публикации модуля, но можно записать вручную, и модуль опубликуется.
7. Параметры шаблона. В этом разделе мы можем указать настройки, которые можно менять в административной панели Joomla. Это удобно, чтобы клиенту или администратору не пришлось открывать файлы с кодом, а можно было изменить информацию в пару кликов. Настройки шаблона могут быть самые разные и зависеть только от вашей фантазии. Мы рассмотрим самые основные, которые помогут вывести необходимую информацию и отредактировать цвета оформления, зачастую этого достаточно. Далее по примеру можно добавить более гибкие настройки шаблона, а также неограниченное количество вкладок для удобства группировки настроек по смыслу.
Задать настройки шаблона нам поможет раздел config. Вот так выглядят параметры в админ-панели Joomla:
Тегом <fieldset name="basic"> можно задать вкладки, внутри fieldset располагаем поля настроек. Рассмотрим, из чего состоят поля.
Значение по умолчанию (может отличаться в зависимости от типа поля):
Все типы полей можно посмотреть на официальном сайте Joomla.
Языковые переменные, о которых мы говорили выше, их необходимо прописать в файле ru-RU.tpl_universum.sys.ini для отображения в админке:
Если шаблон рассчитан только на русскоязычную аудиторию, то можно написать напрямую в значениях полей на русском языке.
По умолчанию, Joomla! доступна к скачиванию с двумя стандартными шаблонами. больше шаблонов вы можете найти на сайтах, посвященных Joomla! Или, при наличии достаточных навыков, вы можете сделать свой собственный шаблон.
Список установленных шаблонов и доступные действия над ними можно увидеть в "Менеджере шаблонов" (находится в админцентре).
Как установить новый шаблон?
Есть 2 способа установки шаблона: с помощью инсталлятора Joomla и вручную. 1. В админцентре выберите "Установка" - "Установить шаблоны сайта" (или "Шаблоны админцентра, в зависимости от типа устанавливаемого шаблона). Далее выберите архив с шаблоном на вашем жестком диске и нажмите кнопку "Установить".
После установки направляйтесь в "Сайт" - "Управление шаблонами" - "Шаблоны сайта". Вы можете увидеть название только что установленного шаблона в списке других шаблонов. Выберите шаблон и нажмите "Сделать по умолчанию".
2. Распакуйте шаблон в папку на локальном компьютере и загрузите её по FTP на сайт в папку templates
Как можно изменить шаблон?
Шаблон - это папка, находящаяся в папке templates вашего сайта, в которой хранятся файлы xml, php, css и изображения. Вы можете изменить эти файлы через специальные программы или через интерфейс админцентра.
В админцентре выберите "Сайт" - "Управление шаблонами" - "Шаблоны сайта". Далее выберите шаблон, который собираетесь изменить. После чего нажмите кнопку "Изменить HTML" или "Изменить CSS".
CSS - это стили вашего шаблона. С помощью css можно сделать оформление каждому элементу шаблона. HTML - это главный файл, в котором осуществляется вывод содержимого сайта. В папке этот файл называется index.php.
Как добавить новую позицию в шаблон?
Прежде всего для создания новой позиции в шаблоне, вам необходимо определиться с названием позиции. Существующие позиции на сайте вы можете посмотреть в "Админцентр" - "Управление шаблонами" - "Позиции".
После того, как вы выбрали название позиции, открывайте index.php вашего шаблона и добавьте строчку
в нужное место, где "position_name" - это название позиции.
Где взять описание классов стилей Joomla 1.0?
Большинство необходимых классов и стилей описано в учебнике [Обучение CSS-стилям Mambo/Joomla за 5 минут] Плюс вы можете скачать себе blank.css, в котором наиболее полно описаны стили. От других подобных отличает то, что все параметры CSS уже прописаны, но пусты. Остается только заполнить их.
Как в index.php правильно задать путь до картинки?
Как же правильно прописать путь к картинке, находящейся в папке /images шаблона? Вообще, путь до картинки может быть задан двумя способами - относительным путем и абсолютным.
Относительный (от корня сайта):
Пояснение по конструкциям php, использованным в вышеприведенных примерах:
Как сделать приветствие на сайте вида "Здравствуйте Вася Пупкин"
Если это необходимо жестко зашить в шаблон, то поможет такая конструкция:
Каждому браузеру свой CSS
Обычно это решается функцией @import, но если она не может быть использована, попробуйте это:
Вышеприведенный код проверит браузер и если он Internet Explorer, то подключит файл ie-css.css, если же нет, то будет использован templatecss.css. Для поддержки большего количества браузеров можно доработать код, как это показано ниже:
Вот пример, как бы выглядел код в реальном сайте:
Есть еще другой способ подключения определенного стиля для браузера Internet Explorer:
Причина Часто шаблоны бывают сверстаны на слоях (DIV) с использованием "плавающих" элементов-блоков. Ширина этих элементов фиксированна и, в соответствии со стандартом, не должна меняться ни в коем случае. Т.к. Internet Explorer "самый умный" браузер и ему закон не писан , то он все же расширяет блоки, которые, не вмещаясь в отведенные для них места, перемещаются вниз. Проще говоря - они просто выталкиваются соседними элементами. FF и Опера, когда содержимое блока не влазит в него, просто накладывают блоки друг на друга. При этом содержимое блоков часто вылазит за их границы. Очень часто подобное проявляется на страницах с таблицами и с различными фильтрами, выбором отображения и т.п. Этот "косяк" будет проявляться на ВСЕХ шаблонах, где используются слои (DIV) и ширина табличек слишком большая. Если бы шаблон был сверстан на таблицах, то его просто расперло бы в ширину.
Как решить проблему? Сейчас несложно догадаться, что надо сделать - надо уменьшить ширину содержимого блоков. Необходимо отключить фильтры, поля сортировки, лишние столбцы в таблице со списком статей. Идем например в Меню - mainmenu - ссылка на News - Latest и настраиваем страницу, пока все не будет ok. Для понимания сказанного смотрим приаттаченный скриншот.
Также блоки может распирать контент, содержащий неразрывные пробелы - ;Как изменить footer в шаблоне, убрать или добавить внизу надпись, copyright, рекламу (При поддержке и т.д.)
Есть несколько способов изменить footer сайта.
- Отредактировать файл includes/version.php. В это файле ищем строчки
Их и надо заменять на свой текст.
- Также можно удалить из файла шаблона следующий код, если он там присутствует:
- В нужном вам месте шаблона вставить код
и создать модуль с нужным содержимым и расположить его в позиции footer
- Реклама находится в файле includes/footer.php.
Про выпадающее меню в Joomla
Многие люди при создании своего собственного шаблона Joomla задаются вопросом: "Как лучше организовать меню?". Некоторые используют Flash-меню, некоторые вставляют JavaScript-меню. Я не люблю использовать эти элементы в своих работах, мне нравится чистый код, не обремененный лишними файлами. Вероятно, вы зададите вопрос: "Как же тогда сделать привлекательное меню?".
Есть много способов создания привлекательного выпадающего меню с помощью CSS, в основе большинства которых лежит использование списков (li). Один из таких способов мы сейчас и рассмотрим ниже.
Существует меню под названием "suckerfish" (не спрашивайте меня, почему его так назвали) - маленький, чистый код, 12 строчек JavaScript и абсолютно бесплатный!
Итак, скачайте модуль и установите его. Теперь его необходимо настроить соответствующим образом. Первое, что необходимо сделать - это присвоить модулю "CSS-суффикс". Обычно, я использую "mainnav". После нужно задать стиль меню - "Плоский список" и выпадающее меню - "Да".
После того, как вы опубликуете модуль в нужной позиции, можно приступать к редактированию CSS. Ниже использован небольшой трюк, на который не понадобилось время, чтобы разобраться в нем. Но вы можете пропустить это, и и просто скопировать весь код к себе в шаблон.
Руководство по созданию макета (болванки) для шаблона
Для начала необходима обычная XHTML страничка. Можно воспользоваться каким-нибудь сервисом для генератора шаблонов. Или создать шаблон самостоятельно. Рассмотрим, в качестве примера, часто используемый шаблон с шапкой, футером и двумя колонками по бокам.
Разметка HTML будет выглядеть так:
И файл стилей style., для данной разметки:
Обзор макета для Joomla
С точки зрения Joomla этот макет разбивается на области, где будет выводиться основное содержимое (компонент) и дополнительное (модули).
При создании шаблонов Joomla используются следующие конструкции для вывода содержимого:
Содержимое HEAD
Здесь выводятся содержимое между тегами <head>…</head>, мета описание, заголовок страницы, подключаемые JavaScript и т. д. Для этого используется конструкция:
Основное содержимое (компонент)
Для вывода основного содержимого, как правило это является содержимое компонента, используется следующая конструкция:
Содержимое модулей
Для вывода содержимого модулей используется конструкция:
- name — позиция, в которой опубликованы модули
- style — стиль для вывода позиции модулей
Для контроля и подсчета модулей в позициях предусмотрен метод countModules.
Содержимое модуля
Можно также вывести содержимое одного модуля, для этого используется конструкция:
- name — это название модуля, в данном примере это будет mod_custom
- title — заголовок модуля, должен совпадать с настройками модуля
В эту конструкцию можно добавлять дополнительные атрибуты, для контроля вывода содержимого модуля, например style=«xhtml».
При добавлении позиций или модуля в шаблон, не забывайте проверять настройки модулей — публикацию модуля и доступность модуля для текущего пользователя.
Использование параметров в шаблоне
Параметры для шаблона устанавливаются в XML файле описания шаблона. Их можно устанавливать в административной панели Joomla для нужного шаблона («Расширения» -> «Менеджер шаблонов»). С помощью этих параметров можно контролировать поведение шаблона, например, задать какой-то цвет для фона, вывести в качестве логотипа нужную картинку и т. п. Для получения значения параметра в шаблоне используется:
Соответственно для вывода значение параметра используется:
Стандартно в Joomla используется несколько типов для параметров, которые описываются в XML файле.
Читайте также: