Главная / Блог / Уроки ImageCMS / Адаптируем шаблон из магазина Templatemoster под ImageCMS

Адаптируем шаблон из магазина Templatemoster под ImageCMS

12 июня 13
Reading Time: 3 minutes
Комментариев нет
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes)

За основу разработки шаблона на ImageCMS Corporate был взят шаблон http://www.templatemonster.com/ru/website-templates-type/43798.html. Также при создании данного шаблона использовалась инструкция по созданию корпоративного сайта на базе ImageCMS Corporate.

На основных моментах, которые изложены в данной инструкции, я останавливаться на буду и опишу только главные этапы работы, проведенные для создания собственно нового шаблона.

Поскольку в верстке Templatemonster были недоступны некоторые страницы, которые доступны в базовом шаблоне ImageCMS Corporate, в результате шаблон получил несколько ограничений:

  • Главное меню может содержать максимум 5 пунктов.
  • Данный шаблон не поддерживает фотогалерею.
  • Данный шаблон будет иметь несколько ограничений на странице блога (теги, последние комментарии).

В сумме процесс создания шаблона потребовал 3 часа рабочего времени (здесь стоит учесть, что это — первый мой шаблон для ImageCMS и я думаю, что в будущем можно было бы сократить до 1,5-2 часов). В целом, для его создания пришлось сделать 26 различных настроек, о которых я напишу ниже.

1. Создаем папку шаблона в папке templates, называем ее motheme (как назывался шаблон на templatemonster), копируем туда содержимое дефолтного шаблона с папки templatesdefault.

2. Загружаем все рисунки, стили, скрипты, которые используются в верстке вместо применяемых в дефолтном шаблоне в соответствующие папки: css, js, images.

3. Открываем файл main.tpl и копируем в него весь html-код с файла верстки index.html, оставляем только meta-теги, которые используются в дефолтном шаблоне.

4. Для всех рисунков, скриптов, классов, которые вызываются в шаблоне, дописываем к пути вызова переменную {Theme}, к примеру <div data-src=»{$THEME}images/slide1.jpg»>, чтобы они корректно вызывались для данного шаблона.

5. Заходим в администраторскую часть и меняем в конфигурации сайта дефолтный шаблон на наш новосозданный.

6. В файле main.tpl на логотип ставим ссылку на главную страницу, в виде {site_url(»)}.

7. В файле main.tpl вставляем в правый верхний угол шаблона переменные, которые отвечают за вход/регистрацию.

8. В файле main.tpl вставляем код, который вызывает главное меню сайта {load_menu(‘main_menu’)}. Далее заходим в папку main_menu и правим файл main_menulevel_0container.tpl, чтобы меню отображалось согласно шаблону.

9. В администраторской части в разделе “Меню-Главное меню” скрываем ненужные пункты, уменьшаем их общее количество до 5 пунктов, так как больше шаблон не поддерживает, в том числе убираем и галерею, поскольку она также не поддерживается шаблоном.

10. В файле main.tpl ставим условие {if $page_type == ‘main’} возле слайдера, чтобы он выводился только на главной странице.

11. В файле main.tpl в том месте, где нужно выводить контент главной страницы, вывод которого немного отличается от структуры других внутренних, ставим условие

12. Правим файл page_full.tpl, который отвечает за отображение страниц, в нем вставляем необходимый html-код для отображения страниц согласно макету.

13.  В администраторской части убираем отображение комментариев для страницы на главной.

14. Поскольку новости компании отображаются с помощью виджета news, заходим в папку widgetsnews.tpl и правим согласно макета html-код. Дополнительно в администраторской панели в настройках данного виджета уменьшаем количество новостей с 3 до 2, чтобы он правильно отображался согласно макету.

15. Создаем дополнительно виджет для отображения продукции на главной. Называем его product_main, тип “Последние новости”, в настройках указываем отображать 4 новости,  далее правим отображение в файле: widgetsproduct_main.tpl. После этого вставляем в нужное место в шаблоне, с помощью блока: {widget(‘product_main’)} .

16. В файле main.tpl вставляем в футер произвольный текст для клиентов.

17. В файле main.tpl вставляем нижнее меню с помощью блока: {load_menu(‘bottom_menu’)}. В админке заходим в редактирование меню “Нижнее меню” и указываем, чтобы использовался файл шаблона bottom_menu. После этого правим в папке bottom_menu  файл bottom_menulevel_0container.tpl, чтобы меню отображалось согласно шаблона.

18. В файле main.tpl в футере вставляем ссылки на социальные сети.

19. В файле main.tpl в футере меняем контактную информацию.

20. В файле main.tpl в футере ставим копирайт и ссылку на лого.

21. В файле main.tpl в том месте, где у нас отображается контент главной страницы с помощью переменной {$content}, ставим дополнительное условие, чтобы в разделе “Продукция” справа отображался виджет со всеми продуктами. После этого настраиваем сам виджет продуктов в файле widgetsproduct_all.tpl.

22. Делаем настройку отображения категории “Продукция” в файле category.tpl

23. Делаем настройку отображения обратной связи согласно дизайна в файле application/modules/feedback/templates/feedback.tpl.

24. В файле main.tpl в том месте, где у нас отображается контент главной страницы с помощью переменной {$content}, ставим дополнительное условие, чтобы в разделе “Блог” справа отображались все дополнительные категории “Блога”.

25. Делаем настройку отображения раздела “Блог” согласно дизайна в файле blog.tpl

26. Делаем настройку отображения раздела “Новости” согласно дизайна в файле news.tpl.

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

Comments (0)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Более 3000 запущенных проектов

Вместе с нами многие уже развивают свой бизнес! Смотреть все отзывы
Хочу выразить большую благодарность коллективу компании "ImageCMS" а именно Ивану и Марии! Во время выбора компании проводил переговоры с 7 различными организациями, Иван единственный кто смог адекватно объяснить и подсказать всю необходимую информацию для принятия решения. В итоге результат более чем на 100% соответствует ожиданиям, а во много их даже превосходит!
Перепробовав много CMS (opencart, Битрикс) и др. Мы увидим, как много в каждой из них недостатков. Где-то или очень сложно или очень дорого кастомизировать. Работая маркетологом, могу заверить, что в ImageCMS большинство нужны "фич" реализовано из коробки, без дополнительных надстроек. Посмотрев демо версию новой версии движка, был приятно удивлен скоростью работы (ооочень важно).
За время сотрудничества компания показала себя в качестве ответственного подрядчика, быстро воплотив в жизнь удобный интернет-магазин с учетом всех наших пожеланий.
Работой доволен. Отвечают всегда быстро и по сути, остаются только приятные впечатления от общения. Пара слов о новом движке: Быстро, красиво и интуитивно понятно. Полностью оправдывает вложенные средства. Рекомендую.
Доволен. Скрипт считаю перспективным. Считаю, что ваш коллектив работает на опережение: ваше предложение было оптимальным по цене/качеству.
Опертивная и четкая работа, своевременое предоставление дополнительных консультаций по работе с административной частью. Созданным магазином довольна. Рекомендую этот движок!
Заказать услугу

    Персональная информация:

    [recaptcha]

    прикрепить файл

    Создайте свой личный демо-магазин ImageCMS