Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

Как сделать шаблон для Moguta.CMS

Здравствуйте, уважаемые читатели блога LifeExample, в этой статье я расскажу, как можно самостоятельно создать уникальный шаблон для Moguta.CMS. Перед тем как разрабатывать шаблоны, для какой либо системы управления сайтом, необходимо сначала изучить, то каким требованиям они должны отвечать.

Основные требования к шаблонам можно изучить на официальном сайте Moguta.CMS, но в этой статье я расскажу еще о некоторых нюансах, которые будет полезно знать при создании шаблона для Moguta.CMS.

Шаг 1 – Создание каркаса любого шаблона

Первым делом откроем папку сайта mg-templates/, в которой должны храниться все шаблоны, и создадим в ней папку new theme для новой темы.

Перейдем в созданную папку new theme и создадим в ней еще одну папку: css

Теперь перейдем в созданную папку css и создадим в ней файл style.css

Вернемся в папку new theme и создадим в ней файл template.php

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

Шаг 2 – верстка шаблона

Созданный нами template.php – это основа всего шаблона, файл в котором хранится разметка сайта.

Давайте вставим в него следующий код:

Вышеприведенный код можно смело использовать как каркас для любого шаблона, так как, в нем есть все необходимые элементы:

• Обертка сайта;
• Блок маленькой корзины;
• Блок горизонтального меню;
• Блок категорий товаров;
• Блок для вывода контента страниц;
• Подвал сайта.

Давайте заострим внимание на вставках php кода,

• <?php mgMeta(); ?> — вставляет в разметку мета данные текущего раздела и подключает файлы для работы всех его компонентов. Например, стили для активных плагинов.
• <?php echo SITE?> — выводит правильный путь для абсолютной ссылки, рекомендуется применять для всех ссылок в шаблоне.
• <?php echo $data[‘cartCount’]." шт. / ". $data[‘cartPrice’]." ".$data[‘currency’]; ?> — объемная конструкция выводящая в шаблон количество товаров в корзине и их общую стоимость.
• <?php echo $data[‘menu’];?> — выводит меню сайта. Рекомендуется указывать прямые ссылки пунктов меню, прямо в верстке template.php, или же установить плагин "пользовательское меню" для комфортного редактирования пунктов из панели администрирования.
• <?php echo $data[‘categoryList’] ?> — выводит список доступных категорий сохраняя их вложенность.
• <?php echo $data[‘content’] ?> — выводит контент страницы, например для страницы каталога, на месте этой вставки будет размещена верстка раздела товаров.

Запомните одну полезную особенность шаблонов Moguta.CMS: во всех файлах с версткой шаблона можно посмотреть доступные для него данные, хранящиеся в массиве $data. Для этого достаточно выполнить встроенную функцию: <?php viewData($data)?> и на страницу будет выведена вся информация, хранящаяся в этом массиве:

Воочию посмотрев на элементы массива, можно любой из них вывести на страницу, по аналогии с приведенными выше вставками: .

Вставленная нами верстка шаблона, на данный момент не подчиняется ни одному css правилу, т.к. файл css/style.css пустой.

Добавим в него следующие правила:

Данные правила приведут верстку шаблона в более менее привычный вид.

Как вы поняли в файле style.css можно задавать все стили сайта. Пока мы сделали стили только для каркаса шаблона заданного в файле template.php, но если покликать на ссылки, то вы увидите, что содержимое блока center будет меняться в зависимости от открытой страницы.

Верстка каждой страницы лежит в соответствующих файлах в папке mg-core/views/ , например, для страницы каталога посмотреть верстку можно в файле mg-core/views/catalog.php.

Внимание! Вам наверняка захочется сделать внешний вид каталога, индивидуальным, и добавить в него собственную верстку, но не спешите изменять ее прямо в файле mg-core/views/catalog.php иначе при обновлении система перезапишет его в первоначальный вид.

Шаг 3 — сущности шаблона, изменение вида

Сам движок Moguta.CMS построен по принципу MVC каждая не статическая страница сайта имеет три составляющие – модель, вид, контроллер, и берет их из папок ядра models, views, controllers.

Модель, вид, контроллер – вместе реализуют логику работы страницы, например, если на странице обратной связи совершить действие отправки сообщение, то в первую очередь действие будет обработано контроллером. Контроллер, проверив, что поля заполнены, подключит модель отправки сообщений и произведет отправку, и только после этого будет подключен вид, т.е. верстка страницы обратной связи.

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

Чтобы вмешаться в поведение или отображение любой из страниц, нужно скопировать изменяемую составляющую в одноименную папку шаблона.

Давайте на практическом примере разберемся с тем, как это все работает, и поменяем местами поля Email и Ф.И.О. в форме обратной связи.

Первым шагом создадим папку views в корне шаблона.

Скопируем в нее файл mg-core/views/feedback.php

Теперь можно изменять внешний вид страницы обратной связи в файле mg-templates/new theme/views/feedback.php. Ну а дальше не сложно догадаться, как поменять местами поля email и Ф.И.О:

Я рекомендую при создании нового шаблона сразу копироваться всю папку mg-core/views в корень шаблона, и уже спокойно редактировать представления не статичных страниц сайта.

Не забывайте о том, что в каждом из файлов папки views доступен массив $data, посмотреть содержимое, которого можно с помощью вставки: <?php viewData($data)?>

Аналогично с двумя другими составляющими страницы, если мы хотим вмешаться в логику ее работы, то нужно скопировать в корень шаблона папки mg-core/modes/ и mg-core/controllers/.

Кроме этого, для каждого шаблона можно задавать свои уникальные страницы по принципу уже имеющихся, например если мы заходим создать страницу с калькулятором доставки, то необходимо в трех папках шаблона views, controllers, models завести три одноименных файла calcdelivery.php и связать их логикой.

На сайте могуты есть схема взаимодействия составляющих шаблона:

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

• 404.php – верстка для страницы с ошибкой, желательно включить ее в состав вашего шаблона;
• ajaxuser.php – класс содержащий методы для обработки пользовательских ajax запросов;
• functions.php – в этот файл можно дописывать различные пользовательские функции влияющие на работу шаблона;

С файлом 404.php все предельно просто, это представление несуществующей страницы, а вот файлы ajaxuser.php и functions.php , требуют отдельной статьи для описания их назначений? Поэтому подписывайтесь на обновления блога, чтобы не пропустить выхода нового материала.

Скачать каркас шаблона для Moguta.CMS ( Скачали: 410 чел. ) 

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

Надеюсь, вышеизложенный материал пригодится вам в создании своего шаблона для Moguta.CMS.

У меня есть вопрос к читателям блога Lifeexample.ru. Хотели бы вы принять участие в конкурсе на разработку лучшего шаблона для Moguta.CMS c призовым фондом 5000р. Пока условия конкурса не зафиксированы, и идея только летает в воздухе, но ваши положительные отзывы могут ускорить процесс запуска конкурса.

Читайте также похожие статьи:

jQuery UI sortable – как узнать новую позицию элементов

Интеграция PayPal, простой PHP класс

Простой чат на PHP