В предыдущей статье мы рассмотрели основные отличия шаблонов WordPress и MaxSite CMS. Кратко ситуация такая:
- WordPress имеет жесткую структуру файлов, в MaxSite CMS файлы задаются произвольно.
- WordPress заставляет верстальщика заниматься программированием цикла вывода данных. MaxSite CMS - скрывает этот процесс, оставляя верстальщику только задачи по верстке.
- WordPress-шаблон использует для каждого типа данных отдельный файл, тем самым получается дублирование HTML-кода от файла к файлу. Если же отказаться от использования файлов разных типов и использовать один общий, то необходимо углубляться в программирование, расставляя условия вида «is_тип». В MaxSite CMS разделена структура HTML-шаблона от вывода цикла. Верстальщику нет необходимости заботиться о файлах типов данных.
Продолжим наши изыскания на небольшом практическом примере. Сделаем простенький HTML-шаблон и посмотрим как его нужно подключать к MaxSite CMS.
Однако, перед тем, как мы начнём, мне бы хотелось сделать еще одно замечание, касаемое шаблонов для WordPress последних версий (старше 3). Разработчики решили изменить default-шаблон и вроде-как в них теперь чуточку «упростился» цикл TheLoop. Предыдущая схема работы полностью сохранена, только вот теперь шаблонописателям предлагается оформлять код в цикле вывода в виде единой функции get_template_part(). По сути данная функция просто выносит цикл вывода в отдельный файл (loop.php) и теперь верстальщики должны будут заниматься и его программированием. Алгоритм файла сложный и запутанный, поэтому я сомневаюсь, что по данной схеме кто-то в здравом уме будет делать шаблоны. Старый вариант не идеален, но он хотя бы не плодит бесмысленные сущности. Именно поэтому я считаю, что рассматривать шаблоны в новых версиях WordPress нет смысла.
Впрочем, вернемся к нашей теме.
В прошлый раз я предложил посмотреть шаблон mini в комплекте MaxSite CMS, но из-за того, что всё равно никто и пальцем не пошевелил, мы сейчас будем делать другой шаблон. Нас мало будет интересовать верстка как таковая. Наша задача сделать из него MaxSite CMS-шаблон.
Пусть у нас будет шаблон вот с такой структурой (демо):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <title>Титул</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="generator" content="MaxSite CMS"> <meta name="description" content="описание"> <meta name="keywords" content="ключевые слова"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> </head> <body> <!-- end header --> <div id="container"> <div id="header"> <h1>Сайт</h1> <h2>Описание</h2> </div><!-- div id="header" --> <div id="sub-container"> <div id="wrapper"> <div id="content"> <div class="content-all"> <p>тут вывод записей type-файлом</p> </div><!--div class="content-all"--> </div><!-- div id="content" --> </div> <!-- div id="wrapper" --> <div id="sidebars"> <div id="sidebar1"> <div class="wrap"> сайдбар с виджетами </div><!-- div class=wrap --> </div><!-- div id="sidebar-1" --> </div><!-- div id="sidebars" --> </div><!-- div id="sub-container" --> <div id="footer"> подвал </div> </div><!-- div id="container" --> </body> </html>
Вот его стили (style.css):
@charset "UTF-8";
* {padding: 0; margin: 0;}
html, body {margin: 0; padding: 0;}
body {font: 9pt/1.3em Verdana;}
#container {width: 900px; margin: 0 auto;}
#header {background: #DDD; height: 100px;}
#wrapper {float: left; width: 100%;}
#content {margin: 0 0 0 300px; min-height: 300px;}
#sidebars {float: left; width: 300px; margin-left: -100%; background: red;}
#footer {background: yellow; clear: both; height: 50px;}
Структура довольно простая, стили примитивны. В общем ничего особенного. :)
Теперь давайте займёмся адаптацией под MaxSite CMS. Естественно, мы предполагаем, что система уже установлена.
Сами шаблоны находятся в каталоге application/maxsite/templates/. Пусть наш шаблон будет называться test. Создадим этот каталог в templates. Из предыдущей статьи вы знаете, что в шаблоне обязательным будет только один файл - index.php. Поскольку этот файл выполняет роль диспетчера типов, то мы просто его скопируем из default-шаблона. Этот файл не нужно редактировать - он полностью готов к использованию.
Также мы скопируем файл info.php, в котором укажем данные шаблона, например так:
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
$info = array(
'name' => 'Test',
'description' => 'Тестовый шаблон по статьям с maxsite.org',
'version' => '1.0',
'author' => 'Максим',
'template_url' => 'http://max-3000.com/',
'author_url' => 'http://max-3000.com/'
);
?>
Следующим шагом будет создание файлов main-start.php и main-end.php. Сделаем их пустыми, пока нам это не мешает.
Теперь, мы можем войти в админ-панель и выбрать наш шаблон (Настройки основные - Шаблон сайта). В принципе мы ещё ничего толком не сделали, но уже в таком варианте шаблон будет прекрасно работать. ;-)
Следующим шагом разобъём шаблон на две части. Первая часть (main-start.php) будет выводится до текущих данных. Вторая часть (main-end.php) - после.
Для примера напишем в main-start.php:
<p>Текст из main-start.php</p>
И в main-end.php
<p>Текст из main-end.php</p>
После этого в браузере посмотрим исходный код (Ctrl+U) и увидим только что добавленные тексты, а между ними HTML-код, который сгенерировал невидимый type-файл.
Наш html-шаблон разбивается на две части по тексту «тут вывод записей type-файлом». Соответственно, нам нужно скопировать тексты в сответствующие файлы
Файл main-start.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <title>Титул</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="generator" content="MaxSite CMS"> <meta name="description" content="описание"> <meta name="keywords" content="ключевые слова"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> </head> <body> <!-- end header --> <div id="container"> <div id="header"> <h1>Сайт</h1> <h2>Описание</h2> </div><!-- div id="header" --> <div id="sub-container"> <div id="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"> сайдбар с виджетами </div><!-- div class=wrap --> </div><!-- div id="sidebar-1" --> </div><!-- div id="sidebars" --> </div><!-- div id="sub-container" --> <div id="footer"> подвал </div> </div><!-- div id="container" --> </body> </html>
Обновим сайт в браузере и при просмотре исходного кода увидим наш HTML-код. Однако мы сразу заметили, что внешний вид сайта совсем не тот, который нужен. И причина в том, что путь к css-файлу неверен. В MaxSite CMS принято все пути указывать в полном виде. В нашем случае путь на сервере не совпадает в прописанным и браузер не может его найти. Всё, что нам нужно сделать, так это исправить строчку подключения стилей:
<link rel="stylesheet" href="<?= getinfo('stylesheet_url') ?>css/style.css" type="text/css" media="screen">
В данном случае с помощью кода:
<?= getinfo('stylesheet_url') ?>
мы получаем полный путь к шаблону. Этот код в PHP эквивалентен такому:
<?php echo getinfo('stylesheet_url') ?>
Поэтому с помощью <?= мы просто используем короткую запись.
Функция getinfo() возвращает значение указанного параметра. Позже мы познакомимся и с другим вариантами.
Отмечу еще одну особенность MaxSite CMS - в ней принято все пути к каталогам возвращать с закрывающим слэшем.
Обновляем страницу в браузере и видим исходный дизайн. До данного момента мы занимались только копированием файлов и текстов. Из программирования нам пришлось только указать одну php-функцию. Неплохо для начала. :)
Прежде чем мы продолжим дальше, я напомню, что есть смысл выделить в отдельные файлы шапку и подвал сайта. В дальнешем это упростит их поддержку.
Делаем файл header.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Титул</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="generator" content="MaxSite CMS">
<meta name="description" content="описание">
<meta name="keywords" content="ключевые слова">
<link rel="stylesheet" href="<?= getinfo('stylesheet_url') ?>css/style.css" type="text/css" media="screen">
</head>
<body>
<!-- end header -->
Соответственно этот код удаляем из main-start.php и вместо него подключаем файл. Полный код main-start.php будет таким:
<?php
require(getinfo('template_dir') . 'header.php');
?>
<div id="container">
<div id="header">
<h1>Сайт</h1>
<h2>Описание</h2>
</div><!-- div id="header" -->
<div id="sub-container">
<div id="wrapper">
<div id="content">
<div class="content-all">
Строчкой с require() мы подключаем файл header.php, только указываем полный путь, который возвращает getinfo('template_dir').
Аналогично делаем файл footer.php:
<div id="footer"> подвал </div>
И файл 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">
сайдбар с виджетами
</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>
Здесь мы подключаем footer.php.
Теперь немного поработаем с файлом header.php. Нам нужо прописать title и прочие meta. Привожу сразу готовый вариант:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title><?= mso_head_meta('title') ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="generator" content="MaxSite CMS">
<meta name="description" content="<?= mso_head_meta('description') ?>">
<meta name="keywords" content="<?= mso_head_meta('keywords') ?>">
<link rel="stylesheet" href="<?= getinfo('stylesheet_url') ?>css/style.css" type="text/css" media="screen">
</head>
<body>
<!-- end header -->
Функция mso_head_meta() возвращает готовое значение title, meta-description или meta-keywords. Просто указываем их в шаблоне и они сразу же появляются на страницах сайта.
Следующим шагом, давайте подключим сайдбар. Для его вывода используется функция mso_show_sidebar(). Обычно делается файл sidebar.php, в котором и указывается эта функция. На самом деле это только вопрос личных предпочтений, поэтому мы сделаем проще: пропишем функцию прямо в шаблоне. В файле main-end.php, вместо текста «сайдбар с виджетами» пишем:
<?php
// оформление виджета - начало блока
$do = NR . '<div class="widget widget_[SB]_[NUMW] [FN] [FN]_[NUMF]"><div class="w0"><div class="w1">';
// оформление виджета - конец блока
$posle = '</div><div class="w2"></div></div></div>' . NR;
# отображение сайдбара
# сайдбар должен быть зарегистрирован в functions.php
mso_show_sidebar('1', $do, $posle);
?>
Во втором и третьем параметре функции мы указываем HTML-код, которым автоматически обрамится каждый виджет. А специальные конструкции [SB], [NUMW], [FN], [NUMF] - автоматом заменятся на номер сайдбара, номер функции, название функции виджета и номер функции виджета. Такой подход возволяет генерировать css-классы для одиночного виджета, группы вижетов, виджетов в одном сайбдаре и т.д.
Если обновить страницу, то мы увидим сайдбар (если он был уже определен в другом шаблоне раньше), но мы не увидим настройки сайдбара в админ-панели. Для того, чтобы админка знала о сайдбарах шаблона, используется специальный файл functions.php:
<?php
mso_register_sidebar('1', t('Первый сайдбар', 'templates'));
?>
Вот теперь всё в порядке - в админ-панели появились сайдбары и виджеты и мы можем их спокойно настраивать.
Последним (на сегодня) действием будет подключение еще одного файла, который позволит создавать для нашего шаблона настройки. Для WordPress'а как правило не принято снабжать шаблоны настройками, что впрочем не удивительно, учитывая, насколько это сложно. В MaxSite CMS опции вообще не требуют программирования - они задаются в текстовом ini-файле - options.ini. На данном этапе нам пока в нём нет надобности, но зато пригодится файл options.php, который мы просто скопируем из clouds-шаблона.
Сразу после этого в админ-панели в группе «Настройки» появится пункт «Настройка шаблона». Не все эти опции реализованы в нашем шаблоне, но кое-какие уже будут работать. Например количество выводимых записей, номера рубрик и т.п.
Подведем итоги. Конечно наш шаблон не блещет красотой и гением вёрстки, но на этом этапе с минимальнейшими телодвижениями мы смогли его полностью перенести на MaxSite CMS. Уже в таком виде на сайте работают сайдбары с виджетами, выводится навигация по рубрикам, пагинация и т.п. Нам не пришлось разбирать дебри PHP-кода, ведь верстальщик должен верстать, а не программировать. :)
В следующий раз добавим в наш шаблон немного настроек.
Скачать текущий вариант шаблона 821.
ps Есть вопросы? Задавайте! Мне будет проще делать следующую статью.
Комментариев: 4 RSS
1Аноним13-11-2010 10:21
На самом деле последнее время все больше и больше шаблонов для Wordpress снабжаются настройками. Особенно от "ведущих производителей".
Но зная как это делается, действительно, путь не из легких.
2Иван10-01-2011 08:40
Спасибо за интересную статью.
Рад что наконец появилась подобная документация.
Не могли бы вы порекомендовать как переделывать шаблоны следующего вида:
Можно конечно переписать html + css, но может быть есть более правильный подход?
3Аноним10-01-2011 09:56
Здесь блок div#content лучше удалить, поскольку в MaxSite CMS вывод этой части осуществляется в type-файле, где используются другие стили. Поэтому лучше перенести стили из старого варианта под MaxSite CMS.
Если же требуется строгое соответствие, то указать структуру вывода можно в соответствующих type_foreach-файлах.
4Аноним21-02-2012 23:40
Примерно похоже на верстку в Битрикс (это я так на вскидку по факту прочтения этого мануала).