Какие стандартные CSS id/классы используются в админке WordPress?
Существует ли список CSS id/классов WordPress, которые можно использовать для создания экранов настроек плагинов, чтобы они выглядели и ощущались как стандартные страницы настроек WordPress? Я нашел некоторые случайным образом, но было бы здорово иметь полный список.
Например, этот класс: button-primary Делает кнопку похожей на эту:

Мы работаем над обновлением http://dotorgstyleguide.wordpress.com/, чтобы добавить больше этой информации и отразить обновления стилей из версии 3.2.
Кроме того, я видел плагин (который сейчас не могу найти), который показывает демонстрационную страницу с различными CSS-селекторами и их визуальным представлением, но, кажется, он устарел. Пока что лучшим вариантом может быть использование Firebug/Web Inspector и изучение файла wp-admin/css/wp-admin.dev.css.

спасибо, я использовал решение с firebug для некоторых небольших задач, которые делал до сих пор. Оно работает нормально, но я бы предпочел что-то более похожее на два примера со списками, которые я получил от вас и @bultge :) спасибо!

Установите этот плагин, и вы увидите все элементы, классы и идентификаторы https://github.com/bueltge/WordPress-Admin-Style

*Примечание: Для фронтенд части - Вот список, который я составил после долгих исследований стандартных CSS стилей WordPress. Я сделал всё возможное, чтобы тщательно изучить и максимально точно систематизировать всё. Если вы заметите что-то пропущенное или неполное, пожалуйста, напишите в комментариях. Надеюсь, это поможет вам в разработке желаемых плагинов и тем *
/* Стили редактора WP WYSIWYG */
.entry-content img {
margin: 0 0 1.5em 0;
}
.alignleft, img.alignleft {
margin-right: 1.5em;
display: inline;
float: left;
}
.alignright, img.alignright {
margin-left: 1.5em;
display: inline;
float: right;
}
.aligncenter, img.aligncenter {
margin-right: auto;
margin-left: auto;
display: block;
clear: both;
}
.alignnone, img.alignnone {}
.wp-caption {
margin-bottom: 1.5em;
text-align: center;
padding-top: 5px;
}
.wp-caption img {
border: 0 none;
padding: 0;
margin: 0;
}
.wp-caption p.wp-caption-text {
line-height: 1.5;
font-size: 10px;
margin: 0;
}
.wp-smiley {
margin: 0 !important;
max-height: 1em;
}
blockquote.left {
margin-right: 20px;
text-align: right;
margin-left: 0;
width: 33%;
float: left;
}
blockquote.right {
margin-left: 20px;
text-align: left;
margin-right: 0;
width: 33%;
float: right;
}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}
.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}
/* Разные стили WordPress */
/* ссылки категорий */
li.categories {}
li.cat-item {}
li.cat-item-{id} {}
li.current-cat {}
li.current-cat-parent {}
ul.children {}
/* ссылки блогролла */
.linkcat {}
.blogroll {}
/* ссылки "читать далее" */
.more-link {}
/* Стили списка страниц WordPress */
.pagenav {} /* внешний элемент списка */
.page_item {} /* любой элемент страницы */
.page-item-{id} {} /* конкретный ID страницы */
.current_page_item {} /* текущая страница */
.current_page_parent {} /* родитель текущей страницы */
.current_page_ancestor {} /* любой предок текущей страницы */
.pagenav ul,
.pagenav .current_page_item ul,
.pagenav .current_page_ancestor ul,
.pagenav .current_page_ancestor .current_page_item ul,
.pagenav .current_page_ancestor .current_page_ancestor ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul {}
.pagenav ul ul,
.pagenav .current_page_item ul ul,
.pagenav .current_page_ancestor ul ul,
.pagenav .current_page_ancestor .current_page_item ul ul,
.pagenav .current_page_ancestor .current_page_ancestor ul ul {}
.pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul ul {}
/* Стандартные виджеты WordPress */
.widget {}
/* виджет ссылок */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
/* мета-виджет */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
/* виджет страниц */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
/* виджет последних записей */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
/* виджет архивов */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
/* виджет облака тегов */
.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 {}
/* виджет поиска */
#searchform {}
.widget_search {}
.screen-reader-text {}
/* текстовый виджет */
.textwidget {}
.widget_text {}
.textwidget p {}
/* Стили комментариев 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 {}
/* body_class() 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) {}
/* post_class() WordPress */
.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

Я не совсем понимаю ваш список, это список пустых id/классов, чтобы я мог сам настроить стили CSS в WordPress?

В WordPress в админ-панели действительно генерируются классы для тега "body". Я нигде не видел явной документации по этому поводу (хотя, возможно, просто пропустил её). Вы можете увидеть эти классы и то, как они генерируются, в исходном коде admin-header.php
.
Сгенерированные классы очень похожи на те, что используются на фронтенде:
<body class="wp-admin no-js upload-php admin-bar branch-3-3 version-3-3-1 admin-color-fresh">

Я столкнулся с этим вопросом, когда создавал собственную страницу админки с помощью add_menu_page(). Вам нужно разместить свой контент между
<div class = "wrap">Ваш контент.</div>
Это активирует стандартные CSS стили админки WordPress, чтобы ваша кастомная страница выглядела естественно. Другие div-элементы в этом случае будут автоматически обработаны WordPress.
class AdminScreen{
public function __construct(){
add_action( 'admin_menu', array( $this, 'doAddMenuPage' ) );
}
public function doAddMenuPage(){
add_menu_page( "AdminScreen", "AdminScreen", 'edit_others_pages', 'AdminScreen', array($this, 'echoAdminPage') );
}
public function echoAdminPage(){
//Выводит HTML в буфер вывода:
echo '<div class = "wrap"><h1 class = "wp-heading-inline">Теперь это выглядит правильно, наконец-то!</h1></div>';
}
}

Вот еще одна интересная статья, которая неплохо описывает все доступные CSS-классы и HTML-разметку, которые можно использовать для стилизации админ-страницы. Статья немного устарела, так как демонстрирует результаты стилизации из старых версий WordPress, поэтому вероятно, что с тех пор были добавлены новые классы.
Еще один полезный ресурс — это Dashicons в WordPress.
Однако, я должен поздравить @bueltge с его отличным плагином, представленным ниже, который отлично справляется с задачей поддержания актуальной справочной информации по стилям админки.
