Использование стилевых таблиц CSS в WordPress

WordPress в большой степени зависит от стилей представления CSS. Благодаря использованию тем, вы можете бесконечно экспериментировать с настройками разметки. Темы WordPress позволяют легко и быстро изменить внешний вид веб-сайта, открывая широкое поле для создания своей собственной темы и разметки страниц.
CSS расшифровывается как Cascading Style Sheets. Таблицы стилей хранят в себе информацию, связанную со стилевым представлением (разметка, цветовая гамма), отделяя его от HTML структуры. Такой подход позволяет получить четкий контроль над разметкой веб-сайта, приводит к ускорению работы веб-страниц и упрощает их обновление. В этой статье мы приведем краткое описание использования CSS в WordPress.

WordPress и CSS

Темы WordPress используют комбинацию шаблонов, тегов шаблонов и CSS файлов для генерации представления WordPress сайта.
Шаблоны. Шаблоны — это стандартные блоки, из которых состоит сайт. Структура WordPress темы такова, что header, сайдбар, основной контент и footer содержатся в отдельных файлах. Они взаимодействуют для создания страницы. Вы всегда можете изменять и настраивать стандартные блоки. К примеру, в теме по умолчанию WordPress на страницах со списком записей (на главной странице, на страницах рубрик или архивов) всегда отображается сайдбар. Однако стоит перейти на страницу с отдельной записью, как сайдбар исчезнет. Вы всегда можете определить, какие части и элементы будут показаны на вашей странице, настроить их индивидуально, чтобы ваш сайт получил уникальное представление.
Теги шаблонов. Теги шаблонов — это небольшие участки кода, представляющие собой инструкции и запросы к информации, содержащейся в базе данных WordPress. Некоторые из них могут быть легко изменены пользователем; теги шаблонов предлагают настройки даты, времени, списков и других элементов, отображаемых на вашем сайте.
Стилевые таблицы. Во всех шаблонах, из которых состоит ваш сайт, присутствуют HTML элементы, связанные с тегами шаблонов и контентом. В таблице стилей любой темы существуют правила, позволяющие управлять дизайном и разметкой каждого HTML-элемента. Благодаря этим правилам, вы можете перемещать структурные части страницы, управлять представлением заголовков и т.д. Ваш сайт может быть закреплен по центру страницы с пустым пространством слева и справа, или простираться на весь экран. Ваш сайдбар может располагаться слева или справа, или появляться при прокрутке страницы. Все это зависит только от вас и ваших предпочтений. Инструкции, относящиеся к стилизации, должны находиться в файле style.css любой темы.

Классы, генерируемые WordPress

В WordPress 2.5 были представлены некоторые классы, позволяющие устанавливать выравнивание для изображений и блочных элементов (div, p, table и т.д.). Эти классы называются aligncenter, alignleft и alignright. В дополнение к ним существует также класс alignnone, применяемый к изображениям и отменяющий любое выравнивание для них, что позволяет стилизовать их другим образом.
Те же самые классы используются и для выравнивания изображений, обладающих подписью(начиная с WordPress 2.6). Пример использования классов выравнивания и классов для изображений с подписью:

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter, div.aligncenter {
    display:block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin:0;
    max-width: 98.5%;
    padding:0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
} 

Каждая тема должна обладать этими (или подобными) стилями в style.css файле, чтобы правильно отображать изображения и подписи. Точное вхождение HTML-элементов, классов и идентификаторов зависит от структуры темы, которую вы используете.

Источник: http://codex.wordpress.org/CSS