Apa tag id / kelas admin CSS standar?

45

Apakah ada daftar id / kelas WordPress CSS yang dapat saya gunakan untuk membuat layar opsi plugin yang terlihat dan terasa lebih seperti halaman opsi WordPress normal? Saya telah menemukan beberapa melalui kebetulan tetapi akan menyenangkan untuk memiliki daftar.

Contohnya adalah kelas ini: tombol-primer Itu membuat tombol terlihat seperti ini: buttom-primer

Ole Henrik Skogstrøm
sumber
Itu hanya terlihat seperti tombol simpan standar di WordPress. Jika saya mendapatkan cukup reputasi untuk memposting gambar, hanya kehilangan 2 poin :)
Ole Henrik Skogstrøm
2
Sekarang Anda punya 13 sebab itu pertanyaan yang bagus: D
mor7ifer
1
Halo, saya memberikan solusi tetapi yang tidak relevan persis dengan pertanyaan ini tetapi sangat membantu untuk pengembangan web. Berikut adalah alat Pengembang web yang menampilkan setiap informasi dari suatu halaman web. Silakan unduh dari tautan ini: chrispederick.com/work/web-developer akan menginstalnya sebagai addeb Firebug dan Anda dapat menggunakannya dengan sangat mudah.
w3uiguru
Terlihat bagus @HappySingh sakit melihatnya, alat dev yang baik selalu berguna :)
Ole Henrik Skogstrøm

Jawaban:

15

Kami sedang berupaya memperbarui http://dotorgstyleguide.wordpress.com/ untuk mendapatkan lebih banyak informasi ini dan mencerminkan pembaruan gaya dari 3.2.

Selain itu, saya telah melihat sebuah plugin (yang saat ini saya tidak dapat menemukan) yang menunjukkan halaman demo macam yang menampilkan berbagai pemilih CSS dan seperti apa bentuknya, tapi saya yakin itu sudah ketinggalan zaman. Selain itu, opsi terbaik Anda untuk saat ini mungkin hanya menjalankan Firebug / Web Inspektur dan lihat wp-admin / css / wp-admin.dev.css.

helenhousandi
sumber
terima kasih, saya telah menggunakan solusi pembakar pada beberapa hal kecil yang telah saya lakukan sampai sekarang. Ini berfungsi dengan baik tetapi saya lebih suka sesuatu yang lebih seperti dua contoh daftar yang saya dapatkan dari Anda dan @bultge :) terima kasih!
Ole Henrik Skogstrøm
2
Konten di situs ini sekarang sudah usang.
Burgi
13

Instal plugin ini dan Anda melihat semua elemen, kelas, dan id https://github.com/bueltge/WordPress-Admin-Style

bueltge
sumber
Bagus! Ini daftar yang bagus, hanya perlu menguji beberapa. Juga berharap lebih banyak jawaban dan tip :) segera pilih jawaban!
Ole Henrik Skogstrøm
2

* Catatan: Untuk sisi Frontend - Berikut adalah daftar yang telah saya ekstrak setelah banyak R&D dalam gaya css wordpress default. Saya melakukan yang terbaik untuk meneliti segala sesuatu dan mengatur segala sesuatu seakurat mungkin. Jika Anda melihat ada yang hilang atau tidak lengkap, silakan tulis di komentar. Saya harap ini dapat membantu Anda mengembangkan plugin dan tema yang Anda inginkan *

/* 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 {}
w3uiguru
sumber
Saya tidak begitu mengerti daftar Anda, apakah ini daftar id kosong / kelas sehingga saya dapat menyesuaikan gaya WordPress CSS sendiri?
Ole Henrik Skogstrøm
ini adalah daftar semua kelas untuk gambar, jika Anda memasukkan ini dari berbagai cara dalam konten; seperti via float untuk meluruskan kebohongan atau kanan dan sebagainya. Saya pikir hanya salinan dari posting di web?
bueltge
0

Backend WordPress memang telah menghasilkan kelas "tubuh". Saya belum pernah melihat ini secara eksplisit didokumentasikan di mana saja (meskipun saya bisa saja melewatkannya). Anda dapat melihat mereka dan bagaimana mereka dihasilkan di admin-header.phpsumber.

Kelas yang dihasilkan sangat mirip dengan kelas front-end:

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

Saya sampai pada pertanyaan ini karena saya membuat halaman admin khusus menggunakan add_menu_page () . Anda akan ingin menempatkan konten Anda di antara

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

Ini akan mengaktifkan CSS backend admin standar WordPress sehingga halaman admin khusus Anda terlihat normal. Div lain akan secara otomatis ditangani oleh WordPress dalam kasus ini.

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>';
    }
}
Jim Maguire
sumber
0

Berikut ini adalah artikel menarik lainnya yang membuat pekerjaan yang layak mendaftar semua kelas css tersedia / markup html dapat digunakan dalam menata halaman admin. Artikel-artikelnya sedikit ketinggalan jaman karena menunjukkan hasil styling dari versi WordPress yang lebih lama, sehingga kemungkinan kelas tambahan telah ditambahkan sejak saat itu.

Sumber daya lain yang bermanfaat adalah dashicons WordPress .

Namun, saya harus mengucapkan selamat @ bueltge pada baik nya Plugin tercantum di bawah ini yang melakukan pekerjaan yang besar menjaga referensi diperbarui gaya admin.

Aurovrata
sumber