Создание шаблона для joomla 3 с нуля: Создаем свой шаблон для Joomla. Пошаговое руководство – База знаний Timeweb Community

Joom4all.ru

Если вы решились самостоятельно создать шаблон для Joomla 3, тогда вам придется набраться терпения ведь данный процесс пусть и не самый сложный, но занимает немало времени.

На нашем сайте уже накопилось достаточно много информации на тему того как создать шаблон для Joomla 3, однако по причине того что все статьи писались в разное время найти их среди множества других задача не из легких.

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

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

После того как с макетом определились можно приступать не посредственно к созданию шаблона. Для этого потребуется:

1. Создать минимально необходимый набор файлов и папок. Не обязательно создавать файлы заново, можно пойти на хитрость и скопировать их с готового шаблона. В дальнейшем эти файлы мы будем наполнять своим содержимым. К обязательным файлам можно отнести файл структуры index.php, а так же файл манифеста templateDetails.xml. Набор папок зависит от сложности шаблона и от ваших личных предпочтений.
2. Создание специального установочного файла templateDetails.xml. Данный файл является неотъемлемой частью любого устанавливаемого расширения Joomla, в нем мы указываем какие файлы и папки присутствуют в шаблоне, объявляем имена позиций для модулей и некоторые другие детали. Более подробную информацию о файле templateDetails. xml и его содержимом читайте в соответствующей статье (ссылка выше).
3. Верстка шаблона. Это самая интересная и в то же время самая сложная часть в создание собственного шаблона для Joomla. Изначально стоит набросать общий каркас для шаблона, а далее по порядку верстать отдельные его элементы. Этапы верстки отдельных элементов шаблона можно разбить по пунктам:
   1. Верстка шапки сайта – размечаем области и границы, добавляем позиции для модулей, оформляем при помощи CSS.
   2. Верстка области контента. После того как с шапкой разобрались, стоит уделить особое внимание основному содержимому шаблона – области между шапкой и футером. Тут так же стоит позаботиться о позициях для модулей, выделить позицию под хлебные крошки, системные уведомления, всевозможные меню и так далее.
   3. Верстка и создание футера сайта. Приемы стандартные, размечаем области, оформляем внешний вид при помощи CSS.
   4. Доработка и заключительные штрихи.
4. Локализация шаблона. На данном этапе шаблон практически готов, осталось внести незначительные изменения, создать файлы локализации и языковые константы.
5. Внедрение микроразметки. Семантическая разметка страниц сайта позволит выделить его среди тысячи других в поисковой выдаче, поэтому забывать про нее не стоит. Как известно в Joomla уже присутствует микроразметка Schema.org, но некоторые элементы все же придется дорабатывать собственноручно. Для того чтобы сделать ваш сайт лучше советую прочитать следующие материалы:
   1. Микроразметка Schema.org для материалов
   2. Микроразметка Schema.org для блога категории
   3. Микроразметка Open Graph для материалов
   4. Микроразметка 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. Все файлы шаблона должны находиться в этой папке.

Файлы-заглушки

В папках шаблона, в которых будут находиться файлы с картинками, 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.
      • Название может быть каким угодно, но принято называть файлы именно в таком формате:
        1. ru-RU — языковое обозначение
        2. .tpl_rezon — tpl_ (обозначение того, что файл принадлежит шаблону (сокращение template)), далее следует название шаблона.
        3. .sys — файл для бэкенда (админки)
        4. .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 также должно быть присвоено значение в виде фразы на английском языке.

Пример файла

Та же самая переменная используется в админке сайта для вывода информации о том, что шаблон установлен. Формат данных такой же:

• Языковая переменная (принято писать ЗАГЛАВНЫМИ ЛАТИНСКИМИ БУКВАМИ, разделяя слова символом подчёркивания _)
• Знак присваивания =
• Значение переменной обязательно в кавычках "…" должно содержать фразу, которую требуется подставить в шаблон вместо названия переменной.

Если переменной не присвоено значение в языковой локализации (например, в русской), 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 шаблона сайта должны содержать картинку превьюхи шаблона. Так как эти файлы используются в Менеджере шаблонов сайта в админке Joomla, их лучше подготовить отдельно. Рекомендуемые размеры в пикселях:

• template_preview.png — 640 х 480
• template_thumbnail.png — 206 х 150

Файл favicon.ico шаблона сайта

Файл favicon. ico шаблона сайта — это файл с фавиконкой сайта. Есть масса способов его создать, пример по → этой ссылке.

Файлы component.php и error.php пока не будет разбирать. Для того, чтобы создать минимальный шаблон сайта, они могут быть пустыми или вообще отсутствовать (тогда их не нужно включать в файл templateDetails.xml).

Файл

Для того, чтобы убедиться, что шаблон работает, достаточно такого содержимого файла 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 шаблона сайта содержит конфигурацию и связи всего шаблона. Его минимальное содержимое может быть таким:

<?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
 ваше_имя
 [email protected]
 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" />

<тело>
<дел>
 Информация заголовка
<дел>