Перед тем, как мы начнем делать свой шаблон, следует для начала понять, как он устроен. Дело в том, что вам придется забыть всё то, что вы знали до этого от WordPress и выкинуть из головы все его ограничения.
Правило 1. Структура шаблона может быть любой. В шаблоне обязательно должен быть только index.php
Я вообще считаю, что MaxSite CMS отличный способ научиться работать с PHP. Всю черновую работу до шаблона система уже выполнила и дальше все зависит от разработчика.
Итак, приступим. Все шаблоны находятся в каталоге "templates".
В дальнейшем если я указываю простой каталог без пути, то будем считать, что это каталог в "/application/maxsite/". Там, где это не так, я буду указывать полный путь относительно сайта.
Сделаем пустой каталог "my" - так будет называться наш шаблон. В нем разместим index.php с каким-нибудь текстом, например "Привет, это мой шаблон!".
В админ-панели выбираем наш шаблон, переходим к сайту и видим наш текст. Теперь в этом файле можно использовать обычный PHP и делать с ним, что угодно. Например, выполнять примеры из учебника по PHP. ;-)
Давайте теперь для примера добавим строчку, которая показывает потребление памяти, время выполнения и количество запросов к БД.
Для этого добавим такой код:
<?php
$CI = & get_instance();
echo '<br />Время: {elapsed _time} | SQL: '
. $CI->db->query_count
. ' | Память: {memory _usage}';
?>Обновив страницу увидим, что был выполнен всего лишь один запрос к БД. Впрочем, если вы разлогинетесь, то и его не будет. Это связано с тем, что система каждый раз проверяет верность логина и пароля. Для безопасности.То есть система выполнила инициализацию, проверила логин/пароль, подключила плагины и передала управление в шаблон. Что делать дальше зависит только от вас. Но сейчас нам было бы интересно подключить какой-либо шаблон к системе.
Я решил, что рассказывать о HTML-верстке нет смысла. Конечно это важная часть, но на данном этапе нас интересует немного другие вещи. Поэтому мы просто идем на freecsstemplates.org и выбираем любой шаблон. Я взял не очень сложный terrafirma.
Распаковываем архив в каталог нашего шаблона, так чтобы index.html оказался рядом с нашим index.php.
Дальше делаем магические действия.
1. Переименовываем index.html в index.php. Да, мы затираем наш старый файл, поскольку смысла в нем особого и нет.
2. Поскольку для CMS нужно указывать явные пути к стилям, то открываем index.php и добавляем путь к каталогу шаблона. Вот так:
Было:
<link rel="stylesheet" type="text/css" href="default.css" /><span style="font-family: Verdana;"></span>Стало:
<link rel="stylesheet" type="text/css"
href="<?= getinfo('stylesheet_url') ?>default.css" />3. Для того, чтобы отображались картинки, указанные в шаблоне, нужно также указать путь к каталогу:
Было:
<img src="images/...Стало:
<img src="<?= getinfo('stylesheet_url') ?>images/...У меня в этом шаблоне было две таких картинки, думаю, что вы и сами без проблем их найдете и сделаете замены.Всё! Обновляем страницу и видим наш готовый шаблон. Все наши действия свелись к тому, чтобы прописать верные пути.
Запись <?= $a ?> в PHP означает тоже самое, что и <?php echo $a ?> - то есть вывод. Это просто короткая запись и ею удобно пользоваться в шаблонах.
Теперь добавим в наш шаблон немного интерактивности. Но для начала исправьте кодовую страницу с "iso-8859-1" на "UTF-8", поскольку в MaxSite CMS используется только эта кодировка. Кстати, вам следует обзавестить правильным редактором, который поддерживает UTF-8, например Notepad2 (кодировка выставляется в File - Encoding - UTF-8).
Добавим title, meta keywords и meta description. Получится вот такой код:
<title><?= mso_head_meta('title') ?></title>
<meta name="description" content="<?= mso_head_meta('description') ?>">
<meta name="keywords" content="<?= mso_head_meta('keywords') ?>">Теперь, если обновить страницу, мы увидим в титуле браузера значение из настроек.
Укажем наше название сайта и его описание. Найдем в шаблоне блок id="header" и изменим:
<div id="header">
<h1><?= getinfo('name_site') ?></h1>
<h2><?= getinfo('description_site') ?></h2>
</div>Как видите пока что ничего сложного. Однако дальше нам предстоит немного модифицировать шаблон, поскольку у нас сейчас выводятся фиксированные тексты. Понятно, что нас это не устраивает, поэтому нам следует удалить весь шаблонный текст. Так же обратите внимание еще на один момент. Поскольку у нес будут сайдбары с видежтами, то эту правую колонку тоже следует удалить из шаблона.
В нашем случае это сделать совсем несложно. Тексты выводятся в div#primarycontent, а сайбдар в div#secondarycontent. Удаляем всё, что внутри них, и вместо этого напишем "текст" и "сайдбар". Чтобы не потерять. :-)
Правило 2. Сразу определяемся с файлами шаблона
В принципе мы можем все сделать в одном index.php. Но мне не очень нравится такой подход, потому что это смешивает код из разных частей. Тем более, что есть еще один немаловажный момент, о котором я еще не говорил. Это типы данных.
Правило 3. Разделяй и властвуй!
В MaxSite CMS вы можете использовать любые типы данных. Например это могут быть: главная, рубрика, архив, 404, просто страница и т.д. Более того, вы можете сами придумать свои типы данных и их использовать в шаблоне. Чтобы понять, как определяется тип, следует знать как MaxSite CMS формирует адреса.
Предположим, что у нас есть такой адрес http://site.com/cool. Понятно, что если у нас задействованы разные типы, то следует как-то дать подсказку системе. В данном случае у нас её нет, поэтому это может быть и обычная страница, и рубрика, а может какой-то ваш придуманный тип. И вот, когда система не может определиться (скажем в базе данных нет такой ссылки), то она ставит его тип "page_404".
Чтобы избежать такого рода неопределенности, следует указывать тип данных в адресе. Вот наш пример: http://site.com/page/cool - запись, http://site.com/category/cool - рубрика. В MaxSite CMS существуют предопределенные типы данных, которые в силу исторических причин стали общеупотребительными. Теперь, вы понимаете, что для типа "page" следует выводить запрашиваемую страницу, а для типа "category" - список записей из указанной рубрики.
И тут мы подходим к тому моменту, когда становится ясно, что php-код для таких случаев будет разный. То есть мы берем оформление нашего шаблона, а вот его наполнение будет меняться в зависимости от типа данных.
Для того, чтобы определить тип данных используется функция is_type('тип') - которая возвращает true, если текущий тип равен проверяемому. Логично предположить, что такую проверку проще всего выполнить в index.php и, в зависимости от типа, подключать нужный файл для вывода данных.
То есть наш файл index.php будет выполнять роль диспетчера типов. Это просто удобно и я буду придерживаться именно такой схемы. Но, сразу замечу, что она не является абсолютной - вы вправе использовать свою схему.
Я хочу сразу привести готовую схему файлов шаблона и вы сразу поймете её суть.
- index.php - здесь мы проверяем тип и подключаем (через require) файл типа. Например для "page" это будет "page.php". Для "category" - "category.php". Для "home" - "home.php" и т.д. Для дальнейшего примера давайте рассмотрим тип "home" -вывод главной страницы.
- home.php - в нем мы подключаем main-start.php, после этого выводим текст и в конце подключаем main-end.php.
- main-start.php - первая т.н. неизменяемая часть шаблона. В ней мы подключаем header.php (секция до BODY), потом идет html-код от BODY до нашего (включая) div#primarycontent.
- main-end.php - вторая н.т. неизменная часть шаблона. В ней закрываем div#primarycontent, подключаем footer.php (подвал), sidebar.php (сайдбар) и до конца html шаблона (</html>).
Данная схема позволяет без труда работать с файлами типов. Поскольку неизменная часть делается только один раз, то все программирование переносится на файл типа. То есть мы прописываем в нем:
получаем данные для вывода
require('main-start.php'); // подключаем шаблон ДО
тут выводим данные
require('main-end.php'); // подключаем шаблон ПОСЛЕ
В общем сводим вывод шаблона до двух строчек кода.Что же касается разделения на header.php и footer.php, то это скорее дань моде - возможно вы захотите добавить в них какой-то свой код в будущем. К тому же header.php четко описыват секцию до BODY, что делает шаблон более логичным и понятным.
Теперь, когда мы определились с нашей схемой, приступим к практике.
Переименовываем наш index.php во что-нибудь нейтральное, например templ.php. Создаем новый index.php с кодом, который будет определять тип данных. Для начала сделаем только три типа: home, page, category. Для ненайденых страниц будем выводить page_404.
<?php
# подключаем нужные библиотеки - они используются почти везде
require_once( getinfo('common_dir') . 'page.php' ); // функции страниц
require_once( getinfo('common_dir') . 'category.php' ); // функции рубрик
# в зависимости от типа данных подключаем нужный файл
if ( is_type('home') ) require('home.php'); // главная
elseif ( is_type('page') ) require('page.php'); // страницы
elseif ( is_type('category') ) require('category.php'); // рубрики
else require('page_404.php'); // 404 - если не найдено
?>
Создаем файлы: header.php, main-start.php, main-end.php и footer.php. Мы уже рассмотрели их деление, поэтому все сводится к простому копированию частей из шаблонного templ.php.
В начало main-start.php не забудем добавить подключение header.php:
<?php require_once('header.php'); ?>
В main-end.php подключаем footer.php и sidebar.php:<?php require_once('sidebar.php'); ?>
<?php require_once('footer.php'); ?>
Для того, чтобы подключить сайдбар, следует в файл sidebar.php добавить такой код:<?php
$do = NR . '<div class="widget"><div class="w1">'; // оформление виджета - начало блока
$posle = '</div><div class="w2"></div></div>' . NR; // оформление виджета - конец блока
mso_show_sidebar('1', $do, $posle );
?>
Теперь об одном специальном файле, о котором я не упомянул раньше. В шаблоне может быть файл functions.php. Его особенность в том, что он подключается в момент инициализации системы. С его помощью, например можно указать админ-панели сколько у нас используется сайдбаров. Создаем functions.php с таким кодом:<?php
mso_register_sidebar('1', 'Сайдбар');
?>Ну что ж большая часть работы уже сделана. Теперь у нас остались только файлы типов. Мне бы не хотелось вас утомлять php-программированием на данном этапе, поэтому мы сделаем несколько проще. Идем в шаблон default и копируем из него следующие файлы:- category.php - файл вывода рубрик
- comment-form.php - форма комментариев
- home.php - главная страница
- loginform.php - форма логина
- page.php - вывод одиночной страницы
- page_404.php - если страница не найдена
- page-comments.php - вывод комментариев на странице
Данные файлы созданы как раз по нашей схеме и отделены от самого дизайна. Хотя, нет. Всё-таки полного отделения добиться не удастся. Всё потому что каждый дизайнер использует свой css-код. Поэтому когда мы выводим заголовки как H1, это еще не значит, что дизайнер предусмотрел этот стиль. Вместо этого он решил, что заголовки следует выводить как H3. Понятно, что здесь нет единых правил, поэтому если вы хотите добиться полного соответствия, то вам следует поправить либо файл типа, где указываются html-тэги, либо CSS-файл шаблона.
Впрочем это уже выходит за рамки нашей тематики. :-)
Главное, что при столь небольших изменениях мы смогли подключить стороний шаблон к MaxSite CMS. Если есть желание, то вы можете посмотреть устройство шаблона default, чтобы подключить остальные типы данных.
Вы можете скачать готовые файлы к этой лекции: lections-01.zip (ок. 100Кб, включая исходный дизайн).
Обсудить данную лекцию, задать свой вопрос и просто высказать своё «фи» можно в google-группе MaxSite.