Как сделать шаблон для Kandidat CMS (v.1.3.7)

Опубликовал Divayth 24 февраля 2010 в рубрике Руководства, секреты. Комментарии: 23


Введение.

В последнее время мне некогда заниматься дизайном тем для Кандидат. И пока моя работа стоит я решил написать маленькую статейку о том, как сделать свою тему для Kandidat CMS.
Ниже я попытаюсь описать весь процесс создания шаблона для системы.

Хотя правильней будет сказать не «весь процесс создания» а «адаптация HTML странички под Kandidat CMS». Учить верстать в этом маленьком руководстве я не буду.
Для работы нам понадобится дистрибутив Kandidat CMS, базовые знания верстки HTML, ну и всё ;-).
Добавлю, что разработка шаблона ведется на дистрибутиве Kandidat CMS v.1.3.7.

Статья получилась великоватой, на деле окажется всё гораздо проще и короче.

Разработка дизайна и HTML верстка. Разбор странички.

Здесь всё понятно. Вы разрабатываете свой дизайн, верстаете его в HTML. Верстать таблицами или дивами – решать вам, но я лично стараюсь использовать div’ную верстку, так как там код аккуратнее.

Ниже представлена моя HTML страничка, которая в будущем станет темой оформления системы Кандидат. Она простейшая, графики как таковой почти нет, думаю на примере она не нужна.

Вот ее html код:

<! DOCTYPE HTML PUBLIC "-//W3c//DTD HTML 3.01 Transitional//EN">
<html>
<head>
<title>Главная</title>
<meta http-equiv="Content-type" content="text/html" charset="windows-1251">
<meta name="keywords" content="123">
<meta name="description" content="123">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="page">
    <div id="header">
        <div>Имя сайта</div>
       
    </div>
   
    <div id="contentbox">
        <div class="menu">
            <ul>
                <li>Главная</li>
                <li>О нас</li>
                <li>Статьи</li>
                <li>Скачать</li>
                <li>Гостевая</li>
                <li>Связь</li>
            </ul>
        </div>
       
        <div class="content">
            <div class="title_content">Главная</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum imperdiet consequat. Suspendisse tincidunt elementum mauris, et consectetur augue pellentesque non. Maecenas nec magna risus. Suspendisse eleifend rutrum nibh quis rutrum. Sed tincidunt auctor sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet dolor ipsum. Nunc lobortis porttitor neque quis pellentesque. Quisque a mattis diam. Vivamus blandit molestie commodo. Donec ac tempor ipsum. Maecenas congue bibendum justo, nec fermentum dui pretium et. Vivamus commodo suscipit aliquam. Nam tortor risus, pretium a ornare elementum, pretium non erat. Pellentesque nulla nisl, pretium eget tincidunt ac, consequat sed ligula. Nulla condimentum, ipsum id auctor malesuada, leo mi vulputate metus, suscipit ornare quam massa sit amet justo.</p>

        </div>
        <div id="footer">
        <div class="copy">Имя сайта - 2010</div>
        </div>

        </div>
</div>

</body>
</html>

А это ее скриншот:

primer_1

Попробуем мысленно разделить страничку на части.

Можно выделить 3 части: шапка сайта, центральная часть и футер (нижняя часть).

В шапке присутствует блок под «Имя сайта»

Центральная часть разделена в свою очередь на 2 части.
Блок меню и блок под основное содержимое (контент) с заголовком страницы.

Сразу прошу обратить внимание на блок меню. Он реализован с помощью тега списка. Вот так моё меню выглядит в коде:

<ul>
    <li>Главная</li>
    <li>О нас</li>
    <li>Статьи</li>
    <li>Скачать</li>
    <li>Гостевая</li>
    <li>Связь</li>
</ul>

Для корректного отображения реализовывать меню ссылок нужно именно таким образом.

В футере находится копирайт «Имя сайта 2010».

Когда ваша HTML страничка будет готова – можно переходить ко следующему шагу.

Разбираемся со стандартными шаблонами Kandidat CMS и создаем папку под свой шаблон.

Итак, у нас уже есть сверстанная страничка, теперь нужно подготовится для ее адаптации под Кандидат.

Распаковываем дистрибудив с Kandidat CMS и заливаем его на свой хостинг (или на локальный сервер, как делаю я).

В корневом каталоге нас интересует папка templates. В ней и хранятся шаблоны. Открываем ее и видим в ней 3 стандартные темы оформления: colorvoid, hyperglass, pluralism.
Именно названия этих папок и есть название шаблонов, того что мы видим в админке.

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

Далее открываем папку pluralism и копируем оттуда в папку своего шаблона (primer_1) файл index.php. Этот файл присутствует во всех шаблонах kandidat cms и его содержимое всегда одинаковое.

Теперь создаем 2 текстовых документа (документы с расширением .txt) и переименовываем их. Один в template.php, другой в style.css. Потом создаем новую папку для хранения изображений, в моем случае это images.

В итоге у нас в папке templates должна быть создана папка вашего шаблона (pirmer_1) в которой находятся файлы: index.php, template.php, style.css и папка images.

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

