Các thẻ CSS / thẻ quản trị viên tiêu chuẩn là gì?

Có một danh sách các id / lớp WordPress CSS mà tôi có thể sử dụng để xây dựng các màn hình tùy chọn plugin trông và cảm thấy giống như một trang tùy chọn WordPress bình thường không? tôi đã tìm thấy một số thông qua serendipity nhưng thật tuyệt khi có một danh sách.

Một ví dụ là lớp này: button-sơ cấp Làm cho một nút trông như thế này:

Chúng tôi đang làm việc để cập nhật http://dotorgstyleguide.wordpress.com/ để có thêm thông tin này và phản ánh các cập nhật kiểu từ 3.2.

Ngoài ra, tôi đã thấy một plugin (mà hiện tại tôi không thể định vị được) hiển thị trang demo gồm các loại hiển thị các bộ chọn CSS khác nhau và chúng trông như thế nào, nhưng tôi tin rằng nó đã lỗi thời. Ngoài ra, tùy chọn tốt nhất của bạn bây giờ có thể là kích hoạt Firebird / Trình kiểm tra web và xem wp-admin / css / wp-admin.dev.css.

Cài đặt plugin này và bạn thấy tất cả các yếu tố, lớp và id https://github.com/bueltge/WordPress-Admin-Style

* Lưu ý: Đối với phía Frontend - Đây là danh sách mà tôi đã trích xuất sau rất nhiều R & D theo kiểu css mặc định của wordpress. Tôi đã làm hết sức mình để nghiên cứu mọi thứ và sắp xếp mọi thứ chính xác nhất có thể. Nếu bạn thấy bất cứ điều gì thiếu hoặc không đầy đủ, xin vui lòng viết trong các ý kiến. Tôi hy vọng nó có thể giúp bạn phát triển các plugin và chủ đề mong muốn của bạn *

/* 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 {}

Phần phụ trợ WordPress đã tạo ra các lớp "cơ thể". Tôi chưa bao giờ thấy những tài liệu này rõ ràng ở bất cứ đâu (mặc dù tôi cũng có thể đã bỏ lỡ nó). Bạn có thể thấy chúng và cách chúng được tạo trong admin-header.phpnguồn.

Các lớp được tạo rất giống với các lớp đầu cuối:

<body class="wp-admin no-js  upload-php admin-bar branch-3-3 version-3-3-1 admin-color-fresh">

Tôi nhận được câu hỏi này vì tôi đang tạo một trang quản trị tùy chỉnh bằng add_menu_page () . Bạn sẽ muốn đặt nội dung của bạn ở giữa

<div class = "wrap">Your content.</div>

Điều này sẽ kích hoạt CSS phụ trợ quản trị viên WordPress tiêu chuẩn để trang quản trị tùy chỉnh của bạn trông bình thường. Các div khác sẽ được WordPress tự động xử lý trong trường hợp này.

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>';
    }
}

Dưới đây là một bài viết thú vị khác làm cho một công việc tốt là liệt kê tất cả các lớp css / đánh dấu html có sẵn mà người ta có thể sử dụng để tạo kiểu trang quản trị. Các bài viết hơi lỗi thời ở chỗ nó hiển thị kết quả kiểu dáng từ phiên bản cũ của WordPress, vì vậy có khả năng các lớp bổ sung đã được thêm vào kể từ đó.

Một tài nguyên hữu ích khác là các dấu gạch ngang WordPress .

Tuy nhiên, tôi phải chúc mừng @ bueltge về plugin tuyệt vời của anh ấy được liệt kê bên dưới, đây là một công việc tuyệt vời để giữ một tài liệu tham khảo cập nhật về phong cách quản trị viên.