Joomla установка шаблона quickstart

Дата публикации: 2016-01-14

От автора: приветствую Вас, дорогой друг. В данное время создано огромное количество различных шаблонов, для CMS Joomla и выбирая подходящий для своего будущего проекта, хотелось бы увидеть, как он будет смотреться на готовом сайте. Конечно, как правило, разработчики, приводят общий вид шаблонов и страницы демо-презентаций. На которых, можно оценить внешний вид шаблона и его структуру. Но при этом невозможно произвести его тестирование и настройку. Поэтому, достаточно часто в комплекте с шаблоном, поставляется, так называемый “quickstart”, то есть система управления контентом Joomla, в которой уже установлен интересующий шаблон и добавлен необходимый контент. Поэтому в данной статье мы с Вами поговорим о том, как установить quickstart Joomla?

Система управления контентом Joomla в базовой комплектации – содержит только минимальный набор функций, которые выполняют типовые задачи. И если на данную, CMS установить произвольный понравившейся шаблон, который впоследствии сделать активным. То с вероятностью 90% можно утверждать, что желаемого вида Вы не получите, то есть вида который Вы видели на странице презентации шаблона. Потому как, что бы вид шаблона, совпадал с демо-презентацией, необходимо выполнить определенные настройки, установить требуемые расширения, добавить контент и отобразить в правильных позициях модули. С данной задачей вполне справится опытный разработчик, но для новичка – это может быть очень сложная задача. Поэтому, зачастую разработчики шаблонов, вместе с шаблоном, предоставляют комплект “quickstart”, то есть “Быстрый старт” шаблона. Который представляет собой готовую CMS Joomla, в которую установлен интересующий шаблон вместе с необходимыми расширениями, добавлены необходимые модули, в правильные позиции и создан контент. Таким образом “quickstart” – это готовый сайт, на интересующем шаблоне, который Вы можете использовать для всевозможного тестирования и настройки. “Быстрый старт”, ориентирован на веб-разработчика с любым уровнем знаний, потому как установить шаблон Joomla quickstart, сможет практически каждый веб-мастер, который знает как устанавливается Joomla.

Теперь давайте рассмотрим следующий пример. К примеру, меня заинтересовал шаблон, который, на странице демо-презентации выглядит следующим образом.

Если установить его на систему управления контентом Joomla, с базовым функционалом, то в браузере мы увидим следующее.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

То есть, как Вы видите, установленный шаблон, кардинально отличается от шаблона демо-презентации. А значит, давайте поговорим о том, как установить быстрый старт на joomla 3.

Установка quickstart

Как правило, шаблон скачивается в виде архива, и если в нем присутствует “быстрый старт”, то внутри Вы найдете исходники для установки. К примеру, в моем случае, в архиве с шаблоном, создана папка joomla, в которой хранится архив с шаблоном, а также архив с исходниками для установки “Быстрого старта”.

Файл theme3133.zip – это шаблон.

fullpackage.zip – CMS Joomla – для быстрого старта.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Так же бывают ситуации, когда архив с исходниками “Быстрого старта”, предлагают скачать на странице презентации шаблона.

Далее необходимо распаковать архив с исходниками “Быстрого старта”, в произвольный каталог локального компьютера, для последующей установки. Затем необходимо создать базу данных, в которую будут записаны таблицы и необходимые данные CMS. После этого в браузере обращаемся к каталогу, в который были распакованы исходники и приступаем к стандартной установке Joomla.

На первой странице установки, указываем название сайта, краткое описание, почтовый ящик администратора и данные для входа в админку будущей CMS.

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

На завершающем этапе установки, в разделе “Установка демо-данных”, добавлена дополнительная радио-кнопка, активировав, которую Вы установите определенный контент, на сайт, который необходим для формирования тестового вида шаблона (то есть это могут быть дополнительные материалы, расширения, настройки и т.д).

После того, как установка завершена, удаляем каталог “Installation” и переходим в пользовательский раздел сайта.

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

На этом вопрос — как установить quickstart joomla 3, исчерпан. Всего Вам доброго и удачного кодирования!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

