Дизайн сайта определяется шаблоном. Когда мы говорим «шаблон» , то имеем в виду расширение для Joomla!, позволяющее отображать информацию в том или ином виде.

Для Joomla! разработано такое огромное количество готовых шаблонов - как бесплатных, так и коммерческих, - что  глаза разбегаются. И это является единственной  трудностью при выборе нужного варианта. Для своих сайтов я использовала  как совсем простенькие бесплатные шаблоны, так и "накрученные" клубные. В любом случае, я их "дорабатывала" под тематику сайта и свои личные оформительские предпочтения. К сегодняшнему дню мною сделан вывод:  надо выбирать шаблоны, сложность которых минимальна при максимальной привлекательности. Чем проще шаблон по своей структуре, тем проще его редактировать.

Но редактирование шаблона - это отдельная тема, она не для новичков и не для нашего урока. Сегодня нам важно познакомиться с шаблоном, как одним из видов расширений Joomla!.

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

-  файл index.php, определяющий базовую структуру страниц  Joomla!-сайта;
- файл CSS-стилей, который позволяет регулировать оформление блоков страницы Joomla! (цвета, размеры шрифтов и т.д. и т.п.)
- XML-файл для установки шаблона через администраторскую панель Joomla!
- графический файл предпросмотра шаблона Joomla!
- файлы изображений (хранятся в папке images шаблона)

Все шаблоны хранятся в папке "templates" корневого каталога Joomla, так что вы легко можете просмотреть их пакеты хотя бы ради любопытства:

Иллюстрация 1

Управление шаблонами

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

 Шаг 1. Авторизуемся в админке.
 Шаг 2. Открываем менюРасширения>>Менеджер шаблонов:

Иллюстрация 2

Шаг 3. Базовый пакет Joomla! содержит три шаблона. С помощью картинки предпросмотра мы можем определить "внешность" каждого. Для этого достаточно подвести курсор к имени шаблона:

Иллюстрация 3

Сейчас на нашем Демо-сайте шаблоном по умолчанию установлен rhuk_milkyway (на это указывает желтая звёздочка в графе "По умолчанию") :

Иллюстрация 4

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

Иллюстрация 5

Шаг 4. Открываем в браузере новую вкладку с лицевой панелью сайта и смотрим, как выглядит наш Демо-сайт в новом цветовом оформлении:

Иллюстрация 6

Можете повторять Шаги 3 и 4 до тех пор, пока не подберёте для себя лучший вариант.

Ну как, убедились, что всё беспредельно просто?  Тогда давайте усложним задачу и попробуем привязать шаблон к пунктам меню.

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

Особенность Joomla! состоит в том, что каждому пункту меню можно назначить отдельный шаблон (или наоборот). Наверное, делать это лучше тогда, когда ваш сайт большой, в нём много разделов и, чтобы  подчеркнуть  их какие-либо отличительные особенности, требуется привязать к ним "свои" шаблоны. Для разнообразия, в общем.

Как привязать Joomla- шаблон к отдельным пунктам меню ?

Шаг 1.  В административной панели открываем  меню Расширения>>Менеджер шаблонов.

Шаг 2. В Менеджере шаблонов откроем  настройки шаблона  Beez, просто нажав в списке шаблонов на его имя.

Шаг 3. В панели "Привязка к пунктам меню" нажимаем на кнопку "Выберите из списка", а затем в списке нажать на выбранный  для привязки пункт меню. Для примера я выбрала пункт  вопросов и ответов "FAQ" , а  затем для сохранения  нажала на кнопку "Сохранить" :


Иллюстрация 1

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

Шаг 4. Открываем в браузере вкладку с лицевой панелью  Демо-сайта. В  Main Menu  нажимаем на пункт меню "FAQ" :


Иллюстрация 2

Шаг 5. Если вы повторили за мной шаги этого урока, то вот что должны сейчас увидеть:


Иллюстрация 3

Установка нового шаблона

Новый шаблон для сайта - это как свадебное платье: им любуется не только сама невеста, но и собравшиеся на свадьбу гости. Новый шаблон - это новый дизайн: меняются картинки, шрифты, модульные позиции. Если в прежнем шаблоне у вас, скажем, были позиции right и left, то в новом может оказаться только одна из них. Если ваши модули были раскиданы и справа, и слева, то установив шаблон с какой-то односторонней позицией, вы должны будете переписать параметры модулей. Поэтому не спешите отказываться от понравившегося нового шаблона, попробуйте сначала сделать "регулировку".

Так как шаблон - это расширение Joomla!, то его установка и удаление происходят по обычному в таком случае пути.

 Как установить новый шаблон Joomla ?

Шаг 1. Через меню Расширения>> Установить/Удалить>> Обзор>>Выбрать файл>> Загрузить & Установить загружаем и устанавливаем zip-архив с шаблоном на сайт.

Шаг 2. Открываем меню Расширения>>Менеджер шаблонов, находим в списке только что установленный шаблон, нажимаем на радиокнопку слева от его названия, а затем - на жёлтую кнопку-звезду "По умолчанию" в правом верхнем углу панели.

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

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

Раскладка (позиции) шаблона

