Lista CSS para WordPress

Ao criar temas levamos muito tempo tentando personalizar determinados elementos, algumas vezes pelo elemento já ter herdado personalização, outra por não sabermos exatamente que tipo de classe ou ID o elemento recebe automaticamente pelo WordPress.
Pensando nisso, fui buscar todas as classes e IDs gerados pelo WordPress automaticamente, a fim de economizar tempo na criação do css para meu tema e cheguei a esta lista que segue a baixo.

Mas antes de copiar a lista e achar que algumas classes ou IDs não funcionam como desejado, vale lembrar que algumas classes e IDs são geradas dependendo da estrutura em que seu tema é montado.
Um exemplo disso são os widget, caso você use uma montagem personalizada de widget declarando nela, classes e IDs personalizados, é óbvio que os mostrados nesta lista podem não servir para você.

Para evitar que minha lista seja um verdadeiro fracasso pra você, verifique se está usando a montagem padrão de widget, suas classes e IDs não podem ganhar um nome, pois serão fixos, ao invés disso defina para widget_before IDs e classes com os códigos %1$s para ID e %2$s para classes, desta forma seus widgets terão IDs e classes geradas pelo WordPress e é de onde esta lista se baseia.

Não vou entrar no assunto de como criar um sidebar_widget, pois não é a ideia deste artigo, mas se quiser ver uma forma de montá-los, repare no que já vem nos temas padrões do WordPress, mais especificamente no arquivo function.php do tema default.

Esta lista é gerada através de experiências e pesquisas, portanto, pode não estar perfeito.

Bem, chega de papo e segue a lista completa em formato de css, basta copiar e colar em um arquivo sytle.css e começar a personalizar para seu novo tema.

/*
Theme Name:
Theme URI:
Description:
Author:
Author URI:
Version:
*/

/* – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

‘Este cabeçalho é indispensável ao criar um tema.
Edite esta parte com suas informações.

*/ – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

 

 

/* – INICIO – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - -
CSS reset básico para os navegadores.
- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - -*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,
legend,input,button,textarea,p,blockquote,th,td{
margin:0; padding:0; background: transparent;
}
/* – - TAG FIM – - */

 

 

/* INÍCIO – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -
Imagens do post.
- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -*/
/*
max-width: Limita o tamanho máximo para as Imagens no post
A Altura recebe auto para manter a proporção correta das imagens
edite o valor 600px como necessário para seu tema. */
/*Todas as imagens do post*/
.size-large, .size-full, .size-medium, .size-thumbnail,
.alignnone, .alignleft, .aligncenter, .alignright, img{
max-width: 600px;
height: auto;
}

/*Imagem sem alinhamento*/
.alignnone{
padding: 5px;
}

/*Imagem alinhada ao centro*/
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

/*Imagem alinhada a direita*/
.alignright {
float: right;
}

/*Imagem alinhada a esquerda*/
.alignleft {
float: left;
}

/*Borda da Imagens do post que possuem um legendas*/
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 6px;
/*Cantos arredondados para navegadores que o Apóiam*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/*Imagem do post que possui uma legenda*/
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

/*Texto da legenda da imagem do post que possui legenda*/
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
}
/* – - – FIM – - – */

 

 

/* INÍCIO – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -
Galeria de imagem gerada pelo WordPress.
- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – */
/*Imagem da galeria*/
(id da div do post) .gallery dl dt img{}

/*Link em estado normal da imagem da galeria*/
(id da div do post) .gallery dl dt a{
display: block;
border: 2px solid #EFE9D1;
float:left;
margin-left:5px;
}

/*Link em estado hover da imagem da galeria*/
(id da div do post) .gallery dl dt a:hover{
float:left;
border: 2px solid #FF9900;
}

/*Box que carrega cada imagem da galeria*/
(id da div do post) .gallery dd{}
/* – - – FIM – - – */

 

 

/* INÍCIO – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -
Personalizando sidebar dinâmico
- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – */
/* Para usar bullets (imagem ou caracteres especiais) em sua lista.
Primeiro declare para ul li para atingir o máximo de conteúdo possível*/

(id da div do seu sidebar) ul li:before{} /*before coloca o bullet depois do texto*/
(id da div do seu sidebar) ul li:after{} /*after coloca o bullet antes do texto*/

/*Dependendo da montagem do seu tema a lista de tags e a lista dos links não irão receber o bullet
então você pode usar as seguintes declarações para colocar neles também*/
(id da div do seu sidebar) .widget_tag_cloud a:before{}
(id da div do seu sidebar) .widget_tag_cloud a:after{}

(id da div do seu sidebar) .widget_links li:before
(id da div do seu sidebar) .widget_links li:after