Основная работа.

На этом этапе будут происходить самые интересные действия.

Для начала копируем изображения, использованные в вашей html страничке, в ранее созданную папку images (templates\primer_1\images).

Теперь в файл style.css (templates\primer_1\style.css) копируем стили из аналогичного файла вашей html странички. Сохраняем изменения.

Затем копируем код вашей html странички в файл template.php. Сохраняем изменения.

Далее начинаем ковырять template.php, заменяя элементы html кода на php код кандидата.

Заменяем html код с его начала до тега <body>

В моем случае я меняю:

<! DOCTYPE HTML PUBLIC "-//W3c//DTD HTML 3.01 Transitional//EN">
<html>
<head>
<title>Главная</title>
<meta http-equiv="Content-type" content="text/html" charset="windows-1251">
<meta name="keywords" content="123">
<meta name="description" content="123">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

На

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title><?php echo $sitetitle;?> - <?php echo $sitename;?></title>
<meta name="keywords" content="<?php echo $metakeywords;?>" />
<meta name="description" content="<?php echo $metadescription;?>" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="../templates/primer_1/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

Обратите внимание, что в предпоследней строчке вы должны заменить «primer_1» на название своего шаблона.

Едем дальше. Как вы видите на моем примере сверху красуется «Имя сайта», тоже самое есть и внизу, в футере. Давайте сделаем так, чтобы это «Имя сайта» стало выводится из Админки Kandidat CMS.
Для этого я вставляю <?php echo $sitename;?> куда мне необходимо.

В моем случае было:

<div>Имя сайта</div>

Стало:

<div><?php echo $sitename;?></div>

Тоже самое в футере, было:

<div class="copy">Имя сайта - 2010</div>

Стало:

<div class="copy"><?php echo $sitename;?> - 2010</div>

Теперь давайте сделаем так, чтобы левые ссылки меню выводились из cms.
Для этого я вставляю <? include("engine/menu.php"); ?> куда мне необходимо.

В моем случае было:

<div class="menu">
<ul>
    <li>Главная</li>
    <li>О нас</li>
    <li>Статьи</li>
    <li>Скачать</li>
    <li>Гостевая</li>
    <li>Связь</li>
</ul>
</div>

Стало:

<div class="menu">
            <ul>
                <? include("engine/menu.php"); ?>
            </ul>
        </div>

Обращаю ваше внимание, что <? include("engine/menu.php"); ?> находится между тегами списка  <ul></ul>. Это нужно для правильного отображения меню ссылок.

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

<?php echo $sitetitle;?> — заголовок той страницы, на которой вы находитесь
<?echo $contentcenter;?> — вывод содержимого странички
<? include("mycode/$myinclude.php"); ?> — вывод даты публикации странички, а также вывод формы обратной связи.

В моем случае было:

<div class="content">
<div class="title_content">Главная</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum imperdiet consequat. Suspendisse tincidunt elementum mauris, et consectetur augue pellentesque non. Maecenas nec magna risus. Suspendisse eleifend rutrum nibh quis rutrum. Sed tincidunt auctor sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet dolor ipsum. Nunc lobortis porttitor neque quis pellentesque. Quisque a mattis diam. Vivamus blandit molestie commodo. Donec ac tempor ipsum. Maecenas congue bibendum justo, nec fermentum dui pretium et. Vivamus commodo suscipit aliquam. Nam tortor risus, pretium a ornare elementum, pretium non erat. Pellentesque nulla nisl, pretium eget tincidunt ac, consequat sed ligula. Nulla condimentum, ipsum id auctor malesuada, leo mi vulputate metus, suscipit ornare quam massa sit amet justo.

</div>

Стало:

<div class="content">
            <div class="title_content"><?php echo $sitetitle;?></div>
            <?echo $contentcenter;?>
            <p>
            <? include("mycode/$myinclude.php"); ?>
            </p>
        </div>

Обращаю ваше внимание на то, что если вы не вставите <? include("mycode/$myinclude.php"); ?> (вывод даты публикации странички, вывод формы обратной связи), то у вас также пропадет и форма обратной связи! Не знаю зачем разработчики так связали эти две штуки, надо форум почитать.

Всё! Наш шаблон готов!

Итог.

На самом деле все намного проще, чем могло показаться.

Сначала мы сверстали страничку, затем создали пару папок, переименовали несколько файлов.
Ну а в конце «тупо» вставили php код кандидата в наш html.

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

<?php echo $sitename;?> - Имя сайта
<?php echo $metakeywords;?> - Ключевые слова страницы
<?php echo $metadescription;?> - Описание страницы
<?php echo $sitetitle;?> - Заголовок страницы
<? include("engine/menu.php"); ?> - Вывод навигации (меню)
<?echo $contentcenter;?> - Содержимое (контент) странички
<? include("mycode/$myinclude.php"); ?> - вывод даты публикации странички, а также вывод формы обратной связи

