¿Cuáles son las etiquetas de identificación / clase CSS administrativas estándar?

45

¿Hay una lista de ID / clases CSS de WordPress que puedo usar para crear pantallas de opciones de complementos que se vean y se sientan más como una página normal de opciones de WordPress? He encontrado algunos por casualidad, pero hubiera sido bueno tener una lista.

Un ejemplo es esta clase: button-primary Eso hace que un botón se vea así: buttom-primary

Ole Henrik Skogstrøm
fuente
Simplemente parece un botón de guardar estándar en WordPress. Si
tengo
2
Ahora tienes 13 porque es una buena pregunta: D
mor7ifer
1
Hola, estoy dando una solución, pero que no es relevante exactamente para esta pregunta, pero es muy útil para el desarrollo web. Aquí está la herramienta de desarrollador web que muestra cada información de una página web. Descárguelo desde este enlace: chrispederick.com/work/web-developer , se instalará como un complemento de Firebug y puede usarlo muy fácilmente.
w3uiguru
Se ve bien @HappySingh lo miraré, las buenas herramientas de desarrollo siempre son útiles :)
Ole Henrik Skogstrøm

Respuestas:

15

Estamos trabajando para actualizar http://dotorgstyleguide.wordpress.com/ para tener más información y reflejar las actualizaciones de estilo de 3.2.

Aparte de eso, he visto un complemento (que actualmente no puedo localizar) que muestra una especie de página de demostración que muestra los diversos selectores CSS y su aspecto, pero creo que está desactualizado. Aparte de eso, su mejor opción por ahora puede ser simplemente iniciar Firebug / Web Inspector y echar un vistazo a wp-admin / css / wp-admin.dev.css.

helenhousandi
fuente
gracias, he usado la solución firebug en algunas cosas pequeñas que he hecho hasta ahora. Funciona bien, pero preferiría algo más como los dos ejemplos de lista que obtuve de usted y @bultge :) ¡gracias!
Ole Henrik Skogstrøm
2
El contenido de este sitio ahora es bastante obsoleto.
Burgi
13

Instale este complemento y verá todos los elementos, clases e identificadores https://github.com/bueltge/WordPress-Admin-Style

bueltge
fuente
¡Agradable! Esta es una buena lista, solo necesito probar algunas. También esperando más respuestas y consejos :) ¡elija una respuesta pronto!
Ole Henrik Skogstrøm
2

* Nota: Para el lado Frontend: aquí está la lista que he extraído después de mucha I + D en los estilos CSS predeterminados de WordPress. Hice mi mejor esfuerzo para investigar todo y organizar todo con la mayor precisión posible. Si ve algo que falta o está incompleto, escriba en los comentarios. Espero que pueda ayudarlo a desarrollar sus complementos y temas deseados *

/* 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
fuente
Realmente no entiendo su lista, ¿es esta una lista de las ID / clases vacías para poder personalizar el estilo CSS de WordPress?
Ole Henrik Skogstrøm
esta es la lista de todas las clases para imágenes, si incluye esto de diferentes maneras en el contenido; como vía float para alinear lieft o right y así sucesivamente. ¿Creo que es solo una copia de una publicación en la web?
bueltge
0

El backend de WordPress ha generado clases de "cuerpo". Nunca los he visto documentados explícitamente en ninguna parte (aunque bien podría haberlo pasado por alto). Puede verlos y cómo se generan en la admin-header.phpfuente.

Las clases generadas son muy similares a las de 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
fuente
0

Llegué a esta pregunta porque estaba creando una página de administración personalizada usando add_menu_page () . Vas a querer poner tu contenido entre

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

Esto activará el CSS backend de administración estándar de WordPress para que su página de administración personalizada se vea normal. Otros divs serían manejados automáticamente por WordPress en este caso.

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

Aquí hay otro artículo interesante que hace un trabajo decente al enumerar todas las clases de CSS / marcado html disponibles que se pueden usar para diseñar una página de administración. Los artículos están un poco desactualizados porque muestran resultados de estilo de versiones anteriores de WordPress, por lo que es probable que se hayan agregado clases adicionales desde entonces.

Otros recursos útiles son los dashicons de WordPress .

Sin embargo, tengo que felicitar a @ bueltge por su excelente complemento enumerado a continuación, que hace un gran trabajo al mantener una referencia actualizada de los estilos de administración.

Aurovrata
fuente