Quais são as tags de id / classe CSS padrão do administrador?

45

Existe uma lista de IDs / classes CSS do WordPress que eu posso usar para criar telas de opções de plugins que parecem mais com uma página de opções normal do WordPress? Eu encontrei alguns por acaso, mas teria sido bom ter uma lista.

Um exemplo é esta classe: button-primary Isso faz com que um botão fique assim: buttom-primary

Ole Henrik Skogstrøm
fonte
Parece um botão padrão de salvamento no WordPress. Se eu conseguir reputação suficiente para postar a imagem, faltando apenas 2 pontos :)
Ole Henrik Skogstrøm
2
Agora você tem 13 porque é uma boa pergunta: D
mor7ifer 13/01/12
1
Olá, estou dando uma solução, mas que não é relevante exatamente para esta pergunta, mas é muito útil para o desenvolvimento da web. Aqui está a ferramenta de desenvolvedor da web que mostra todas as informações de uma página da web. Faça o download deste link: chrispederick.com/work/web-developer ele será instalado como um complemento do firebug e você poderá usá-lo com muita facilidade.
W3uiguru 13/01/12
Parece bom @HappySingh olhar mal nisso, boas ferramentas de desenvolvimento são sempre útil :)
Ole Henrik Skogstrøm

Respostas:

15

Estamos trabalhando na atualização de http://dotorgstyleguide.wordpress.com/ para obter mais informações e refletir as atualizações de estilo do 3.2.

Além disso, vi um plug-in (que atualmente não consigo localizar) que mostra uma espécie de página de demonstração que exibe os vários seletores de CSS e sua aparência, mas acredito que estava desatualizado. Fora isso, sua melhor opção no momento pode ser apenas iniciar o Firebug / Web Inspector e dar uma olhada em wp-admin / css / wp-admin.dev.css.

helenhousandi
fonte
obrigado, usei a solução firebug em algumas pequenas coisas que fiz até agora. Funciona bem, mas eu prefiro algo mais como os dois exemplos de lista que recebi de você e @bultge :) obrigado!
Ole Henrik Skogstrøm
2
O conteúdo deste site agora é bastante obsoleto.
Burgi
13

Instale este plug-in e você verá todos os elementos, classes e IDs https://github.com/bueltge/WordPress-Admin-Style

bueltge
fonte
Agradável! Esta é uma boa lista, só preciso testar alguns. Também esperando por mais respostas e dicas :) escolha uma resposta em breve!
Ole Henrik Skogstrøm 13/01/12
2

* Nota: Para o lado front-end - Aqui está a lista que eu extraí após muita pesquisa e desenvolvimento nos estilos CSS padrão do wordpress. Fiz o meu melhor para pesquisar e organizar tudo com a maior precisão possível. Se você encontrar algo faltando ou incompleto, escreva nos comentários. Espero que possa ajudá-lo a desenvolver os plugins e temas desejados *

/* 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
fonte
eu realmente não entendo sua lista, é uma lista de id / classes vazias para que eu possa personalizar o estilo CSS do WordPress?
Ole Henrik Skogstrøm
esta é a lista de todas as classes de imagens, se você incluir isso de diferentes maneiras no conteúdo; como via float para alinhar lieft ou right e assim por diante. Eu acho que é apenas uma cópia de um post na web?
bueltge
0

O back-end do WordPress gerou classes "corpo". Eu nunca os vi explicitamente documentados em nenhum lugar (embora eu possa ter perdido). Você pode vê-los e como eles são gerados na admin-header.phpfonte.

As classes geradas são muito semelhantes às 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
fonte
0

Cheguei a esta pergunta porque estava criando uma página de administrador personalizada usando add_menu_page () . Você vai querer colocar seu conteúdo entre

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

Isso ativará o CSS padrão de back-end de administrador do WordPress, para que sua página de administrador personalizada pareça normal. Outras divs seriam tratadas automaticamente pelo WordPress nesse 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
fonte
0

Aqui está outro artigo interessante que faz um trabalho decente ao listar todas as classes CSS disponíveis / marcação html que se pode usar para estilizar uma página de administrador. Os artigos estão um pouco desatualizados, pois mostram resultados de estilo da versão mais antiga do WordPress, portanto, é provável que outras classes tenham sido adicionadas desde então.

Outros recursos úteis são as dashicons do WordPress .

No entanto, eu tenho que parabenizar o @ bueltge por seu excelente plug-in listado abaixo, que faz um ótimo trabalho em manter uma referência atualizada dos estilos de administrador.

Aurovrata
fonte