Очень часто проще создать новое нежели переделывать уже существующее. На старом сайте накопилось множество мелких глюков, недоработок, неправильных системных решений и записей совсем не соответствующих желаемому мной сейчас. По сумме размышлений я решил отправить «Домик на краю бездны» в забвение и построить новое жилье в сети, оставив только нужное и важное. Свои статьи, рассказы и переводы перед переносом я переписываю, читать их имеет смысл. Занятно что разбирая старые тексты нередко ужасаюсь их кривости. Надеюсь нынешние не вызовут подобных ощущений через пару лет.
Оформление сайта решил переделать с нуля, ибо сколько не ставил чужих тем — всегда что-то не устраивает. Взял книжки по 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 — изменение формата и размера, обрезка, поворот
- Обновление сайта
- Достоинства и недостатки самостоятельного дневника
- Мудрейшая польская поговорка
- Как изменить максимальный размер загружаемого файла в php
- Ремонт сайта и прекрасные мечты
- Почему нет ни одного нормального браузера?
- Про выбор читалки для новостей (RSS) и FeedReader
- Что такое базы данных
- Про службу хранения заметок Evernote
Список похожих постов предоставлен вам плагином YARPP.