Этот вводный урок расскажет о системе шаблонов Joomla! и том, как нужно с ней работать.

Каково назначение шаблона?

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

Изначально Joomla! содержит несколько шаблонов. Можно найти множество дополнительных шаблонов на других веб-сайтах. Некоторые из них доступны бесплатно под различными лицензиями, а некоторые предназначены для продажи. Существует также много разработчиков, которые создают собственные шаблоны. Вы тоже можете создать свой собственный шаблон.

Шаблонами можно управлять с помощью Менеджера шаблонов, который находится в Меню расширений в админке сайта.

Почему Joomla! использует шаблоны?

Joomla! предназначена для выделения ключевых задач, связанных с производством веб-сайта, для эффективного обслуживания программного обеспечения. Одной из таких задач является создание эстетического сайта. То есть, нужно выбрать, какие элементы контента (компоненты, модули и плагины), вы хотите разместить на той или иной странице.

При создании веб-страниц, расположение большинства элементов останется тем же (меню, баннеры, боковые панеле и т.д.). Необходимо создать такой же внешний вид (шрифты, стили заголовков, цветовая схема и т.п.) для каждой страницы. Можно изменить внешний вид некоторых страниц, чтобы обозначить их предназначение (например, раздел в блоге). Как только вы остановились на общем макете для сайта, появляется задача наполнить каждую страницу контентом.

И вот здесь понадобится шаблон. Можно писать код для каждой страницы отдельно, или использовать шаблон для каждого из основных разделов сайта. Так что для создания новой страницы, вам просто нужно «заполнить пробелы».

  1. Используйте один из шаблонов, предоставляемых с Joomla!
  2. Загрузите один из многочисленных бесплатных предложений из интернета.
  3. Купите приложение, чтобы изменить или создать шаблон, если вас не устроят вышеперечисленные варианты.

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

Что можно сделать с шаблоном?

Благодаря шаблону, можно размещать контент так, как пожелаете. Вот несколько способов, как это сделать.

Макет

Шаблон содержит дизайн главного макета, установленного на сайте. Он включает в себя размещение элементов (компонентов, модулей и плагинов), которые отвечают за различные типы контента. Например, различные меню — можно выбрать из существующих вариантов и создать свой собственный. А также рекламные баннеры, опросы, основная часть страницы — вы можете выбрать блог, новостные статьи, и т.д.

Цветовая схема

Используя CSS в дизайне шаблона, можно изменить цвет фона, текст, ссылки, словом всё, что могли бы сделать в обычном (X) HTML коде.

Изображения и эффекты

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

Шрифты

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

Конкретные решения для браузера

Шаблон может изменять свой внешний вид, в зависимости от браузера. Это позволяет в полной мере воспользоваться последними нововведениями, не делая при этом сайт недоступным для тех, кто не в состоянии ежесекундно модернизировать систему.

Переключение шаблонов

Чтобы изменить стандартный шаблон для сайта или администратора, выполните следующие действия:

  • Войдите на сайт под паролем администратора
  • Нажмите на «Расширения» > «Менеджер шаблонов»

Вы увидите окно Менеджера шаблонов.

Примечание: Если вы не видите Менеджера расширений в качестве опции в меню «Расширения», то это скорее всего, потому, что вы не вошли в систему как Супер Администратор. Только Супер Администратору виден этот пункт меню.

Отсюда можно управлять шаблонами для сайта и администратора. Шаблон сайта установлен по умолчанию. Он отмечен звездочкой (на изображении ниже это rhuk_milkyway).

Чтобы изменить шаблон «по умолчанию» на Beez, нужно:

  • установить переключатель слева от названия шаблонов, чтобы выбрать его;
  • нажать кнопку «По умолчанию» на панели инструментов;
  • звёздочка изменится с rhuk_milkyway на Beez, и готово!

Назначение более одного шаблона для сайта

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

Перейдите к «Расширения» -> «Менеджер шаблонов».

