WordPress – CSS стили которые CMS генерирует по умолчанию – шпаргалка для начинающих
Вы когда нибудь задумывались над тем, как вы могли бы оформить различные элементы темы WordPress? Ну, это варьируется от темы к теме, но есть определенные классы CSS и идентификаторы, которые генерируются WordPress по умолчанию. Если вы тот, кто пытается стилизовать тему или хочет создать тему для публичного выпуска, то вот некоторые элементы стилей, которые, возможно, Вы захотите добавить в свою тему.
Цель этой шпаргалки – помочь новичкам, которые хотят погрузиться в стилизацию тем WordPress.
Стили класса тела по умолчанию
Одной из замечательных особенностей WordPress является его настраиваемость. Это позволяет вам ориентироваться на очень специфические аспекты вашего сайта с помощью CSS. Один из способов сделать это – добавить пользовательские классы в различные элементы вашего блога. Наиболее важным из них является тег . Вот несколько примеров общих классов, которые WordPress может добавить к этому элементу:
.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}Если, например, Вы хотели бы оформить свою страницу результатов поиска особым образом, вы можете использовать класс «search-results», чтобы добавить свое оформление данному класу. WordPress добавляет этот класс в тег body только тогда, когда страница результатов поиска активна, поэтому она не влияет на другие страницы. Соответственно отталкиваясь от классов Выше Вы можете применять оформление дял уникальных страниц которые не затронут другие страницы на блоге.
Стили записей по умолчанию
Как и в случае с элементом body, WordPress также добавляет динамические классы в элементы post. Вот список некоторых из самых популярных:
.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 {}Предположим, что вы прочитали добавить свое оформление своему навигационному меню. Тогда Вам прийдут на помощь классы ниже:
#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 по умолчанию
Редактор WISWYG является одним из самых популярных и наиболее часто используемых аспектов 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. Как разработчик, Вы контролируете, какие виджеты будут отображаться, поэтому Вы обычно будете точно знать, какие стили добавить. Однако 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 {
// Здесь Ваше оформление – 0_0
}Стили формы комментариев по умолчанию
Как бы ни были “уродливы” комментарии к стилям, WordPress упрощает работу с классами по умолчанию. Однако, если вы не имеете дело с многопоточными комментариями, многие из них можно игнорировать.
/* Вывод комментариев */
.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Поскольку это всего лишь шпаргалка, есть еще много других классов и идентификаторов, которые я не смог вместить в данный пост. Если вы чувствуете, что что-то еще важно, и оно входит в этот список, пожалуйста, не стесняйтесь оставлять комментарии ниже.
Статья была переведена для блога TechBlog.SDStudio.top
Источник: wpbeginner.com