Personalizando o calendário do WordPress
Postado por Carlos em 31/03/08 às 11:12 am e arquivado em Design, Dicas e tutorias
Alguns temas disponibilizados na rede não são compatíveis, ou melhor dizendo, não são adaptados para funcionar com o Calendário, que por sinal, é pouco usado mesmo sendo muito útil. Eu mesmo comecei a adotá-lo aqui no blog desde a última mudança no tema que fiz.
Para adicionar o calendário ao tema é simples, basta colocar a tag <?php get_calendar(); ?> em algum lugar do tema, preferencialmente dentro da sidebar.
Porém, se o tema não tiver "adaptado" do calendário, ele será exibido todo feio, sem formatação, sem graça. Veja:
Basicamente o WordPress cria o calendário em uma tabela, cheia de células e colunas, portanto se o seu CSS não tiver "formatação" para essas tabelas é natural que seja apresentado um calendário sem personalização alguma.
Para resolver, basta inserir no style.css do seu tema os seguintes códigos CSS:
#wp-calendar th {
background: #fbfbfb;
border:1px solid #eee;
text-align: center;
padding: 4px;
}
#wp-calendar td {
padding: 2px;
}
#wp-calendar tbody a {
color: #0066cc; background:#eee;
}
#wp-calendar a:hover{color:#FF6600}
#wp-calendar caption, #wp-calendar tfoot td, #wp-calendar {
/*Aqui pesonalizei de uma vez só as ids wp-calendar caption, wp-calendar tfoot td, e #wp-calendar*/
background: #FFF;
width:100%;
font-weight: bold;
margin-bottom: 4px;
}
#wp-calendar caption {
margin-left auto;
margin-right: auto;
}
#wp-calendar tfoot td {
border-width: 1px;
margin-top: 6px;
margin-bottom: 0;
}
#wp-calendar {
width: 190px;
margin: 0 auto;
padding: 0;
}
Se você não entende muito de CSS vai ficar "boiando" nesses códigos acima, então para facilitar eu criei uma imagem que deve ajudar:
Basicamente é isso:
#wp-calendar => Responsável por englobar todo calendário, aqui você define a largura e posição dele;
#wp-calendar caption => Responsável pelo título do calendário, onde é exibido o nome do mês;
#wp-calendar th => Responsável pela linha onde é exibida a abreviação dos dias da semana (S, T, Q, Q, S, S, D);
#wp-calendar td => Responsável pelas células onde estão os dias do mês;
#wp-calendar tfoot td => Responsável pelo "rodapé" do calendário, onde é exibido o link para o mês anterior/próximo;
#wp-calendar tbody a => Responsável pelos links nos dias do mês, quando o mouse NÃO está sobre a palavra;
#wp-calendar a:hover => Mesma coisa, só que a ação acontece quando o mouse ESTÁ sobre a palavra.
Feito isso o calendário estará mais decente…
Então é isso, se você quiser personalizar o calendário de acordo com seu estilo, basta editar o CSS que passei. Até mais!
Dicas:
- Estude CSS e XHTML
- Para saber mais sobre o calendário do WordPress, clique aqui
- Traduza as datas do calendário fazendo o download do arquivo locale.php disponível neste tutorial.
Posts relacionados
- Dica: Personalizando datas no WordPress
- Inserindo e personalizando o Gravatar no WP 2.5
- Estatísticas (simples) sem plugins
- Personalizando a index do seu blog
- 3 maneiras diferentes de customizar a função the_excerpt
Populares
- Criando um Slide Show de imagens com o WordPress [SEM PLUGINS]
- FAQ para iniciantes
- 3 maneiras diferentes de customizar a função the_excerpt
- Explorando as Template Tags
- Criando uma imagem (thumbnail) para cada post [sem plugins]
MrWP » Free Themes
BB Clean Theme
Simple Blue Magazine