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

Создание тем для Magento: Начало

by
Read Time:5 minsLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Bootstrapping

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

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

Установка Magento

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

Я не буду изобретать колесо, объясняя, как вы должны устанавливать Magento на локальном сервере. Есть много хороших статей доступных в интернете об этом. Вы также можете найти статьи на нашем сайте об установке Magento, например эту Tuts+ статью, в которой рассказывается как установить Magento на ваш локальный сервер.

Вы также должны установить демо данные Magento во время установки. Эти демо данные добавят много каталогов, продуктов, отзывов и т.д. и благодаря этому мы сможем протестировать разные сценарии во время разработки.

Установка редакторов кода и отладчиков

Когда вы установили Magento, следующий шаг это подготовка инструментов для разработки. Вы можете использовать редактор кода или IDE на выбор. Любой удобный редактор кода удобный для вас будет тут достаточным для работы. Если вы не использовали до этого никакой редактор кода, я рекомендую установить Notepad++, так как это очень легковесный, легкий в использовании и  бесплатный редактор кода.

Нам также потребуется инспектор элементов для проверки и редактирования CSS стилей на веб страницах. Если вы используете Firefox, вы можете установить расширение Firebug для этого. Однако, если вы используете Chrome, его веб инспектор тоже подойдет. Он идет в поставке с браузером, так что вам не нужно ничего устанавливать в этом случае. Для этих целей я буду использовать веб инспектор Chrome для отладки и редактирования CSS стилей.

Введение в HTML

Я разработал HTML страницы для этой серии. HTML-код содержит шаблоны проектирования и элементы, которые часто используются в темах электронной коммерции, такие как корзина сверху, шапка, слайдер, селектор валют и языков, и т. д. Мы шаг за шагом преобразуем этот HTML в рабочую тему Magento Архив с HTML прикреплен здесь для вас для для скачивания.

Перед прочтением

Перед тем, как мы окунемся в фазу разработки, я вам настоятельно рекомендую пройти через серию этих статей Tuts+ по разработке тем для Magento. Эти три обучающие серии познакомят вас с теорией создания тем Magento и ее базовых принципов. Этих знаний о разработке тем Magento будет очень полезно, до того как вы окунетесь по локоть в актуальную разработку тем Magento.

Файлы, которые мы будем редактировать

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

Когда вы откроете корневую директорию, вы увидите список директорий указанный ниже. Из всех этих директорий, мы будем редактировать только файлы в директориях app и skin.

Magento Folder StructureMagento Folder StructureMagento Folder Structure

Мы возможно иногда будем использовать директорию js, чтобы разместить файлы библиотеки JavaScript, например jQuery, если они еще не существуют. Просмотрите самостоятельно и ознакомьтесь с директориями расположенными в app и skin директориях, перед тем как следовать шагам в следующих статьях этих серий.

Настройка среды разработки Magento

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

Во-первых, мы отключим кэш Magento. Для этого, нужно перейти в System > Cache Management (System > Управление кэшем) и выбрать все типы кэша. Из действий выберите Disable (Отключить). и подтвердите действие.

Disabling CacheDisabling CacheDisabling Cache

После того, как мы отключили все кэши, следующий шаг заключается в повторной индексации данных. Для этого, перейдите в System > Index Management (Система > Управление индексами). Выберите все индексы и из действий выберите Reindex Data (Переиндексировать данные), и  подтвердите.

Reindexing DataReindexing DataReindexing Data

Сейчас мы включим логирование и подсказки блоков в Magento. Зайдите в System > Configurations (Система > Настройки), и в левой боковой панели, последний пункт будет Developer (Разработчикам). Нажмите на нем. На следующей странице, из вкладки Log Settings (Настройки логирования) включите логирование и нажмите кнопку Save Config (Сохранить настройки) в правом верхнем углу.

Enabling LogsEnabling LogsEnabling Logs

Далее, сверху левой боковой панели вы увидите селектор Current Configuration Scope (Текущая область действия конфигурации). Выберите Main Website (Основйной сайт).

Setting Website ScopeSetting Website ScopeSetting Website Scope

Потом в секции Debug (Отладка) включите опцию Template Path Hints (Подсказки пути шаблонов), и нажмите кнопку Save Config (Сохранить настройки) снова.

Enabling Template Path HintsEnabling Template Path HintsEnabling Template Path Hints

Далее зайдите в корневую директорию Magento и откройте файл index.php. В строке 77, раскомментируйте код в ней:e:

Что далее?

На этом пока что все.Вы возможно не заметили, но мы создали прочную основу для разработки тем в следующих  уроках этой серии.В завершении, я снова призываю вас к прочтению уроков о Magento серии Magento Theme Development (Разработка тем Magento) рекомендованной ранее если вы несделали это до этого. already.

В следующем уроке мы создадим структуру директорий для нашей новой темы. Скопируем CSS, JS и файлы картинок из HTML в нашу тему и создадим для нашей темыфайл local.xml для того чтобы обеспечить связь нашей темы с этими файлами.s to these files.

На этом все, надеюсь, что вы будете читать следующие темы этойсерии.

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.