Шпаргалка по стандартным стилям CSS для начинающих
Стандартные стили для класса Body
Одна из самых замечательных вещей в WordPress — его настраиваемость. Он позволяет кастомизировать очень тонкие моменты вашего сайта с помощью CSS. Один из способов сделать это — добавить собственные классы к различным элементам вашего блога. Наиболее важный из них — это тег < body >. Вот несколько примеров общих классов, которые 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”). И уже внутри него вы стилизируете остальные элементы списка.
Стандартные стили визуального (WISIWYG) редактора
Визуальный редактор — одна из наиболее популярных и наиболее используемых фич WordPress. Именно поэтому хорошей идеей будет иметь список стилей, которые пользователь может добавить в свой блог, типа изображений или цитаты. Следующие CSS покажут вам, какие классы WordPress автоматически добавляет к этим элементам:
.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}
.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}
.wp-smiley {}
blockquote.left {}
blockquote.right {}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}
.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}
Вы видите, что тут несколько классов, которые относятся только лишь к изображениям. Если, например, пользователь решит вставить изображение, выравненное по левому краю, то WordPress добавит ему класс “alignleft”.
Стандартные стили виджетов WordPress
Виджеты — еще одна популярная фича WordPress. Как разработчик, вы должны контролировать, какие виджеты будут присутствовать в теме, поэтому вы должны знать какие конкретно стили нужно добавить.
.widget {}
#searchform {}
.widget_search {}
.screen-reader-text {}
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
.textwidget {}
.widget_text {}
.textwidget p {}
В процессе стилизации виджетов вы столкнетесь с тем, что придется прописывать одинаковые стили снова и снова. По этой причине будет хорошей идеей скомбинировать классы в таблице стилей через запятую. Например, вы можете скомбинировать .widget_pages ul и .widget_archive ul вот таким способом:
.widget_pages ul, .widget_archive ul {}
Стандартные стили формы комментирования
Уродливый вид стандартных комментариев можно с легкостью изменить с помощью чувства стиля, CSS и стандартных стилей формы комментирования. Если вам не нужны древовидные комментарии, то можно игнорировать их стили.
/*Вывод комментариев*/
.commentlist .reply {}
.commentlist .reply a {}
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}
#cancel-comment-reply {}
#cancel-comment-reply a {}
/*Форма комментирования */
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit
В виду того, что это только шпаргалка, реальное количество классов и ID намного больше.
