Очень часто проще создать новое нежели переделывать уже существующее. На старом сайте накопилось множество мелких глюков, недоработок, неправильных системных решений и записей совсем не соответствующих желаемому мной сейчас. По сумме размышлений я решил отправить "Домик на краю бездны" в забвение и построить новое жилье в сети, оставив только нужное и важное. Свои статьи, рассказы и переводы перед переносом я переписываю, читать их имеет смысл. Занятно что разбирая старые тексты нередко ужасаюсь их кривости. Надеюсь нынешние не вызовут подобных ощущений через пару лет.
Оформление сайта решил переделать с нуля, ибо сколько не ставил чужих тем - всегда что-то не устраивает. Взял книжки по 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 но ничего невозможного нет. Надеюсь вышеописанное пригодится.