Обзоры расширений Joomla

 

В предыдущей статье «Ответы на вопросы по шаблонам для Joomla. Установка, настройка, удаление» мы рассмотрели вопросы, связанные с начальными этапами по работе с шаблоном. В этой части продолжим тему общих вопросов по работе с шаблонами сайтов на Джумла.

При написании данной статьи использовалась русскоязычная версия Joomla 3.4.3 и русскоязычный браузер Mozilla Firefox 40.0.3.

Как изменить (отредактировать) шаблон Joomla

Часто настроек, доступных в административной части сайта, не хватает. В таких случаях может понадобиться отредактировать таблицу стилей или другие файлы шаблона. Тогда, как минимум, без знаний CSS не обойтись (хотя бы минимальных). А иногда может понадобиться и знание PHP, XML, JavaScript. Также неплохо будет владеть тонкостями и особенностями работы именно Joomla, причём той версии, с которой работаете и bootstrap (так как с ним связана работа последних версий Joomla). Но, в основном, требуется редактировать CSS.

В некоторых шаблонах в настройках могут быть специальные поля, в которые можно вносить фрагменты нужного CSS-кода. Или, как поступили разработчики из RSJoomla, можно вносить Ваш CSS-код в файл «/templates/rsevento/css/custom.css», где «rsevento» – название папки Вашего шаблона (меняется от шаблона к шаблону). Почему лучше делать именно так, а не вносить правки напрямую в исходные (основные) файлы шаблона? Если выйдет обновление шаблона, а их обновляют точно так же, как и другие расширения, и Вы захотите его установить, то при установке могут потеряться все или часть изменений, так как могут быть перезаписаны изменённые Вами файлы новыми файлами.

Я предпочитаю для внесения правок использовать бесплатную программу Notepad++ в сочетании с Total Commander или бесплатного FTP-клиента FileZilla. Если сайт расположен на «Хостинг Украина», редактирую прямо в окне браузера, при помощи удобного и функционального файл-менеджера.

Но бывают случаи, когда надо внести изменение непосредственно в исходные файлы шаблона. Приведу краткий пример, как при помощи средств для разработчика, встроенных в браузер Mozilla Firefox 40.0.3, можно найти файл и строку в шаблоне, которую нужно отредактировать для изменения внешнего вида нужного Вам элемента на сайте. Например, изменить шрифт (гарнитуру) основного текста. Для этого:

  • Откройте страницу сайта, где находится нужный элемент (в моём примере – текст материала).
  • Нажмите на кнопку «Открыть меню» в правой верхней части браузера, в появившемся меню выберите Разработка – Инспектор (рисунок ниже).
Инспектор
Инспектор
  • В левой верхней части появившейся области нажмите на пиктограмму квадратика со стрелочкой.
Выбрать элемент со страницы
Выбрать элемент со страницы
  • Подведите курсор мыши к тому элементу страницы, вид которого хотите изменить (в моём примере – текст материала). В консоли инспектора отобразится CSS-код, отвечающий за этот элемент. В моём случае это:

body {

   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

   line-height: 18px;

}

Если подвести курсор мыши к надписи «template.css:63» (63 – номер строки с нужным фрагментом кода в файле «template.css»), то можно увидеть где расположен файл таблицы стилей, содержащий код, который нужно изменить. В моём случае это «templates/rsevento/css/template.css», где «rsevento» – папка с именем шаблона.

Как изменить шаблон Joomla
Как изменить шаблон Joomla
  • Закачайте файл себе на компьютер, сделайте его резервную копию. Настоятельно рекомендую делать резервную копию всех файлов, в которые вносите изменения, а лучше ещё и записывать что, где и зачем меняли.
  • Откройте файл «template.css» в редакторе, например, в Notepad++, и внесите нужные правки.
CSS-файл
CSS-файл
  • Сохраните файл.
  • Загрузите его обратно на сервер.
  • Обновите страницу. Если изменения не применились, очистите кэш браузера и\или Joomla. Лучше вносить правки с отключённым кэшированием Joomla.

Для очистки кэша в Mozilla Firefox 40.0.3 нажмите на кнопку «Открыть меню» в правой верхней части браузера, в появившемся меню выберите Настройки (рисунок ниже).

Очистка кэша Браузера
Очистка кэша Браузера

В появившемся окне в панели слева выберите раздел Дополнительные, перейдите на вкладку Сеть и в области «Кэшированное веб-содержимое» нажмите кнопку Очистить сейчас (рисунок ниже). Возможно, нужно будет нажать кнопку несколько раз, до тех пор, пока значение опции Ваш кэш веб-содержимого сейчас занимает на диске не будет равняться «0».

Очистка кэша в Mozilla Firefox 40
Очистка кэша в Mozilla Firefox 40

Для очистки кэша в Joomla 3.4.3 перейдите в админку и в левом верхнем углу страницы, в меню Система, выберите Очистить весь кэш (рисунок ниже).

