Posts Tagged ‘ edição ’

Tela de edição personalizável no WordPress 2.7 07 Novembro 2008 às 8:49 am por Rodrigo Ghedin

Às vésperas do lançamento da versão final do WordPress 2.7, já é hora de comentar as novidades. Não as evidentes, como o novo design do painel administrativo, mas as menores, que às vezes passam batidas, mas que, quando descobertas, fazem toda a diferença.

Uma novidade muito legal é a possibilidade de personalizar a área de edição do sistema, aquela na qual escrevemos nossos posts. No passado, tínhamos a área do post propriamente dito, e na lateral direita, as opções complementares. A partir da versão 2.5, muitas dessas opções foram jogadas para a parte inferior da tela. Agora, na 2.7, cabe ao usuário escolher o melhor posicionamento.

Os boxes, ou seja, as caixas de opções, podem ser movimentadas livremente agora. O esquema lembra o funcionamento dos widgets dos temas, e é bastante prático. Basta clicar no título de um box segurar o botão, e então arrastá-lo para onde quiser. Tanto a lateral direita, quanto a parte inferior da área de digitação do post, aceitam os boxes.

Exemplo de box sendo arrastado.

Exemplo de box sendo arrastado.

Na parte superior da janela, há outra feature que ajuda a organizar e deixar a área de publicação adequada aos seus hábitos. Trata-se de um “selo”, chamado Screen Options.

Clicando no “selo” Screen Options, várias caixas de seleção aparecem. Cada uma delas refere-se a um box existente embaixo, e, por padrão, todas vêm marcadas. Desmarcando-as, os boxes correspondentes somem, como mágica!

Screen Options: remova o que você não usa.

Screen Options: remova o que você não usa.

Muita gente não usa todos esses boxes, e as Screen Options são destinadas justamente a essas pessoas. Eliminando caixas desnecessárias, a tela fica menos abarrotada, e as opções restantes ficam mais acessíveis, diretas. As Screen Options aparecem em outros locais do painel administrativo, como no Dashboard (que também conta com movimentação livre de boxes) e adição de links.

O vídeo abaixo, feito por Mark Jaquith, da Automattic, mostra na prática o que escrevi acima:

Essas são apenas algumas das novidades do WordPress 2.7. Há muito mais, e na medida do possível, eu e o Érico as mostraremos a vocês.

Trabalhando as legendas nas imagens do WordPress 2.6 Por Rodrigo Ghedin dia 19 de Julho de 2008 às 4:50 pm | Imprimir este post

Uma das grandes novidades do WordPress 2.6 é a inserção de legendas (captions) nas imagens. Funciona assim: o texto alternativo (alt=”qualquer coisa”) aparece abaixo da imagem, no post, caso o autor assim o queira. Se você atualizou seu sistema, mas ainda assim nada aconteceu em relação às legendas, ou elas apareceram sem formatação alguma, nada tema! O pBlog lhe ajuda a corrigir isso.

Antes de adentrarmos à edição, cabe uma breve explicação sobre o funcionamento das legendas. No editor, se você alterar o modo de exibição para o HTML, verá que há tags envoltas por [colchetes], cheias de atributos, responsáveis pelas legendas em torno das imagens. Não é preciso mexer em nada, só estou comentando a título de curiosidade ;-) .

No post, já publicado, em torno da imagem aparece uma DIV com classe wp-caption, e dentro dela, limitando a legenda em si, a DIV com classe wp-caption-text. É editando-as que teremos o efeito desejado, bastando, para tal, criatividade do editor (e talento em CSS, claro). Funciona assim, mais ou menos:


<div class="wp-caption"><img title="Imagem" src="caminho-da-imagem.jpg" alt="Imagem" />
<p class="wp-caption-text">Pôster de WALL•E.</p>
</div>

Se CSS não é sua praia, esqueça o que leu acima, e simplesmente copie e cole o conteúdo abaixo em seu stylesheet.css:


.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Este é o código que foi incluído no tema padrão do WordPress, e gera o efeito presente nos blogs do WordPress.com, que por sua vez, pode ser conferido em meu blog pessoal. Bacana, não?

Como se vê, o trabalho é feito em cima das duas classes de DIVs comentadas acima - e nem poderia ser de outra forma. Este código, bastante complexo, mostra bordas arredondadas sem o uso de imagens, o que é deveras legal. Ele não impede, porém, que você mesmo crie sua formatação para as legendas. Basta saber um pouco de CSS, e ter imaginação, para ser diferente ;-) .