Как создать свой шаблон за 5 минут [быстрый старт]

Статья предназначена для веб-мастеров начинающих свое знакомство с Moguta.CMS и желающих изучть устройство шаблонов. По результатам инструкции изложенной в этом материале, будет получена заготовка для дальнейшей разработки шаблона с нуля.ель материала заключается в демонстрации процесса переноса "каркаса" подготовленной HTML верстки сайта. Есть и более простой способ: создание шаблона на основе дефолтного.

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

  1. В файловом менеджере открываем корневую папку с сайтом.
  2. Создаем новую папку с названием шаблона mg-templates/mytempl/
  3. Создаем папку mg-templates/mytempl/css/
  4. Создаем файл mg-templates/mytempl/css/style.css
  5. Создаем файл mg-templates/mytempl/template.php
  6. Копируем подготовленную HTML верстку и вставляем в файл mg-templates/mytempl/template.php 
<html>
<head>
<?php mgMeta(); ?>
</head>
<body>
<div id="container">
<div id="header"><h1>Шапка сайта</h1></div>
<div id="wrapper">
<div id="content">
<h1>Содержимое страницы созданное движком</h1>
<?php layout('content'); ?>
</div>
</div>
<div id="navigation">
<p><strong>Левое меню</strong> тут будет выведено левое меню тут будет выведено левое меню тут будет выведено левое меню тут будет выведено левое меню тут будет выведено левое меню тут будет выведено левое меню тут будет выведено левое меню</p>
</div>
<div id="extra">
<p><strong>Место под левым меню </strong> тут может быть выведены блоки с акциями, новостями, опросами и другой любой другой информацией </p>
</div>
<div id="footer"><p>Подвал сайта</p></div>
</div>
</body>
</html>

Обратите внимание в верстке встречается две обязательные вставки , связывающие шаблон с логикой движка.<?php mgMeta(); ?> - подключает стили шаблона и движка

<?php layout('content'); ?> - выводит содержание страниц сайта формируемых движком.

  1. Копируем CSS стили и вставляем в файл mg-templates/css/style.css


html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#content{float:right;width:480px; padding:10px;}
div#navigation{float:left;width:200px}
div#extra{float:left;clear:left;width:200px}
div#footer{clear:both;width:100%}


Всё, шаблон готов, перейдите в настройки магазина и выберите из выпадающего списка новый шаблон mytempl. Конечно, назвать получившееся в полной мере шаблоном сложно, но как каркас и для дальнейшей работы данная заготовка вполне подойдет.

Далее в тело шаблона template.php необходимо вставить теги со ссылками на внутренние страницы движка и прописать для них стили в style.css

 

Комментарии

Имя:
E-mail:
Введите текст с картинки:

Получать уведомления о новых коментариях:
Загрузить все