Пятница, 27 Январь 2012 00:57

Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Важные особенности шаблонов Joomla.

Автор 
Оцените материал
(7 голосов)

Теперь, когда вы морально подготовились к созданию шаблона, прошли курсы верстки или научились cамостоятельно, не важно, будем делать ручками подобный магазин женского белья (макет не мой, но я скачал не джумловский шаблон, а простой бесплатный html-макет, поскольку нет времени и желания рисовать и верстать оформление с нуля):

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

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

Как и в любом сайте, сначала нам нужно определиться с его структурой. Какие будут разделы, виды менюшек, сетки страниц, и так далее. Но в этом посте я опущу эту тему и начну с главного. Первое, что нам нужно сделать — сверстать макет страниц, который мы и будем «натягивать» на джумлу в самых простых html и css-файлах. 

Скачайте учебный макет перейдя по этой ссылке.

После скачивания макета, нам необходимо обратить внимание не только на его внешний вид, но еще и на вписанные метатеги. В Джумле есть стандартный набор классов относящихся к com_content (а еще для Виртуемарта, K2 и т. д.), которые несложно поменять, но, тем не мемнее, я не вижу в этом абсолютно никакого смысла. Чтобы не «делать себе мозги» при каждом создании нового шаблона, гораздо проще и быстрее в каждый новый шаблон прописывать стандартные джумловские классы и айдишники. Это одна из особенностей верстки под джумлу. В процессе ознакомления с этой и последующими статьями, вы поймете почему и в чем их преимущества. В предоставленном макете классы и id-шники отличаются от нужным, мы будем поэтапно их переделывать.

Для того, чтобы найти эти классы и прояснить ситуацию, установите Joomla 1.7 в стандартной комплектации (напомню, в апреле 2012-го года Joomla 1.5, 1.6, 1.7 уходят на пенсию, а вместо них вступает в должность Джумла 2.5, но бояться этого не стоит, поскольку статья актуальна для версий 1.6, 1.7, 2.5 нашей любимой CMS).

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

 

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

  • В папке CSS хранятся все файлы стилей, которые будут доступны для редактирования из админки сайта. Если один из css-файлов находится за пределами папки CSS, его просто не будет видно из админки. В этом случае вам нужно будет самим выкручиваться.
  • favicon.ico. Его можно расположить в корне сайта и браузер сам будет находить, можно расположить в корневой папке шаблона и прописать путь к нему. Второй вариант приемлем для тех сайтов, у которых несколько шаблонов для разных страниц или возможность смены шаблона пользователем. Тогда для разных шаблонов будут показаны совершенно разные фавиконки.
  • Папка images, как вы поняли, содержит графические элементы шаблона — такие, как фоны, градиенты, уголки, тени (если, конечно, вы не делаете сайт на CSS3), логотип, возможно, копирайты, баннеры... Словом, все те картинки, которые не нужно постоянно менять и лучше уберечь от случайного удаления.
  • Самый интересный файл — index.php, в котором и прописано все-все-все оформление. По сути, это никакой не пхп. Это скорее html-файл с вкраплениями пхп-команд. Не более того. Ну, его структуру я сейчас объяснять не буду, оставлю это для практики.
  • js — папка с java-скриптами. Никакой особенной роли она не играет, скрипт вы можете засунуть хоть коню в жопу, главное ссылку на него поставьте, все будет работать. Здесь эта папка играет скорее эстетическую роль. Ну, и еще помогает структурировать тот бардак, который получается у начинающих верстальщиков под джумлу. 
  • template_preview.png и template_thumbnail.png сами по себе большое и маленькое изображение сгенерированного в html внешнего вида шаблона. Другими словами скриншот сайта и миниатюра. Они имеют некоторые пороговые значения величины. Оптимальные размеры для template_preview.png — 640х390, а для template_thumbnail.png — 205х150.
  • И второй по важности файл — templateDetails.xml. Он имеет строгую структуру, без него не удастся установить шаблон, а если заполнить его с ошибками, можно напартачить. Из того, что нам предстоит заполнить при создании учебного шаблона: название и копирайты, файловая структура шаблона, перечень позиций для модулей. На этом в данном курсе остановимся.

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

Содержание курса:

  1. Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Введение.
  2. Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Важные особенности шаблонов Joomla.
  3. Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Создаем шаблон и устанавливаем его.
  4. Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Настраиваем Virtuemart.
  5. Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Оформляем блог на K2.
  6. Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Заключение.
Прочитано 39340 раз Последнее изменение Вторник, 07 Февраль 2012 03:38
Твитнуть

