Joomla protostar позиции модулей

Шаблоны Joomla 3 — настройка, редактирование

Последний представитель расширений, который нам осталось рассмотреть это шаблоны. Именно шаблон в CMS Joomla 3, да и в любой другой версии определяет внешний вид и облик сайта. Благодаря шаблонам можно кардинально изменить дизайн Вашего сайта, затратив на это минимум времени, все, что потребуется это скачать и установить готовый шаблон, и определиться с местом вывода модулей.

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

Из чего состоит шаблон Joomla 3

Для шаблонов в Joomla отведена специальная папка «templates», в корне которой каждый шаблон имеет свою собственную одноименную папку. Все без исключения шаблоны состоят из файлов, причем количество этих файлов у разных шаблонов может отличаться. Но есть и стандартные файлы, без которых не будет работать ни один шаблон:

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

Кроме того шаблоны могут содержать файлы скриптов (.js), изображения, языки и многое другое. На скриншоте ниже представлен набор файлов, из которых состоит стандартный шаблон «Protostar»:

Какие бывают шаблоны

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

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

Работа с шаблонами Joomla 3

С разновидностями, местом хранения и файлами шаблонов разобрались, теперь поговорим о том, как работать с шаблонами при помощи панели управления. Для начала давайте перейдем в раздел «Шаблоны: Стили (Site)» («Расширения» -> «Шаблоны») и посмотрим, какие шаблоны уже присутствуют в базовой сборке CMS Joomla:

На странице «Шаблоны: Стили (Site)» видно, что в нашем распоряжении имеется два шаблона Beez3 и Protostar, последний установлен по умолчанию для всех страниц сайта, обратите на это внимание ведь в Joomla один и тот же сайт может состоять из нескольких шаблонов. И для различных разделов сайта можно назначить свой собственный шаблон, тем самым сделать сайт более привлекательным.

Давайте откроем один из шаблонов для редактирования и посмотрим, что и как можно отредактировать:

На первой вкладке с именем «Подробно» мы видим некую информацию касательную данного шаблона, тут же разработчики нам пишут, что шаблон использует фреймворк Bootstrap.

Следующая вкладка «Дополнительные параметры» содержит базовые настройки шаблона, тут мы можем поменять цвет текста и фона сайта, логотип, заголовок шрифты и прочие настройки:

И последняя вкладка — «Привязка к меню» именно с её помощью можно назначить шаблон для всего сайта или для определенных разделов. Просто отмечаем те пункты меню, для которых будет определен данный шаблон:

Позиции модулей в шаблоне Joomla 3

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

Как узнать или где посмотреть позиции модулей в Joomla 3? Для этого в Joomla предусмотрен специальный предварительный просмотр, но по умолчанию он недоступен (выключен) и его необходимо включить в настройках.

Для того чтобы включить отображение позиций модулей в Joomla 3 необходимо на странице «Шаблоны: Стили (Site)» нажать на кнопку «Настройки». После этого мы попадем на страницу «Настройки менеджера шаблонов», на которой выставляем переключатель «Просмотр позиций модулей» в положение «Включено»:

Читайте также:  Закончилось место на диске linux

После этого снова переходим на страницу менеджера шаблонов – «Шаблоны: Стили (Site)» и жмем на иконку с изображением глаза расположенную чуть левее названия шаблона:

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

Создание собственных позиций модулей

Просматривать уже существующие позиции модулей мы уже научились, но как быть, если в шаблоне нет именно той позиции, которая нам нужна? В этом случае можно создать собственную позицию для модулей в готовом шаблоне Joomla. Процесс не сложный, но требует редактирования определенных файлов шаблона – index.php и templateDetails.xml.

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

Переходим от слов к делу, для начала открываем файл templateDetails.xml, который находится в корневом каталоге шаблона. Вникать в его суть сейчас нет смысла, нас интересуют только позиции для модулей, они объявлены между строчками имя-позиции-модуля (строки 28-47 шаблона Protostar). По умолчанию их 18 штук:

Для того чтобы объявить свою позицию модулей добавляем дополнительную строку (либо несколько строк) такого вида:

Сохраняем файл, его можно закрыть, главное запомнить имя позиции, под которой вы его объявили.

Теперь открываем файл index.php и добавляем в него новый блок DIV, который будет являться контейнером для новой позиции модулей. Я для примера решил создать новую позицию для модулей в футере сайта. Пишем в футер следующий код:

Вот и все, позиция создана, можно зайти в раздел «Менеджер шаблонов» и проверить её наличие. Код индексного файла у меня получился таким:

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

