Очень часто проще создать новое нежели переделывать уже существующее. На старом сайте накопилось множество мелких глюков, недоработок, неправильных системных решений и записей совсем не соответствующих желаемому мной сейчас. По сумме размышлений я решил отправить «Домик на краю бездны» в забвение и построить новое жилье в сети, оставив только нужное и важное. Свои статьи, рассказы и переводы перед переносом я переписываю, читать их имеет смысл. Занятно что разбирая старые тексты нередко ужасаюсь их кривости. Надеюсь нынешние не вызовут подобных ощущений через пару лет.
Оформление сайта решил переделать с нуля, ибо сколько не ставил чужих тем – всегда что-то не устраивает. Взял книжки по PHP и сайт по CSS, ибо эти две технологии лежат в основе современных сайтов и взялся осваивать веб-дизайн и редактирование тем для WordPress. Оказалось нет так и сложно, зато очень интересно. Опишу основные моменты из того что узнал и про темы WordPress и слоевой дизайн который в них используется. Дальше подробный рассказ с картинками.
Основу сайта составляет так называемый движок или CMS (content management system – система управления содержанием) WordPress, иначе говоря написанная на php программа что работает на сервере и обеспечивает вывод страниц, регистрацию-авторизацию пользователей, рассылку оповещений по почте и кучу других полезных вещей. Исходный код у нее свободный и распространяется по лицензии GPL полностью бесплатна и разрешая изменять себя по желанию пользователя. При этом WordPress очень хороший движок, недаром на нем построено большинство самостоятельных дневников в сети. Среди прочего это означает часто меняемые вещи вынесены в отдельные модули. Дизайн – в темы оформления.
Так из его же состоит оформление сайта? Ответ обескураживающе прост – из прямоугольников. Слоевой дизайн подразумевает что сайт составляется из прямоугольных блоков которые могут накладываться один на другой, образуя те самые слои. К ним добавляются картинки, прописывается фон, граница, цвет и шрифт текста, определяется взаимное местоположение – и все, хотя само собой хватает своих тонкостей. Чтобы не быть голословным проиллюстрирую свои слова на примере того что недавно сделал, благо структура у большинства тем оформления WordPress общая.
1 – основной блок относительно которого задается позиция всех остальных. Как правило невидимый.
2 – шапка или верхний колонтитул сайта, там может быть картинка, я обошелся без нее
3 – основа любого дневника это набор записей выводящихся в хронологическом порядке. То есть по сути лента новостей. Отдельные новости выводятся внутри этого блока, сам он как правило тоже невидимый.
4 – боковая панель где располагается панель для управления сайтом, навигации по нему и прочие полезности что должны отображаться на каждой странице. Совсем не обязательно одна и расположена слева, просто мне так нравится.
5 – навигационный блок где располагаются метки и ссылки на следующую/предыдущую страницу, этот элемент в нынешним виде добавил сам, хотя на изобретение не претендую.
6 – собственно блок где выводится содержимое записи, например этой 
7 – так называемый подвал или нижний колонтитул.
Вот и все! Теперь вы легко можете увидеть эти элементы в разнообразных комбинациях и вариантах на подавляющем большинстве сайтов. )
С помощью php задается только их число, порядок вывода и определяется какой внутри какого находится.
Все остальное описывается с помощью CSS – каскадных таблиц стилей (Cascading Style Sheets), множество параметров – высота, ширина, обтекание, граница, фон, цвет текста, шрифт, отступ и так далее.
Например чтобы сделать двойную рамку для шапки сайта я прописал в таблицах стилей для ее блока следующее border: 4px double black; – то есть граница есть, толщина 4 пикселя, стиль – двойная линия, цвет черный.
И немного конкретики именно по темам оформления WordPress.
Все файлы относящиеся к теме хранятся в ее папке. Делятся они на три категории – картинки, стили и шаблоны. Ну еще файл локализации может быть и встроенные в тему расширения, последнее не рекомендуется. С картинками думаю все понятно, таблицы стилей как правило хранятся в одном файле для всех блоков style.css.
А вот с шаблонами интересней. По сути это часть программного кода WordPress на языке PHP вынесенная для удобства изменения в папку темы. Подробную информацию на английском можно найти на соответствующей странице кодекса WordPress, но базовая структура состоит из нескольких файлов.
index.php – задает вид главной страницы, структуру которой я разрисовал выше. Файлы задающие структур других частей включаются в него специальными функциями WordPress в духе get_header() для шапки. В купе со style.css составляет минимальный набор, файлов без которых тема существовать не может.
header.php - описывает структуру шапки
sidebar.php – боковой панели управления (side – боковая, bar – панель)
footer.php – подвал
comments.php – комментарии включая форму их написания
single.php – описывает отображение отдельной записи
page.php – описывает отображение отдельной страницы
comments-popup.php – это хитрый шаблон который не используется уже много лет но теоретически описывает комментарии выводимые во всплывающем окне, последнее считается крайне дурным тоном в веб-дизайне по многим причинам. Про него потом расскажу отдельную историю.
Чтобы все это редактировать и писать свое надо знать основы php и хорошо разбираться в CSS но ничего невозможного нет. Надеюсь вышеописанное пригодится.
Похожие записи:
- Про дизайн и выбор галереи для сайта/дневника
- Обновление сайта
- Простое и быстрое редактирование фотографий в XnView – изменение формата и размера, обрезка, поворот
- Мудрейшая польская поговорка
- Секретные коды Windows 7
- Что такое базы данных
- Про выбор читалки для новостей (RSS) и FeedReader
Список похожих постов предоставлен вам плагином YARPP.