Каковы стандартные теги идентификаторов/классов CSS администратора?
Есть ли список идентификаторов/классов CSS WordPress, которые я могу использовать для создания экранов опций плагинов, которые больше похожи на обычную страницу опций WordPress? Я нашел некоторые из них по счастливой случайности, но было бы неплохо иметь список.
Примером может служить этот класс: кнопка-первичный, который делает кнопку похожей на эту:
6 answers
Мы работаем над обновлением http://dotorgstyleguide.wordpress.com / чтобы получить больше этой информации и отразить обновления стиля, начиная с 3.2.
Кроме этого, я видел плагин (который в настоящее время не могу найти), который показывает своего рода демонстрационную страницу, на которой отображаются различные селекторы CSS и как они выглядят, но я считаю, что он устарел. Кроме этого, вашим лучшим вариантом на данный момент может быть просто запустить Firebug/веб-инспектор и взглянуть на wp-администратор/css/wp-администратор.dev.css.
Установите этот плагин, и вы увидите все элементы, классы и идентификаторы https://github.com/bueltge/WordPress-Admin-Style
* Примечание: Для лицевой стороны - Вот список, который я извлек после множества исследований и разработок в стилях css wordpress по умолчанию. Я сделал все возможное, чтобы все исследовать и организовать как можно точнее. Если вы видите что-то недостающее или неполное, пожалуйста, напишите в комментариях. Я надеюсь, что это поможет вам разработать нужные плагины и темы *
/* WP WYSIWYG Editor Styles */
.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 {}
/* WP CSS - Miscellaneous Styles */
/* category links */
li.categories {}
li.cat-item {}
li.cat-item-{id} {}
li.current-cat {}
li.current-cat-parent {}
ul.children {}
/* blogroll links */
.linkcat {}
.blogroll {}
/* read-more links */
.more-link {}
/* WP CSS - Page Listings */
.pagenav {} /* outermost list item */
.page_item {} /* any page item */
.page-item-{id} {} /* specific page id */
.current_page_item {} /* current page */
.current_page_parent {} /* parent of current page */
.current_page_ancestor {} /* any ancestor of current page */
.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 {}
/* WP CSS - Default WordPress Widgets */
.widget {}
/* links widget */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
/* meta widget */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
/* pages widget */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
/* recent-posts widget */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
/* archives widget */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
/* tag-cloud widget */
.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 {}
/* calendar widget */
.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 {}
/* category widget */
.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 {}
/* recent-comments widget */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
/* search widget */
#searchform {}
.widget_search {}
.screen-reader-text {}
/* text widget */
.textwidget {}
.widget_text {}
.textwidget p {}
/* WP CSS - Comment Styles */
.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 {}
/* WP CSS - body_class() */
.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) {}
/* WP CSS - post_class() */
.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}
Серверная часть WordPress действительно создала классы "тела". Я никогда нигде не видел, чтобы они были явно задокументированы (хотя я вполне мог это пропустить). Вы можете увидеть их и то, как они генерируются в 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">Your content.</div>
Это активирует стандартный CSS серверной части администратора WordPress, чтобы ваша пользовательская страница администратора выглядела нормально. В этом случае другие дивы будут автоматически обрабатываться 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(){
//Prints out the HTML into the output buffer:
echo '<div class = "wrap"><h1 class = "wp-heading-inline">This looks good, finally!</h1></div>';
}
}
Вот еще одна интересная статья , в которой содержится достойный список всех доступных классов css/разметки html, которые можно использовать для оформления страницы администратора. Статьи немного устарели в том смысле, что в них показаны результаты стилизации из более старой версии WordPress, поэтому вполне вероятно, что с тех пор были добавлены дополнительные классы.
Еще одним полезным ресурсом являются WordPress дашиконы.
Тем не менее, я должен поздравить @бюлтге с его отличным плагин, перечисленный ниже, который отлично справляется с сохранением обновленной ссылки на стили администратора.