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

За основу разработки шаблона на 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 завершено, шаблон можно использовать в своих целях, либо делать на его основании похожие. Также прилагаю ссылку на сам шаблон, чтобы вы смогли посмотреть результат.