Quelles sont les balises standard id / class de l'administrateur CSS?


45

Existe-t-il une liste des classes / identificateurs CSS WordPress que je peux utiliser pour créer des écrans d’option de plug-in qui ressemblent davantage à une page d’option WordPress normale? J'en ai trouvé quelques-unes par hasard, mais cela aurait été bien d'avoir une liste.

Voici un exemple de cette classe: button-primary Cela donne à un bouton l'apparence suivante: bout-primaire


Cela ressemble à un bouton de sauvegarde standard dans WordPress. Si j'ai assez de réputation pour publier l'image, il manque juste 2 points :)
Ole Henrik Skogstrøm

2
Maintenant, vous avez 13 parce que c'est une bonne question: D
mor7ifer

1
Bonjour, je suis en train de vous donner une solution qui ne correspond pas exactement à cette question, mais qui est très utile pour le développement Web. Voici l'outil de développement Web qui affiche toutes les informations d'une page Web. Veuillez le télécharger à partir de ce lien: chrispederick.com/work/web-developer, il s’installera en tant qu’addon Firebug et vous pourrez l’utiliser très facilement.
w3uiguru

Ça a l'air bien @HappySingh de le regarder, les bons outils de développement sont toujours à portée de main :)
Ole Henrik Skogstrøm

Réponses:


15

Nous travaillons sur la mise à jour de http://dotorgstyleguide.wordpress.com/ pour obtenir davantage d'informations et refléter les mises à jour de style de la version 3.2.

En dehors de cela, j'ai vu un plugin (que je ne parviens pas à localiser actuellement) qui affiche une page de démonstration contenant les différents sélecteurs CSS et leur apparence, mais je pense qu'elle était obsolète. Sinon, votre meilleure option pour le moment pourrait bien être de lancer Firebug / Web Inspector et de regarder wp-admin / css / wp-admin.dev.css.


merci, j'ai utilisé la solution firebug sur quelques petites choses que j'ai faites jusqu'à maintenant. Cela fonctionne bien, mais je préfère quelque chose qui ressemble davantage aux exemples de liste que j'ai obtenus de vous et de @bultge :) merci!
Ole Henrik Skogstrøm le

2
Le contenu de ce site est maintenant assez obsolète.
Burgi


2

* Remarque: Pour le côté frontal - Voici la liste que j'ai extraite après beaucoup de recherche et développement dans les styles CSS par défaut de WordPress. J'ai fait de mon mieux pour rechercher tout et organiser tout le plus précisément possible. Si vous constatez quelque chose qui manque ou est incomplet, veuillez écrire dans les commentaires. J'espère que cela vous aidera à développer vos plugins et thèmes souhaités *

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

Je ne comprends pas vraiment votre liste. S'agit-il d'une liste d'id / classes vides pour pouvoir personnaliser moi-même le style CSS WordPress?
Ole Henrik Skogstrøm le

Ceci est la liste de toutes les classes d'images, si vous l'incluez de différentes manières dans le contenu; comme via float pour aligner lieft ou right et ainsi de suite. Je pense est seulement une copie d'un message sur le web?
Bueltge

0

Le backend WordPress a généré des classes "body". Je n'ai jamais vu ces documents explicitement documentés où que ce soit (même si j'aurais pu le manquer). Vous pouvez les voir et comment ils sont générés dans la admin-header.phpsource.

Les classes générées sont très similaires à celles du front-end:

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

0

J'ai eu cette question parce que je créais une page d'administration personnalisée à l'aide de add_menu_page () . Vous allez vouloir mettre votre contenu entre

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

Cela activera le backend CSS standard de l’administrateur de WordPress afin que votre page d’administrateur personnalisée paraisse normale. Les autres divs seraient automatiquement gérés par 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>';
    }
}

0

Voici un autre article intéressant qui fait un travail décent en listant tous les balises css classes / html disponibles que l’on peut utiliser pour styler une page d’administrateur. Les articles sont un peu dépassés dans la mesure où ils montrent les résultats de style d'une ancienne version de WordPress. Il est donc probable que des classes supplémentaires aient été ajoutées depuis.

Les dashicons WordPress sont une autre ressource utile .

Cependant, je dois féliciter @ bueltge pour son excellent plugin, répertorié ci-dessous, qui permet de conserver une référence actualisée des styles d'administration.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.