/*Para usar caracteres especiais no lugar de imagens você pode usar a declaração content
veja um exemplo a baixo de como usá-la*/
#meu-sidebar ul li:before{content: “\203A 020″;}

/*Para uma lista completa dos caracteres acesse o site:
http://www.fileformat.info/info/unicode/char/a.htm */

/* – - – Início do calendário – - – */

/*Div que representa o Calendário*/
.widget_calendar{}

/*Div que fica dentro do calendário e carrega todos os elementos do calendário*/
#calendar_wrap{}

/*Texto de Mês e ano*/
#wp-calendar caption{}

/*Dias do mês*/
#calendar_wrap td{}

/*Dias da semana*/
#calendar_wrap th{}

/*Blocos em geral*/
#wp-calendar tr td{}

/*Dia Atual*/
#wp-calendar #today{}

/*Link em estado normal para os dias que possuem alguma postagem*/
#wp-calendar a{}

/*Link em estado hover para os dias que possuem alguma postagem*/
#wp-calendar a:hover{}

/* Botão para ir para o mês anterior*/
#wp-calendar #prev{}

/* Botão para ir para o mês seguinte*/
#wp-calendar #next{}

/* Link do botão para ir para o mês seguinte em estado normal*/
#wp-calendar #next a {}

/* Link do botão para ir para o mês anterior*/
#wp-calendar #prev a {}

/* – - – FIM Do Calendário – - – */

 

 

/* – - – Início do widget de Arquivos – - – */
.widget_archive{}
.widget_archive ul{}
.widget_archive ul li{}
.widget_archive ul li a{}

/* Lista suspensa de arquivos*/
.widget_archive select{}

/*Cada opção da lista suspensa de arquivos*/
.widget_archive option{}
/* – - – FIM do widget de Arquivos – - – */

 

 

/* – - – Início do widget de Categorias – - – */

/* Div que leva o widget das categorias*/
.widget_categories{}

/*Lista de todas as categorias*/
.widget_categories ul{}

/*Lista com cada categoria separada*/
.widget_categories ul li{}

/*Lista de sub-categoriais*/
.widget_categories ul ul.children{}

/*Links da lista de categorias*/
.widget_categories a{}

/*Lista suspensa de categorias*/
.widget_categories select{}

/*Se precisar ser mais declarativo em seu css poderá usar*/
.widget_categories select.postform{}
/*ou*/
.widget_categories select#cat{}

/*Cada opção da lista suspensa de categorias*/
.widget_categories option{}

/*Hierarquia de sub categoriais da lista suspensa */
.widget_categories .level-0{} /*Categoria comum*/
.widget_categories .level-1{} /*Sub-categoria*/
.widget_categories .level-2{} /*Sub-categoria da sub-categoria*/
/*Observação: Este número é infinito enquanto houver sub-categorias*/

/* – - – FIM do widget de Categorias – - – */

 

 

/* – - – Início do widget de comentários recentes – - – */

/*Div que leva os comentário recentes*/
.widget_recent_comments{}

/*Lista de todos os comentários*/
#recentcomments{}

/*Lista individual de cada comentário*/
.recentcomments{}

/*Link de cada comentário*/
#recentcomments li a{}
/* – - – FIM do widget de Comentários recentes – - – */

 

 

/* – - – Início do widget dos links- – - */
.widget_links{}
.widget_links ul{}
.widget_links ul li{}
.widget_links ul li a{}

/*Se pretende usar bullets sugiro usar uma das seguintes opções, declarando
o máximo possível das ids ou classes anteriores a esta – colocar Bullets na parte de link
pode ser bem chato caso não declare corretamente em seu css*/
(id da div do seu sidebar) .widget_links li:before{}
(id da div do seu sidebar) .widget_links li:after{}

(id da div do seu sidebar) .widget_links li a:before{}
(id da div do seu sidebar) .widget_links li a:after{}
/* – - – FIM do widget dos links- – - */

 

 

/* – - – Início do widget Meta- – - */
.widget_meta{}
.widget_meta ul
.widget_meta ul li{}
.widget_meta ul li a{}
/* – - – FIM do widget Meta- – - */

 

 

/* – - – Início do widget das Tags – - – */
.widget_tag_cloud{}
.widget_tag_cloud a{}

/*Como padrão as tags são criadas para ficar em uma lista na horizontal.
Para criar uma lista de tags na vertical use a seguinte declaração*/
.widget_tag_cloud a {display:list-item;}

/* – - – FIM do widget das Tags- – - */

 

 