Вы увидите установленные шаблоны. Теперь выберите шаблон, который не указан «по умолчанию». Нажмите на название шаблона или на переключатель слева от его названия и нажмите кнопку «Редактировать» на панели инструментов. Далее вы увидите на странице «Шаблон: [Редактировать]», установите переключатель «Выбрать из списка» в «Меню назначений» и выберите пункты меню, на которых будет показан шаблон. Нажмите кнопку «Сохранить» на панели инструментов. Вот и всё.

Чтобы установить шаблон в Joomla! воспользуйтесь пошаговым руководством ниже:

  1. Войдите в админ-панель вашего сайта;
  2. В навигационном меню перейдите Расширения > Менеджер расширений;
  3. Вы попали на страницу менеджера расширений, отсюда вы можете устанавливать шаблоны, модули, плагины, компоненты и языковые пакеты. Вам предлагается три варианта установки:
    • Загрузить файл пакета – самый простой способ установки расширений (выберите скаченный пакет на компьютере и нажмите кнопочку Загрузить и установить);
    • Установить из каталога – (нужно указать путь к каталогу на сервере, в котором находится пакет);
    • Установить из URL – (нужно ввести URL-адрес пакета);
  4. Мы будем использовать первый способ: Загрузить файл пакета. Для этого скачиваем шаблон на свой компьютер и с помощью данного параметры выбираем его и устанавливаем кнопочкой Загрузить и установить.
  5. Если пакет не содержит ошибок и вы сделали все правильно, перед вами появится окно с успешной установкой шаблона. Пример сообщения на картинке ниже:

Если у вас возникли проблемы с установкой шаблона через административную панель Joomla, то можете воспользоваться ручной установкой через FTP.

  1. Распаковываем архив (пакет) с шаблоном, который необходимо установить в любую директорию вашего компьютера;
  2. Подключайтесь к своему серверу по FTP (программное обеспечение на выбор);
  3. В корневой папке вашего сайта находим папочку с названием Templates;
  4. Создаем в данной директории папку с названием своего шаблона;
  5. Закачиваем все папки и файлы ранее разархивированного шаблона в созданную папку на сервере;
  6. Далее в Менеджере расширений переходим на вкладку Поиск и нажимаем кнопку Найти;
  7. Далее отметьте галочкой свой шаблон и нажмите кнопку Установить. После этого шаблон появится в Менеджере шаблонов.

Примечание : Если вы новичок, не пытайтесь использовать FTP для установки компонентов, модулей и плагинов. Данные типы расширений без установочного пакета нуждаются в записи в базу данных, которые должны быть вставлены вручную.

Сегодня мы поговорим на очень актуальную тему «Как создать свой шаблон Joomla или как натянуть сайт и html верстку на Joomla».

Шаг 1

Скачиваем последнюю версию Joomla (на момент написания статьи такой была версия joomla 3.4.5) и устанавливаем ее на ваш домен, где планирует размещать сайт

Шаг 2

Создаете папку с названием вашего сайта в вашсайт/templates/

Например у меня сайт называется soft

Шаг 3

Файл TemplateDetails.xml . Я подготовил шаблон, который достаточно будет скачать тут и просто вносить правки согласно своего сайта.

Открываем его и смотрим

Это версия и т.д. Обычный стандартный набор. Тут ничего не трогаем и не меняем

Название вашего сайта Описание вашего сайта

Версия вашего сайта

Если, допустим, вы делаете апдейт своего сайта, выпускаете его новую версию, то просто пишите, например, 2.0 и т.д.

Дата создания вашего сайта/шаблона

Копирайт на ваш сайт

Далее мы должны определить в этом файле папки и файлы, которые относятся к нашему шаблону

index.html — моя верстка

index.php — для начала в этот файл пишем

templateDetails.xml — это файл, с которым мы работали выше

template_thumbnail.png — иконка шаблона, которую можно будет увидеть в меню выбора шаблонов в админке Joomla.

template_preview.png — превьюха шаблона, которую можно увидеть в менеджере шаблонов в joomla

— определяем папки, которые используются в шаблоне

С пока что использую стандартный набор папок: css, js и html.

Закрываем . Наш ваш templateDetails.xml готов.

Шаг 4

Создание архива с шаблоном для установки

Просто архивируем нашу папку с файлами в .zip

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

Как загрузить свой шаблон на joomla