Домівка > How to (як зробити?), Magento > Створення нової теми в Magento

Створення нової теми в Magento

Отже, ми проінсталювали Magento тепер можна створювати свою оригінальну тему.

Першим кроком буде дублювання структури папок дефолтової теми (default), так щоб ми завжди мали страховку на випадок якщо ми щось зіпсуємо. Структура дефолтової теми Magento показана знизу, саме ці дві папки потрібно здублювати. Дублювання в нашому випадку означає створення нової папки з тим самим вмістом що і оригінальна. Найпростішим методом є копіювання папки з оригінальної теми або дублювання за допомогою SSH чи подібного клієнта.

Базова структура папок:
/app/design/frontend/default/default/ – налаштування теми
/skin/frontend/default/default/ – де знаходяться css і малюнки теми

Давайте назвемо новий проект new_package. Тоді структура папок буде виглядати так:
/app/design/frontend/default/default/ – дефолтова (оригінальна) тема
/app/design/frontend/new_package/default/ – наша нова, скопійована тема
/skin/frontend/default/default/ – де знаходяться css і малюнки теми
/skin/frontend/new_package/default/ – наша нова, папка з скінами

Базова структура папок

Базова структура папок

Структура з новим пакаджем

Структура з новим пакаджем

blank

Насправді це не є необхідно повністю копіювати структуру папок для нової теми. Тобто фактично нам потрібна структура тільки тих файлів які будуть модифікуватися, а усі файли, яких буде бракувати Magento буде брати з дефолтової теми.

Як задати нову тему в панелі адміністратора.
Тепер після того як ми продублювали потрібні нам папки, ми повинні переключити тему в панелі адміністратора.

  1. Логуємося в панель адміністратора. Йдемо в System > Configuration > Design яке знаходиться в верхньому навігаційному меню.
  2. В «Current package name» вводимо new_package, а в «Default» полі вводу набираємо: default (інші варіанти – modern, blank etc., в залежності яку тему ми будемо модифікувати).
  3. Натискаємо кнопку «Save config» який зявляється в правому верхньому кутку.
Задаємо новий пакадж і тему

Задаємо новий пакадж і тему

Додаємо додаткові таблиці стилів та бібліотеки Javascript.

Будь-які зовнішні css файли або javascript/ajax бібліотеки які ми хочемо включити в наш новий проект, мають бути скопійовані в відповідні папки.

Таблиці стилів. Скопіюйте файли в папку /skin/frontend/default/new_theme/css/. Не забудьте також скопіювати css файли, які імпортуються в ваших таблицях стилів.
А підключити ми можемо їх таким чином:
1. додаємо @import url('new_styles.css'); до одного з вже існуючих css файлів (наприклад reset.css)
2. Відкриваємо файл /app/design/frontend/default/new_theme/layout/page.xml там шукаємо <reference name="head"> і підключаємо наш css файл за допомогою методу addCss:

<reference name="head">
<action method="addCss"><link>new_styles.css</link></action>
</reference>

Незважаючи на значну легкість підключення додаткових таблиць стилів, я б рекомендував не зловживати ними, а просто редагувати вже існуючі стилі.

Javascript / AJAX бібліотеки. Скорпіюйте файли в папку /js і підключіть потрібні за допомогою методу addJs:

Відкриваємо файл /app/design/frontend/default/new_theme/layout/page.xml (або будь-який інший потрібний нам xml файл, якщо ми використовуємо даний скріпт тільки на певній сторінці, а не по всьому сайті) там шукаємо <reference name="head"> і підключаємо наш js файл

<reference name="head">
<action method="addJs"><script>new_script.js</script></action>
</reference>

Слід додатково уточнити, що ми додаємо тільки ось цей рядок <action method="addJs"><script>new_script.js</script></action> у вже існуючий <reference name="head">, а не повністю копіюємо код, що розміщений вгорі.

Успіхів Вам!

Advertisements
Категорії:How to (як зробити?), Magento Позначки:, , , , , ,
  1. reader
    Жовтень 23, 2009 о 04:59

    🙂
    плекайте мову… і т.д.

    такими способами = таким чином

    • Wolf
      Жовтень 26, 2009 о 15:52

      Виправив. Спасибі за спостережливіть. Будуть ще зауваження – пишіть. Ми не соромимося конструктивної критики.

  2. WOG
    Грудень 25, 2009 о 13:05

    Ваш сайт дуже цікавий. Недавно почав вивчати Магенто. Цікава річ. Бажаю вам успіхів і частіше викладати нові матеріали.

    • Wolf
      Грудень 25, 2009 о 13:10

      Дякую. Постараюся почастіше публікувати щось свіже та актуальне.

  3. Березень 16, 2011 о 12:44

    Або я чогось не розумію але в мене в цій директорії
    skin\frontend\default\default\
    немає файла page.xml можете пояснити чому?

    • Березень 16, 2011 о 17:46

      Igor :

      Або я чогось не розумію але в мене в цій директорії
      skin\frontend\default\default\
      немає файла page.xml можете пояснити чому?

      Перш за все ви шукаєте не в тій директорії. Папка skin\frontend\default\default\ містить css файли та малюнки. Вам потрібно шукати page.xml тут app\design\frontend\base\default\layout оскільки починаючи з версії 1.4.x.x page.xml більше не знаходиться в app\design\frontend\default\default\layout.

  4. Березень 16, 2011 о 18:36

    Ну тоді значить у вас не вірно написано, я то вже вирішив цей момент. Дякую за швидку відповідь

  5. Березень 17, 2011 о 08:58

    Igor :

    Ну тоді значить у вас не вірно написано, я то вже вирішив цей момент. Дякую за швидку відповідь

    Так, дійсно була помилка. Уже все виправив, щоб не вводити в оману. Будуть питання – звертайтесь.

  1. Березень 16, 2010 о 09:47
  2. Травень 18, 2010 о 07:54

Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: