Как шаблон Templatemonster адаптировать под ImageCMS

В процессе адаптации шаблона под ImageCMS расширен список страниц доступных в шаблоне, однако появились и некоторые ограничения:

  • Не более 5-ти пунктов в главном меню;
  • Отсутствие поддержки фотогалереи;
  • Ограничения (последние комментарии, теги) на странице блога.

В качестве основы взят шаблон #43798, при создании нового шаблона была использована инструкция по созданию корпоративного сайта на базе ImageCMS Corporate.

  1. Создаем в папке \templates\ папку шаблона. Называем ее motheme (как на templatemonster). Копируем в нее все содержимое из папки \templates\default дефолтного шаблона.
  2. Скрипты, рисунки и стили, которые планируем применять при верстке, загружаем в папки images, css, js.
  3. Из файла верстки index.html копируем html-код в файл main.tpl, оставляя из дефолтного шаблона только 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\level_0\container.tpl в папке main_menu для корректного отображения меню согласно шаблону.

  9. Скрываем ненужные пункты в админ. части (раздел “Меню-Главное меню”), уменьшаем их количество до 5 и убираем галерею.
  10. Для вывода слайдера только на главной странице, ставим в файле main.tpl возле него условие

    {if $page_type == ‘main’}

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

    {if $page_type == 'main'}
    <div class="grid_10">
    {$content}
    </div>
    <div class="grid_5 prefix_1">
    <h2>Новости компании</h2>
    {widget('news')}
    </div>

  12. Для отображения страниц в соответствии с макетом вставляем соответствующий html-код в файл page_full.tpl.
  13. В админке убираем отображение на главной странице комментариев.
  14. В настройках виджета news уменьшаем количество новостей до 2-х, исправляем согласно макету html-код в папке widgets\news.tpl.
  15. Создаем виджет product_main, тип “Последние новости”, что даст возможность отображать продукцию на главной странице. Указываем в настойках отображение 4 новостей, правим его в widgets\product_main.tpl и вставляем в шаблон при помощи блока: {widget(‘product_main’)}.
  16. Текст для клиентов ставим в футер в файле main.tpl.
  17. С помощью блока:{load_menu(‘bottom_menu’)} вставляем нижнее меню в файл main.tpl. В администаторской части указываем использовать шаблон bottom_menu (“Нижнее меню” редактирование). Для отображения меню согласно шаблону вносим правки в файл bottom_menu\level_0\container.tpl в папке bottom_menu.
  18. В файле main.tpl в футере ставим ссылки на соц.сети, меняем контактную информацию, ставим ссылки на копирайт и лого.
  19. Для того, чтобы в разделе “Продукция” с правой стороны отображался виджет с продуктами, поставим условие в файле main.tpl (в месте, где отображен контент главной страницы)

    <!– Products Page–>
    {elseif $category.id == 55}
    <div class="grid_11">
    {$content}
    </div>
    <div class="grid_5">
    <h2>Продукция</h2>
    {widget('product_all')}
    </div>
    <!– End Products Page–>

    Затем настраиваем виджет продуктов в файле widgets\product_all.tpl.

  20. Отображение категории “Продукция” настраиваем в файле category.tpl.
  21. Отображение обратной связи настраиваем в файле application/modules/feedback/templates/feedback.tpl
  22. Для того, чтобы в разделе “Блог” отобразить справа все категории “Блога”, нужно поставить дополнительное условие в том месте файла main.tpl, где при помощи переменной {$content}отображается контент главной страницы:

    <!– Blog Page–>
    {elseif $category.id == 59 || $category.parent_id == 59}
    <div class="grid_11">
    {$content}
    </div>
    <div class="grid_5">
    <h2>Категории</h2>
    <ul class="list_3">
    {$sub_cats = get_sub_categories('59')}
    {$count = 0}
    {foreach $sub_cats as $sub_cat}
    <li><a href="{site_url('bloh/'. $sub_cat.url)}" {if $sub_cat.id == $category.id} class="active" {/if}>{$sub_cat.name}</a></li>
    {$count++}
    {/foreach}
    </ul>
    </div>
    <!– End Blog Page–>

  23. 25. Отображение раздела “Блог” настраиваем в файле blog.tpl
    26. Отображение раздела “Новости” настраиваем в файле news.tpl.

В результате мы получили шаблон для ImageCMS.
Главная страница:

Страница “О компании”:

Страница блога:

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

Прокомментируйте первым.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>