Выберите подраздел

Скачать Scripto CMS

Скачать Scripto CMS с Github
Скачать Scripto CMS с официального сайта

Личный кабинет

Используемые технологии

PHP
MySQL
Smarty

Технические требования

Веб-сервер: Apache (с модулем mod_rewrite)

СУБД: MySQL 4.2 и выше

Версия PHP: 5.2.x и выше

Подробнее о системных требованиях

Отзывы о Scripto CMS

Павел Бычков

При выборе системы управления сайтами мы ориентировались на удобство, быстроту установки, многофункциональность, удобство интерфейса для...

Орлов Ярослав

Для начала скажу пару слов о том, как разрабатывалась SCRIPTO CMS. Далее коснемся самого отзыва и хвальбы в её честь. Движок был полностью...

Все отзывы

Пример создания шаблона

В данном разделе будет приведен пример создания шаблона для Scripto CMS. Вы можете редактировать шаблон в любом удобном для Вас редакторе, например под ОС Windows это может быть Adobe Dreamweaver , Adobe Homesite , под Mac OS к примеру Coda. Также для редактирования шаблона можно воспользоваться редактором шаблонов, входящего в состав CMS.

Изначальные условия:

В CMS добавлен один шаблон , в папке /templates/themes/default/site/index.tpl.html , работать мы будем именно с ним.

Итак, шаг первый, необходима сверстанная страница, у нас для этого будет использоваться сверстанный шаблон сайта , скачать данный шаблон Вы можете по адресу http://www.scripto-cms.ru/files/10158.zip  . Скриншот шаблона приведен на рисунке 1.

Рисунок 1. Скриншот шаблона.

В горизонтальном меню у нас будет выведена структура первого уровня меню up.

Слева, где надпись Categories будут выводится подразделы активного раздела, клик по логотипу в шапке будет вести на главную страницу сайта. Под ними будут выводиться дополнительные блоки модулей.

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

В нижней части текст COPYRIGHT… будет сделан текстовым блоком с идентификатором copyright.

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

Итак, начнем, сначала необходимо загрузить файлы шаблона на сайт:

  • Папка images , ее необходимо загрузить в папку /images/themes/sparkling/ на сайте

 

  • Style.css , данный файл необходимо скопировать  по адресу /images/themes/sparkling/css/style.css на сайте

 

  • Откройте файл index.html и скопируйте его содержимое в файл /templates/themes/default/site/index.tpl.html

У Вас должно получиться то , что представлено на рисунке 2.

Рисунок 2. Шаблон после закачки на сайт.

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

Для того , чтобы исправить это необходимо заменить все вхождения «images/» на «/images/themes/sparkling/images/» , это необходимо сделать в файле стилей /images/themes/sparkling/css/style.css , в самом шаблоне вывод изображений не был прописан.

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

Также в самом шаблоне необходимо прописать корректный путь к CSS:

Вместо

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Необходимо написать

<link href="/images/themes/sparkling/css/style.css" rel="stylesheet" type="text/css" media="screen" />

После этого шаблон примет первоначальный вид:

Рисунок 3. Шаблон после изменения пути к изображениям и файлу стилей.

Также необходимо изменить кодировку шаблона (для некоторых версий CMS) , для этого вместо кода:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Пишем

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

Теперь можно приступать к прописанию тегов CMS.

Для начала пропишем вывод Title , тегов meta description и meta keywords , для этого вместо текущего title:

<title>Sparkling    by Free CSS Templates</title>

Напишем:

<title>{if $page.title}{$page.title}{else}{$settings.caption} | {$page.caption}{/if}</title>

<meta name="description" content="{$page.meta}">

<meta name="Keywords" content="{$page.keywords}">

Данный код означает то , что если у страницы указан TITLE , то он будет показан, если нет , то будет показано название сайта и заголовок текущего раздела , например «ООО Фермер Ранчо | Главная страница»

Затем сделаем ссылкой логотип, для этого вместо кода:

<h1><a href="#"><span>Spark</span>ling  </a></h1>

Напишем следующий код:

<h1>{if $page.main_page}<span>Spark</span>ling{else}<a href="{$siteurl}"><span>Spark</span>ling </a>{/if}</h1>

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

Пропишем верхнее меню:

Для этого вместо кода

<div id="menu">

<ul>

            <li class="current_page_item"><a href="#">Home</a></li>

            <li><a href="#">Blog</a></li>

            <li><a href="#">Photos</a></li>

            <li><a href="#">About</a></li>

            <li><a href="#">Links</a></li>

            <li><a href="#">Contact</a></li>

            </ul>

