Joom4all.ru
Если вы решились самостоятельно создать шаблон для Joomla 3 , тогда вам придется набраться терпения ведь данный процесс пусть и не самый сложный, но занимает немало времени.
На нашем сайте уже накопилось достаточно много информации на тему того как создать шаблон для Joomla 3 , однако по причине того что все статьи писались в разное время найти их среди множества других задача не из легких.
По этой причине мы решили написать одну общую статью, в которой обсудим весь процесс создания шаблона для Joomla 3 с нуля и дадим ссылки на соответствующие материалы по данной теме. Эта информация будет полезна не только новичкам, но и опытным веб-разработчикам.
Создание любого шаблона для сайта начинается с его макета, макет этот можно нарисовать самостоятельно, если есть определенные навыки и фантазия, а можно доверить это дело специалистам.
Со своей стороны могу посоветовать сайт фриланс-услуг Kwork, где можно заказать макет шаблона в формате PSD по минимальной цене.
После того как с макетом определились можно приступать не посредственно к созданию шаблона. Для этого потребуется:
Создать минимально необходимый набор файлов и папок. Не обязательно создавать файлы заново, можно пойти на хитрость и скопировать их с готового шаблона. В дальнейшем эти файлы мы будем наполнять своим содержимым. К обязательным файлам можно отнести файл структуры index.php, а так же файл манифеста templateDetails.xml. Набор папок зависит от сложности шаблона и от ваших личных предпочтений.
Создание специального установочного файла templateDetails.xml. Данный файл является неотъемлемой частью любого устанавливаемого расширения Joomla, в нем мы указываем какие файлы и папки присутствуют в шаблоне, объявляем имена позиций для модулей и некоторые другие детали. Более подробную информацию о файле templateDetails. xml и его содержимом читайте в соответствующей статье (ссылка выше).
Верстка шаблона. Это самая интересная и в то же время самая сложная часть в создание собственного шаблона для Joomla. Изначально стоит набросать общий каркас для шаблона, а далее по порядку верстать отдельные его элементы. Этапы верстки отдельных элементов шаблона можно разбить по пунктам:
Верстка шапки сайта – размечаем области и границы, добавляем позиции для модулей, оформляем при помощи CSS.
Верстка области контента. После того как с шапкой разобрались, стоит уделить особое внимание основному содержимому шаблона – области между шапкой и футером. Тут так же стоит позаботиться о позициях для модулей, выделить позицию под хлебные крошки, системные уведомления, всевозможные меню и так далее.
Верстка и создание футера сайта. Приемы стандартные, размечаем области, оформляем внешний вид при помощи CSS.
Доработка и заключительные штрихи.
Локализация шаблона. На данном этапе шаблон практически готов, осталось внести незначительные изменения, создать файлы локализации и языковые константы.
Внедрение микроразметки. Семантическая разметка страниц сайта позволит выделить его среди тысячи других в поисковой выдаче, поэтому забывать про нее не стоит. Как известно в Joomla уже присутствует микроразметка Schema.org, но некоторые элементы все же придется дорабатывать собственноручно. Для того чтобы сделать ваш сайт лучше советую прочитать следующие материалы:
Микроразметка Schema.org для материалов
Микроразметка Schema.org для блога категории
Микроразметка Open Graph для материалов
Микроразметка Open Graph для блога
На этом создание шаблона для Joomla 3 завершено. Как я уже говорил процесс этот не настолько сложный, но все же занимает достаточно много времени. И чем сложнее будет макет вашего будущего шаблона, тем дольше его создание.
Если после создания шаблона вам захочется сделать его еще более уникальным, тогда советую заняться переопределением стандартных компонентов и модулей, это поможет добиться желаемого результата, не прибегая к установке дополнительных расширений.
Добавить комментарий Создание шаблона сайта в Joomla 3. Начало
Для Joomla созданы сотни шаблонов, которые можно использовать для того, чтобы отображать данные сайта в интернете. Есть платные шаблоны, есть бесплатные, но это вовсе не означает, что всегда нужно использовать готовые решения. Иногда при проектировании нового сайта требуется начать его делать с нуля. Joomla идеально для этого подходит, нужно лишь только разобраться в том, как создавать шаблоны сайтов. В этой статье рассмотрим минимальный объём данных, необходимых для начала работы по созданию шаблона сайта с нуля для CMS Joomla 3 .
Файловая структура шаблона сайта для CMS Joomla 3 Первым делом рассмотрим, какие папки и файлы требуются для создания минимального шаблона сайта для CMS Joomla 3.
Лирическое отступление про кодировку файлов. Сразу отмечу, что кодировка файлов должна совпадать с кодировкой файлов на сервере. Обчно это UTF-8, но лучше открыть любой из файлов на сервере и посмотреть, в какой кодировке он хранится. Ещё лучше, конечно, наверняка знать кодировку файлов на сервере, но для этого нужно лезть в его настройки. Серверов может быть несколько (например,
Apache и NGiNX ) и у них эти кодировки обычно явно задаются в конфигах. В общем, можно ничего не знать, о том, как устроена работа сервера, но если с кодировкой будут проблемы, это станет видно по кракозябрам вместо текста, набранного на русском языке (кирилице). если пошли кракозябры, — значит нужно разобраться с кодировкой и выставить правильную.
Итак, минимальная файловая структура шаблона сайта для CMS Joomla 3 достаточная для того, чтобы шаблон можно было установить и он начал работать:
└─── rezon
├── css
│ ├── index. html
│ └── template.css
├── images
│ └── index.html
├── language
│ ├── en-GB
│ │ ├── en-GB.tpl_rezon.ini
│ │ └── en-GB.tpl_rezon.sys.ini
│ └── ru-RU
│ ├── ru-RU.tpl_rezon.ini
│ └── ru-RU.tpl_rezon.sys.ini
├── component.php
├── error.php
├── favicon.ico
├── index.php
├── templateDetails.xml
├── template_preview.png
└── template_thumbnail.png Основная папка шаблона должна совпадать с его названием (для того, чтобы исключить возможную путаницу). Свой шаблон я назвал rezon
. Все файлы шаблона должны находиться в этой папке.
Файлы-заглушки index.html
во вложенных папках шаблона сайтаВ папках шаблона, в которых будут находиться файлы с картинками, css, JavaScript и прочие, лучше заранее положить файлы index.html
с простым содержанием типа:
<!DOCTYPE html><title></title> Или вообще пустые. Это нужно для того, чтобы скрыть содержимое папок от любопытных глаз пользователей. Так как при некоторых настройках сервера, содержимое папок может отображаться в виде списка файлов, если в папке отсутствует индексный файл. А в папке может находиться информация, которая может помочь взломать сайт или информация приватного содержания. В общем, лучше не рисковать и выкладывать индексные файлы-заглушки. Это здоровая паранойя, которая поможет не нарваться на неприятности, связанные с недостаточной защитой данных.
Папки шаблона сайта css
— папка для хранения css-стилей шаблона сайтаjs
— папка для хранения JavaScript-файлов шаблона сайтаimages
— папка для хранения картинок шаблона сайта (именно шаблона, а не всех подряд картинок)language
— папка для хранения переводов фраз для сайтов со включенным режимом мультиязычностиen-GB
— папка для файлов переводов фраз на английском языке ru-RU
— папка для файлов переводов фраз на русском языкеru-RU. tpl_rezon.ini
— папка для фраз переводов для фронтенда (сайта)ru-RU.tpl_rezon.sys.ini
— папка для фраз переводов для бэкенда (админки). Дополнительное расширение .sys
.Название может быть каким угодно, но принято называть файлы именно в таком формате:ru-RU
— языковое обозначение.tpl_rezon
— tpl_
(обозначение того, что файл принадлежит шаблону (сокращение template)), далее следует название шаблона. .sys
— файл для бэкенда (админки).ini
— расширение файла (просто такое принято) Пример файла ru-RU.tpl_rezon.ini
Так как в шаблоне будет применяться переменная TPL_REZON_XML_DESCRIPTION
, то ей нужно присвоить значение:
TPL_REZON_XML_DESCRIPTION="Шаблон сайта для Joomla! 3.x. reZon, вёрска в формате HTML5. (ru-RU.tpl_rezon.ini)" В файле локации английского языка en-GB. tpl_rezon.ini
переменной TPL_REZON_XML_DESCRIPTION
также должно быть присвоено значение в виде фразы на английском языке.
Пример файла ru-RU.tpl_rezon.sys.ini
Та же самая переменная используется в админке сайта для вывода информации о том, что шаблон установлен. Формат данных такой же:
Языковая переменная (принято писать ЗАГЛАВНЫМИ ЛАТИНСКИМИ БУКВАМИ, разделяя слова символом подчёркивания _
) Знак присваивания =
Значение переменной обязательно в кавычках "
…"
должно содержать фразу, которую требуется подставить в шаблон вместо названия переменной. Если переменной не присвоено значение в языковой локализации (например, в русской), Joomla может попробовать найти её значение в английской версии. Если там нет её значение, то в шаблоне будет выведено название этой переменной. Именно поэтому, иногда на сайте или в админке можно встретить непонятные слова, разделённые подчёркиванием заглавными буквами.
Это значит, что Joomla не может найти перевод и/или значение в языковых файла.
Итак, в файл ru-RU.tpl_rezon.sys.ini
также вносим значение этой переменной:
TPL_REZON_XML_DESCRIPTION="Шаблон сайта для Joomla! 3.x. reZon, вёрска в формате HTML5. (ru-RU.tpl_rezon.sys.ini)" В файл английской локации en-GB.tpl_rezon.sys.ini
тоже нужно внести значение этой переменной.
Файлы template_preview.png
и template_thumbnail.png
шаблона сайтаФайлы template_preview.png
и template_thumbnail.png
шаблона сайта должны содержать картинку превьюхи шаблона. Так как эти файлы используются в Менеджере шаблонов сайта в админке Joomla, их лучше подготовить отдельно. Рекомендуемые размеры в пикселях:
template_preview.png
— 640 х 480template_thumbnail.png
— 206 х 150Файл favicon.ico
шаблона сайта
Файл favicon. ico
шаблона сайта — это файл с фавиконкой сайта. Есть масса способов его создать, пример по → этой ссылке .
Файлы component.php
и error.php
пока не будет разбирать. Для того, чтобы создать минимальный шаблон сайта, они могут быть пустыми или вообще отсутствовать (тогда их не нужно включать в файл templateDetails.xml
).
Файл index.php
шаблона сайтаДля того, чтобы убедиться, что шаблон работает, достаточно такого содержимого файла index.php
:
<?php
defined('_JEXEC') or die;
?>
<!doctype html>
<html>
<head>
<jdoc:include type="head"/>
</head>
<body>
<div>
<h2>Шаблон reZon</h2>
<h3>Начало</h3>
</div>
</body>
</html> Файл templateDetails.xml
шаблона сайтаФайл templateDetails. xml
шаблона сайта содержит конфигурацию и связи всего шаблона. Его минимальное содержимое может быть таким:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.9" type="template" client="site">
<name>rezon</name>
<creationDate>5 August 2019</creationDate>
<author>Aleksandr Zakharov</author>
<authorEmail>[email protected]</authorEmail>
<authorUrl>https://mb4.ru</authorUrl>
<copyright>Copyright (C) 2006 — 2019 MoonBase, Inc. All rights reserved.</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<version>1.0.2</version>
<description>TPL_REZON_XML_DESCRIPTION</description>
<files>
<folder>css</folder>
<folder>images</folder>
<folder>language</folder>
<filename>component. php</filename>
<filename>error.php</filename>
<filename>favicon.ico</filename>
<filename>index.php</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>templateDetails.xml</filename>
</files>
<positions>
<position>debug</position>
</positions>
<languages folder="language">
<language tag="en-GB">en-GB/en-GB.tpl_rezon.ini</language>
<language tag="en-GB">en-GB/en-GB.tpl_rezon.sys.ini</language>
<language tag="ru-RU">ru-RU/ru-RU.tpl_rezon.ini</language>
<language tag="ru-RU">ru-RU/ru-RU.tpl_rezon.sys.ini</language>
</languages>
<config>
<fields name="params">
</fields>
</config>
</extension> Более подробный разор полей этого XML-файла см. в → этой статье .
Сборка шаблона, подготовка пакета и установка шаблона сайта в админке Joomla После того, как все файлы подготовлены, их нужно запаковать в архив zip
, в который должна входить и сама папка шаблона. Структура архива должна быть такая, которая приведена в самом начале этой статьи.
После того, как архив готов, шаблон можно установить на сайт . Если всё было сделано правильно, установка должна пройти без ошибок. После активации шаблона , он должен отобразить содержимое файла index.php
.
Заберите ссылку на статью к себе, чтобы потом легко её найти!Выберите, то, чем пользуетесь чаще всего:
Практическое введение в разработку шаблонов (Часть 1) В первой части серии мы объясняем преимущества индивидуально разработанных шаблонов, объясняем базовую структуру Joomla! шаблон и функциональность каждого отдельного файла. Затем мы покажем, как можно изменить файл index. php шаблона для вывода первого собственного кода.
Один из основных аспектов любой Joomla! проект — это используемый шаблон. Он определяет графический вывод нашего контента в браузере и определяет дизайн веб-сайта. Таким образом, производительный и визуально привлекательный шаблон является одним из ключевых факторов успеха любого веб-сайта.
Всем, кто работает с Joomla! вероятно, имеет очень похожую историю в области разработки шаблонов:
В первую очередь мы имеем дело с почтенным шаблоном Protostar и изучаем, какие возможности предлагает шаблон: Какие позиции модулей доступны? Как выглядит основной стиль шаблона? Позже в CSS вносятся небольшие корректировки и, например, основной цвет кнопок настраивается на цвета вашей собственной компании.
Кроме того, вы также можете получить обзор рынка бесплатных и коммерческих Joomla! шаблоны, которые вы можете использовать и модифицировать для своих целей.
В какой-то момент, однако, большинство из нас находятся (или были) в точке, где нам хотелось бы иметь отдельную версию Joomla! шаблон доступен в качестве основы, точно адаптированной к нашим собственным требованиям.
Мы покажем вам, как вы можете реализовать свои идеи в нашем руководстве. Первая часть посвящена базовой структуре шаблона: как устроены необходимые файлы и какие у них функции?
Все, кто хочет сразу начать или сначала хочет получить обзор структуры Joomla! Наш шаблон Monkey-Boilerplate можно загрузить здесь: BackupMonkey Boilerplate 3.X.
Вы также можете найти репозиторий на github: https://github.com/backupmonkey/template-boilerplate
Все клиенты нашего сервиса также могут загрузить Boilerplate в разделе загрузки нашего BackupMonkey-Toolbox.
Общие Для кого предназначено это руководство? Для всех тех, кто хочет начать программировать свою собственную Joomla! шаблоны! По сути: если вы можете использовать HTML для структурирования веб-сайта и CSS для его оформления, вы также можете запрограммировать Joomla! шаблон.
Для понимания следующего руководства необходимы базовые знания HTML, (S)CSS и системы шаблонов Joomla! достаточно (Что такое модули? Что такое компонент?). Базовые знания PHP также приветствуются, хотя вначале вы можете начать с использования «вывода по умолчанию» Joomla! во многих местах.
В связи со сложностью реализуемых дизайнов экранов требования к знаниям в области HTML, CSS, PHP, а затем и JavaScript также возрастают, чтобы динамизировать вывод контента и реализовывать макеты, которые не могут быть реализованы исключительно на основа CSS.
Преимущества пользовательского шаблона Учитывая огромный рынок Joomla! шаблонов и компоновщиков страниц, наверняка возникает вопрос, зачем вообще разрабатывать собственный шаблон. Для этого есть две веские причины:
У вас есть полный контроль и гибкость над графическим представлением веб-сайта и вы можете разрабатывать индивидуальные решения для конечных клиентов или ваших собственных потребностей.
Коммерческие и некоммерческие шаблоны должны охватывать множество вариантов использования, чтобы быть успешными. В результате они имеют большую кодовую базу и предлагают ряд функций, которые нам не нужны в наших проектах. Таким образом, мы тащим за собой много неиспользуемого кода, который загружается, но «не работает». Это, в свою очередь, оказывает негативное влияние на производительность веб-сайта.
Независимо от того, является ли индивидуальная разработка или установка на основе существующего шаблона правильным решением, необходимо оценивать его от проекта к проекту. Важно предоставить конечному потребителю экономичное решение, отвечающее его потребностям в долгосрочной перспективе.
Начнем! Базовая структура шаблона Базовая структура index.php шаблонDetails.xml ошибка.php template_preview.png template_thumbnail.png css // Здесь определяются наши стили css js // Здесь добавлен обязательный JavaScript img // Здесь хранятся все изображения, необходимые для макета нашего шаблона (например, файл логотипа или фоновая графика, которые подключаются с помощью CSS). index.php
index.php является сердцем каждого шаблона Joomla и сравним со статическим index.html, известным нам по многим веб-сайтам. Единственное отличие состоит в том, что мы определяем не фиксированный контент в коде, а заполнители, которые позже заполняются контентом из нашей системы.
Теперь давайте подробно рассмотрим наш index.php:
Первая строка защищает наш код от незваных гостей и всегда должна быть первой строкой файла index.php. Эта строка предотвращает прямой доступ к index.php через браузер (domain.tld/templates/meintemplate/index.php), потому что в противном случае этот доступ привел бы к сообщению об ошибке, из которого была бы получена внутренняя структура каталогов сервера — это будет называться раскрытием полного пути и будет иметь отношение к безопасности (пусть даже очень небольшое).
Фрагмент кода описывает заполнитель, отвечающий за отображение системных сообщений (например, сообщения об ошибке, если форма не была успешно отправлена). Все системные сообщения будут отображаться именно в этой позиции в шаблоне.
Фрагмент кода является заполнителем для вывода нашего компонента. Если мы возьмем пример пункта меню типа «отдельная статья», статья, которую мы определили в пункте меню, будет отображаться в этот момент.
Последний заметный фрагмент кода в нашем файле index.php выглядит следующим образом:
Таким образом, в наш шаблон добавляются заполнители для наших позиций модулей. В этом случае позиция модуля Example Position. Для каждой из наших желаемых позиций модуля мы должны поместить соответствующий заполнитель в наш файл index.php, чтобы впоследствии наполнить его жизнью.
templateDetails.xml
TemplateDetails.xml является манифестом Joomla! шаблон. В этом файле мы храним всю метаинформацию о шаблоне и определяем, какие файлы и позиция модуля включены в шаблон. Опять же, мы подробно смотрим на файл и разбираем текстовые блоки и их функциональность.
Сначала мы определяем все виды метаинформации для нашего шаблона. Сюда входит необходимая Joomla! минимальная версия (в данном примере 3.0.0), название шаблона, номер версии и прочее. Информация, представленная здесь, будет указана в области администрирования нашего веб-сайта (например, в обзоре шаблонов).
Затем мы определяем все файлы и папки, которые находятся на первом уровне в нашем каталоге шаблонов. Для этого все папки помечаются тегом , а все файлы — тегом .
Приведенный выше шаблон включает не только папки для файлов CSS, изображений и файлов JavaScript, но и прекомпилятор CSS (SCSS). Более того, веб-шрифты добавляются в папку font и упоминаются позже в нашем CSS. В папку html мы добавляем перезаписываемые шаблоны, чтобы изменить стандартный вывод Joomla! (подробнее об этом в части 3 нашей серии).
На уровне файлов мы также находим файлы template_preview.png и template_thumbnail.png . Эти изображения отображаются в Joomla! интерфейс администрирования в обзоре шаблона или в подробном представлении шаблона.
Кроме того, определение позиций модулей, перечисленных в файле index.php, также является обязательным в templateDetails.xml. В противном случае соответствующие позиции модулей нельзя было бы выбрать в административном интерфейсе.
error.php (необязательно) Файл error.php определяет, как следует из названия, представление веб-сайта в случае возникновения ошибки. Вызывается, если запрошенная страница не может быть вызвана по разным причинам (например, статья не может быть найдена). Через error.php у нас есть возможность полностью настроить дизайн этой страницы.
Если в шаблоне не хранится конкретный файл error.php, загружается вывод системы по умолчанию (см. скриншот).
Обратите внимание, что в этом руководстве не обсуждается использование дополнительных offline.php или component.php . Причина этого в том, что они редко нужны в повседневной работе. Если у вас есть какие-либо вопросы по этому поводу, мы, конечно же, по-прежнему на связи в Twitter, Facebook или по почте.
Установка Чтобы иметь возможность отслеживать наш шаблон и изменения в файлах шаблона, мы должны установить шаблон, как и любое другое расширение, на первом этапе.
Для этого есть две разные возможности: «Обычная установка» через загрузку ZIP в Joomla! панель администрирования или прямая загрузка через FTP-клиент в нужное веб-пространство.
Установка через Joomla-Extension-Installer Чтобы установить наш шаблон в бэкэнд, нам сначала нужно преобразовать каталог в ZIP-архив. После этого шаблон можно установить, как и любое другое расширение в Joomla! административной области и доступен в Область расширений/шаблонов .
Загрузка через FTP Кроме того, мы также можем загрузить заказ шаблона напрямую через FTP в каталог шаблонов нашего Joomla! монтаж. После этого нам нужно перейти в административную панель Joomla! и нажмите на пункт меню Расширения/Управление/Обнаружение. Нажав кнопку «Проверить», мы «обнаружим» загруженный шаблон и сможем его установить.
Наш первый вывод: «Hello Monkey!» После того, как мы успешно установили и включили шаблон, мы наконец можем приступить к фактическому программированию Joomla! шаблон.
Чтобы показать принцип программирования шаблонов, мы назначаем одну статью в качестве пункта меню. После этого страница должна выглядеть примерно так, как показано на следующем снимке экрана:
Содержание статьи отображается по всей ширине окна браузера (поздравляем — на данный момент шаблон уже на 100% отзывчив). Дальнейшее содержание не видно.
На следующем шаге мы хотели бы отобразить дополнительный заголовок «Hello Monkey» над нашей статьей (соответственно выходом нашего компонента) Да, мы знаем — легко спорить о смысле всего этого, но мы просто любим обезьян . Для этого переключаемся на index.php и просто вписываем нужный заголовок в нужное место в index.php:
Та-да! Вот и все — очень легко и быстро мы настроили вывод нашего первого индивидуального шаблона. Результат должен выглядеть примерно так:
Хотя мы еще не создали визуальный или структурный шедевр, общий принцип ясен: изменения в index.php напрямую влияют на вывод в браузере. С помощью полученных знаний мы можем непосредственно приступить к дальнейшему развитию Joomla! шаблоны — подробнее об этом во 2 части нашей серии.
Во второй части нашего руководства мы хотели бы преобразовать образцовый дизайн экрана в полнофункциональную версию Joomla! шаблон вместе с вами. Мы покажем вам советы и рекомендации из повседневной работы, чтобы впоследствии вы могли воплотить в жизнь свои собственные проекты и идеи.
Мы надеемся, что смогли устранить некоторые вопросительные знаки в ваших головах и показать, что программирование отдельного Joomla! шаблон в основном ничего, кроме ракетостроения.
У вас есть вопросы или предложения? Тогда напишите нам в Twitter, Facebook или напрямую по почте Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра..
Ускоренный курс: Создайте Joomla! Шаблон с нуля Поиск
17 марта 2011 г.
Если вы хотите создать свой собственный Joomla! шаблон с нуля, вам необходимо скачать и установить последнюю версию Joomla!, желательно на свой локальный хост. Есть несколько причин сделать это.
Во-первых, у вас должна быть установлена Joomla! установлен, чтобы вы могли видеть, что вы создаете. Когда вы разрабатываете файлы шаблонов, вы не сможете проверить их, просто открыв тестовую HTML-страницу. Вам нужно будет запустить файлы шаблона через Joomla! себя, чтобы увидеть ваш код в действии. Это также означает, что вы не будете создавать файлы шаблонов с помощью инструмента WYSIWYG, такого как Dreamweaver. Если вы привыкли использовать программное обеспечение для веб-разработки для создания своих сайтов, а теперь хотите начать разработку для Joomla!, вам нужно будет вернуться к основам и научиться программировать вручную.
Я всегда был пуристом, когда дело доходит до разработки вручную, особенно после моего первого опыта работы с FrontPage, когда мне не удалось заставить его делать именно то, что я хотел. Из-за этого разочарования я взял книгу по HTML 4 и научился писать код вручную. Благодаря этому опыту я никогда не удосужился изучить Dreamweaver или любое другое программное обеспечение. Вместо этого я обратился к HTML-набору Chami, который можно бесплатно загрузить и который является отличным HTML-редактором. С помощью этого инструмента я усовершенствовал свое мастерство ручного кодирования HTML, что привело к ручному кодированию CSS; если ваш опыт кодирования похож на мой, вы находитесь в отличной ситуации, чтобы начать программировать для Joomla!. Пришло время вернуться в окопы и разработать код вручную.
Теперь, когда вы смирились с ручным программированием вашего Joomla! шаблон, пришло время узнать, где будут храниться ваши файлы. Если вы еще не читали мою статью «Работа с CSS в Joomla!» сейчас самое подходящее время для этого. В этой статье рассказывается, где найти папки и файлы CSS и шаблонов, а также приводятся основные сведения о Joomla! Информация о CSS. Папка шаблонов — это та же папка, в которой вы сохраните свой новый шаблон.
Есть только два файла, которые вам нужны, чтобы создать свой собственный Joomla! шаблон. Первый — это файл index.php. Файл index.php содержит разметку для Joomla! включает в себя. Например, файл php используется с модулями и т. д. Второй файл — это templateDetails.XML. После того, как эти два файла настроены и работают, вы создаете CSS. Все три файла будут работать вместе для создания контента, который появится в вашем Joomla! сайт.
В папке «Шаблоны» создайте новую папку и назовите ее. Внутри этой папки создайте один простой текстовый файл с именем index. php и второй файл с именем templateDetails.XML. Откройте файл XML, скопируйте и вставьте:
<версия установки="1.5" тип="шаблон">
ваше_имя_шаблона
15-3-2011
ваше_имя
your@email.com
http://www.siteurl.com
Вы 2011
GNU/GPL
<версия>1.0.0
Мой первый шаблон Joomla
<файлы>
<имя файла>index.php
templateDetails.XML
css/template.css
<позиции>
сверху
слева
справа
внизу
баннер
синдикат
нижний колонтитул
пользователь1
пользователь2
пользователь3
user4
Приведенный выше код добавляет ваши личные данные в шаблон и назначает некоторые базовые позиции модулей.
Откройте файл index.php и вставьте в начало кода:
<голова>
<тело>
Этот код предоставляет ваш тип документа и некоторый базовый код PHP. Это самая дальняя часть PHP, которую вам нужно знать. Этот код также включает левый модуль, который вы определили в файле templateDetails.XML. Продолжайте, сохраните и закройте оба этих файла, если они у вас открыты.
Теперь перейдите в бэкенд Joomla! и создайте новую статью, которая будет опубликована на главной странице. Нажмите «Предварительный просмотр», и вы должны увидеть свою новую статью. Чего вы еще не видите, так это нового шаблона, который вы только что создали. Чтобы добавить новый шаблон, перейдите в Менеджер шаблонов. Вы должны увидеть шаблон с вашим личным именем в списке доступных шаблонов. Щелкните переключатель рядом с вашим шаблоном, а затем щелкните желтую звездочку, чтобы сделать его шаблоном по умолчанию.
Теперь снова нажмите «Предварительный просмотр», и вы должны увидеть недавно добавленную статью, информацию в заголовке и заголовок. Вы также должны увидеть пункт главного меню в нижней части статьи. Это появилось в левой позиции модуля, потому что во время базовой версии Joomla! install модуль главного меню создается по умолчанию. Если бы вы не включили левый include в свой php-файл, главное меню не появилось бы, потому что не было бы вызова к нему. Поздравляем с созданием вашей первой Joomla! шаблон, конечно, без всяких украшений… но это потом.
Вернитесь в папку с шаблонами и создайте папку с именем CSS, а в этой папке создайте файл с именем template.css. Теперь вам нужно связать свой файл CSS с файлом index. php. Вам также необходимо добавить теги div для каждого из ваших модулей. Вот код для привязки вашего файла CSS:
baseurl ?>/templates/your_template_name/css/template.css" type="text/css" />
А вот полный код с некоторыми примерами тегов div:
<голова>
baseurl ?>/templates/your_template_name/css/template.css" type="text/css" />
<тело>
<дел>
Информация заголовка
<дел>