Шпаргалка по стандартным стилям CSS для начинающих. Часть 1

Когда-то кто-то…. Наверняка каждый из вас однажды задавался целью стилизировать определенные элементы WordPress темы «под себя». Естественно, сделать это можно легко, зная какие классы нужно отредактировать, однако ведь не все темы используют стандартные классы. Так то оно так, однако определенные CSS классы и ID все таки генерируются именно WordPress. Если вы собрались редактировать тему, или собираетесь создать одну на суд общества, то вот вам несколько элементов стилей, которые стОит учесть при анализе и редактировании style.css.

Цель данной шпаргалки — помочь новичкам в изучении тем ВП. Если же вы такой новичок, который не хочет связываться с кодом, то вам стОит взглянуть в направлении фреймфорков (например, Headway) где всё можно сделать «под себя» простым перетаскиванием. Для остальных же мы пройдемся по некоторым наиболее важным стандартным стилям WordPress.

Стандартные стили для класса Body

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

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(имя-пользователя) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(имя файла шаблона) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(номер страницы) {}
.single-paged-(номер страницы) {}
.page-paged-(номер страницы) {}
.category-paged-(номер страницы) {}
.tag-paged-(номер страницы) {}
.date-paged-(номер страницы) {}
.author-paged-(номер страницы) {}
.search-paged-(номер страницы) {}

Если, например, вы захотите оформить вашу страницу результатов поиска, то можете использовать класс “search-results” для добавления своего оформления. WordPress добавляет этот класс к тегу body только тогда, когда активна страница результатов поиска, поэтому не затрагиваются остальные страницы.

Стандартные стили записей

Как и в случае с элементом body, WordPress добавляет динамические классы к элементам записи. Вот список наиболее популярных из них:

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

И снова, WordPress добавляет динамические классы к вашим записям, используя функцию post_class (), которая позволяет вам создавать свои собственные стили для каждого формата. Функция post_class () добавит класс в виде “.format-foo”, где foo — любой выбранный вами формат записи (например, галерея, изображение и т.д.)

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Стандартные стили меню

В нашей статье под названием как стилизировать меню в WordPress мы обсуждали как добавить собственный класс к вашем меню. Мы будем считать, что вы прочли ту статью и то, что вы дали своему классу меню имя “main-menu”.

#header .main-menu{}           /* контейнер */
#header .main-menu ul {}       /* первый неупорядоченный список */
#header .main-menu ul ul {}    /* неупорядоченный список в неупорядоченном списке */
#header .main-menu li {}       /* пункт списка */
#header .main-menu li a {}     /* ссылка в пункте списка */
#header .main-menu li ul {}    /* вложенный список в пункте списка */
#header .main-menu li li {}    /* выпадающий элемент навигации */
#header .main-menu li li a {}  /* анкор выпадающего элемента */


.current_page_item{}           /* Класс для текущей страницы */
.current-cat{}                 /* Класс для текущей рубрики */
.current-menu-item{}           /* Класс для любого другого текущего пункта меню */
.menu-item-type-taxonomy{}     /* Класс для таксономии */
.menu-item-type-post_type{}    /* Класс для страницы */
.menu-item-type-custom{}       /* Класс для любого пользовательского элемента, который был добавлен */
.menu-item-home{}              /* Класс для элемента, ведущего на главную страницу блога */

Обратите внимание, что каждый раз при создании меню в WordPress оно автоматически оборачивается в контейнер (div). Этот div имеет только имя класса, если вы его указали (мы выбрали “main-menu”). И уже внутри него вы стилизируете остальные элементы списка.

Продолжение статьи
Шпаргалка по стандартным стилям CSS для начинающих. Часть 2
Шпаргалка по стандартным стилям CSS для начинающих. Часть 3