Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento
Code

Разработка тем для Magento: настройка

by
Length:ShortLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Getting Started
Magento Theme Development: Home Page, Part 1

Russian (Pусский) translation by Victor Efimov (you can also view the original English article)

В этой, второй, статье об разработке тем для Magento мы произведем базовую настройку нашей новой темы. Мы настроим базовую структуру папок нашей новой темы, она будет унаследована от адаптивной темы Magento по умолчанию, расположим CSS, JS и изображения в соответствующие папки и создадим новый local.xml файл для нашей новой темы для того чтобы вставить эти CSS и JS файлы в шапку сайта. Итак, давайте начнем.

Создание структуры папок новой темы

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

  1. в папке app/design/frontend, где мы расположим наши phtml и xml файлы.
  2. в папке skin/frontend, где мы добавим CSS, JS и изображения, которые участвуют в нашей теме

Перед тем как начать создание новых директорий внутри директорий упомянутых выше нужно придумать два названия, которые мы будем использовать далее. Первое будет именем нашего пакета — это может быть имя вашей компании, имя автора темы или что-то еще. Второе имя будет названием темы. Для этого обучения мы будем использовать 'tutsplus' для имени пакета и 'vstyle' для имени темы. Теперь, когда имена выбраны, давайте создадим папки.

Во-первых, давайте создадим эти пути в папках app и skin.
[Magento Directory]/app/design/frontend/{package_name}/{theme_name}/
[Magento Directory]/skin/frontend/{package_name}/{theme_name}/

Magneto Paths

Которые в нашем случае будут:
[Magento Directory]/app/design/frontend/tutsplus/vstyle/
[Magento Directory]/skin/frontend/tutsplus/vstyle/

Когда эти папки созданы, давайте добавим эти четыре папки в app/design/frontend/tutsplus/vstyle директорию:

  1. layout
  2. template
  3. locale
  4. etc

И эти четыре папки в папку skin/frontend/tutsplus/vstyle

  1. css
  2. images
  3. js
  4. fonts

Активация темы

Давайте теперь активируем тему, чтобы посмотреть как обстоят дела. Для этого зайдите System > Settings > Design, введите 'tutsplus' в поле Current Package Name и 'vstyle' в поле Template и сохраните. Теперь обновите страницу сайта и вы увидите, что все на странице перепуталось. Это нормально, мы унаследуем от стандартной адаптивной темы Magento, чтобы это заработало.

Packages and Themes

Наследование

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

В этом обучении, мы будем делать нашу тему на как дочернюю для RWD темы. Для этого мы должны просто создать новый файл theme.xml по этому пути:app/design/frontend/tutsplus/vstyle/etc

Вставьте код в этот XML файл:

Теперь обновите сайт и вы увидите полностью рабочий сайт.

Front page of Magento store

Сайт теперь работает как положено потому что мы унаследовали нашу новую тему от RWD темы. Это значит, что когда строится наша тема, если Magento не находит какой-то файл в этой новой теме, то она смотрит в RWD Magento тему и, если находит, то использует его.

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

Другое преимущество использования этого подхода в том, что при обновлении версии Magento тема RWD тоже зачастую обновляется. Поэтому наша тема всегда будет иметь в запасе последнюю тему Magento предоставляющую последние возможности и правки багов.

Вставка CSS, JavaScript и файлов картинок

Сейчас мы начнем изменять эту новую дочернюю тему, которую только что создали. Для этого, давайте скопируем CSS, JS и файлы картинок с нашего HTML сайта по этом пути в нашем магазине Magento:

skin/frontend/tutsplus/vstyle/

Как упоминалось выше мы создали четыре папки по этому пути, назвав их js, images, fonts и css. Расположите CSS, JS и файлы картинок в соответствующие папки.

Создание нового файла local.xml

Просто поместив эти CSS и JS файлы в этой папке не добавит их на наш сайт Magento. Для этого мы должны вручную добавить их в блок header в наш HTML Magento.

Для целей нашего обучения мы создали только один XML файл и будем размещать все наши изменения в этот файл. Мы назвали этот файл local.xml потому что этот файл обрабатывается в после всех других XML файлов и он также перезаписывает функциональность всех других XML файлов. Мы создадим этот файл по этому пути:

app/design/frontend/tutsplus/vstyle/layout

localxml

Когда этот файл создан, добавим следующий код в этот файл для того чтобы добавить CSS и JS файлы в секцию head.

Объясню код выше по шагам. В обработчике layout (подразумевается, что этот обработчик связан со схемой) и обработчике default (он будет использоваться во всех других случаях по умолчанию) мы создали новый блок и сделали его ссылкой на 'head' — это значит, что эти изменения будут применяться только для блока 'head'.  Далее мы использовали два метода в теге 'action' для добавления CSS и JS файлов по отдельности. Для добавления JS файлов мы использовали этот XML код:
<action method="addItem"><type>skin_js</type><name>js/{javascriipt_file_name}.js</name><params/></action>

И чтобы добавить CSS файлы мы использовали этот XML код:
<action method="addCss"><stylesheet>css/{css_file_name}.css</stylesheet><params/></action>

Для того чтобы убедиться, что эти CSS и JS файлы добавлены в нашу новую тему, обновите главную страницу сайта и нажмите Control-U для просмотра исходного кода страницы. В секции head вы должны увидеть новые добавленные CSS и JS файлы. Кликните на каждом из этих файлов, чтобы убедиться, что они ведут на правильные файлы и нет битых ссылок.

Added Assets

Сейчас, надеюсь, вы начали видеть некоторые изменения в отображении вашего веб-сайта. Мы только начали редактировать эту тему. В следующей статье мы начнем редактировать phtml файлы header'a, footer'a и некоторых других страниц шаблона. На этом этапе тема выглядит вот так.

Homepage

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.