С Чего Начать Создание Своей Первой Темы Для Магазина Magento?

Данная информация неполная и устарела.
Вместо неё читайте перевод книги Magento 1.3 Theme Design

Допустим, у вас на руках уже есть вёрстка в виде HTML, CSS, JavaScript.
Как эту вёрстку превратить в тему для Magento?

• В папку skin/frontend/default добавьте новую папку с называнием вашей темы
  
• В папке skin/frontend/default/<название темы> создайте подпапки images, css и js, куда поместите соответсвующие файлы вёрстки: картинки, стили, скрипты на JavaScript
  
• Аналогично в папку app/design/frontend/default добавьте новую папку с называнием вашей темы
  
• В папке skin/frontend/default/<название темы> создайте подпапку layout и внутри - файл page.xml
  Для начала лучше скопировать его содержимое из app/design/frontend/base/default/layout/page.xml
  
• Отредактируйте в этом файле раздел <block type="page/html_head" name="head" as="head">
  Заметьте, что там мы указываем, какие скрипты JavaScript и файлы CSS надо загрузить.
  
• Удалите скрипты и стили по умолчанию, поставьте вместо них скрипты и стили из вашей вёрстки.
  
• В папке skin/frontend/default/<название темы> создайте подпапки template/page (т.е. путь skin/frontend/default/<название темы>/template/page/).
  
• Там создайте файл 2columns-left.phtml и поместите в качестве содержимого вашу вёрстку HTML.
  
• Вырежьте всё содержимое внутри HEAD, вместо него напишите: <?php echo $this->getChildHtml('head') ?>
  
• Создайте путь skin/frontend/default/<название темы>/template/page/html/ и внутри - файл head.phtml
  
• Скопируйте в него содержимое из app/design/frontend/base/default/template/page/html/head.phtml и отредактируйте, как вам нужно (например, уберите вызов getTranslatorScript, если не используете библиотеку Prototype.js).
  
• Зайдите в админку и выберите нашу только что созданную тему в качестве темы магазина. Как это сделать - я написал здесь: http://magento-forum.ru/topic/4/
  
• Выберите в верхнем меню админки: CMS -> Pages -> Home -> Design -> Layout -> "2 columns with left bar"/ -> Save.
  
• Обновите кеш.

Теперь ваша первая тема для Magento должна заработать!
Правда, вы увидите только статичную вёрстку, а впереди ещё предстоит настройка модулей. О настройке модулей я напишу в следующий раз!

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

Итак, есть сайт, сверстанный div-ами. Шапка, левая колонка с категориями, под ними корзина, справа контент, внизу футер.
Запуталась именно в схеме действий.
1) создала папки
/app/design/frontend/default/new_theme/
/app/design/frontend/default/new_theme/layout
/app/design/frontend/default/new_theme/templates
/skin/frontend/default/new_theme/
/skin/frontend/default/new_theme/css/
/skin/frontend/default/new_theme/images/

и файлы
/app/design/frontend/default/new_theme/layout/page.xml
/skin/frontend/default/new_theme/css/local.css

2) далее - большая проблема с пониманием действий с xml. Вообще написать его с нуля, как например здесь описывается: http://onlinebiz.com...e-theme-use-xml
или же менять под свою страницу, убирая лишнее? И вообще, что там должно быть и в каком виде..

Насколько понимаю, в xml прописано, какой шаблон использовать. Например, шаблон 2columns-left.phtml. Здесь, в этом файле и будет моя верстка? Или только расположение блоков?
в Designer Guide используется понятие sceleton template, то есть грубо говоря, это схема расположения блоков, например header или left. Эти блоки - это что? Это части моей верстки? Страницы .phtml, внутри каждой из которых "сидят" мои div-ы, относящиеся к этой части макета?

xml ссылается на блоки в шаблоне .phtml? А в дефолтных шаблонах строки <?php echo $this->getChildHtml('footer') ?> - они ссылаются на что? Этот футер - где он прописывается?

В общем, наверное, написала очень запутанно, но, если обобщить, главный вопрос о структуре!
Если совсем грубо, мои дивы будут сортироваться по расположению (напр, футер), прописываться в отдельных страницах, которые будут собираться в общий template.phtml, а в xml будет указываться, какой шаблон использовать? Или не так? Или шаблон - это и есть моя верстка?

Очень прошу помощи или хотя бы намека, где копать.

С уважением,
Анна

С марта, когда я писал первое сообщение в этой теме, моё понимание данной темы изменилось.
Моё первое сообщение, как я теперь понимаю, практически бесполезно для новичков, потому что создание тем для Magento - слишком сложная технология, чтобы изложить её форумным сообщением.
Поэтому теперь я рекомендую подходить в обучению разработки тем более системно.
Например, вы можете для начала прочитать книгу Magento 1.3 Theme Design и выполнить содержащиеся в ней упражнения.
После этого у вас сложится общее понимание предмета, и вы сможете задавать конкретные узконаправленные вопросы, для чего, собственно, и предназначен форум

Спасибо за быстрый ответ!
книгу нашла, приступаю к изучению

Дмитрий Федюк (11.03.2010 14:10) писал:

Скажите побежалость или объясните что делать если постоянно показывает магенто начальною тему, изменении были все кроме протайп библиотеке и скрипта удаливший.
www.sertifikaty.eu

Вы лучше по-английски пишите, что ли)
А то непонятно ничего.

Дмитрий Федюк (12.12.2010 23:57) писал:

Почему после всех принятых изменений вами выше прописавших нечего не работает? вот смотритедолжно показывать только пару текстов а показывает дефиле тему.

1) Сделайте снимки все экранов админки, упомянутых в моём пошаговом руководстве.
2) Сделайте снимок иерархии файловой системы внутри папки app/design

12. Зайдите в админку и выберите нашу только что созданную тему в качестве темы магазина. Как это сделать - я написал здесь: http://magento-forum.ru/topic/4/
Info pages in System/design
13. Выберите в верхнем меню админки: CMS -> Pages -> Home -> Design -> Layout -> "2 columns with left bar"/ -> Save.

app/design/adminhtml (без изменений)
app/design/frontend
app/design/frontend/base
app/design/frontend/base/default
app/design/frontend/base/default/etc
app/design/frontend/base/default/etc/widget.xml
app/design/frontend/base/default/layout
app/design/frontend/base/default/template
app/design/frontend/default
app/design/frontend/default/SmiMarket
app/design/frontend/default/SmiMarket/layout/page.xml
Замена с

<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
                <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
                <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

На

<action method="addCss"><stylesheet>css/local.css</stylesheet></action>

в нем стандартный набор body header footer
///templates (пусто)
app/design/install (без изменений)

На первом снимке экрана, я вижу, вы не заполнили поле Date From