18 Июнь 2012

Разные шаблоны для разных страниц сайта - 3.8 out of 5 based on 5 votes

Не все страницы сайта обязательно должны иметь одинаковый дизайн. Некоторые сайты имеют разные цвета и стили для разных страниц. У других сайтов дизайн радикально отличается в одном разделе от другого. Joomla позволяет реализовать подобную задумку.

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

Шаг 1: Разбор стандартного шаблона Joomla

Joomla имеет 3 стандартных шаблона: Atomic, Beez5 и Beez2. Эти три шаблона предназначены для сайта. Другие два - Bluestork and Hathor поедназначены для админ-панели Joomla. Вы можете так же установить другой шаблон или создать собственный.

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

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

После установки joomla шаблоном по умолчанию назначен Beez2. Если щекнуть по названию шаблона, вы можете отредактировать некторые настройки шаблона.

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

Шаг 2: Назначение разных шаблонов для разных страниц Joomla

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

• Закройте страницу редактирования шаблона Beez2 .
• Откройте для редактирования шаблон Beez5, установив флажок напротив шаблона и нажав кнопку: "Редактировать" .

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

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

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

Вот как выглядит главная страница с шаблоном Beez по умолчанию.

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

Шаг 3: Определение различных позиций модулей в разных шаблонах

Позиции модулей в шаблоне Beez5 (вверху) и в шаблоне Beez20 (внизу) почти одинаковы, так что изменения незначительны. Однако есть и различия.

Одним из заметных различий между шаблонами является позиция модулей возле логотипа. В шаблоне Beez5 позиции 1 и 0 находятся ниже логотипа.

В Beez20 позиция-0 находится над логотипом, а позиция-1 ниже него.

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

Но что делать, если позиции модулей в шаблонах отличаются не только положением но и названием?

Вернитесь в Менеджер шаблонов и свяжите шаблон Atomic со страницей Категория 2. Вы увидите шаблон Atomic на странице Категория 2. Он имеет совершенно другие позиции модулей, и вы можете его видеть на картинке ниже.

На этой странице представлены позиции модулей:

1. atomic-topmenu
2. atomic-topquote
3. atomic-search
4. atomic-sidebar
5. atomic-bottomleft
6. atomic-bottommiddle

Если вы хотите, чтобы шаблон Atomic работал в дополнении к Beez20 вы должны проделать больше работы. Не гарантировано, что позиция модуля работающая в Beez20 будет работать в Atomic.

Шаг 4: Добавление модуля меню к новому шаблону.

• Перейдите в Расширения - Менеджер модулей и нажмите на кнопку Создать.
• Выберите тип модуля Меню.
• Назначте вашему новому модулю позицию atomic-sidebar .
• В Joomla 2.5 представлена новая возможность: поле примечания для модуля. Это позволит вам не запутаться, когда у вас будет много модулей.

Теперь мы собираемся привязать модуль только к определенной странице.

• В опции "Привязка к пунктам меню" выберете значение "Только на указанных страницах".
• Пометьте флажком ту страницу, на которой хотите отображать модуль.

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

Перейдите в менеджер модулей и переместите ваше меню в позицию atomic-topmenu . Результат вы можете увидет на следующей картинке.

Шаг 5: Стили одного шаблона вместо разных шаблонов.

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

• Перейдите в Менеджер шаблонов.
• Выберите шаблон, который вы хотите продублировать (флажком напротив него).
• Нажмите кнопку "Дублировать".

• Установите флажок радом с шаблоном Beez2- Default (2).
• Нажмите кнопку "Изменить".

• Beez20 поставляется с двумя цветовыми схемами: Personal и Nature. Выберите Nature из выпадающего списка.
• Назначьте шаблон для пункта меню Категория 1 в блоке "Привязка к меню" . Обратите внимание на то, что есть и другие настройки, которые вы можете изменить. Например: логотип, название сайта и позицию навигации.

Теперь у вас есть на сайте два разных стиля шаблона, связанных с двумя страницами.

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

Rating 3.80

Просмотров: 25562

