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

Question

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

- 50
- 55834 2012-01-13
Gibteseine Liste von WordPress-CSS-IDs/-Klassen,mit denenich Plugin-Optionsbildschirmeerstellen kann,dieeher wieeine normale WordPress-Optionsseite aussehen und sich anfühlen?Ich habeeinige durch Zufallgefunden,aberes wäre schöngewesen,eine Liste zu haben.

Ein Beispielist diese Klasse:button-primary Damit siehteine Schaltflächefolgendermaßen aus:

Is there a list of WordPress CSS id/classes that I can use to build plugin option screens that look and feel more like a normal WordPress option page? I have found some through serendipity but it would have been nice to have a list.

An example is this class: button-primary That makes a button look like this:

admin wp-admin css

- Es sieht aus wieeine Standard-Schaltfläche zum Speichernin WordPress.Wennichgenug Ruf habe,um das Bild zuposten,fehlennur 2 Punkte :)
  
  It just looks like a standard save button in WordPress. If i get enough reputation to post the picture, just missing 2 points :)
  - 0
  - 2012-01-13
  - Ole Henrik Skogstrøm
- Hallo ...ichgebe eine Lösung,die abernichtgenaufür diese Frage relevantist,aberfür die Webentwicklung sehr hilfreichist.Hierist das Webentwickler-Tool,das alle Informationeneiner Webseite anzeigt.Bitte laden Siees von diesem Link herunter: http://chrispederick.com/work/web-developer/Es wird als Firebug-Addoninstalliert und Sie könnenes sehreinfach verwenden.
  
  Hi there... i m giving a solution but which is not relevant exactly to this question but it is very helpful for web development. Here is the web Developer tool which shows each and every information of a web page. Please download it from this link: http://chrispederick.com/work/web-developer/ it will install as a firebug addon and you can use it very easily.
  - 1
  - 2012-01-13
  - w3uiguru
- Siehtgut aus @HappySingh Ich seheesmir an,gute Entwickler-Tools sindimmergriffbereit :)
  
  Looks nice @HappySingh ill look at it, good dev tools are always handy :)
  - 0
  - 2012-01-13
  - Ole Henrik Skogstrøm

5 Antworten

Stimmen

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

Install this plugin and you see all elements, class and ids https://github.com/bueltge/WordPress-Admin-Style
- Nett!Diesisteine gute Liste,müssennureinige testen.Ich hoffe auch auf weitere Antworten und Tipps :) Wählebaldeine Antwort!
  
  Nice! This is a good list, just need to test some out. Also hoping for more answers and tips :) pick an answer soon!
  - 0
  - 2012-01-13
  - Ole Henrik Skogstrøm
- 0
- 2013-11-18
Das WordPress-Backend hat "Body" -Klassengeneriert.Ich habe dieseexplizitnirgendwoexplizit dokumentiertgesehen (obwohlich sie wohl übersehen hätte können).Sie können sie unter sehen und wie siegeneriert werdenadmin-header.php Quelle.

Diegenerierten Klassen sind den Front-End-Klassen sehr ähnlich:

<body class="wp-admin no-js upload-php admin-bar branch-3-3 version-3-3-1 admin-color-fresh">
The WordPress backend does have generated "body" classes. I have never seen these explicitly documented anywhere (though I could well have missed it). You can see them and how they are generated in the admin-header.php source.

The generated classes are very similar to the front-end ones:

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

0

2017-08-29

Ichbin auf diese Fragegekommen,weilichmit add_menu_page () . Siemöchten Ihre Inhalte zwischen

platzieren

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

Dadurch wird das Standard-Backend-CSSfür WordPress-Administratoren aktiviert,sodass Ihrebenutzerdefinierte Administrationsseitenormal aussieht. Andere Divs werdenin diesem Fall automatisch von WordPress verarbeitet.

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

I got to this question because I was creating a custom admin page using add_menu_page(). You're going to want to put your content between

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

This will activate the standard WordPress admin backend CSS so that your custom admin page looks normal. Other divs would be automatically handled by WordPress in this case.

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

- 0
- 2019-10-14
Hieristein weitererinteressanter Artikel dasmachteine anständige Aufgabe,alle verfügbaren CSS-Klassen/HTML-Markups aufzulisten,diemanbeim Gestalteneiner Administrationsseite verwenden kann.Die Artikel sindinsofernetwas veraltet,als sie Styling-Ergebnisseeiner älteren Version von WordPress zeigen. Daheristes wahrscheinlich,dass seitdem zusätzliche Klassen hinzugefügt wurden.

Eine weiterenützliche Ressource sind die WordPress-Dashicons .

Ichmussjedoch @ bueltge zu seinem hervorragenden Plugin ,das unten aufgeführtist undeine hervorragende Arbeit leistet,umeine aktualisierte Referenz der Admin-Stile zuerhalten.

Here is an other interesting article that makes a decent job of listing all the available css classes/html markup one can use in styling an admin page. The articles is a little outdated in that it show styling results from older version of WordPress, so its likely that additional classes have been added since.

Another useful resources are the WordPress dashicons.

However, I have to congratulate @bueltge on his excellent plugin listed below which does a great job of keeping an updated reference of admin styles.

helenhousandi · Accepted Answer · 2012-01-13

15

2012-01-13

Wir arbeiten daran, http://dotorgstyleguide.wordpress.com/ zu aktualisieren,ummehr Informationen zuerhalten und den Stil wiederzugebenUpdates von 3.2.

Abgesehen davon habeichein Plugingesehen (dasich derzeitnichtfinden kann),daseine Art Demoseite anzeigt,auf der die verschiedenen CSS-Selektoren und deren Aussehen angezeigt werden,aberichglaube,es war veraltet.Abgesehen davon können Sie derzeit ambesten Firebug/Web Inspector starten undeinen Blick auf wp-admin/css/wp-admin.dev.css werfen.

Vielen Dank,ich habe die Firebug-Lösungfüreinige kleine Dinge verwendet,dieichbisjetztgetan habe.Esfunktioniertin Ordnung,aberich würdeeher diebeiden Listenbeispielebevorzugen,dieich von Ihnen und @bultgeerhalten habe :) Danke!

thank you, i have used the firebug solution on some small things i have done until now. It works ok but Id prefer something more like the two list examples i got from you and @bultge :) thank you!
- 0
- 2012-01-13
- Ole Henrik Skogstrøm
Der Inhalt dieser Websiteistmittlerweile ziemlich veraltet.

The content on this site is now quite obsolete.
- 6
- 2018-08-02
- Burgi