В процессе адаптации шаблона под ImageCMS расширен список страниц доступных в шаблоне, однако появились и некоторые ограничения:
- Не более 5-ти пунктов в главном меню;
- Отсутствие поддержки фотогалереи;
- Ограничения (последние комментарии, теги) на странице блога.
В качестве основы взят шаблон #43798, при создании нового шаблона была использована инструкция по созданию корпоративного сайта на базе ImageCMS Corporate.
- Создаем в папке \templates\ папку шаблона. Называем ее motheme (как на templatemonster). Копируем в нее все содержимое из папки \templates\default дефолтного шаблона.
- Скрипты, рисунки и стили, которые планируем применять при верстке, загружаем в папки images, css, js.
- Из файла верстки index.html копируем html-код в файл main.tpl, оставляя из дефолтного шаблона только meta-теги.
- Дописываем к пути вызова скриптов, рисунков и классов переменную {Theme} для их корректного вызова, к примеру
<div data-src="{$THEME}images/slide1.jpg">
- В админке меняем в дефолтный шаблон на новый (в конфигурации сайта).
- На логотип в файле main.tpl ставим ссылку на главную страницу {site_url('')}.
- В верхний правый угол шаблона ставим отвечающие за вход и регистрацию переменные (в файле main.tpl).
- Вставляем в файл main.tpl код вызова главного меню сайта
{load_menu('main_menu')}
Вносим необходимые правки в файл main_menu\level_0\container.tpl в папке main_menu для корректного отображения меню согласно шаблону.
- Скрываем ненужные пункты в админ. части (раздел “Меню-Главное меню”), уменьшаем их количество до 5 и убираем галерею.
- Для вывода слайдера только на главной странице, ставим в файле main.tpl возле него условие
{if $page_type == 'main'}
- В месте вывода контента главной страницы в файле main.tpl ставим условие
{if $page_type == 'main'}
<div class="grid_10">
{$content}
</div>
<div class="grid_5 prefix_1">
<h2>Новости компании</h2>
{widget('news')}
</div> - Для отображения страниц в соответствии с макетом вставляем соответствующий html-код в файл page_full.tpl.
- В админке убираем отображение на главной странице комментариев.
- В настройках виджета news уменьшаем количество новостей до 2-х, исправляем согласно макету html-код в папке widgets\news.tpl.
- Создаем виджет product_main, тип “Последние новости”, что даст возможность отображать продукцию на главной странице. Указываем в настойках отображение 4 новостей, правим его в widgets\product_main.tpl и вставляем в шаблон при помощи блока: {widget('product_main')}.
- Текст для клиентов ставим в футер в файле main.tpl.
- С помощью блока:{load_menu('bottom_menu')} вставляем нижнее меню в файл main.tpl. В администаторской части указываем использовать шаблон bottom_menu (“Нижнее меню” редактирование). Для отображения меню согласно шаблону вносим правки в файл bottom_menu\level_0\container.tpl в папке bottom_menu.
- В файле main.tpl в футере ставим ссылки на соц.сети, меняем контактную информацию, ставим ссылки на копирайт и лого.
- Для того, чтобы в разделе “Продукция” с правой стороны отображался виджет с продуктами, поставим условие в файле 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.
- Отображение категории “Продукция” настраиваем в файле category.tpl.
- Отображение обратной связи настраиваем в файле application/modules/feedback/templates/feedback.tpl
- Для того, чтобы в разделе “Блог” отобразить справа все категории “Блога”, нужно поставить дополнительное условие в том месте файла 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-->
25. Отображение раздела “Блог” настраиваем в файле blog.tpl
26. Отображение раздела “Новости” настраиваем в файле news.tpl.
В результате мы получили шаблон для ImageCMS.
Главная страница:
Страница "О компании":
Страница блога:
Создание нового шаблона для ImageCMS Corporate на этом завершено и его можно использовать. На его основе вы также можете создавать и другие похожие шаблоны для своих потребностей.