Очистка кэша в Joomla 3
Очистка кэша в Joomla 3

При помощи чекбокса в левом верхнем углу таблицы групп кэша выберите все элементы и нажмите кнопку Удалить в левом верхнем углу страницы (рисунок ниже).

Очистка кэша в Joomla
Очистка кэша в Joomla

Смена (переключение) шаблона

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

Как использовать два шаблона на одном сайте

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

Может возникнуть ситуация, когда нужно отображать один и тот же шаблон, но с разными настройками (стилями), на разных страницах сайта и\или на разных языковых версиях сайта. Для этого перейдите в Расширения – Менеджер шаблонов, выделите нужный Вам шаблон и нажмите кнопку Дублировать (рисунок ниже). Теперь Вы можете настроить оба шаблона так, как Вам нужно, и назначить их к нужным языковым версиям сайта и\или пунктам меню, как описано по ссылке выше.

Дублирование шаблона
Дублирование шаблона

Отмечу, что подобное действие дублирует не шаблон, а стиль шаблона. У одного шаблона может быть несколько стилей. Стили можно применять, например, к пунктам меню (рисунок ниже). Для этого перейдите в Меню – «Название Вашего меню», зайдите в нужный пункт меню и на вкладке Пункт меню, в спадающем списке Стиль шаблона выберите нужный Вам стиль.

Стили шаблона Joomla 3
Стили шаблона Joomla 3

Если нужно продублировать (создать копию) именно шаблон, а не стиль, то перейдите в Расширения – Менеджер шаблоновШаблоны, найдите в списке нужный Вам шаблон и нажмите на его название (рисунок ниже).

Название шаблона
Название шаблона

В появившемся окне нажмите кнопку Коперировать шаблон в левом верхнем углу (рисунок ниже).

Копирование шаблона
Копирование шаблона

Перед Вами появится всплывающее окно с полем Название нового шаблона (рисунок ниже). Введите в него название. Для имени рекомендую использовать только английские буквы, цифры, без пробелов, символы «-», «_», «.» (без кавычек). Обратите внимание, что папка с шаблонами Джумла должна быть доступна на запись.

Название нового шаблона
Название нового шаблона

Как узнать название шаблона

Для этого перейдите в Расширения – Менеджер шаблоновШаблоны и в таблице, в столбце Шаблон будет указано название шаблона (рисунок ниже). На рисунке ниже «Beez3» – это и есть название (не стиля), оно обведено зелёной рамкой. Там же можно посмотреть его версию, дату создания, автора и так далее.

Название шаблона
Название шаблона

Для того, чтобы узнать название (имя) стиля шаблона, перейдите в Расширения – Менеджер шаблоновСтили и в таблице, в столбце Стиль будет указано название шаблона (рисунок ниже). На рисунке ниже «RSEvento! - По умолчанию» – это и есть название (имя) стиля (не шаблона), оно обведено зелёной рамкой.

Название стиля шаблона
Название стиля шаблона

Как изменить название шаблона

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

Можно изменить название путём копирования шаблона, как описано в предыдущем подразделе данной статьи. Это не должно привести к ошибкам, но название шаблона всё равно может остаться в его описании и исходных файлах (в коде шаблона).

Как определить папку шаблона

Если речь идёт о шаблоне сайта (фронтальной его части), то это папка «templates/название Вашего шаблона» в корне сайта. Вместо «название Вашего шаблона» будет что-то похожее на название шаблона. Если название шаблона, например, «RSEvento!», то путь будет выглядеть так: «templates/rsevento», если «JM Computers and Electronics VirtueMart Store», то так: «templates/jm-computers-electronics-store» и так далее. О том, как узнать название шаблона, описано выше в данной статье.

Если речь идёт о шаблоне админки Джумла (административной части (панели управления)), то шаблоны находятся в «administrator/templates/isis», где «isis» – название шаблона.

Как установить шаблон «Joomla QuickStart»

Некоторые разработчики, в дополнение к файлу шаблона, дают возможность установить демонстрационные данные. Это ещё называют шаблон Joomla QuickStart или быстрый старт.

Что такое шаблон «QuickStart» («быстрый старт»)? Как правило, это дистрибутив Joomla (инсталляционный пакет), в котором уже установлены и настроены шаблон, расширения, категории, материалы, меню и тому подобное. По сути, это почти готовый сайт на Joomla с материалами и расширениями. Аналог установки демо-данных во время установки CMS Joomla на сервер. Иногда демонстрационные данные устанавливаются после установки шаблона в его настройках.