Далее надо указать тип подключаемого элемента, в нашем случае это модуль, так и пишем:

Теперь необходимо указать имя позиции модуля, которое мы указали в файле templateDetails.xml:

За стиль кода модуля отвечает параметр style, который имеет несколько вариантов оформления, по умолчанию «none», в этом случае заголовок модуля не будет выводиться на страницах сайта.

Конечный результат кода, который отвечает за вывод модулей в определенной позиции, как вы уже поняли, выглядит следующим образом:

Вот таким образом можно создавать собственные позиции модулей абсолютно в любом шаблоне Joomla 3. Процесс как видите совершенно не сложный.

Расширенные параметры шаблона Joomla 3

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

Для доступа к дополнительным параметрам шаблона переходим в раздел «Расширения» -> «Шаблоны» -> «Шаблоны»:

Жмем на ссылку «Параметры имя_шаблона» и попадаем на страницу изменения параметров шаблона, которая состоит из трех вкладок — «Редактор», «Создать переопределение», «Описание шаблона»:

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

Следующая вкладка, которая нас интересует это вкладка «Создать переопределение». Тут мы можем переопределить модули, компоненты либо макеты сайта, а в дальнейшем изменять их по своему усмотрению не внося изменений в оригинальные файлы:

О том, как создавать переопределение, подробно написано в статье «Переопределение в Joomla 3», а на данном этапе нам просто необходимо понимать, где и что редактируется в шаблоне.

На последней вкладке «Описание шаблона» написана небольшая информация по данному шаблону, данная вкладка нам не интересна.

Читайте также:  Windows boot manager 0x00000e9

На этом урок подошел к концу, а в следующем мы поговорим о том, как обновить Joomla 3 и какие могут быть ошибки в процессе обновления.

Источник

4. Дизайн, Макет, Цвета

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

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

Рисунок 1: Автомобиль с наклейками (Richardmasoner)

Рисунок 2: Красный автомобиль (FotoSleuth)

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

Несколько определений

Хотелось бы уточнить некоторые термины.

Что такое дизайн?

  • «Дизайн» означает план или обрисовку, которые отображают функции и внешний вид объекта для достижения конкретных целей в определенной среде, и удовлетворяют ряду требований.

Термин дизайна может быть использован в таких областях как:

  • искусство («почти инстинктивное», «встроенное», «естественное»)
  • техника (разработка дизайна нового автомобиля)
  • производство (планирование и выполнение)
  • моделирование процессов (моделирование бизнес-процессов)

Что такое макет страницы?

Макет является частью «графического» дизайна, который заключается в расположении и обработке стиля элементов (контента) на странице. Если говорить на языке Joomla, это расположение модулей и компонентов Joomla в определенных позициях шаблонов.

Что такое цвета?

Цветом является визуальное восприятие мира человеком. Отдельные цвета вызывают ассоциации с определенными объектами или ситуациями.

Цвета HTML и CSS могут иметь 16 миллионов различных значений. Сочетание красных, зеленых и синих значений от 0 до 255, дает более 16 миллионов различных цветов (256 х 256 х 256).

Пример: черный цвет = color HEX # 000000 = color RGB rgb (0,0,0)

Некоторые инструменты, такие как генератор цветовых схем, может помочь вам найти правильный цвет для веб-сайта проекта (рис. 3).

Рисунок 3: Генератор цветовых схем

Шаблоны

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

Веб-дизайн

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

Необходимы навыки работы в таких областях, как HTML, CSS, JavaScript, PHP, редактирование изображений и многих других.

Joomla! – это ещё один инструмент в арсенале веб-дизайнеров.

Хороший шаблон Joomla содержит не только цвета и ​​графику. Форма и расположение содержания являются столь же важными. Сайт должен быть удобным и надежным.

Веб-дизайн – молодая профессиональная область. Веб-дизайнеру часто приходится иметь дело с низкой пропускной способностью, несовместимыми браузерами, неопытными редакторами контента и другими людьми, вовлеченными в процесс создания «хорошего» сайта. Создание сайта Joomla! процесс, в котором все участники многому обучаются. Joomla 3 включает в себя библиотеку пользовательского интерфейса и шаблон Protostar.

Хороший веб-дизайн это тяжелый труд!

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

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

Структура

Joomla известна своим качеством и простотой. В Joomla страница генерируется из вывода HTML одного компонента, различных модулей и шаблона. Каждая страница доступна с помощью уникального URL. В качестве примера возьмем первую страницу. Компонент контента производит вывод HTML для статей в середине. Это скриншот шаблона Joomla Beez (рис. 4). Блоки рядом со статьями — различные модули. Вы можете сочетать вывод HTML одного компонента с выводом HTML любого количества модулей. Эти модули также могут быть использованы на других страницах.

