Создаем шаблон для сайта

24 ноября 2008 | 14 комментариев

Шаблон сайта – «одёжка», по которой его встречают.
Один из признаков хорошего сайта – хороший шаблон.

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

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

На создание такого шаблона ушло всего несколько минут:

Делается это так:

1. Находим в интернете сайт с бесплатными шаблонами, который позволяет просматривать установленный шаблон (предпросмотр) перед скачиванием.

2. Открываем страницу «предпросмотра». Кликаем правой кнопкой мыши на странице и выбираем пенкт меню «Исходный код страницы» (»Просмотр HTML-кода»). Открывается окно, в котором виден код страницы.

3. Копируем весь HTML-код страницы предпросмотра (Ctrl+A, Ctrl+C) и вставляем в файл template.php нашего шаблона.

4. Находим в коде «шапки» страницы URL файла стилей (http://*/style.css), копируем этот URL и скачиваем себе файл стилей этого шаблона. Сохраняем файл в папке нашего шаблона.

5. Находим в файле стилей все адреса картинок шаблона (.png, .gif, .jpg) и скачиваем себе эти картинки в папку /images/.

6. Открываем файл template.php в каком-нибудь редакторе и удаляем все лишнее. Проставляем в нужных местах метки вывода контента и меню, прописываем название сайта. Сохраняем.

7. Корректируем пути к изображениям в файле стилей (можно прописывать images/filename.jpg, если изображения находятся в папке images, а файл стилей в корне темы сайта) и в шаблоне (можно указывать ~ztpl/images/filename.jpg).

8. Если необходимо, настраиваем внешний вид виджетов в файле functions.php нашего шаблона.

Для этого можно указать дополнительные параметры при создании сайдбара.

Например, чтобы виджеты не выводились в виде списка можно использовать следующие параметры:

$sidebar = new zsidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>'
));

а в шаблоне указать вывод виджетов следующим образом:

<div id="sidebar">
<?php zsidebarmanager::displaySidebar(1); ?>
</div>

Все готово. :)

Шаблон, который показан на скриншоте, можно скачать.

Zebrum CMS – быстрое создание и удобное управление многими сайтами.
Купи сейчас, пока ты медлишь, другие уже делают сайты и зарабатывают.

Теги: ,

  • Zebrum

    Петр, в Zebrum CMS есть парсер шаблонов, поэтому создание шаблона не потребует много времени.

  • Любопытная система, надо будет попробовать.
    Сейчас смотрю шаблоны - на вид, как на WP. если потребуется интеграция - правки вордпресовского шаблона будут существенными?

  • Zebrum

    Amistad, напишите на support@zebrum.ru

  • Amistad

    изображения сохранял в папку images, в файле стилей ничего не менял,т.е. пути к из-м остались прежние

  • Amistad

    нефига не получилось,когда открываю полученный сайт,нет изображений(фон,шапка и т.д.)

  • Amistad

    спасибо,получилось

  • Zebrum

    Там в шаблоне указаны разные файлы стилей для разных браузеров.
    Файлы стилей имеют расширение .css, поищите их в шаблоне.
    Основной файл стилей там - домен.com/css/main.css

  • Amistad

    Не получается,нашел в коде
    !--[if IE]>--

    покажите где здесь ссылка чтобы скачать файл стилей этого шаблона.

  • Zebrum

    Amistad, ссылка на файл стилей там есть.
    Просто название файла не style.css, а main.css (/css/main.css)

  • Amistad

    не получается 4-ый шак :Находим в коде “шапки” страницы URL файла стилей (http://*/style.css), копируем этот URL и скачиваем себе файл стилей этого шаблона. Сохраняем файл в папке нашего шаблона.

    вот сайт ***.com там в коде нет URL файла стилей

  • А зачем такие сложности? Просто скачайте шаблон. В папке шаблона будут и файл стилей и файлы изображений. Пунктами 4 и 5 в таком случае можно пренебречь.

  • kan

    Даже я наверное смогу:)!
    Очень вродь просто, попробую на практике!

  • 2Garin

    там делов на 5 минут. переделать любой шаблон под зебрум не проблема!

  • В дополнение к посту могу сказать, что о том, где брать готовые дизайны: http://nevkontakte.org.ru/b...

blog comments powered by Disqus