Quelles sont les balises ID / classe CSS standard de l'administrateur?

Question

Quelles sont les balises ID / classe CSS standard de l'administrateur?

- 50
- 55834 2012-01-13
Existe-t-il une liste d'identifiants/classes CSS WordPress queje peux utiliserpour créer des écrans d'options deplugins qui ressemblent davantage à unepage d'options WordPressnormale?J'en aitrouvépar hasard,mais cela aurait étébien d'avoir une liste.

Unexempleest cette classe:button-primary Cela donne à unbouton l'aspect suivant:

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

- Cela ressemble à unbouton d'enregistrement standard dans WordPress.Sij'ai assez de réputationpourpublier laphoto,ilme manquejuste 2points :)
  
  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
- Salut,je donne une solutionmais quin'estpasexactementpertinente à cette questionmais quiesttrès utilepour le développement web.Voici l'outil de développement Web qui affichetoutes lesinformations d'unepage Web.Veuillez letélécharger àpartir de ce lien: http://chrispederick.com/work/web-developer/il s'installeraen tant qu'addon Firebuget vouspourrez l'utilisertrèsfacilement.
  
  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
- Ça a l'air sympa @HappySinghmal regarde,debons outils de développement sonttoujours utiles :)
  
  Looks nice @HappySingh ill look at it, good dev tools are always handy :)
  - 0
  - 2012-01-13
  - Ole Henrik Skogstrøm

5 réponses

votes

- 15
- 2012-01-13
Installez cepluginet vous verreztous les éléments,classeset identifiants 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
- Agréable!C'est unebonne liste,il suffit d'entester quelques-unes.Enespérant égalementplus de réponseset de conseils :) choisissez une réponsebientôt!
  
  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
Lebackend WordPress agénéré des classes "body".Jen'aijamais vu ces documentsexplicitement documentésnullepart (bien quej'auraisbien pu lemanquer).Vouspouvez les voiret commentils sontgénérés dans le admin-header.php source.

Les classesgénérées sonttrès similaires aux classesfrontales:

<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

Je suis arrivé à cette questionparce queje créais unepage d'administrationpersonnalisée à l'aide de add_menu_page () . Vous allez vouloirmettre votre contenuentre

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

Cela activera le CSS standard dubackend d'administration de WordPress afin que votrepage d'administrationpersonnaliséeparaissenormale. D'autres divs seraient automatiquementgéréspar WordPress dans ce cas.

 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
Voici un autre article intéressant quifait untravail décent de listertoutes les classes css/balisage html disponibles que l'onpeut utiliserpour styliser unepage d'administration.Les articles sont unpeu obsolètesen ce sens qu'ils affichent les résultats de style d'une ancienne version de WordPress,ilest doncprobable que des classes supplémentaires aient été ajoutées depuis.

Les dashicons de WordPress sont une autre ressource utile.

Cependant,je doisféliciter @ bueltge pour sonexcellent plugin répertorié ci-dessous quifait unexcellenttravailpourgarder une référence àjour des styles d'administration.

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

Noustravaillons à lamise àjour de http://dotorgstyleguide.wordpress.com/pour avoirplus de cesinformationset refléter le stylemises àjour de la version 3.2.

Àpart cela,j'ai vu unplugin (queje nepeuxpas localiser actuellement) quimontre une sorte depage de démonstration qui affiche les différents sélecteurs CSSet à quoiils ressemblent,maisje pense qu'il était obsolète.En dehors de cela,votremeilleure optionpour lemomentestpeut-être de lancer Firebug/Web Inspectoret dejeter un œil à wp-admin/css/wp-admin.dev.css.

merci,j'ai utilisé la solutionfirebug sur quelquespetites choses quej'aifaitesjusqu'àprésent.Celafonctionnebien maisje préfère quelque chose deplus comme les deuxexemples de liste quej'ai obtenus de vouset @bultge :)merci!

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
Le contenu de ce siteest désormais assez obsolète.

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