/* – - – Início do widget das páginas- – - */
.widget_pages{}
.widget_pages ul{}
.widget_pages ul li{}
.widget_pages ul li a{}

/*Para mostrar a Hierarquia das páginas use*/
.widget_pages ul li{margin-left: 10px;}

/* – - – FIM do widget das páginas- – - */

 

 

/* – - – Início do widget Search – - – */
/*Este sidebar depende do seu tema estar ou não usando um arquivo para ele,
se não for usado um arquivo searchform.php em seu tema ele irá utilizar as seguintes classes e ids*/

/*Div que carrega o widget de busca*/
.widget_search{}

/*Id do formulário de busca, praticamente representa o widget_search*/
#searchform{}

/*Texto que aparece acima do campo de digitação*/
.screen-reader-text{}

/*Campo onde digitamos a nossa busca*/
#s

/*Botão do formulário de busca*/
#searchsubmit

/*Se estiver usando um arquivo searchform.php em seu tema
os ids e classes que serão utilizados serão os mesmos declarados neste arquivo*/

/* – - – FIM do widget Search – - – */

 

 

/* – - – Início do widget dos posts recentes – - – */
.widget_recent_entries{}
.widget_recent_entries ul{}
.widget_recent_entries ul li{}
.widget_recent_entries ul li a{}
/* – - – FIM do widget dos posts recentes – - – */

 

 

/* – - – Início do widget texto – - – */
.widget_text{}
div.textwidget{}
div.textwidget p{}
/* – - – FIM do widget Texto- – - */

 

 

/* – - – Início da personalização dos comentários – - – */
/*Parte destas classes já foram testadas, algumas dependem
da formatação do seu arquivo comments e funções extras.
Todas que testei estão comentadas*/

/*Existe também esta mesma lista para trackback, para usar
basta trocar commentlist por trackback*/

/*Lista de comentários*/
ol.commentlist {}

/*Lista dos blocos dos comentários*/
ol.commentlist li {}

/*Nome do autor do comentário*/
ol.commentlist li div.vcard cite.fn {}

/*Nome do autor quando postado com website*/
ol.commentlist li div.vcard cite.fn a.url {}

/*Bloco da imagem do avatar*/
ol.commentlist li div.vcard img.avatar {}

/*Bloco com a mensagem disse*/
ol.commentlist li div.vcard span.says {}

/*Bloco que mostra a data e hora*/
ol.commentlist li div.commentmetadata {}

/*Texto da data e hora e Botão editar*/
ol.commentlist li div.commentmetadata a{}

/*Texto do comentário*/
ol.commentlist li p {}

/*Botão de resposta ao comentário*/
ol.commentlist li div.reply {}

/*Link do botão de resposta ao comentário*/
ol.commentlist li div.reply a {}

/*Resposta a outros comentários já feitos*/
ol.commentlist li ul.children {}

/*Comentário de número impar*/
ol.commentlist li.thread-alt {}

/*Comentário de número par*/
ol.commentlist li.thread-even {}

/* Box do botão de cancelar resposta de comentário*/
#cancel-comment-reply{}

/*Link do Botão de cancelar resposta a comentário*/
#cancel-comment-reply a{}

/*Esses eu não consegui testar em meu tema ainda*/
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.comment-meta {}
ol.commentlist li div.comment-meta a {}
ol.commentlist li ul {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li div.comment-author {}
ol.commentlist li div.vcard {}
ol.commentlist li.thread-odd {}
ol.commentlist li ul.children li {}
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 {}
ol.commentlist li ul.children li.depth-3 {}
ol.commentlist li ul.children li.depth-4 {}
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}

/* – - – FIM da personalização dos comentários – - – */

 

 

/*Essas classes fora achados no site codex e não tive como testar ainda*/
/* – - – Início das Classes usadas em Menus DropDown – - – */
.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 {
display: none;
}

.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 {
display: block;
}

.current_page_item {}
.current_page_parent {}
.current_page_ancestor {}

/* – - – FIM das Classes usadas em Menus DropDown – - – */

 

 

/* – - – Sem uma definição específica – - – */

/*Classe do link de leia mais quando um post é dividido em partes*/
.more-link{}

/*Campo para se diPost que está protegido por senha*/
(id da div do post) form{}

/*Botão do formulário de post protegido por senha*/
(id da div do post) input{}

/*Campo de texto de post protegidos por senha*/
(id da div do post) form{}
/* – - – FIM – - – */

 

 

Espero que tenham gostado e que esta lista possa ajudar um pouco a economizar tempo na criação do css para seu tema WordPress.

Se encontrarem algum erro ou tiverem algum item a acrescentar a esta lista, entre em contato ou deixe um comentário, por favor.