На этом всё. Желаю успеха в подгонке собственных страничек под Kandidat CMS!
PS: Критика, вопросы, пожелания приветствуются ;-)

Метки: ,

К записи оставлено 23 коммент.

Dysha | 27 02 2010

Классно придумано! ;)

Reply
3TAJIOH | 10 04 2010

Спасибо, помогло =)

Reply
Олег | 21 04 2010

Огромное спасибо, я уже хотел верстку заказывать оказалось все просто

Reply
Дмитрий | 17 06 2010

Действительно, спасибо. Я пока только разбираюсь с этой cms, пока очень нравится. Единственное, что плохо, — небольшое кол-во шаблонов. Придется адаптировать другие, поможет Ваша статья.

Reply
Александр | 29 06 2010

Спасибо большое за урок очень вовремя! Это как раз то что искал. Автору респект!

Reply
Марафонец | 15 08 2010

Дивайт, если знаком и пользовался с Zebrum Lite, можешь сказать что лучше?

Просто когда очень много сайтов на сервере, то Зебрум заставляет его идти в даун. Вот думаю помучатся с Кандидатом.

Reply
Divayth | 15 08 2010

Марафонец

Приветствую!

К сожалению не знаком с Zebrum Lite. Попробуйте поработать с kandidat, авось понравится. Удачи!

Reply
Марафонец | 15 08 2010

А как вообще ведет себя ЦМС если на хосте или сервере находиться хотя бы от 50 сайтов? Были подобные случаи? А вообще идеально по 100.

Заранее спасибо.

Reply
Казим | 03 04 2011

Видел один сайт там Кандидат стоит как способ создания сайтов визиток с их поддоменом, Пользователей за 1 000 и все пашет, но у них сервак мощный. allbiz.kz можетеиглянуть

Reply
Divayth | 16 08 2010

Марафонец

Честно говоря — понятия не имею :)

По идеи ничего ужасного быть не должно.

А лучше всего поспрашивать здесь forum.kan-studio.ru/index.php

Reply
Divayth | 20 08 2010

Гадкий WordPress, почему то, съел часть html и php тегов из инструкции. Восстановил, благо страничка сохранена в Yaше :-) Жаль, что заметил это поздновато.

Reply
Robi | 16 09 2010

Спасибо! Правда инструкция чуть громоздкой показалась, тяжело переваривать)))

Reply
андрей | 03 11 2010

Подскажите, а как сделать шаблон ,если у меня гл. страница одного вида, а внутряки другого?

Reply
Divayth | 04 11 2010

Андрей

Эту задачу я решал правкой файла index.php в корне самого сайта.

Открываем index.php.

Там находим строчку

$template=myconfig("template");

Сразу после нее добавляем строку

if ($whatpage=='') { $template='schablon'; }

— где schablon — название шаблона, который будет на ГЛАВНОЙ странице.

Для остальных страниц сайта шаблон выставляется в админке Kandidat CMS.

Папки с шаблонами должны находится в стандартной директории системы, тобишь в templates.

Reply
Dysha | 09 11 2010

Есть другой вариант реализации этого:

Существует сборка от пользователя проекта kan-studio.ru, It!

В админ-панели всего-лишь указываешь название своего задаваемого шаблона и вот, готово! :)

Reply
Александр | 11 12 2010

Спасибо за совет по созданию шаблонов. Кстати, вот этот генератор html шаблонов позволяет создавать шаблоны для сайтов одним нажатием кнопки мыши.

softwebstudio.ru/bbm/go/casher/p/template

Очень удобная программа. И переделывать потом шаблоны под cms проще чем начинать делать их с нуля.

Reply
Альберт | 20 02 2011

А как быть,если html-страничка сделана в редакторе FrontPage и файла style.css не существует.Как такую страничку превратить в шаблон?

Reply
Divayth | 21 02 2011

Наличие файла style.css не обязательно. Делаете все тоже самое игнорируя действия касающиеся style.css

Reply
Школьный сайт - Блог Владислава Томина про Интернет и не только :-) | 12 04 2011

[...] Порывшись в стандартном шаблоне дизайна, раскопал коды подключения различных модулей и затем вставил их в свой дизайн. Установил удобный [...]

Reply
Aleksei | 19 06 2011

вот коллекция из 60 скриптов CMS, есть из чего выбирать, есть простые есть и навороченные!))

скачать

Reply
2is | 05 07 2011

Divayth Большое тебе человеческое спасибо... После прочтения твоего мануала + скачки пары твоих простеньких шаблонов и изучения их кодов... Я махом нарисовал в Шопе шаблон нарезал его... С генерировал заготовку на сайте HTML + CSS генератор... Однотипную графику сжал до пиксела зарепитил и т.д. Кароче заверстал все махом все красиво все работает... Еслиб не ты дык век бы мучился )

Reply
Divayth | 08 07 2011

Пожалуйста. Рад что статейка пригодилась)

Reply
Максим | 25 07 2011

О! А я голову себе ломал, что не так в шаблоне-то!??? Не отображается гостевая и форма обратной связи! Теперь понял! Спасибо!

Reply


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