Что даёт шаблон «QuickStart» («быстрый старт»)? Это даёт возможность быстрее разобраться в том, как лучше добиться красивого внешнего вида шаблона и расширений, которые Вы видели на демонстрационном сайте разработчика. Например, не всегда очевидно, как именно сделать у себя на сайте такую же красивую галерею, как в примере у разработчика. Бывает так, что необходимо указать специальный Суффикс CSS-класса модуля, в настройках модуля, и расположить эту модель в конкретной позиции шаблона. Безусловно, можно прочесть документацию, форум или обратиться в техническую поддержку разработчика шаблона, но, на мой взгляд, использование шаблона «QuickStart» («быстрый старт») наглядней и быстрее.

 

Давайте рассмотрим, как установить демонстрационные данные на примере шаблона от RSJoomla – «RSEvento». Обратите внимание, что в стоимость шаблона входит лицензия на галерею RSMediaGallery.

Шаг 1. Установите шаблон RSEvento, его русификатор (не обязательно), компонент RSMediaGallery и слайд-шоу модуль «RSMediaGallery! Responsive Slideshow Module». Это можно сделать так, как описано в статье «Ответы на вопросы по шаблонам для Joomla. Установка, настройка, удаление».

Шаг 2. Перейдите в Расширения – Менеджер шаблонов и нажмите на «RSEvento! - По умолчанию».

Шаг 3. Перейдите на вкладку Демонстрационные данные и нажмите кнопку Установить демонстрационные данные (рисунок ниже). Дождитесь окончания установки и сохраните шаблон (зелёная кнопка Сохранить в левом верхнем углу страницы).

Установка демонстрационных данных
Установка демонстрационных данных

 

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

Шаблон Joomla QuickStart
Шаблон Joomla QuickStart

 

Рассмотрим установку шаблона Joomla QuickStart (быстрый старт) на примере «JM Modern VirtueMart Store», где всё интегрировано в дистрибутив Joomla 3.3.6. По сути, это установка самой CMS на хостинг. В примере рассмотрена установка на локальном сервере «Open server 5.2.2 Расширенный». Его настройки показаны на рисунке ниже.

Настройки Open server 5.2.2
Настройки Open server 5.2.2

Предполагается, что сам Open server Вы уже установили и настроили. Подробнее об этом можете прочесть тут. Также предполагается, что сам файл Joomla QuickStart (быстрый старт) Вы уже скачали с сайта разработчика шаблона («quickstart.zip»).

Шаг 1. Не запуская Open server, создайте в папке «domains» Вашего локального сервера папку для будущего сайта с быстрыми данными. Например, «quickstart».

Шаг 2. Скопируйте файл «quickstart.zip» в папку «quickstart». Распакуйте его.

Шаг 3. Создадим базу данных для будущего сайта. Для этого нажмите на иконку Open server (развевающийся флаг) в правом нижнем углу экрана возле часов и выберите Дополнительно – PhpMyAdmin (рисунок ниже).

PhpMyAdmin
PhpMyAdmin

Войдите в phpMyAdmin (по умолчанию логин «root» без кавычек, пароля нет), перейдите на вкладку Базы данных, в поле Создать базу данных введите имя базы данных, например, «quickstart» (без кавычек) и нажмите Создать (рисунок ниже).

Создание базы данных
Создание базы данных

Шаг 4. Запустите Open server, нажав на его иконку (развевающийся флаг), в правом нижнем углу экрана возле часов, и нажмите Запустить (рисунок ниже). В меню Мои сайты выберите «quickstart».

Запуск Open server
Запуск Open server

Шаг 5. Перед Вами откроется страница браузера, в которой начнётся установка Joomla 3 (рисунок ниже). Заполните все обязательные поля произвольными данными и нажмите кнопку Далее (рисунок ниже). Запомните логин и пароль администратора.

Как установить шаблон Joomla QuickStart
Как установить шаблон Joomla QuickStart

Шаг 6. На вкладке Конфигурация БД в поле Имя пользователя введите «root» (без кавычек), в поле Имя базы данных введите «quickstart» (без кавычек) и нажмите Далее.

Конфигурация БД
Конфигурация БД

Шаг 7. Ничего не меняйте на вкладке Обзор, просто нажмите Установить.

Установка демо-данных
Установка демо-данных

Шаг 8. Нажмите кнопку Удалить директорию ‘installation (надпись на ней должна смениться на Директория installation’ успешно удалена), затем нажмите на Панель управления (рисунок ниже).

Установка Joomla
Установка Joomla

По сути, на этом установка шаблона Joomla QuickStart (быстрый старт) завершена.

Шаг 9. Войдите в административную панель Joomla, используя логин и пароль, которые Вы указали на 5-м шаге. И можете убедиться в наличии установленных демо-данных и дополнительных компонентов (они идут в комплекте с шаблоном) (рисунок ниже). Естественно, Вы можете установить русификатор самой Joomla, VirtueMart и других расширений. Об установке русификаторов можете прочесть в этой статье.

Админка Джумла
Админка Джумла

Шаг 10. Перейдите во фронтальную часть сайта и посмотрите, как он выглядит (рисунок ниже).

Сайт Джумла
Сайт Джумла

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

Похожие статьи: