Назидания начинающему вебмастеру по созданию шаблонов для MaxSite CMS

Основная проблема, с которой сталкивается вебмастер, переходящий к использованию MaxSite CMS — это ошибочное предположение, что вебразработка и технологии создания сайтов совершенно не меняются — всё уже придумано и сделано 5-10 лет назад. Такому вебмастеру тяжело понять, что современная CMS (система управления сайтом/содержимым) способна взять на себя массу рутинных задач, оставляя вебмастеру то, что у нас принято называть творчеством — оформление текстов и создание дизайна.

MaxSite CMS строится по модульному принципу с большой долей свободы. С одной стороны, система содержит большой базовый функционал, с другой — позволяет вебмастеру без особых сложностей заменить его своим. Вопросы гибкости решаются разными способами. Например в WordPress существуют предопределенные файлы в каталоге шаблона, которые система подключает по факту наличия. Но в том же WordPress не предусмотрен механизм, позволяющий точечно влиять на мелкие изменения. Например, если нужно разместить произвольный блок сразу под текстом записи, то придётся переписывать весь «типовой» файл вывода. В MaxSite CMS же просто размещается блок в отдельном файле — система автоматом его подключит.

Разработчиков (авторов) CMS можно разделить на теоретиков и практиков. Первые решают абстрактные задачи, имеющее слабое отношение к вебстроительству. Или (от нечего делать) заняты украшательсвом админ-панели, ошибочно полагая, что это сказывается на качестве публикуемых текстов. Те, кто на деле создаёт сайты (шаблоны), остаются один на один со своими проблемами — авторам CMS это совершенно не интересно.

Практики же сами делают сайты: работают с реальными заказами и понимают стоящие задачи «из первых уст».

Если разработчики WordPress за последние пять лет не сделали ни одного сайта, то очевидно им и нечего предложить вебмастерскому сообществу — технически WordPress-шаблон, как был в 2005 году, так им и остался.

MaxSite CMS развивается на основе реальных потребностей, а не теоретических умозаключений, поэтому гибкость и удобство создания сайта здесь стоит на первом месте.

Начиная с MaxSite CMS 0.80 вебмастерами предлагается ещё один вариант построения шаблона, основанный на т.н. shared-каталоге. Представителем этого способа является шаблон D2, который входит к комплект системы. Этот шаблон используется как каркас для новых шаблонов, а также для изучения его возможностей новичками.

Вебмастер, работавший только с WordPress, будет озадачен, поскольку не увидит массы привычных для себя моментов.

• Где header.php? Как добавить свой код в HEAD?
• Где код вывода? Откуда вообще взялись данные записей?
• Как разместить второй сайдбар?
• и т.п.

Поскольку разработчики WordPress не заботятся о вебмастерах, то всё, что они предлагают — это держи пистолет, дальше крутись как можешь самый миниммум, вроде подключения предопределенных файлов и простеньких функций для вывода сайдбара. Поэтому WordPress-вебмастер привык всё делать сам: от формирования HEAD, до ручного подключения файлов в нужном месте шаблона.

В MaxSite CMS работа шаблона строится несколько иначе. Предполагается, что есть некие программные модули, которые выполняют определенные задачи.

Например вывод главной страницы может осуществляться:

• в виде последних записей сайта
• можно указать номера рубрик, записи которых будут выводиться
• можно вывести только указанные записи
• можно вывести только одну последнюю запись
• можно вывести произвольный html-текст
• можно вывести записи в виде блоков рубрик
• можно вывести записи заголовками или с анонсами
• можно задать отдельный шаблон вывода (main-шаблон)

Очевидно, что реализация данных возможностей потребовала существенного программирования, а многообразие вариантов — наличие в админ-панели соответствующих настроек.

Эта и другие возможности реализуются через «модуль» type-файлов, которые расположены в shared-каталоге. Устройство D2 таково, что система сама найдёт и автоматически подключит необходимый программный модуль-файл. Вебмастер об этом может совершенно не задумываться - вся программная часть вынесена за рамки шаблона.

Вебмастер привык, что html-код и css-классы он сам прописывает вручную в каждом случае. Здесь же эту работу выполняет MaxSite CMS: он получает уже готовый валидный HTML5 с предопределёнными css-классами. Поскольку вся программная часть уже выполнена, то задача вебмастера сильно смещается в область css-вёрстки.

Я считаю, что программы для того и существут, чтобы упрощать нам жизнь. CMS без особых проблем может взять на себя всю рутинную работу, главное только понять как ей управлять.

Main-шаблон (main.php)

В MaxSite CMS используется несколько вариантов расширений возможностей шаблона. Все они завязаны на модульную сетку — main-файл. В этом файле расплолагается html-код, а также выполняются все необходимые подключения.

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

Секция HEAD

WordPress-вебмастера часто ставит в тупик тот факт, что в MaxSite CMS секция HEAD формируется автоматически. В других CMS, как правило, эта секция вынесена в отдельный файл, где вебмастер вручную прописывает подключение скриптов, стилей и т.п.

Однако, данная секция всё-таки типовая — в подавляющем большинстве шаблонов файл секции кочует с минимальными изменениями. Так почему бы не поручить её формирование программе?

Если же стоит задача подключить произвольный файл в HEAD, то мы будем использовать предопределённый файл custom/head.php, который так же автоматически будет подключен в секцию HEAD.

Custom-файлы

Данный вариант подключения характерен и для других частей шаблона. Существуют custom-файлы, которые автоматически подключаются в main-шаблоне или в какой-то другой части (см. shared/blanks/custom/).

Есть варианты подключения «заменяя» и «совместно». Например файл custom/sibdebars.php полностью заменяет вывод сайдбара в main.php. А файл custom/content-end.php выводится целиком в блоке контента, не трогая соседей.

Custom-файл подключается только при своём наличии. Если файла нет, то используется типовой вывод. Таким образом custom-файлы следует использовать только те, которые действительно необходимы.

Type_foreach-файлы

Тype_foreach-файлы похожи на custom, с тем отличием, что подключаются в своих «родителях» — type-файлах. Приведенный выше пример вывода главной реализуется в type-файлах home. Если стоит задача изменить не весь вывод, а только какую-то небольшую часть, то нет смысла копировать в свой шаблон весь type-файл — достаточно ограничиться предопределённым type_foreach-файлом.

Например за вывод информации о записи (заголовок, дата, рубрики и т.п.) отвечает type_foreach/info-top.php. Используя его можно произвольно настроить вывод, не задумываясь о будущих изменениях в type-файлах.

В MaxSite CMS количество type_foreach-файлов приближается к сотне. Это говорит о том, что с помощью type_foreach-файлов можно покрыть практически весь типовой вывод шаблона.

Type-файлы

Конечно, бывают задачи, которые специфичны для сайта. Например вывод главной колонками и блоками достаточно сложен и пока реализуется только на уровне шаблона. В подобных случаях используются свои type-файлы. Например для главной можно воспользоваться type/home/my_home.php, где и организовать вывод колонками или блоками (пример можно посмотреть в шаблоне MAX El-El).

То есть, опять же, вебмастер не занимается дублированием или копированием исходных type-файлов, а создаёт только тот код, который имеет непосредственное отношение к поставленной задаче.

Опции и настройки шаблона

С опциями всё достаточно просто: у них два действия — создание/объявление и получение.

Для создания опций шаблона используется простые ini-файлы в каталоге options. Труда разобраться в них нет никакого. Просто создается файл, система автоматически его подключает, обслуживает и отображает в админ-панели.

Для получения опций используется стандартная функция mso_get_option(), которая используется в шаблонах, плагинах и любых других частях системы. Опции — быстрая и «лёгкая» возможность системы, поэтому количество опций практически не сказывается на быстродействии системы.