Комментарии   

 
Bars
0 #16 Bars 01.12.2013 15:45
Здравствуйте.
Сделал все по вашему примеру, но со своим html шаблоном.
После загрузки на движок - чистая страница.
Может есть желающий переделать html сайт под joomla за умеренную плату.
Сайт предназначен для благотворительн ой организации детей инвалидов. Писать на
Цитировать
 
 
Миша
0 #15 Миша 02.11.2013 15:40
и не судите строго, я новичок в html - за плечами лишь базовый курс Е.Попова. Про php вообще ничего не знаю.
Цитировать
 
 
Миша
0 #14 Миша 02.11.2013 15:35
Цитата:
Спускаемся ниже. Мы видим код картинки images/submenu_pic.gif . Помните как исправлять путь? Исправляйте.
- а я не понял, как исправлять! Выше рассказывалось, как сменить пути в css, а именно ../images и тп. Но в html нет такого значения - ../ ! Или есть? Или это надо решать с помощью переменных php? Ну не понял! Объясните, кому не в лом.
Цитировать
 
 
Нк
+1 #13 Нк 01.08.2013 14:08
Конь это явно лишнее. Впрочем, судя по комментариям, автор вообще редкостное некультурное хамло.
Цитировать
 
 
Данил
-2 #12 Данил 27.02.2013 00:55
Делаю сайты под ключ на Joomla, Wordpress
http://xxxxx-xxxx.ru
И еще сотни тысяч фрилансеров и десятки тысяч фирм их делают. Я вижу все попытки прорекламироват ься в моем блоге, не старайтесь.
Артем.
Цитировать
 
 
дизайнер жумала
+7 #11 дизайнер жумала 11.12.2012 01:07
нахуй вы афтора чмырите суки, для вас старался тут изъебывался чтобы вы опездолы вебдизу обучились, а не дрочили артизер до пенсии.
Цитировать
 
 
Артем
+2 #10 Артем 23.10.2012 11:39
Цитирую azorr:
Подскажите плиз!
Все сделал по шагам, запаковал в zip(все в корень упало)
Но при установки моего шаблона Joomla выдает: "Ошибка! Не найден XML-файл установки Joomla!".

Сам файлик templateDetails.xml - лежит в архиве.
И в нем же он сам и прописан: templateDetails.xml
ну все вроде по людски, а устанавливаться не хочет.

Скажите где я мог наколоться??

Скажу честно, у меня : Joomla! 1.5.17 Stable - может быть в этом причина или нет?


1. Статья описывает создание шаблона для 1.6, 1.7, 2.5. Для 1.5 установочный xml отличается.

2. Следите за тем, чтобы файлы шаблона лежали в корне архива, а не в подпапках
Цитировать
 
 
azorr
-1 #9 azorr 20.10.2012 02:37
Подскажите плиз!
Все сделал по шагам, запаковал в zip(все в корень упало)
Но при установки моего шаблона Joomla выдает: "Ошибка! Не найден XML-файл установки Joomla!".

Сам файлик templateDetails .xml - лежит в архиве.
И в нем же он сам и прописан: templateDetails .xml
ну все вроде по людски, а устанавливаться не хочет.

Скажите где я мог наколоться??

Скажу честно, у меня : Joomla! 1.5.17 Stable - может быть в этом причина или нет?
Цитировать
 
 
Артем
0 #8 Артем 02.05.2012 18:57
какая конфигуурация? :) шутить изволите?

А что касается папки "js" — вам ли не все равно? называйте их как угодно.

главное — латинскими символами.
Цитировать
 
 
гость
-5 #7 гость 01.05.2012 14:22
"js — папка с java-скриптами" , по-моему несколько некорректно - java и javascript совершенно разные вещи
Цитировать
 
 
Damian
0 #6 Damian 29.04.2012 20:57
"Назовите шаблон иначе"
А конфигурация? Она же у них общая будет!!!
Цитировать
 
 
Артем
+3 #5 Артем 10.04.2012 19:46
Назовите шаблон иначе. Я в таких случаях пишу название основного шаблона, например, Template, Дополнительного — Template Blank, к примеру. И все. Шаблон устанавливается два раза ;)
Цитировать
 
 
Damian
+5 #4 Damian 02.04.2012 13:09
Добрый день. Скажите пожалуйста, как можно установить один шаблон 2 раза? Это нужно для того, чтобы один применялся для компьютеров, а второй был назначен для мобильных устройств. В общем был такой же, но немного переработанный.
Цитировать
 
 
Артем
+6 #3 Артем 23.03.2012 16:18
Господин Лепс, хватит писать хуйню в комментариях! Уж извиняюсь, пришлось поудалять большинство вашего флуда. Само ваше присутствие здесь на 90% доказывает, что вы не умеете нихрена, и только выёбываетесь.
Цитировать
 
 
лепс
-12 #2 лепс 23.03.2012 15:57
аффтар тролит ламерофф

а давайте ффсе разом засунем скрипты коню в жеппу, шоб он охуел
Цитировать
 

Добавить комментарий

Защитный код
Обновить

joomla 1.7

Не получаются доработки?

Становитесь партнером студии Millor! Быстро и недорого эти ребята помогут решить практически любую проблему.

Хотите подзаработать?

Если да, то вам сюда! Партнерская программа студии MyWebSite. Получи 20% за каждого клиента! Работаем по всей России и СНГ!

Рекламное место свободно.