</div>

Напишем цикл вывода верхнего меню первого уровня:

<div id="menu">

<ul>

                        {foreach key=key item=cat from=$rubrics.up}     

                                    {if $cat.level==1}

                                        <li{if $cat.selected} class="current_page_item"{/if}><a href="{$cat.url}">{$cat.caption}</a></li>

                                   {/if}

                {/foreach}

            </ul>

</div>

Данный код выведет структуру меню (Рис. 4) , а благодаря условию {if $cat.selected}class="current_page_item"{/if} будет выделять активный внутренний раздел (Рис. 5).

Рисунок 4. Вывод меню.

Рисунок 5. Активный пункт меню.

Пропишем также вывод подразделов слева вместо блока Categories:

Вместо кода:

<h2>Categories</h2>

<ul>

<li><a href="#">Aliquam libero</a></li>

            <li><a href="#">Consectetuer adipiscing elit</a></li>

            <li><a href="#">Metus aliquam pellentesque</a></li>

            <li><a href="#">Suspendisse iaculis mauris</a></li>

            <li><a href="#">Urnanet non molestie semper</a></li>

            <li><a href="#">Proin gravida orci porttitor</a></li>

</ul>

Напишем код:

{if $page.categories>0}

<li>

<h2>Categories</h2>

<ul>

 {foreach key=key item=cat from=$rubrics.up}     

            {if $page.id_category==$cat.id_sub_category}

                        {if $cat.selected}

                            <li><b>{$cat.caption}</b></li>

                        {else}

                            <li><a href="{$cat.url}">{$cat.caption}</a></li>

                        {/if}

            {/if}

{/foreach}

</ul>

</li>

{/if}

Данный код показывает подразделы, только если они есть у активной категории (Рис. 6).

Рисунок 6. Подразделы у активной категории

Теперь необходимо прописать вывод контента, для этого стираем все содержимое от <div id="content"> до </div> , закрывающего его (с 47 по 75 строчку) и прописываем следующий код для вывода содержимого раздела и модулей раздела:

<h1>{$page.caption}</h1>

{$content.text}

{$content.image}

{foreach key=key item=mod from=$page.modules}

            {$mod.content}

{/foreach}

{foreach key=key item=mod from=$page.static_modules}

{$mod.content}

{/foreach}

Данный код подразумевает вывод названия раздела , текстового содержимого раздела, галереи раздела (если есть) , а также модулей раздела.

Пример вывода представлен на рисунке 7.

Рисунок 7. Вывод содержимого раздела.

Теперь необходимо прописать вывод блоков, начнем с блока поиска (необходимо установить соответствующий модуль).

Для этого пропишем {$blocks.search.content} перед текущим кодом поиска:

<li><div id="search" >

            <form method="get" action="#">

<div>

            <input type="text" name="s" id="search-text" value="" />

            <input type="submit" id="search-submit" value="GO" />

</div>

</form>

</div>

<div style="clear: both;">&nbsp;</div></li>

После этого обновим страницу сайта и увидим , что дизайн блока поиска не сочетается с дизайном шаблона (Рис. 8).

Рисунок 8. Блок поиска без прописанного шаблона.

Нужно изменить дизайн вывода блока поиска, для этого нужно открыть файл /templates/admin/usermodules/search/user_block.tpl.html

Содержимое данного файла:

<form action="{$search_url}" method="post">

<table>

                        <tr>

                        <td class="left"><input type="text" class="textbox" id="sbox" name="str" value="Поиск по сайту"></td>

                        <td class="right"><input type="image" src="{$img}admin/search.jpg"></td>

                        </tr>

            </table>

</form>

Нужно прописать в данном файле дизайн блока поиска из нашего шаблона, но с переменными CMS, для этого вырезаем блок поиска из шаблона и вставляем его в файл user_block , прописав переменные:

<li>

            <div id="search" >

            <form method="get" action="{$search_url}">

                        <div>

                        <input type="text" name="str" id="search-text" value="" />

                        <input type="submit" id="search-submit" value="GO" />

                        </div>

            </form>

            </div>

            <div style="clear: both;">&nbsp;</div>

</li>                          

По сути в данном коде по сравнению с html шаблоном , изменилось 2 вещи:

  • Прописан action для формы (action="{$search_url}")

 

  • Прописано имя для текстового поля (name="str")

После этого сохраним файл и обновим страницу (Рис. 9).

Рисунок 9. Поиск по сайту.

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

Изменить вывод модуля поиск по сайту можно в файле /templates/admin/usermodules/search/user_module.tpl.html

