В тази втора статия за развитието на теми за Magento извършваме базова конфигурация на новите ни теми. Ние ще създаде основната структура на папките на новата ни тема, тя ще бъде наследена от адаптивен подразбиране Magento тема, организира CSS, JS, а изображенията на съответната папка и да създадете нов файл за local.xml нашите нови теми, за да вмъкнете CSS и JS файлове с шапка сайт. Така че нека да започнем.
Създаване на структурата на папките на нова тема
Първата стъпка в създаването на нова тема е да се създаде структурата на папките, в които можем да подредите файловете на нашите нови теми. Ние трябва да се поставят на нашите тематични досиета на две места.
- В приложенията / дизайн на интерфейса папка /. където ние поставяме нашите phtml и XML файлове.
- в кожата папка / на интерфейса. където ще добавите CSS, JS, и образите, които са въвлечени в тази тема
[Magento Directory] / ап / дизайн / фронтенд ///
[Magento Directory] / кожа / интерфейса ///
Кой ще бъде в този случай:
[Magento Directory] / ап / дизайн / фронтенд / tutsplus / vstyle /
[Magento Directory] / кожа / интерфейса / tutsplus / vstyle /
След като са били създадени тези папки, нека добавим тези четири папки в приложението / дизайн / фронтенд / tutsplus / vstyle директорията:
И четирите папки в папка кожа / интерфейса / tutsplus / vstyle
теми активиране
Сега нека да активирате палитрата, за да видим как се развиват нещата. За да направите това, отидете в System> Settings> Design. въведете "tutsplus" в името на текущия пакет и "vstyle" в областта на шаблони и спаси. Сега се актуализира на сайта и ще видите страница, всички смесени на страницата. Това е нормално, ние ще наследи от стандартния адаптивен Magento тема, за да работи.
наследяване
Преди Magento версия 1.9 не подкрепят детето. Ние разчитаме на Magento модел, в който ние използваме по подразбиране Magento тема за лечение на много детайли. Но, за щастие, сега в Magento 1.9, можем да направим дъщерно дружество подлежи на всяка друга тема, както и за разширяване на външния му вид и функционалност, без никакви проблеми.
В това обучение, ние ще направим всичко тема като дете тема за задно предаване. За да направите това, ние просто трябва да се създаде нов имидж за theme.xml този път: ап / дизайн / фронтенд / tutsplus / vstyle / и т.н.
Поставете кода в XML файл:
Сега се актуализира на сайта и ще видите напълно работещ сайт.
Сайтът вече работи както трябва да бъде, защото ние сме наследили от нашите нови тема RWD нишки. Това означава, че при изграждането на нашата тема, ако Magento не намери някой файл в тази нова тема, тя изглежда в темата на RWD Magento и, ако е установено, че използва.
Тъй като нашата тема все още не е един единствен файл, всички файлове са получени от RWD Magento теми, така че текущия изглед на нашата тема идентичен RWD тема. Но сега имаме гъвкавост, за да редактирате този вид създаване на нашите собствени тематични файлове, където искате, и всички други файлове ще бъдат наследени от нишките на задвижване на задните колела.
Друго предимство на използването на този подход е, че ъпгрейд версия на Magento тема RWD твърде често се актуализират. Затова нашата тема винаги ще има в наличност последната Magento тема осигурява най-новите функции и промени корекции.
Сега ние започваме да се промени тази нова дъщерна тема, която току що създадохте. За да направите това, нека да копирате CSS, JS и графични файлове от HTML нашия сайт по този път в нашия магазин Magento:
Както бе споменато по-горе, ние сме създали четири папки по този път, наричайки ги JS, изображения, шрифтове и CSS. Поставете CSS, JS и графични файлове в съответните папки.
Създаване на нов файл local.xml
Просто поставяне на CSS и JS файлове в тази папка няма да ги добавите към нашия уебсайт Magento. За да направите това, ние трябва да ги добавите ръчно да водещият блок в нашата HTML Magento.
За целите на нашето обучение, ние сме създали само един XML файл и ще постави всички наши промени в този файл. Кръстихме този файл local.xml защото файлът се обработва след като всички други XML файлове, а също така да записва върху функционалността на всички други XML файлове. Ние ще създадем този файл по следния начин:
Когато се създаде този файл, добавете следния код във файла, за да добавите CSS и JS файлове в главата на секция.
Нека обясня кода по-горе стъпки. Оформлението на процесор (предполага, че водачът е свързана със схемата), която сме създали нов блок и позоваване си на "главата" и манипулатор по подразбиране (той ще се използва във всички останали случаи по подразбиране) - това означава, че тези промени ще се използва само за блок "главата". На следващо място, ние използвахме два метода в "действие" таг, за да добавите CSS и JS файлове индивидуално. За да добавите JS файлове, които използвахме този XML код:
И за да добавите CSS файлове ние използвахме този XML код:
Сега, надявам се, че са започнали да видите някои промени в дисплея на вашия уеб сайт. Ние току-що започна да редактирате тази тема. В следващата статия ще започнем да редактирате файлове phtml header'a, footer'a и някои други шаблонни страници. На този етап, темата изглежда така.
Свързани статии