У цій, другій, статті про створення тем для Magento ми зробимо базову настройку нашої нової теми. Ми налаштуємо базову структуру папок нашої нової теми, вона буде успадкована від адаптивної теми Magento за замовчуванням, розташуємо CSS, JS і зображення у відповідні папки і створимо новий local.xml файл для нашої нової теми для того щоб вставити ці CSS і JS файли в шапку сайту. Отже, давайте почнемо.
Створення структури папок нової теми
Перший крок при створенні нової теми полягає в налаштуванні структури папок, де ми можемо розташувати файли нашої нової теми. Ми повинні розташувати файли нашої теми в двох місцях.
- в папці app / design / frontend. де ми розташуємо наші phtml і xml файли.
- в папці skin / frontend. де ми додамо CSS, JS і зображення, які беруть участь в нашій темі
[Magento Directory] / app / design / frontend ///
[Magento Directory] / skin / frontend ///
Які в нашому випадку будуть:
[Magento Directory] / app / design / frontend / tutsplus / vstyle /
[Magento Directory] / skin / frontend / tutsplus / vstyle /
Коли ці папки створені, давайте додамо ці чотири папки в app / design / frontend / tutsplus / vstyle директорію:
І ці чотири папки в папку skin / frontend / tutsplus / vstyle
Активація теми
Давайте тепер активуємо тему, щоб подивитися як йдуть справи. Для цього треба зайти System> Settings> Design. введіть 'tutsplus' в поле Current Package Name і 'vstyle' в поле Template і збережіть. Тепер поновіть сторінку сайту і ви побачите, що все на сторінці переплуталося. Це нормально, ми успадкуємо від стандартної адаптивної теми Magento, щоб це запрацювало.
спадкування
До Magento версії 1.9 не було підтримки дочірніх тем. Ми покладаємося на модель Magento, при якій ми використовуємо тему Magento за замовчуванням для обробки багатьох деталей. Але, на щастя, зараз в Magento 1.9 ми можемо зробити дочірню тему для будь-якої іншої теми, і розширити її зовнішній вигляд і функціональність без проблем.
У цьому навчанні, ми будемо робити нашу тему на як дочірню для RWD теми. Для цього ми повинні просто створити новий файл theme.xml цим шляхом: app / design / frontend / tutsplus / vstyle / etc
Вставте код в цей XML файл:
Тепер поновіть сайт і ви побачите повністю робочий сайт.
Сайт тепер працює як належить тому що ми успадкували нашу нову тему від RWD теми. Це означає, що коли будується наша тема, якщо Magento не знаходить якийсь файл в цій новій темі, то вона дивиться в RWD Magento тему і, якщо знаходить, то використовує його.
Так як в нашій темі немає поки жодного файлу, всі файли виходять з RWD теми Magento, тому теперішнього вигляду нашої теми ідентичний RWD темі. Але тепер у нас можливість гнучко редагувати цей вид, створюючи файли нашої власної теми де потрібно і всі інші файли будуть успадковані з RWD теми.
Інша перевага використання цього підходу в тому, що при оновленні версії Magento тема RWD теж часто оновлюється. Тому наша тема завжди буде мати в запасі останню тему Magento надає останні можливості і редагування багів.
Зараз ми почнемо змінювати цю нову дочірню тему, яку тільки що створили. Для цього, давайте скопіюємо CSS, JS та файли картинок з нашого HTML сайту по цьому шляху в нашому магазині Magento:
Як згадувалося вище ми створили чотири папки цим шляхом, назвавши їх js, images, fonts і css. Розмістіть CSS, JS та файли картинок в відповідні папки.
Створення нового файлу local.xml
Просто при поміщенні цих CSS і JS файли в цій папці не додасть їх на наш сайт Magento. Для цього ми повинні вручну додати їх в блок header в наш HTML Magento.
Для цілей нашого навчання ми створили тільки один XML файл і будемо розміщувати всі наші зміни в цей файл. Ми назвали цей файл local.xml бо цей файл обробляється в після всіх інших XML файлів і він також перезаписує функціональність всіх інших XML файлів. Ми створимо цей файл цим шляхом:
Коли цей файл створений, додамо наступний код в цей файл для того щоб додати CSS і JS файли в секцію head.
Поясню код вище по кроках. У обробнику layout (мається на увазі, що цей обробник пов'язаний зі схемою) і обработчике default (він буде використовуватися у всіх інших випадках за умовчанням) ми створили новий блок і зробили його посиланням на 'head' - це значить, що ці зміни будуть застосовуватися тільки для блоку 'head'. Далі ми використовували два методи в тезі 'action' для додавання CSS і JS файлів окремо. Для додавання JS файлів ми використовували цей XML код:
І щоб додати CSS файли ми використовували цей XML код:
Зараз, сподіваюся, ви почали бачити деякі зміни в відображенні вашого веб-сайту. Ми тільки почали редагувати цю тему. У наступній статті ми почнемо редагувати phtml файли header'a, footer'a і деяких інших сторінок шаблону. На цьому етапі тема виглядає ось так.