Теперь пропишем вывод остальных блоков, которые будут автоматически выводится при установке новых модулей , их вывод будет идти под блоком подразделов, вместо текущих блоков Blogroll и Archives. Поскольку блок search у нас выводится отдельно , в цикле вывода блоков необходимо учесть это и не выводить его второй раз, поэтому код получится таким:

{foreach key=key item=block from=$blocks}

            {if $block.type.module!='' && $key!=’search’}

                        <li>

                                   <h2>{$block.caption}</h2>

                                    {$block.content}

                        </li>

            {/if}

{/foreach}

Для того , чтобы проверить работу кода , установим модуль новости, назначим вывод новостей на раздел Блог и добавим несколько новостей для примера. После этого обновите страницу (Рис. 10).


Рисунок 10. Вывод дополнительных блоков модулей.

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

/templates/admin/usermodules/news/user_block.tpl.html

И изменить его дизайн следующим образом:

Вместо:

{foreach key=key item=obj from=$block_objects}

            <div class="item">

                        <div class="item_date">{$obj.date_print}</div>

                        <div class="item_body">

                                   <p class="zag">{if $obj.content_full}<a href="{$obj.full_url}">{/if}{$obj.caption}{if $obj.content_full}</a>{/if}</p>

                                   <p>{$obj.content}</p>

                        </div>                                                                       

            </div>

{/foreach}

Написать:

<ul>

{foreach key=key item=obj from=$block_objects}

            <li>{if $obj.content_full}<a href="{$obj.full_url}">{/if}{$obj.caption}{if $obj.content_full}</a>{/if}</li>

{/foreach}

</ul>

Как мы можем увидеть , из кода было убрано вывод краткого описания , вывод изображения превью , т.к. это не предусмотрено нашим шаблоном. Обновим страницу, для того чтобы проверить результат работы (Рис. 11).

Рисунок 11. Вывод блока последние новости в дизайне шаблона.

Блок Aliquam tempus необходимо удалить совсем, для этого из шаблона вырежьте код:

<li>

<h2>Aliquam tempus</h2>

<p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p>

</li>

Теперь необходимо прописать нижний блок copyright , для этого вместо текста:

<p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/"> CSS Templates</a>.</p>

Пропишем:

{$blocks.copyright.content}

Если внимательно посмотреть шаблон, то мы увидим , что забыли прописать пути по сайту (хлебные крошки) , для этого над выводом названия текущего раздела (<h1>{$page.caption}</h1>) пропишем цикл вывода хлебных крошек:

{if !$page.main_page}

            <p>

            {foreach key=key item=pth from=$real_path}

                        {if !$pth.is_last}

                        <a href="{$pth.url}">{$pth.caption}</a>&nbsp;>&nbsp;

                        {/if}

            {/foreach}

            </p>

{/if}

Разберем данный код:

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

Рисунок 12. Вывод хлебных крошек на сайте.

Зайдем в раздел «блог» (Рис. 13) , здесь мы увидим , что прописанный нами модуль новостей выводится не в дизайне шаблона, поэтому необходимо изменить вывод новостей.

Рисунок 13. Вывод модуля новостей без дизайна.

Для этого откроем наш изначальный файл верстки и найдем код вывода записей:

<div class="post">

            <h2 class="title"><a href="#">Consecteteur hendrerit </a></h2>

            <p class="meta"><span class="date">May 10, 2010</span><span class="posted">Posted by <a href="#">Someone</a></span></p>

            <div style="clear: both;">&nbsp;</div>

            <div class="entry">

            <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.  Mauris quam enim, molestie in, rhoncus ut, lobortis a, est.</p>

            <p class="links"><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>

            </div>

</div>

Откроем файл /templates/admin/usermodules/news/user_module.tpl.html для того , чтобы изменить вывод списка новостей. На данный момент новости выводятся следующим циклом:

{foreach key=key item=obj from=$news}

<div class="object_container">

            <div class="object_picture">{if $obj.small_preview}<a href="{$obj.full_url}"><img src="{$user_thumbnails}{$obj.small_preview}" border="0"></a>

{/if}</div>

            <div class="object_description">

                        <h3><span>{$obj.date_print}</span> <a href="{$obj.full_url}">{$obj.caption}</a></h3>

<div class="small">

{$obj.content}

</div>

{if $obj.content_full}

<p><a href="{$obj.full_url}">Подробнее >></a></p>

{/if}               

            </div>

</div>

{/foreach}

Нам необходимо изменить этот цикл под дизайн нашего шаблона:

