सीएसएस आईडी / कक्षा टैग मानक मानक क्या हैं?

Question

क्या वर्डप्रेस सीएसएस आईडी / कक्षाओं की एक सूची है जो मैं प्लगइन विकल्प स्क्रीन बनाने के लिए उपयोग कर सकता हूं जो सामान्य वर्डप्रेस विकल्प पृष्ठ की तरह दिखते हैं और महसूस करते हैं? मैं सीरपेंडिटी के माध्यम से कुछ पाया है, लेकिन यह एक सूची पर एहसान करने के लिए अच्छा होता।

एक उदाहरण यह वर्ग है: बटन-प्राथमिक जो एक बटन को इस तरह दिखता है:

Comments

यह बस वर्डप्रेस में एक मानक सहेजें बटन की तरह दिखता है। अगर मुझे तस्वीर पोस्ट करने के लिए पर्याप्त प्रतिष्ठा मिली, तो बस 2 अंक गायब हैं :)

— ओले हेनरिक स्कोगस्ट्रॉम

अब आपको 13 कारण मिल गए हैं यह एक अच्छा सवाल है: D

— mor7ifer

नमस्ते वहाँ ... एक समाधान दे im लेकिन जो इस प्रश्न के लिए बिल्कुल प्रासंगिक नहीं है, लेकिन यह वेब विकास के लिए बहुत उपयोगी है। यहां वेब डेवलपर टूल है जो वेब पेज की प्रत्येक जानकारी को दिखाता है। कृपया इसे इस लिंक से डाउनलोड करें: chrispederick.com/work/web-developer यह एक फायरबग एडऑन के रूप में स्थापित होगा और आप इसे बहुत आसानी से उपयोग कर सकते हैं।

— w3uiguru

अच्छा लग रहा है @ हप्प्यसिंह बीमार इसे देखो, अच्छे देव उपकरण हमेशा काम करते हैं :)

— ओले हेनरिक स्कोगस्ट्रॉम

Answer 1

हम http://dotorgstyleguide.wordpress.com/ को अपडेट करने पर काम कर रहे हैं ताकि इस जानकारी का अधिक उपयोग किया जा सके और 3.2 से शैली अपडेट को प्रतिबिंबित किया जा सके।

इसके अलावा, मैंने एक प्लगइन देखा है (जो मैं वर्तमान में पता नहीं लगा सकता हूं) जो विभिन्न प्रकार के सीएसएस चयनकर्ताओं को प्रदर्शित करता है और वे जो दिखते हैं उसका एक डेमो पृष्ठ दिखाता है, लेकिन मेरा मानना ​​है कि यह पुराना था। इसके अलावा, अब के लिए आपका सबसे अच्छा विकल्प सिर्फ फायरबग / वेब इंस्पेक्टर को आग लगाना और wp-admin / css / wp-admin.dev.css पर एक नज़र रखना हो सकता है।

Comments

धन्यवाद, मैंने अब तक किए गए कुछ छोटे कामों पर फायरबग समाधान का उपयोग किया है। यह ठीक काम करता है, लेकिन Id कुछ और पसंद करते हैं जैसे दो सूची उदाहरण जो मुझे आपसे मिले थे और @bultge :) धन्यवाद!

— ओले हेनरिक स्कोगस्ट्रोम

इस साइट की सामग्री अब काफी पुरानी है।

— बर्गी

Answer 2

इस प्लगइन स्थापित करें और आप सभी तत्वों को देखते हैं, वर्ग और आईडी https://github.com/bueltge/WordPress-Admin-Style

Comments

अच्छा! यह एक अच्छी सूची है, बस कुछ को परखने की जरूरत है। अधिक उत्तर और सुझावों के लिए भी उम्मीद है :) जल्द ही एक उत्तर चुनें!

— ओले हेनरिक स्कोस्ट्रॉसम

Answer 3

* नोट: फ्रंटेंड पक्ष के लिए - यहां वह सूची है जो मैंने वर्डप्रेस डिफ़ॉल्ट सीएसएस शैलियों में बहुत सारे आर एंड डी के बाद निकाली है। मैंने हर चीज पर शोध करने और हर चीज को यथासंभव सटीक रूप से व्यवस्थित करने की पूरी कोशिश की। यदि आपको कुछ भी याद आ रहा है या अधूरा दिखाई दे रहा है, तो कृपया टिप्पणियों में लिखें। मुझे आशा है कि यह आपके वांछित प्लगइन्स और थीम को विकसित करने में आपकी मदद कर सकता है *

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

Comments

मैं वास्तव में आपकी सूची को नहीं समझता, क्या यह खाली आईडी / कक्षाओं की सूची है ताकि मैं स्वयं वर्डप्रेस सीएसएस शैली को अनुकूलित कर सकूं?

— ओले हेनरिक स्कोगस्ट्रोम

यह छवियों के लिए सभी वर्गों की सूची है, यदि आप इसे सामग्री में विभिन्न तरीकों से शामिल करते हैं; फ्लोट के माध्यम से लेफ़्ट या राइट और इसी तरह संरेखित करना। मुझे लगता है कि वेब में एक पोस्ट से केवल एक प्रति है?

— बुलेटी

Answer 4

वर्डप्रेस बैकएंड ने "बॉडी" कक्षाएं उत्पन्न की हैं। मैंने कभी भी इन्हें कहीं भी स्पष्ट रूप से प्रलेखित नहीं देखा है (हालांकि मैं इसे अच्छी तरह से याद कर सकता था)। आप उन्हें देख सकते हैं और वे admin-header.phpस्रोत में कैसे उत्पन्न होते हैं ।

उत्पन्न वर्ग सामने वाले के समान हैं:

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

Answer 5

मुझे यह सवाल मिला क्योंकि मैं add_menu_page () का उपयोग करके एक कस्टम व्यवस्थापक पृष्ठ बना रहा था । आप अपनी सामग्री को बीच रखना चाहते हैं

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

यह मानक WordPress admin backend CSS को सक्रिय करेगा ताकि आपका कस्टम व्यवस्थापक पृष्ठ सामान्य दिखे। अन्य divs इस मामले में स्वचालित रूप से वर्डप्रेस द्वारा नियंत्रित किया जाएगा।

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

Answer 6

यहाँ एक और दिलचस्प लेख है जो सभी उपलब्ध सीएसएस कक्षाओं / HTML मार्कअप को सूचीबद्ध करने का एक अच्छा काम करता है जो एक व्यवस्थापक पृष्ठ को स्टाइल करने में उपयोग कर सकता है। लेख थोड़ा पुराना है कि यह वर्डप्रेस के पुराने संस्करण से स्टाइलिंग परिणाम दिखाता है, इसलिए इसकी संभावना है कि अतिरिक्त कक्षाएं जोड़ी गई हैं।

एक अन्य उपयोगी संसाधन वर्डप्रेस डैशिशन्स हैं ।

हालाँकि, मुझे नीचे सूचीबद्ध उनके उत्कृष्ट प्लगइन पर @ bueltge को बधाई देना है, जो व्यवस्थापक शैलियों के अद्यतन संदर्भ को रखने का एक बड़ा काम करता है।