Шаблон «Mini» для MaxSite CMS

Давайте сделаем шаблон «Mini» для MaxSite CMS. По времени это займет всего 15 минут.

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

Итак, приступим.

Создаем каталог (в «templates») «mini». Копируем в него из каталога «clouds» файлы:

• info.php - информация о шаблоне
• index.php - диспетчер типов данных
• functions.php - описание сайдбара
• footer.php  - подвал
• header.php - html до BODY
• sidebar1.php - вывод сайдбара

Эти файлы в 90% случаев будут типовыми, поэтому менять их не придется.

Шаблон «Clouds» сделан с учебным уклоном, поэтому мы берем файлы из него, а не «default».

Следующим делом нужно определиться с html-структурой шаблона. Для начала условимся, что у нас будут два файла стилей:

• struct.css - структура
• style.css - прочее оформление

Они уже прописаны в header.php, так что нам ничего делать не придется.

Что касается непосредственно html, то есть еще одно небольшое правило: в MaxSite CMS я рекомендую разделять «постоянную» и «переменную» части шаблона. Например шапка - это постоянная часть, а вот вывод записей - это переменная. Переменная часть выводится самой системой, а постоянную мы разбиваем на два файла: main-start.php и main-end.php.

Хочу заострить ваше внимание на то, что в MaxSite CMS структура шаблона может быть любой. Главное и единственное условие - наличие файла index.php. Что именно будет в нем сохранено и как вы решите выводить данные полностью зависит от вас. Приводимые мной деления на файлы исключительно моя фантазия. Вы вправе сделать по-своему.

Теперь нам все понятно по структуре файлов и мы можем создать main-start.php и main-end.php с нужным нам html. Впрочем, я предпочитаю использовать эти файлы из «clouds», поэтому без зазрения совести скопируем их оттуда.

Теперь, мы можем в админ-панели в основных настройках выбрать шаблон «Mini» и вуаля! - наш шаблон уже рабочий.

Обратите внимание, что пока мы не написали ни единой строчки кода!

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

Для того, чтобы продолжить, давайте разберем html-структуру. В файлах main-start.php и main-end.php у нас такой код (привожу лишь структурное описание со своими комментариями):

main-start.php
  
- подключаем header
require_once(getinfo('template_dir') . 'header.php'); 
  
<div id="container"> - блок #container
  
	<div id="headers"> - блок шапки
		<div id="headers-wrap">  - дополнительный блок шапки
			<div id="header1">...</div> - блоки для шапки
			<div id="header2">...</div>
			<div id="header3">...</div>
		</div><!-- div id="headers-wrap" -->
	</div><!-- div id="headers" -->
  
	<div id="sub-container"> - блок для содержимого
  
		<div id="wrapper"> - дополнительный wrapper 
			<div id="content"> - блок текста
				<div class="content-all">
  
				тут переменная часть, тексты, которые отдает система
  
main-end.php
  
				</div><!--div class="content-all"-->
			</div><!-- div id="content" -->
		</div> <!-- div id="wrapper" -->
  
		- пошли сайдбары
		<div id="sidebars">
			<div id="sidebar1">
				<div class="wrap">
				<?php require(getinfo('template_dir') . 'sidebar-1.php'); ?>
				</div><!-- div class=wrap -->
			</div><!-- div id="sidebar-1" -->
		</div><!-- div id="sidebars" -->
  
	</div><!-- div id="sub-container" -->
  
	<?php require(getinfo('template_dir') . 'footer.php'); ?>
  
</div><!-- div id="container" -->
</body>
</html>

Весь сайт мы заключаем в #container для того, чтобы можно было задать ширину. В блоке #headers мы объединяем нужные нам данные для шапки. Что именно выводить зависит от ваших задач. Обычно это название, описание сайта и горизонтальное меню. PHP-код, естественно прописывается в нужном блоке. Блоки «-wrap» нужны для того, чтобы защиться от безумца Interet Explorer, который без таких блоков может вести себя непредсказуемо.

С сайдбарами, думаю, тоже все понятно - схема аналогичная: общий блок (#sidebars) - если будет несколько сайдбаров, и каждый по отдельности (#sidebar-1).

Теперь я рекомендую еще раз внимательно посмотреть на этот код, чтобы полностью в нем разобраться.

Скажу по секрету, что подобная html-стуктура подойдет под большинство сайтов.

Теперь, когда мы окончательно определились с html, займемся стилями. Для этого создадим struct.css, в котором укажем наши стили.

* {padding: 0; margin: 0;}
html, body {margin: 0; padding: 0;}
body {font: 9pt/1.3em Verdana;}
  
#container {width: 900px; margin: 0 auto;}
  
#header1 {background: #DDD; height: 100px;}
#header2 {background: #EEE; height: 50px;}
  
#sub-container {float: left;}
#wrapper {float: left; width: 100%;}
  
#content {margin: 0 0 0 300px;}
#sidebars {float: left; width: 300px; margin-left: -100%;}

Стили простые. Я только подкрасил (background) блоки в шапке, чтобы они визуально выделялись. Блоки #content и #sidebars выстроены так, чтобы сайдбар оказался слева. Для того, чтобы разместить сайдбар справа, нужно изменить стили так:

#content {margin: 0 300px 0 0;}
#sidebars {float: left; width: 300px; margin-left: -300px;}

Дальнейшие действия будут зависеть от ваших потребностей. Я думаю, что приводить style.css, где прочие стили, бессмысленно. Вы можете их скопировать из любого шаблона или создать свои. Ведь каждый шаблон имеет свое оформление и вам все равно придется их подстраивать. Отмечу лишь, что в шаблоне «Clouds» в struct.css я указываю стили для базовых элементов. Вы просто посмотрите как там сделано, а использовать или нет, решайте уже по обстоятельствам. Лично для меня удобней задавать оформление заголовков, ссылок и некоторых других элементов именно в этом файле.

Еще раз обращаю ваше внимание, что мы не написали ни единой строчки кода, всё свелось к css-стилям. Конечно, когда вы будете кастомизировать шаблон, то вам придется править html-структуру, но как такового php-программирования мы избежали. Почему так происходит?

Всё дело в том, что MaxSite CMS позволяет шаблонам использовать файлы из других шаблонов. В нашем случае, мы указали использовать дефолтный шаблон (см. файл index.php). То есть когда вы создаете шаблон для MaxSite CMS вам не нужно вообще задумываться над программированием. Для дизайнеров - просто рай. ;-)

Позже, когда вы отладите все оформление, возможно у вас и возникнет потребность кастомизировать вывод текстов («переменная» часть). Для этого в MaxSite CMS (точнее в шаблоне «default») предусмотрены отдельные файлы типов данных («type»), а также «автоподхват» файлов цикла вывода «type_foreach». То есть вариантов несколько и какой использовать решает уже разработчик.

Впрочем, это отдельная тема.

В заключении скажу, что в MaxSite CMS активно используются css-стили. Они прописаны для всех блоков, которые возможны. Скажем виджеты отображаются со стилями, в которых указывается номер виджета, его функция, номер сайдбара и т.д. Когда у дизайнера возникает потребность кастомизировать выборочный виджет, всё что ему следует сделать, так это прописать нужные стили, не трогая прочие файлы. Это просто, быстро и удобно.