Более того, если есть возможность сделать вывод какого-то блока универсальным, то это нужно делать через опции. Например, клиент желает выводить в шапке рекламный баннер. Делаем отдельную опцию для кода баннера и выводим её в нужном месте шаблона. Теперь клиенту нет надобности лезть в исходный файл — все действия доступны в админ-панели.

Компоненты шапки и подвала

Компоненты «родились» после многочисленных попыток автоматизировать размещение произвольных блоков в шаблоне и при этом обеспечить их переносимость между шаблонами (избавляемся от дублирования).

Предполагается, что сайт состоит из шапки, контента, сайдбара и подвала. Из опыта мы знаем, что шапка и подвал самые «изменяемые» части шаблона. Это обусловленно особенностью дизайна сайта, распроложением функциональных блоков и т.п. Вместе с тем, я провёл небольшое исследование и выявил, что очень много сайтов имеют одни и те же функциональные элементы, которые отличаются только внешним видом.

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

Таким образом вопрос использования компонентов лежит исключительно в плоскости их оформления под конкретный шаблон.

В комплекте D2 уже 20 компонентов. Это и несколько меню, формы поиска и логина, два слайдера и даже вывод случайных цитат.

Таким образом в задачу вебмастера входит определиться — какие компоненты нужны для сайта, задать порядок их вывода (через админ-панель или custom-файлы) и выполнить css-вёрстку.

CSS-стили

Принципиальное отличие MaxSite CMS от других систем в том, что

• уже есть свой css-фреймворк (style-all-mini.css)
• его можно собрать произвольно из готовых исходных файлов
• в комплекте уже готовые стили, например для типографики
• можно использовать только свои стили (my_style.css)
• можно использовать стили как дополнение к css-фреймворку (var_style.css)
• можно использовать дополнительные стили шаблона к стилям шаблона (add_style.css)
• можно использовать css-профили, подключаемые по желанию через админ-панель

Рекомендуемый вариант — это var_style.css, при котором автоматически подключается css-фреймворк. Преимущество здесь в том, что вебмастер получает в своё распоряжение уже настроенные и отлаженные стили, адаптированные под MaxSite CMS (type-файлы, плагины, виджеты, css-хелперы и т.д.).

Сильная сторона MaxSite CMS — нативное использование css-препроцессора LESS в виде LessPHP. Поскольку преимущества кода LESS перед кодом CSS очевидны даже младенцам, то вебмастеру, желающему делать сайты за деньги, необходимо как можно быстрей изучать LESS. В MaxSite CMS все css-файлы написаны на LESS. Кроме того в shared/css-less/mixins/ расположены готовые для употребления стили под разные задачи.

Компиляция LESS в CSS выполняется автоматически через функцию mso_lessc (см. css/var_style.php), а также произвольно с помощью плагина less_compiling.

Следует отметить, что css-less приведён только в качестве рабочего примера структуры каталогов less-файлов. Вебмастер волен использовать свой вариант.

Шаблон как кубики Lego

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

При стоительстве фундамента дома, важно не ошибиться при расположении стройматериалов и оборудования. Если разместить бетономешалку рядом с местом выгрузки бетона, но вдали от щебня, песка и воды, то можно «ухойдохаться», поскольку доставка исходных метериалов окажется дольше и более трудозатратна, чем размещение бетономешалки возле стройматериала. Выгрузить готовый бетон и привезти его на тачке в несколько раз быстрей и проще.

В шаблоне D2 все стройматериалы находятся «под боком». Лишнего мусора, который путается под ногами и мешает работать, практически не осталось. Вебмастер сам решает как будет строиться сайт — из каких компонентов и блоков будет состоять. Ему нет необходимости тратить время на обслуживание системы или шаблона ради шаблона. Готовый функционал позволяет сместить работу в область css-вёрстки (аля-расскрашивать кубики).

Не об этом ли мечтали создатели идеологии Zen Garden?