В предыдущей статье «Ответы на вопросы по шаблонам для 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-код, отвечающий за этот элемент. В моём случае это:

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

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

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

CSS-файл

  • Сохраните файл.
  • Загрузите его обратно на сервер.
  • Обновите страницу. Если изменения не применились, очистите кэш браузера иили Joomla. Лучше вносить правки с отключённым кэшированием Joomla.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стили шаблона 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. А в статье «Обзор RSEdimo. Образовательный шаблон Joomla» есть видео с примером установки демо-данных.

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

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

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

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

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

Шаблон 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 Вы уже установили и настроили. Подробнее об этом можете прочесть тут. Также предполагается, что сам файл Joomla QuickStart (быстрый старт) Вы уже скачали с сайта разработчика шаблона («quickstart.zip»).

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

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

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

PhpMyAdmin

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

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

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

Запуск Open server

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

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

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

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

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

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

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

Установка Joomla

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

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

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

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

Сайт Джумла

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

Что такое Quick Start

Важно понимать, что Quick Start это сборка от производителя шаблонов. Делается эта сборка под определенный шаблон. То есть, выбрав определенный шаблон и решив его скачать, вы можете увидеть следующие предложения:

  • скачать отдельно шаблон, с Fraemwork или без (template),
  • отдельно набор компонентов (component), отдельно набор плагинов (plugin) или
  • скачать Quick Start (quickstart).

Также важно понимать, что установив quickstart, вы получите сайт на выбранном шаблоне и с установленным набором необходимых, именно для этого шаблона, расширений, причем сайт будет наполнен демо данными (статьями, фото, модулями и т.д.), которые вы видели при выборе шаблона.

Итак, Quick Start подразумевает, быстрый старт сайта на CMS Joomla. Это значит, что установив, так называемый Quick Start – Быстрый старт, вы получите готовый сайт, с выбранным шаблоном, а именно:

  • Установленную CMS;
  • Установленный выбранный шаблон;
  • Дополнительные расширения для работы этого шаблона.

Продемонтстрирую содержание QuickStart на фото:

Если сравнить содержание quickstart с содержанием дистрибутива joomla, то разницы в элементах каталога нет. Разница в том, что в папках templates, plugins, modules "лежат" дополнительные расширения относящиеся к шаблону quickstart.

Достоинства и недостатки quickstart

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

К серьезным недостаткам quickstart можно отнести его «костность». Часто, производители шаблонов изменяют код системы, что,

  • во-первых, может вызвать проблемы при обновлениях системы и сторонних расширений не входящих в quickstart,
  • во-вторых, сделать из quickstart сайт на другом шаблоне, может стать проблемой.

Еще пару недостатков. Устанавливая quickstart, вы не знаете, какие дополнительные программные продукты, и какие расширения включили авторы Quick Start в свою сборку. Например, вы установили Quick Start и после установки узнаете, что для нормальной работы должны зарегистрироваться на сайте автора. Или на сайте появится реклама авторов, которую вы не сможете убрать.

Если Вы уверены в авторе шаблонов и сборки, то Quick Start Joomla3 это рекомендованный выбор для создания полноценного почти готового сайта.

Как установить Quick Start Joomla3

В установке quickstart нет ничего сложного. Для установки Вам понадобится:

  • Купленный домен и арендованный хостинг с доступом к каталогу;
  • FTP- клиент на своем компьютере;
  • Скачанный и распакованный архив Quick Start выбранного шаблона.

Подробно, как устанавливать Joomla вы можете почитать в статье: Установка Joomla 3 на хостинг, здесь кратко напомню:

  • Создаете базу данных для сайта;
  • По FTP заливаете распакованный quickstart (все папки и файлы) в корень сайта c удаленным файлом Index.html;
  • В браузере открываете адрес http://ваш_домен/instalation.php. Запускается установщик Joomla, и проходите шаги установки;

Важно! На шаге установки, где нужно выбрать установку с демо данными или без, нужно выбрать «установить с демо данными»;

Не забудьте, удалить каталог Installation. Все, готово.


[an error occurred while processing the directive]
Карта сайта