{foreach key=key item=obj from=$news}

<div class="post">

            <h2 class="title"><a href="{$obj.full_url}">{$obj.caption} </a></h2>

                        <p class="meta"><span class="date">{$obj.date_print}</span></p>

                        <div style="clear: both;">&nbsp;</div>

                                   <div class="entry">

                                   {$obj.content}

                                   <p class="links"><a href="{$obj.full_url}">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;</p>

                        </div>

</div>

{/foreach}

Обновим страницу, и посмотрим что получилось (Рис. 14).

Рисунок 14. Модуль новостей, с прописанным дизайном.

Вы можете таким же образом изменить вывод полной версии новости , за нее отвечает код:

<p><ahref="{$page.url}"><< вернуться к списку новостей</a></p>

<h2>{$news.date_print}</h2>

{if $news.middle_preview}

<img src="{$user_thumbnails}{$news.middle_preview}" border="0">

{/if}

{$news.content_full}

{if $news.author}

<p style="color:#bbbbbb;">Èñòî÷íèê: {$news.author}</p>

{/if}

{if $news.url}

<p style="color:#bbbbbb;"><a href="{$news.url}" target="_blank">прямая ссылка на новость</a></p>

{/if}

{if $news.tags}

<p>Теги новости: {$news.tags}</p>

{/if}

В том же файле.

По сути все изменения сведуться к тому, чтобы заключить этот вывод в тег <divclass=”post”> … </div>.

В качестве самостоятельной тренировки Вы можете попробовать прописать например вывод товаров в разделе продукция , для этого Вам необходимо будет поправить аналогичным образом файл /templates/admin/usermodules/products/user_module.tpl.html

Для того , чтобы все встроенные функции выводились корректно , Вам необходимо дополнить файл стилей шаблона следующими стилями:

/*form*/
.input_textbox {
        border:1px solid #8B8B8B;
        color:#8B8B8B;
        font-size:11px;
        padding:1px 4px;
        width:95%;
}
.input_textarea {
        border:1px solid #8B8B8B;
        color:#8B8B8B;
        font-size:11px;
        padding:1px 4px;
        width:95%;
        height:100px;
}
.error_input_textbox {
        border:1px solid #cb4e3d;
        color:#8B8B8B;
        font-size:11px;
        padding:1px 4px;
        width:95%;
}
.error_input_textarea {
        border:1px solid #cb4e3d;
        color:#8B8B8B;
        font-size:11px;
        padding:1px 4px;
        width:95%;
        height:100px;
}
.form_caption {
        font-weight:bold;
        padding-top:5px;
        padding-bottom:5px;
}
.pic {
        width:100%;
        height:auto !important;
        min-height:20px;
        height:20px;
        float:left;
        padding-top:10px;
        padding-bottom:10px;
        text-align:center;
}
/*objects*/
#contentbody .object_container {
        width:100%;
        height:auto !important;
        min-height:30px;
        height:30px;
        padding-bottom:7px;
        margin-bottom:10px;
        float:left;
        border-bottom:1px solid #dbdbdb;
        margin-top:10px;
}
        #contentbody .object_container h3, #contentbody .object_container h3 a, #contentbody .object_container h3 a:hover {
               font-size:12px;
               font-weight:bold;
               margin:0px;
               padding:0px;
        }
        #contentbody .object_container p {
               padding-top:2px;
               padding-bottom:3px;
        }
        .object_picture {
               width:25%;
               height:auto !important;
               min-height:30px;
               height:30px;
               float:left;
        }
               .object_picture img {
                       border:1px solid ##a6a6a6;
               }
        .object_description {
               width:73%;
               height:auto !important;
               min-height:30px;
               height:30px;           
               float:right;
               text-align:left;
        }
        .object_description_max {
               width:100%;
               height:auto !important;
               min-height:30px;
               height:30px;           
               float:right;
               text-align:left;       
        }
        #contentbody .object_container .gray {
               font-size:11px;
               color:#a6a6a6;
        }

После этого встроенные в модули блоки будут отображаться корректно.

Также, для того , чтобы работала встроенная в скрипт галерея и заложенные Java скрипты , необходимо прописать подгрузку библиотеки jQuery и встроенных библиотек, для этого используется тег {$jquery}.

Его нужно прописать сразу под тегами <meta keywords…>:

<meta name="Keywords" content="{$page.keywords}">

{$jquery}

На этом работу с шаблоном можно считать завершенной.

Готовый шаблон , Вы можете скачать по адресу: http://www.scripto-cms.ru/files/sample_template.zip