Все файлы замещений компоновок размещаются в папке templates/<имя_шаблонa>/html . Так, если шаблон называется my_beautiful_template , то все файлы заме-щений компоновок будут располагаться в папке templates/my_beautiful_template/html . Это означает, что файлы замещений благополучно сохраняются в папке отдельного шаблона. Но такое "благополучное" сохранение возможно лишь в том случае, если ша¬блон не является базовым.

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

Скопируйте папку шаблона в новую папку. С этой целью воспользуйтесь функцией копирования папок на уровне операционной системы, чтобы переместить папку templates/beez_20 (со всеми входящими в нее подпапками и файлами) в новую папку templates/beez_20_copy. Непременно убедитесь в том, что все файлы исходной папки правильно скопированы в целевую папку.

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

• Создать собственную копию шаблона beez_20_copy, следуя приведенным ниже инструкциям.
• Загрузить архивный файл beez_20_copy.zip с веб-сайта, посвященного этой книге (http://joomlaprogrammingbook.com/downloads.html), а затем про¬извести установку по команде Extension Manager ^Install (Диспетчер расширений1^ Установить).

Сделать копию шаблона относительно легко и даже полезно, чтобы знать, как это во-обще делается. Для этого выполните следующие действия.

2. Измените имена файлов в XML-файле шаблона beez_20_copy. С этой целью от-кройте XML-файл beez_20_copy/templateDetails.xml для редактирова¬ния. Само же редактирование состоит лишь в глобальном поиске и замене текста beez_20 на текст beez_20_copy. Таких замен должно быть три: в элементе паше и двух файлах языковой поддержки в элементах language.

3. Переименуйте файлы языковой поддержки. В данной процедуре имена файлов были изменены в XML-файле. А теперь нужно переименовать их на уровне файловой системы следующим образом:

• en-GB.tpl_beez_20.ini на en-GB.tpl_beez_20_copy.ini
• en-GB.tpl_beez_20.sys. ini на en-GB.tpl_beez_20_copy.sys .ini

Скопируйте оба эти файла из папки templates/beez_20_copy/language/en-GB/ в папку language/en-GB/, вновь воспользовавшись функцией копирования на уровне операционной системы.

5. Найдите и установите копию шаблона в качестве нового расширения. В версии 1.6 внедрено новое замечательное средство обнаружения программных компонентов Joomla - Discover. Оно предоставляет альтернативный способ установки новых расширений. При установке расширения происходит следующее.

• Файлы расширения копируются в нужные папки текущей установки Joomla.
• База данных Joomla обновляется информацией о новом расширении.

С помощью средства обнаружения Discover можно вручную скопировать файлы в папки, а затем дать Joomla команду найти новые расширения. Как только новое расширение будет обнаружено, его можно установить. Благодаря этому в базе данных Joomla создаются правильные записи. Воспользуемся этим средством, чтобы установить новый шаблон. Если перейти по команде Extension Managers Discover (Диспетчер расширений=>Обнаружить) и выбрать пиктограмму Discover на панели инструментов, то Joomla найдет новый шаблон.

Далее шаблон beez_20_copy требуется сделать выбираемым для веб-сайта по умолчанию. Для этого перейдите по команде Extensions=>Template Manager: Styles (Расширения=>Диспетчер шаблонов: Стили), выберите новый шаблон и щелкните на кнопке Make Default (Сделать выбираемым по умолчанию).

И наконец, если требуется, чтобы новый шаблон выглядел как исходный, нужно из¬менить в нем параметры нового стиля таким образом, чтобы привести его в соответствие со старым стилем оформления. Это делается в экранной форме Edit Style (Правка стиля), открываемой щелчком на имени шаблона (в данном случае - beez_20_copy - Default)

Правка стиля оформления нового шаблона

Поля в открывшейся форме устанавливаются следующим образом.

Шаблон - это тип расширения в Joomla, который представляет внешний вид вашего сайте. Существует два типа шаблонов, используемых в CMS Joomla: Front-end Templates и Back-end Templates. Front-end (фронтальный) – определяет внешний вид вашего сайта, это вся визуальная часть интернет-ресурса, которую видит пользователь. Back-end – это тип шаблонов, который позволяет изменить внешний вид (интерфейс) админ-панели Joomla!

В Joomla 2.5 предусмотрено несколько стандартных шаблонов, которые идут в комплекте вместе с установкой CMS (3 Front-end и 2 Back-end шаблона):

Шаблоны сайтов

• Beez 20 (шаблон по умолчанию);
• Beez 5;
• Atomic.

Шаблоны админ-панели

• Bluestorkk (шаблон по умолчанию);
• Hathor.

Цель шаблона

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

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

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

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

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

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

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

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

Редактирование шаблона. Что можно сделать?

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

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

Цветовая палитра. С помощью CSS вы можете изменять цвет фона, ссылок, текста и т. д..

Шрифты. То же касается и шрифтов. С помощью стилей в CSS вы можете задавать единый внешний вид текстов на своих страницах. Это позволяет с легкостью изменять внешний вид всей текстовой информации, отредактировав один или два файла, а не каждую отдельную страницу.

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

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

В него также входят механизмы определяющие размещение данных, способы и интервалы отображения различных модулей данных, языковые параметры и т.д.
В предыдущих версиях Joomla использовался базовый шаблон Beez. В последних версиях шаблоны построенные на его основе (Beez5, Beez_20) претерпели существенные изменения в сравнении с ним. Создавая шаблон Beez разработчики вкладывали в него возможные варианты приспосабливания под нужны любого владельца сайта. Исходный код шаблона можно было легко изменить. Внесение изменений в каскадные таблицы стилей позволяло с легкостью создать совершенно новый шаблон оформления не затрачивая значительных усилий. Но в процессе работы дизайнеры старались не пользоваться данным шаблоном, а разрабатывали свои собственные с нуля.
В результате были разработаны два совершенно новых шаблона для версии Joomla 2.5. В обоих шаблонах используется язык JavaScript, в шаблоне beez5 используется язык HTML5, в шаблоне beez_20 не требуются переопределения. При верстке нет необходимости использовать таблицы. Были изменены названия классов каскадных таблиц.

Свойства шаблонов

Новые шаблоны стали широко доступны, появилась возможность выбирать местоположение блока навигации на странице, добавлены функциональные метки WAI-ARIA, модули во вкладках могут выводиться в автоматическом режиме, добавлены сворачиваемые позиции для модулей и для колонок, в шаблоне beez_20 встроены две формы оформления: natural и human, добавлена поддержка языка HTML5 в шаблоне beez5.
Ни для кого не секрет что существуют люди, у которых ослаблены возможности восприятия окружающего мира. Кто-то не способен к зрительному восприятию, кто-то ограничен к восприятию звука. Однако эти люди тоже пользуются информационными ресурсами сети Интернет. И все создаваемые интернет-порталы должны быть рассчитаны и на данную категорию пользователей. Шаблоны Joomla обладают всеми необходимыми инструментами для того чтобы обеспечить людей с ограниченными возможностями возможностью пользования сетью Интернет.
При создании шаблонов необходимо придерживаться основных требований: материалы сайта не должны пересекаться с оформлением этих материалов, структура сайта не должна быть перегружена, переходы по страницам сайта должны поддерживаться командами с клавиатуры, цветовое оформление контента должно быть контрастным.
Наиболее важным моментом с точки зрения разработчика является разделение контента от оформления. Для этого необходимо избавиться от табличного оформления материала на странице. При форматировании используется только CSS. Материал необходимо выстраивать линейно сверху вниз.
Семантическое оформление позволяет осуществлять переход между страницами сайта основываясь на заголовках, списках и т.д., а также складывать общее представление о материале документа.
Однако, при линейном оформлении содержимого страницы существует недостаток - чтобы добраться до необходимой информации может понадобиться время (если информация содержится внизу страницы). Для исправления этой проблемы можно использовать закладки HTML для ускорения перемещения по странице. В этом случае предполагается создание дополнительного меню для перемещения по странице. Для тех кто уже знаком со структурой сайта данное меню можно скрывать.
Например:

• Перейти к основному тексту.
• Перейти к основному блоку навигации и войти в систему.

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