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