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

Опубликовано: 27.10.2017

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


23.2 CSS-библиотека animate.css + WOW.js

Цель данной шпаргалки — помочь новичкам в изучении тем ВП. Если же вы такой новичок, который не хочет связываться с кодом, то вам стОит взглянуть в направлении фреймфорков (например, 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 только тогда, когда активна страница результатов поиска, поэтому не затрагиваются остальные страницы.