Читайте также:  Как заправить картридж для принтера пантум м 6507

Рисунок 4: первая страница Joomla!

Позиции

Конечно, вы должны знать где на сайте разместить и добавить модули. Для этой цели каждый шаблон содержит так называемые позиции. Для того чтобы увидеть эти позиции необходимо перейти к «Просмотру модуля позиций» (Extensions → Template Manager → Options). После этого, вы можете получить доступ к сайту с помощью параметра tp=1 (http://localhost/index.php?tp=1) или нажмите на ссылку «Предварительный просмотр в расширениях → Шаблоны → Управление» (Preview link in Extensions → Templates Manager → Manager) (рис. 5).

Рисунок 5: Template Manager — Шаблоны сайтов

Перед вами подчеркнутые позиции модулей с их именами (рис. 6).

Рисунок 6: Модуль позиции — Protostar шаблон

В «Расширения → Управление модулями» (Extensions → Module Manager) можно назначить одну из этих позиций для каждого модуля. Если вам необходим модуль на разных позициях, можете его скопировать.

Основные шаблоны

Joomla! выпускается с двумя шаблонами сайта и двумя шаблонами администратора. Вы можете сделать предварительный просмотр в Расширения → Управление шаблонами → Шаблоны (Extensions → Template Manager → Tab Templates). Также можно фильтровать список шаблонов, отображая шаблоны сайта или администратора (рис. 6 и 7).

Рисунок 7: Template Manager – шаблоны для администратора

Стили

Стили дают возможность создавать и использовать различные версии одного шаблона. Шаблон имеет как минимум один стиль. В этом стиле, такие конфигурации, как изменение цвета или загрузка логотипа, могут быть настроены в зависимости от шаблона. Вы можете задать стиль по умолчанию для своего сайта через «Расширения → Управление шаблонами → Стили» (Extensions → Template Manager → Styles).

Пример: индивидуальный стиль

Давайте создадим индивидуальный стиль для нашего сайта:

  • Имя: cocoate
  • Цвет шаблона: #f88638
  • Подвижный макет

Вы можете создать дополнительные стили, копируя их. Для этого примера мы используем фильтр для шаблона Protostar (рис. 8).

Рисунок 8: Дублирование стиля

Введите имя стиля и установите его по умолчанию для всех языков. Если у вас есть многоязычные сайты Joomla, можно установить разные стили для разных языков (рис. 9)

Рисунок 9: Настройка стиля шаблона

На вкладке «Параметры» можно выбрать шаблон и цвет фона, загрузить логотип и установить, будет ли шаблон фиксированным или подвижным (рис. 10, рис. 11)

Рисунок 10: «Параметры → Стиль»

Рисунок 11: Загрузка логотипа

Каждый стиль может (должен) быть назначен к пункту меню. Если, например, вы хотите, чтобы фон на сайте был зеленым, когда люди нажимают на пункт «А» в меню, и, чтобы фон был синим при нажатии на пункт «B», можено назначить соответствующий стиль. В нашем есть только один пункт меню, поскольку до сих пор нет контента. Назначаем новый стиль к пункту главного меню (рис. 12).

Рисунок 12: Назначение меню

После сохранения стиля веб-сайт выглядит по-другому (рис. 13), и, благодаря шаблону Protostar, сайт будет отображаться корректно и на мобильных устройствах. (рис. 14)

Рисунок 13: Сайт на настольном ПК

Рисунок 14: Сайт на мобильном устройстве

Изменение файлов шаблонов онлайн

Шаблон в Joomla является основой стиля и состоит из различных файлов. Вполне возможно, изменить центральные элементы шаблона онлайн.

Если вы захотели отредактировать шаблон Protostar, нужно перейти к «Расширения → Управление шаблонами → Шаблоны → Protostar» (Extensions → Template Manager → Templates → Protostar Details and Files) кликнуть ссылку на файл.

Рисунок 15: Редактирование шаблона онлайн

Конечно, можно редактировать файлы во внешнем редакторе.

Шаблоны сайтов находятся в папке «шаблоны». Каждый шаблон имеет собственную папку. Под «шаблоны»/«системная папка» (/templates/systems folder) находятся шаблоны файлов для редактирования в автономном режиме и шаблон страницы ошибки.

Административные шаблоны находятся в папке «администратор»/«шаблоны» (/administrator/templates).

Источник

Поделиться с друзьями
КомпСовет
Adblock
detector