Was sind die Standard-CSS-IDs / -Klassen-Tags für Administratoren?

45

Gibt es eine Liste von WordPress-CSS-IDs / -Klassen, mit denen ich Plugin-Optionsbildschirme erstellen kann, die eher wie eine normale WordPress-Optionsseite aussehen und sich anfühlen? Ich habe einige durch Zufall gefunden, aber es wäre schön gewesen, eine Liste zu haben.

Ein Beispiel ist diese Klasse: button-primary Damit sieht eine Schaltfläche folgendermaßen aus: Hintern-primär

Ole Henrik Skogstrøm
quelle
Es sieht aus wie eine normale Schaltfläche zum Speichern in WordPress. Wenn ich genug Ansehen bekomme, um das Bild zu posten, fehlen nur 2 Punkte :)
Ole Henrik Skogstrøm
2
Jetzt haben Sie 13, weil es eine gute Frage ist: D
mor7ifer
1
Hi there ... ich gebe eine Lösung, die aber nicht genau für diese Frage relevant ist, aber für die Webentwicklung sehr hilfreich ist. Hier ist das Web Developer Tool, das alle Informationen einer Webseite anzeigt. Bitte laden Sie es von diesem Link herunter: chrispederick.com/work/web-developer es wird als Firebug-Addon installiert und Sie können es sehr einfach verwenden.
w3uiguru
Sieht nett aus @HappySingh schau es dir nicht an, gute Entwicklerwerkzeuge sind immer griffbereit :)
Ole Henrik Skogstrøm

Antworten:

15

Wir arbeiten an der Aktualisierung von http://dotorgstyleguide.wordpress.com/ , um mehr von diesen Informationen zu erhalten und die Stilaktualisierungen von 3.2 wiederzugeben.

Abgesehen davon habe ich ein Plugin gesehen (das ich derzeit nicht finden kann), das eine Art Demo-Seite zeigt, auf der die verschiedenen CSS-Selektoren und deren Aussehen angezeigt werden, aber ich glaube, es war veraltet. Abgesehen davon ist es möglicherweise die beste Option, Firebug / Web Inspector zu starten und sich die Datei wp-admin / css / wp-admin.dev.css anzuschauen.

helenhousandi
quelle
danke, ich habe die firebug-lösung für einige kleine dinge verwendet, die ich bis jetzt gemacht habe. Es funktioniert in Ordnung, aber ich bevorzuge etwas Ähnliches wie die beiden Listenbeispiele, die ich von dir und @bultge bekommen habe :) Danke!
Ole Henrik Skogstrøm
2
Der Inhalt dieser Seite ist mittlerweile ziemlich veraltet.
Burgi
13

Installieren Sie dieses Plugin und Sie sehen alle Elemente, Klassen und IDs https://github.com/bueltge/WordPress-Admin-Style

bueltge
quelle
Nett! Dies ist eine gute Liste, müssen nur einige ausprobieren. Ich hoffe auch auf mehr Antworten und Tipps :) Wähle bald eine Antwort!
Ole Henrik Skogstrøm
2

* Hinweis: Für Frontend-Seite - Hier ist die Liste, die ich nach viel F & E in WordPress-Standard-CSS-Stilen extrahiert habe. Ich habe mein Bestes getan, um alles zu recherchieren und so genau wie möglich zu organisieren. Wenn Sie etwas vermisst oder unvollständig sehen, schreiben Sie bitte in die Kommentare. Ich hoffe, es könnte Ihnen helfen, Ihre gewünschten Plugins und Themes zu entwickeln *

/* 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
quelle
Ich verstehe Ihre Liste nicht wirklich. Ist dies eine Liste der leeren IDs / Klassen, damit ich den WordPress-CSS-Stil selbst anpassen kann?
Ole Henrik Skogstrøm
Dies ist die Liste aller Klassen für Bilder, wenn Sie dies auf unterschiedliche Weise in den Inhalt aufnehmen. wie über Schwimmer nach links oder rechts ausrichten und so weiter. Ich denke, ist nur eine Kopie von einem Beitrag im Web?
Bueltge
0

Das WordPress-Backend hat "body" -Klassen generiert. Ich habe diese Dokumente nirgendwo explizit dokumentiert gesehen (obwohl ich sie hätte übersehen können). Sie können sie sehen und wie sie in der admin-header.phpQuelle generiert werden.

Die generierten Klassen sind den Frontend-Klassen sehr ähnlich:

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

Ich bin auf diese Frage gekommen, weil ich mit add_menu_page () eine benutzerdefinierte Administrationsseite erstellt habe . Sie werden Ihren Inhalt zwischen setzen wollen

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

Dadurch wird das standardmäßige WordPress-Admin-Backend-CSS aktiviert, sodass Ihre benutzerdefinierte Admin-Seite normal aussieht. Andere Divs würden in diesem Fall automatisch von WordPress behandelt.

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
quelle
0

Hier ist ein weiterer interessanter Artikel , in dem alle verfügbaren CSS-Klassen / HTML-Markups aufgelistet werden, die für die Gestaltung einer Administrationsseite verwendet werden können. Die Artikel sind etwas veraltet, da sie Styling-Ergebnisse aus älteren Versionen von WordPress zeigen, so dass wahrscheinlich seitdem zusätzliche Klassen hinzugefügt wurden.

Eine weitere nützliche Ressource sind die WordPress- Dashicons .

Allerdings muss ich @ bueltge zu seinem exzellenten Plugin gratulieren, das eine hervorragende Arbeit leistet und eine aktualisierte Referenz der Admin-Stile enthält.

Aurovrata
quelle