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

Рубрика: MaxSite CMS -> Основы
Пятница, 29 мая 2009 г.
Просмотров: 3237
Подписаться на комментарии по RSS
]]>
]]>

Давайте сделаем шаблон «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 у нас такой код (привожу лишь структурное описание со своими комментариями):

  1.  main-start.php
  2.    
  3.  - подключаем header
  4.  require_once(getinfo('template_dir') . 'header.php');
  5.    
  6.  <div id="container"> - блок #container
  7.    
  8.   <div id="headers"> - блок шапки
  9.   <div id="headers-wrap">  - дополнительный блок шапки
  10.   <div id="header1">...</div> - блоки для шапки
  11.   <div id="header2">...</div>
  12.   <div id="header3">...</div>
  13.   </div><!-- div id="headers-wrap" -->
  14.   </div><!-- div id="headers" -->
  15.    
  16.   <div id="sub-container"> - блок для содержимого
  17.    
  18.   <div id="wrapper"> - дополнительный wrapper
  19.   <div id="content"> - блок текста
  20.   <div class="content-all">
  21.    
  22.   тут переменная часть, тексты, которые отдает система
  23.    
  24.  main-end.php
  25.    
  26.   </div><!--div class="content-all"-->
  27.   </div><!-- div id="content" -->
  28.   </div> <!-- div id="wrapper" -->
  29.    
  30.   - пошли сайдбары
  31.   <div id="sidebars">
  32.   <div id="sidebar1">
  33.   <div class="wrap">
  34.   <?php require(getinfo('template_dir') . 'sidebar-1.php'); ?>
  35.   </div><!-- div class=wrap -->
  36.   </div><!-- div id="sidebar-1" -->
  37.   </div><!-- div id="sidebars" -->
  38.    
  39.   </div><!-- div id="sub-container" -->
  40.    
  41.   <?php require(getinfo('template_dir') . 'footer.php'); ?>
  42.    
  43.  </div><!-- div id="container" -->
  44.  </body>
  45.  </html>

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

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

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

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

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

  1.  * {padding: 0; margin: 0;}
  2.  html, body {margin: 0; padding: 0;}
  3.  body {font: 9pt/1.3em Verdana;}
  4.    
  5.  #container {width: 900px; margin: 0 auto;}
  6.    
  7.  #header1 {background: #DDD; height: 100px;}
  8.  #header2 {background: #EEE; height: 50px;}
  9.    
  10.  #sub-container {float: left;}
  11.  #wrapper {float: left; width: 100%;}
  12.    
  13.  #content {margin: 0 0 0 300px;}
  14.  #sidebars {float: left; width: 300px; margin-left: -100%;}

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

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

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

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

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

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

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

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

]]>twitter.com Google Buzz google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru]]>

Еще записи по теме

Комментариев: 7

Вы можете получать новые комментарии к этой записи по RSS или оформить подписку на все комментарии сайта. Или даже на все новые записи сайта. Не знаете, как это сделать?
  1. 2009-05-29 в 22:48:27 | Cuprum
    ]]>]]>

    Макс! У меня не получилось за 15 минут downer Но, спешу поделиться Свеженький шаблон Imprimis для Maxsite.

  2. 2009-05-30 в 09:57:03 | MAX
    ]]>]]>

    Пять сайдбаров - круто! cool smile А ты зачем все type добвил в шаблон? По-моему type_foreach вполне хватит.

  3. 2009-06-01 в 11:16:28 | Cuprum
    ]]>]]>

    type_foreach осваиваю пока. Возможно в следующей версии...Насчет сайдбаров - привык уже: один сайдбар - один плагин. Пусть будет. Кстати, размещение одного сайдбара в шаблоне - это один запрос к мускулю?

  4. 2009-06-01 в 11:26:03 | MAX
    ]]>]]>

    Нет, конечно. smile Сайдбар - это не плагин - это просто одна функция. Пока не укажешь виджеты, то ничего на сайдбары не тратится.

  5. 2009-06-10 в 01:48:33 | ZyXEL
    ]]>]]>

    Спасибо, Макс! После этого поста меня осенило, относительно шаблонов!LOL

  6. 2009-07-06 в 18:50:09 | Комментатор 87
    ]]>]]>

    Максим , создавая шаблон по твоим урокам в вордпресс , получилось сразу без проблем. Тут , что-то я туплю, не могу вывести иерархию страниц в сайтбар, просмотрел все сайты на MAXSITE никто так не делал, новостную подачу материала не могу использовать

  7. 2009-07-06 в 19:59:40 | MAX
    ]]>]]>

    Это плагин-виджет Page parent. В нем нужно указать родителя.

Оставьте комментарий!

Не регистрировать/аноним

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

Если вы уже зарегистрированы как комментатор или хотите зарегистрироваться, укажите пароль и свой действующий email.
(При регистрации на указанный адрес придет письмо с кодом активации и ссылкой на ваш персональный аккаунт, где вы сможете изменить свои данные, включая адрес сайта, ник, описание, контакты и т.д.)


grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

(обязательно)