Дизайн сайта определяется шаблоном. Когда мы говорим «шаблон», то имеем в виду расширение для Joomla!, позволяющее отображать информацию в том или ином виде. Для Joomla! разработано такое огромное количество готовых шаблонов - как бесплатных, так и коммерческих, - что глаза разбегаются. И это является единственной трудностью при выборе нужного варианта. Для своих сайтов я использовала как совсем простенькие бесплатные шаблоны, так и "накрученные" клубные. В любом случае, я их "дорабатывала" под тематику сайта и свои личные оформительские предпочтения. К сегодняшнему дню мною сделан вывод: надо выбирать шаблоны, сложность которых минимальна при максимальной привлекательности. Чем проще шаблон по своей структуре, тем проще его редактировать.
Но редактирование шаблона - это отдельная тема, она не для новичков и не для нашего урока. Сегодня нам важно познакомиться с шаблоном, как одним из видов расширений Joomla!.
И первое, что мы должны узнать, так это то, что входит в Joomla-шаблон. "Начинка" у каждого из них своя, но в каждом обязательно присутствуют следующие файлы:
- файл index.php, определяющий базовую структуру страниц Joomla!-сайта;
- файл CSS-стилей, который позволяет регулировать оформление блоков страницы Joomla! (цвета, размеры шрифтов и т.д. и т.п.)
- XML-файл для установки шаблона через администраторскую панель Joomla!
- графический файл предпросмотра шаблона Joomla!
- файлы изображений (хранятся в папке images шаблона)
Все шаблоны хранятся в папке "templates", так что вы легко можете просмотреть их пакеты хотя бы ради любопытства:
Установить шаблон в Joomla можно двумя способами: с помощью стандартной установки Joomla установить/удалить и вручную, путем копирования файлов шаблона в папку templates.
Способ первый. Устанавливаем шаблон в Joomla стандартным установщиком. Для начала скачиваем шаблон который хотим установить. После того, как архив с шаблоном скачан, необходимо убедиться, что в скачанном архиве находится именно шаблон, а не архив с шаблонами или как очень часто бывает, что в архиве, содержится еще несколько архивов. Архив Шаблона Joomla должен иметь расширение zip, а в архиве обязательно должны находится файлы:
templateDetails.xml - используется для инсталляции шаблона в административном интерфейсе;
index.php - содержит всю структуру (код) шаблона.
params.ini - необходим Joomla для сохранения ваших настроек
Так же убедитесь, что в архиве находятся папки:
css - содержит таблицы стилей
images - в этой папке содержатся изображения, использующиеся в шаблоне
js - файлы сценариев JavaScript (jquery.js, mootools.js, scripts.js)
В примере не все файлы и папки которые находятся в шаблоне Joomla. Количество файлов и папок зависит от самого шаблона, я лишь перечислил только те, которые в основном есть во всех шаблонах joomla и без которых шаблон не будет работать.
Например, если вы скачали шаблон, а в архиве находится еще несколько архивов, тогда по этим признакам можно легко определить, какой из архивов является шаблоном и установить его.
Следует отметить, что выбирая шаблон, нужно обращать внимание на дату его выпуска и насколько он соответствует той версии Joomla, с которой Вы работаете.
Например, некоторые из шаблонов более раннего выпуска уже не работают в версии Joomla 1.5 или отображаются некорректно.
Примечание: Архив с шаблоном для установки через стандартный установщик установить/удалить должен иметь расширение.zip или.tar.gz
В административной панели выберите "Расширения" - "установить/удалить" Далее выберите архив с вашим шаблоном на вашем компьютере и нажмите кнопку "Загрузить файл & Установить ". Если шаблон соответствует вашей версии Joomla через несколько секунд шаблон будет загружен и установлен, вы увидите сообщение, что шаблон успешно установлен.
После того, как шаблон установится выберите "Расширения" - "Менеджер шаблонов". В Менеджере шаблонов вы увидите все установленные шаблоны и шаблон который только что установили. (По умолчанию, в Joomla уже установлены два стандартных шаблона: rhuk_milkyway и JA_Purity) Выберите нужный шаблон установив переключатель напротив шаблона и нажмите кнопку "По умолчанию".
Второй способ установки шаблона в Joomla
Этот способ можно использовать когда необходимо установить большое количество шаблонов или просто бывают случаи когда шаблон не устанавливается стандартным способом установить/удалить.
Для установки шаблона этим способом нужно распаковать архив с шаблоном в папку (имя папки может быть любое, главное английскими буквами). Далее запускаем FTP - клиент и открываем папку /templates на сайте для которого устанавливаем шаблон и закачиваем в нее нашу папку с шаблоном.
Если ваш сайт находится на локальном сервере, тогда нужно просто скопировать нашу папку в папку /templates/. Если хотите изменить название шаблона, тогда в папке шаблона нужно найти файл templateDetails.xml, открыть его блокнотом или любым текстовым редактором и найти строчку с тегом <name>August</name>, August - это имя шаблона, меняем его на любое другое (не забываем писать латинскими буквами).
Как я уже говорил, что по умолчанию, в Joomla уже установлены два, иногда три стандартных шаблона: rhuk_milkyway и JA_Purity, которые вы можете смело использовать при создании вашего проекта.
На сегодняшний день выбор шаблонов для сайта очень велик, и разработчики даже делят их по тематике: шаблоны для бизнес сайтов, для развлекательных порталов, праздничные, недвижимость, музыка, социальные сети, кино, видео, спорт, туризм и многие другие.
Стоит отметить, что некоторые из шаблонов созданы на коммерческой основе и, прежде чем их использовать, необходимо оплатить разработчику, в противном случае это будет считаться нарушением авторских прав. Поэтому прежде чем устанавливать на сайт тот или иной шаблон проверьте автора, их сейчас огромное количество, и на каких условиях он предоставляет шаблон для использования.
Если шаблонов загружено большое количество, а Вы не помните название нужного шаблона, то при наведении на ссылку с названием каждого из списка, Вы можете просмотреть его миниатюру.
Далее откройте Ваш сайт, обновите страницу и посмотрите, каким образом новый шаблон установился на сайт.
При выборе шаблона также нужно обращать внимание на его структуру, блоки и позиции, которые он в себя включает. Ведь прежде, чем создавать сайт, наверняка Вы уже спланировали, что и где будет на нем располагаться: будет ли хедер (обычно это картинка, размещенная сверху, его еще называют шапка сайта), логотип, верхнее или вертикальное меню, количество блоков на странице и т.д.
Для того, чтобы проверить позиции в том или ином шаблоне можно набрать в адресной строке браузера http://ваш сайт/?tp=1 и перед Вами предстанут все возможные позиции шаблона и их названия. Service Joomla http://service-joomla.ru/kak-sozdat-svoy-sayt/item/38-kak-ustanovit-shablon-v-joomla.html
Шаблоны в Joomla! определяют внешний вид вашего сайта. Существует 2 вида шаблонов: шаблоны сайта (Site Template) и шаблоны административной панели (Backend Template). В Joomla! есть возможность назначения разным страницам различные шаблоны сайта.
В стандартной поставке Joomla! имеется 2 шаблона сайта и 1 шаблон административной панели.
Установка нового шаблона сайта
Авторизуемся в административной панели
Выбираем в меню пункт Инсталляция -> Шаблоны сайта (Installers -> Site Templates)
Открывается диалог установки шаблонов: Установить новый шаблон [сайт]
В разделе Загрузить установочный пакет нажимаем кнопку Обзор
Выбираем архив с шаблоном на локальной машине.
Нажимаем кнопку Загрузить и установить (Upload and Install).
После установки шаблон необходимо опубликовать
Публикация шаблона сайта
Выбраем пункт меню Сайт->Шаблоны->Шаблоны сайта (Site->Templates-> Site Templates)
В открывшемся списке шаблонов сайта выбираем шаблон
Нажимаем кнопку Умолчание для назначения выбранного шаблона, шаблоном по умолчанию.
Установка нового шаблона административной панели
Авторизуемся в административной панели
Выбираем в меню пункт Инсталляция -> Шаблоны админка (Installers -> Administrator Templates)
Открывается диалог установки шаблонов: Установить новый шаблон [Админка]
В разделе Загрузить установочный пакет нажимаем кнопку Обзор
Выбираем архив с шаблоном на локальной машине.
Нажимаем кнопку Загрузить и установить (Upload and Install).
После установки шаблон необходимо опубликовать
Публикация шаблона административной панели
Выбраем пункт меню Сайт->Шаблоны->Шаблоны админки (Site->Templates-> Administrator Templates)
В открывшемся списке шаблонов сайта выбираем шаблон
Нажимаем кнопку Умолчание для назначения выбранного шаблона, шаблоном по умолчанию.
Как вручную установить шаблон в Joomla
Недавно мы рассказывали, об установке шаблонов из административной панели Joomla. Однако, это далеко не единственный способ установки шаблона. При возникновении проблем с установкой шаблонов из административной панели Joomla, можно воспользоваться установкой вручную.
Установка шаблона Joomla вручную
Берем архив с шаблоном, который нужно установить
Разархивируем его на локальном компьютере в какую-нибудь директорию
Подключаемся по FTP к вашему серверу
В корневой директории Joomla находим папку Templates
Создаем в этой директории папку с названием шаблона
Копируем файлы и папки разархивированного шаблона в созданную папку на сервере
После этого установленный шаблон станет доступен в менеджере шаблонов административной панели.
Примечание: иногда в архивах с шаблонами, файлы шаблона уже находятся в директории. Поэтому будьте внимательны, файл index.php устанавливаемого шаблона должен располагаться в директории /templates/папка_шаблона/. В противном случае, шаблон не будет доступен из административной панели Joomla.
Где можно скачать шаблоны для Joomla!
Внешний вид сайтов на Joomla! определяется установленным шаблоном. В настоящее время существует множество сайтов, на которых можно загрузить бесплатные шаблоны для Joomla!, а также сайты где можно купить коммерческие шаблоны. Некоторые из команд разработчиков коммерческих шаблонов позволяют купить периодическую подписку на их продукцию, например, на месяц или год, что дает возможность вам получать шаблоны выпускаемые в этот период.
Бесплатные шаблоны Joomla
JoomlaPraise.com — 37 коммерческих шаблонов и 8 бесплатных.
SpiralTemplates.co.uk — доступно порядка 30 коммерческих шаблонов и 20 бесплатных.
JoomlaHut.com — огромная коллекция бесплатных шаблонов Joomla (бывший mambohut.com)
joomla24.com — огромная коллекция бесплатных шаблонов Joomla (пишут что более 3100)
Templatki.com — польский сайт с шаблонами, для скачивания требуется регистрация (около 3000 шаблонов)
Joomlaos.de — куча шаблонов Joomla/Mambo
osskins.com — после регистрации на сайте, доступны для загрузки около 10 бесплатных шаблонов. Кроме того на сайте существует магазин шаблонов.
ExSkin.com — относительно небольшой архив шаблонов: на текущий момент доступны для загрузки чуть больше 30 бесплатных шаблонов.
JoomlActive.com — доступны для загрузки около 12 бесплатных шаблонов. Помимо бесплатных шаблонов на сайте присутствует раздел с коммерческими шаблонами.
Mambasana.ru — сайт ру-мамбера Raduga. В настоящий момент доступно 20 очень качественных бесплатных шаблонов.
ty2u.com — 56 бесплатных шаблонов Joomla
JoomlasHack.com — 15 качественных бесплатных и 19 платных шаблонов Joomla по $47
Коммерческие шаблоны для Joomla!
JoomlArt.com — шаблонный клуб, стоимость доступа ко всем шаблонам (около 90) составляет 70$ в год. В клубе представленные так же и бесплатные шаблоны. При необходимости можно приобрести легальные шаблоны JoomlaArt для вашего домена не вступая в клуб.
RocketTheme.com — шаблонный клуб. Стоимость участия в клубе — 90$ в год или 75$ на 6 месяцев. В настоящий момент доступно 79 коммерческих шаблонов и 7 бесплатных. Выпускают 1 коммерческий шаблон в месяц, а так же периодически некоммерческие.
Gavick.com — 41 качественный коммерческий шаблон, при цене годовой подписки 65?.
MightyTemplate.com — шаблонный клуб с 25 шаблонами, выпускающий один шаблон в месяц. Годовая подписка стоит?55.
JoomlaPraise.com — 37 коммерческих шаблонов и 8 бесплатных.
IceTheme.com — около 25 коммерческих шаблонов. Разработчики ежемесячно публикуют 1 новый шаблон. Полугодовая подписка стоит 59$, годовая - 199$.
SpiralTemplates.co.uk — доступно порядка 30 коммерческих шаблонов и 20 бесплатных.
AutoThemes.com — множество коммерческих шаблонов для Joomla! и других CMS с возможностью предпросмотра шаблонов (более 500 шаблонов).
JoomlaDesigns.co.uk — 270 коммерческих шаблонов с исходниками в PSD. Стоимость доступа к шаблонам составляет 25 € в год.
osskins.com — после регистрации на сайте, доступны для загрузки около 10 бесплатных шаблонов. Кроме того на сайте существует магазин шаблонов.
Joomla-Templates.com — 550 платных шаблонов с ценой от 35 до 85$, ко многим из них прилагаются psd-файлы.
JoomlaLingo.com — клуб с годовой подпиской за $24.95/год. Так же есть несколько бесплатных шаблонов.
TemplatePlazza.com — шаблонный клуб с ценой годовой подписки за 39$/год, 17 бесплатных и 76 коммерческих шаблона
JoomlasHack.com — 15 качественных бесплатных и 19 платных шаблонов Joomla по $47
Создание шаблона для Joomla 1.0
Теория и практика
Шаблон для Joomla состоит следующих файлов:
- index.php
- templateDetails.xml
- директория images, куда вы будете складывать все графические файлы для использования в шаблоне
- директория css с файлом template_css.css внутри
Все файлы складываются в директорию с названием вашего шаблона, и все вместе – в директорию templates.
{mospagebreak title=Индекс&heading=Теория и практика}
Индекс
Попробуем сделать шаблон на основе образца, взятого мною на templatemonster.
Основу шаблона составляет файл index.php
В его начало просто копируем следующий код:
01.<?php
02.
03.defined('_VALID_MOS') or die('Direct Access to this location is not allowed.');
04.
05.$iso = split('=', _ISO);
06.
07.echo '<?xml version="1.0" encoding="'. $iso[1].'"?'.'>';
08.
09.?>
10.
11.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
12.
13."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
14.
15.<html xmlns="http://www.w3.org/1999/xhtml">
16.
17.<head>
18.
19.<?php if ($my->id) initeditor();?>
20.
21.<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO;?>" />
22.
23.<?php mosShowHead();
24.
25.echo "<link rel="stylesheet" href="/$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css"
26.
27.type="text/css" />";
28.
29.echo "<link rel="shortcut icon" href="/$GLOBALS[mosConfig_live_site]/images/favicon.ico" />";
30.
31.?>
32.
33.</head>
Основная информация страницы выводится в блоке mainbody. Вся остальная информация выводится в модулях (module). Модули, в свою очередь, располагаются в областях (position) вертикально друг под другом (возможно и горизонтальное расположение, но это редкий и порой сложный в исполнении вариант – см. часть 2 данной статьи). Посмотрим на наш эскиз и постараемся понять, сколько модулей будет на нашем сайте, какие области для них нужны и как их назвать.
Модули могут быть программированные и созданные админом из контрольной панели. С готовыми программированными модулями все понятно – скачиваем и устанавливаем. Собственные модули – это по сути куски статического HTML кода, введенные вами. Рекомендую информацию, постоянную на каждой странице и не требующую изменений, прописывать прямо в коде шаблона (например, логотип, копирайт и т.п.). Информацию же, которая будет присутствовать только на некоторых страницах или часто меняться, лучше занести в модули. Названия областей лучше всего связывать с местонахождением, а не с планируемыми внутри модулями. Обратите внимание, что длина названия области может быть не более 10 букв.
Приблизительная схема наших модулей
Области, определенные под модули
План шаблона
Теперь нам нужно пойти в контрольную панель и объявить все области. В оригинальной версии: Site –> Template Manager –> Module Positions. Возможно там уже будут какие-то области, заявленные разработчиками – их можно смело удалить (только не удалите области, предназначенные для шаблона самой контрольной панели). Порядок, в котором вы занесете все области, будет использоваться в выпадающем списке при выборе области в настройках модулей.
Область вставляется в шаблон следующим кодом
1.<?php mosLoadModules ('название_вашей_области');?>
Например, область с названием left вставляется так
1.<?php mosLoadModules ('left');?>
Исключение составляют дата, строка навигации (pathway) и область mainbody, (где выводится информация компонентов Joomla, например, тексты статей, новости главной страницы и тому подобное).
Код для даты:
1.<?php echo (strftime (_DATE_FORMAT_LC));?>
Код для mainbody:
1.<?php include ("mainbody.php");?>
Код для строки навигации
1.<span class="pathway"><?php mosPathWay();?></span>
Также в шаблон необходимо вставить информацию о разработчиках Joomla и, по вашему желанию, информацию о скорости загрузки страницы
1.<?php include_once($GLOBALS['mosConfig_absolute_path']. '/includes/footer.php');?>
2.
3.<?php mosLoadModules('debug', -1);?>
Естественно все области вставляются в пределах тэга <body></body>
Путь к изображениям в шаблоне должен выглядеть следующим образом (пример для файла logo.jpg)
1.<?php echo $mosConfig_live_site;?>/templates/название_шаблона/images/logo.jpg
Все, скелет нашего шаблона готов
{mospagebreak title=Стили и оформление}
Стили и оформление
После создания скелета необходимо "окультурить" наш шаблон с помощью CSS. Остановлюсь немного подробнее на оформлении модулей. Приятным нововведением в мамбо 4.5.1 стала возможность прописывать индивидуальные классы для каждого шаблона (см. в настройках каждого модуля в контрольной панели).
Стандартный вывод модуля в Joomla – таблица:
01.<table cellpadding="0" cellspacing="0" class="moduletable">
02.
03.<tr><th valign="top">
04.
05.Заголовок модуля
06.
07.</th></tr>
08.
09.<tr><td>
10.
11.Содержание модуля
12.
13.</td></tr>
14.
15.</table>
Возможны также другие варианты:
1.<?php mosLoadModules ('left', -2);?>
Выводит модули области left не в таблицах, а блоками DIV.
<div class="moduletable">
<h3> Заголовок модуля</h3>
Содержание модуля
</div>
1.<?php mosLoadModules ('left', -3);?>
Выводит модули области четырьмя блоками DIV, вложенными друг в друга (обычно используют для создания закругленных углов).
<div class="module"> <div><div><div>
<h3> Заголовок модуля</h3>
Содержание модуля
</div></div></div></div>
1.<?php mosLoadModules ('left', -1);?>
Выводит модули области left без таблиц и блоков. В этом случае у модулей отсутствуют заголовки. Удобно использовать для горизонтального выведения модулей, например, несколько баннеров в ряд.
Если вы прописываете свой класс модулю (параметр ModuleClassSuffix), то его название прибавляется к уже существующему. Лично я начинаю названия своих модулей со знака подчеркивания, чтобы легче читалось. Например, модулю баннеров я задаю класс _banners. В результате в HTML получаю: class="moduletable_banners"
При большом количестве разнообразных модулей длина вашего CSS увеличивается до бесконечности:)
{pagebreak title=XML}
XML
Файл templateDetails.xml используется для опознания шаблона контрольной панелью Joomla – для установки, редактирования, использования и удаления.
Привожу весь код файла XML с пояснениями:
01.<?xml version="1.0" encoding="windows-1251"?>
02.
03.<mosinstall type="template">
04.
05.<name>название шаблона</name>
06.
07./* должно совпадать везде – в названии директории, в прописанных путях к изображениям и т.п. */
08.
09.<creationDate> дата создания </creationDate>
10.
11.<author> ваше имя </author>
12.
13.<copyright> копирайт </copyright>
14.
15.<authorEmail> ваш Email </authorEmail>
16.
17.<authorUrl> www.ваш_сайт.ru </authorUrl>
18.
19.<version> номер версии шаблона </version>
20.
21.<description> описание шаблона </description>
22.
23.<files>
24.
25.<filename>index.php</filename>
26.
27.<filename>template_thumbnail.png</filename>
28.
29./* скриншот шаблона – не обязателен, если только вы не используете модуль смены шаблона юзером */
30.
31.</files>
32.
33./* файлы входящие в ваш шаблон, кроме CSS и изображений */
34.
35.<images>
36.
37.<filename>images/icon_search.gif</filename>
38.
39.<filename>images/icon_sitemap.gif</filename>
40.
41.<filename>images/logo.jpg</filename>
42.
43.</images>
44.
45./* все изображения, входящие в ваш шаблон */
46.
47.<css>
48.
49.<filename>css/template_css.css</filename>
50.
51.</css>
52.
53./* указание на файл стилей */
54.
55.</mosinstall>
{mospagebreak title=Фишки}
Фишки
Для большей гибкости шаблона можно "поиграть" с областями в файле index.php. Приведу несколько готовых вариантов для тех, кто программированием не занимается
----------------------------------------
01.<?php
02.
03.if (mosCountModules('left')) {
04.
05.?>
06.
07.любой код HTML – начало оформления области
08.
09.<?php mosLoadModules (' left ');?>
10.
11.любой код HTML – конец оформления области
12.
13.<?php
14.
15.}
16.
17.?>
Скрывает область left, если на данной странице в ней нет ни одного модуля
----------------------------------------
01.<?php
02.
03.if (mosCountModules('left') || mosCountModules('right')) {
04.
05.?>
06.
07.любой код HTML – начало оформления области
08.
09.<?php mosLoadModules (' left ');?>
10.
11.любой код HTML по необходимости
12.
13.<?php mosLoadModules (' right ');?>
14.
15.любой код HTML – конец оформления области
16.
17.<?php
18.
19.}
20.
21.?>
Скрывает области left и right, если на данной странице ни в одной из них нет модулей. Если есть модуль хотя бы в одной из этих областей, то появятся обе области.
----------------------------------------
01.<?php
02.
03.if ($_REQUEST['option']!= 'com_frontpage' || $_REQUEST['option']!= '') {
04.
05.?>
06.
07.любой код HTML – начало оформления области
08.
09.<?php mosMainBody();?>
10.
11.любой код HTML – конец оформления области
12.
13.<?php
14.
15.}
16.
17.?>
Скрывает область mainbody на главной странице (при условии, что вы используете компонент frontpage, а не какой-то другой, то есть не меняли главную страницу, назначенную при установке Joomla).
Дата добавления: 2015-08-28; просмотров: 34 | Нарушение авторских прав
| <== предыдущая лекция | | | следующая лекция ==> |
| Как установить программу Skype на компьютер | | | Как цвет влияет на покупки. |