Переезд, структура тем оформления WordPress, их редактирование и слоевой дизайн

Очень часто проще создать новое нежели переделывать уже существующее. На старом сайте накопилось множество мелких глюков, недоработок, неправильных системных решений и записей совсем не соответствующих желаемому мной сейчас. По сумме размышлений я решил отправить «Домик на краю бездны» в забвение и построить новое жилье в сети, оставив только нужное и важное. Свои статьи, рассказы и переводы перед переносом я переписываю, читать их имеет смысл. Занятно что разбирая старые тексты нередко ужасаюсь их кривости. Надеюсь нынешние не вызовут подобных ощущений через пару лет.

Оформление сайта решил переделать с нуля, ибо сколько не ставил чужих тем — всегда что-то не устраивает. Взял книжки по PHP и сайт по CSS, ибо эти две технологии лежат в основе современных сайтов и взялся осваивать веб-дизайн и редактирование тем для WordPress. Оказалось нет так и сложно, зато очень интересно. Опишу основные моменты из того что узнал и про темы WordPress и слоевой дизайн который в них используется. Дальше подробный рассказ с картинками.

Основу сайта составляет так называемый движок или CMS (content management system — система управления содержанием) WordPress, иначе говоря написанная на php программа что работает на сервере и обеспечивает вывод страниц, регистрацию-авторизацию пользователей, рассылку оповещений по почте и кучу других полезных вещей. Исходный код у нее свободный и распространяется по лицензии GPL полностью бесплатна и разрешая изменять себя по желанию пользователя. При этом WordPress очень хороший движок, недаром на нем построено большинство самостоятельных дневников в сети. Среди прочего это означает часто меняемые вещи вынесены в отдельные модули. Дизайн — в темы оформления.

Так из его же состоит оформление сайта? Ответ обескураживающе прост — из прямоугольников. Слоевой дизайн подразумевает что сайт составляется из прямоугольных блоков которые могут накладываться один на другой, образуя те самые слои. К ним добавляются картинки, прописывается фон, граница, цвет и шрифт текста, определяется взаимное местоположение — и все, хотя само собой хватает своих тонкостей. Чтобы не быть голословным проиллюстрирую свои слова на примере того что недавно сделал, благо структура у большинства тем оформления 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 но ничего невозможного нет. Надеюсь вышеописанное пригодится.

Похожие записи:

  1. Про дизайн и выбор галереи для сайта/дневника
  2. Обновил дизайн сайта
  3. Простое и быстрое редактирование фотографий в XnView — изменение формата и размера, обрезка, поворот
  4. Обновление сайта
  5. Достоинства и недостатки самостоятельного дневника
  6. Мудрейшая польская поговорка
  7. Ремонт сайта и прекрасные мечты
  8. Про выбор читалки для новостей (RSS) и FeedReader
  9. Почему нет ни одного нормального браузера?
  10. В ЖЖ не бордель, в ЖЖ бардак
  11. Что такое базы данных
  12. Про службу хранения заметок Evernote

Список похожих постов предоставлен вам плагином YARPP.

Запись опубликована в рубрике Компьютеры, программирование. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>