На этом занятии мы разберемся с понятием "Joomla Layout". В переводе с английского слово Layout означает "раскладка, показ, планировка, расположение". Когда вы будете выбирать шаблон, то обязательно встретитесь с этим понятием. Как правило, к коммерческому шаблону обязательно прилагается раскладка в виде графического изображения. С бесплатными шаблонами в этом смысле сложнее: позиции его придётся искать самостоятельно, и ниже мы разберёмся, как это делается.

Важный вопрос: а зачем  вообще надо знать раскладку (позиции) шаблона?

Дело в том, что материалы сайта, или контент, выводится на обозрение читателей не только в виде обычных статей, но и в виде модулей. Что вы видите первоначально, зайдя на любой сайт? - конечно, статью, - в силу того, что она занимает бОльшую часть окна. А со всех сторон от неё расположена другая информация, выводимая с помощью модулей: менюшки, голосования, вход на сайт, последние статьи, самые популярные статьи, баннеры, галереи, и т.д. и т.д. Все эти модули раскиданы по разным местам. Эти места не хаотичны, они строго прописаны в шаблоне, и именно эта роспись называется раскладкой.

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

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

Таким образом, расположение позиций вашего Joomla-сайта зависит от того шаблона, который вы используете. Ниже на рисунке изображены позиции стандартного шаблона, который установлен на Joomla! изначально, т.е. "по умолчанию". Он называется rhuk_milkyway. Рисунок и короткие объяснения к нему ниже помогут вам лучше понять структуру раскладки, чтобы вы представляли, как можно эту структуру  изменить. Забегая вперёд, скажу, что  изменить её можно с помощью Менеджера модулей (Расширения>>Менеджер модулей): выбираем здесь модуль и назначаем ему позицию. Как это делается,будет рассмотрено в разделе "Модули". В этом уроке мы просто познакомимся со стандартными позициями шаблона, которые обозначены цифрами с 1 по 10:


Иллюстрация 1
Увидеть позиции любого шаблона можно, набрав в браузерной строке название сайта и добавив к нему /?tp=1
Например, http://localhost/demo/?tp=1. Нажмите Enter, и вы увидите эти позиции.

Наиболее распространенные из них называются top, user1 - user6, left, right, header, footer, breadcrumb и newsflash.

1. В "top"- позиции модули "Banners" и "Newsflash" располагаются по умолчанию.

Модуль Баннеры позволяет вам разместить картинку, которая ведет на какой-либо URL. С баннерами мы работаем сначала через меню Компоненты>>Баннеры, где прописываем установки для них, а затем показываем созданный баннер с помощью модуля Баннер через Расширения>>Менеджер модулей нашей админки.

Модуль Newsflash показывает краткое содержание (или заголовок) одной, или нескольких статей в горизонтальной или вертикальной конфигурации. Через админку вы укажете, статьи из какой категории будут показаны в модуле Newsflash.

2. Модуль Top menu показывается в позиции "user3" по умолчанию .

3. Модуль Breadcrumbs размещается в позиции "breadcrumb" . Он показывает навигацию для посетителей сайта, - страницу, на которой посетитель находится в данный момент, и полный путь к этой странице.Это очень удобно для посетителей, особенно в случаях, когда меню содержит ряд подменю.

4. Модуль Search располагается в позиции "user4" . Он дает посетителям возможность поиска по сайту.

5. Несколько модулей располагаются слева, т.е. в позиции "left". В этой позиции вы можете разместить вертикальные меню, форму "Войти на сайт", другие модули, - в зависимости от своих нужд.

6. Модуль Latest News размещается в позиции "user1" . В нем показываются заголовки последних статей, добавленных на сайт. Вам только надо будет указать, из какой категории будут эти статьи, или не указывать категорию, и тогда будут показываться новые статьи из всех категорий. Очень удобно для тех, кто посещает ваш сайт часто.

7. Модуль "Popular" располагается в позиции "user2" . В нём показываются заголовки статей, которые читаются посетителями чаще всего. Иначе говоря, это заголовки популярных материалов сайта.

8. Это главная арена, предназначенная для публикации статей .

9. Модуль "Polls" - голосования - публикуется справа, т.е. в позиции "right" . Создать голосования можно через Компоненты>>Голосования, а потом опубликовать их в модуле "Голосования" через Менеджер модулей.

10. Модули "Banners" и "Footer" располагаются в позиции "footer". Вы можете использовать модуль "Footer" для показа полезных линков, копирайта, другой полезной информации в самой нижней части вашего сайта.

Позиции, что мы рассмотрели выше, относятся к стандартному шаблону Joomla!
под названием rhuk_milkyway. Когда вы будете подбирать шаблон для своего сайта, обращайте внимание не только на цветовое оформление, но и на раскладку: на одном шаблоне есть и правая, и левая позиции, на другом - только левая(правая). Есть шаблоны с четырьмя позициями, есть с более, чем тридцатью. Поэтому прежде, чем приступить к поиску, продумайте заранее, что хотите найти, и - вперёд! Предлагаю начать поиски с сайта  Siteground.com . Здесь вы найдёте более ста бесплатных качественных шаблонов.

Поделиться: