pBlog

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 ;-) .

Dúvida bastante freqüente entre os leitores do pBlog, a substituição do título do blog (texto) por um logotipo (imagem) é uma customização que personaliza e dá uma identidade própria ao blog. O problema para explicar como fazer tal substituição é que isso varia de tema para tema, pois nem todos são codificados da mesma forma. Por isso escolherei um tema para exemplificar este mini tutorial.

O tema que escolhi já estava até separado para comentá-lo, então vou aproveitar este post para fazer as duas coisas, divulgar o tema e explicar como adicionar um logotipo. É bom deixar claro que existem muitas formas de fazer isso, eu vou explicar a que acho melhor.

O tema escolhido foi o Maggo Mag, ele possui 3 colunas, local para publicidade pré-definido, código HTML/CSS válido e é compatível com Firefox, IE7 e Opera. Demo e download.

Agora que vocês já conheceram o tema vamos por a mão na massa. Primeiro vamos eliminar o título e o subtítulo, mas para isso não é necessário apagar o código do arquivo PHP, basta adicionar o parâmetro “display:none;” nas IDs “#header h1” e “#header h2” no arquivo style.css, além de ser mais simples é melhor para os mecanismos de busca. Lembre-se que estas modificações são para este tema, para fazer o mesmo em outro tema você deverá procurar as ID’s ou classes correspondentes ao título e subtítulo para adicionar o parâmetro mencionado.

Renomeie a imagem do seu logotipo para “logo.jpg“, copie-a para a pasta “images” do tema e abra o arquivo header.php, logo após a linha:

1. <h2><?php bloginfo('description'); ?></h2>

Adicione o código da imagem da seguinte forma:

1. <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_directory');?>/images/logo.jpg" alt="Logotipo" /></a>

Fácil não? Acredito que este método sirva para a maioria dos temas com código HTML/CSS válido.

Novamente fui convidado a escrever um publieditorial aqui no pBlog, desta vez sobre o Visual Studio 2008, que foi lançado oficialmente no início deste ano.

O Visual Studio 2008 é um poderoso software capaz de criar aplicativos para diferentes sistemas, como a WEB, o Windows Vista, o Windows Server 2008 e o Office 2007. Está disponível em três versões, Standard (programadores individuais), Professional (pequenas equipes) e Team System (grandes equipes). Além destas, existe uma versão gratuita chamada Visual Studio Express que pode ser bastante útil para a maioria de nós que trabalhamos com o WordPress.

O Visual Studio Express é destinado a programadores iniciantes ou não-profissionais que gostariam de utilizar um software de programação profissional. Está disponível em 4 pacotes diferentes: Visual Basic 2008, Visual C# 2008, Visual C++ 2008 e Visual Web Developer 2008. Este último, por motivos óbvios, foi o que mais me interessou, ele possui suporte nativo a HTML, CSS e Javascript, e ainda existe uma IDE, produzida por terceiros, para PHP.

O que mais me chama a atenção em um programa como este são alguns recursos como o debug para Javascript, que procura por erros de sintaxe no código, e o Intellisense, que ajuda e muito ao exibir a sintaxe da função e permitir autocompletar o código no momento que você está digitando, é uma mão-na-roda! Veja alguns exemplos:

Se você, assim como eu, costuma programar todo o código “na mão”, o Visual Studio pode ser uma ótima ferramenta para ganhar produtividade.

O blog NetTuts escreveu um excelente tutorial explicando passo-a-passo como converter um layout criado no Photoshop em um site HMTL/CSS. Apesar de escrito em inglês, os leitores não terão muita dificuldade de compreensão em virtude da utilização de muitas imagens. O autor ainda disponibilizou para download todos os arquivos utilizados no tutorial.

Abaixo você pode ver o layout utilizado no tutorial.

Vale a pena salvar no Del.icio.us! :)

Em muitos temas, as imagens, quando inseridas na coluna dos posts, aparecem com bordas, margens e [coloque a tradução de padding aqui]. Esse recurso propicia um resultado final bacana, mas quem usa emoticons nos textos acaba sofrendo com um efeito colateral óbvio dos enfeites em imagens: os emoticons do sistema também são afetados.

Quer ver um exemplo? Então veja:

Notou como fica? As soluções mais fáceis são eliminar os efeitos, ou adicioná-los manualmente. O problema da segunda opção é que se no futuro o tema for mudado, corre-se o risco dos efeitos das imagens não combinarem com o novo visual.

As soluções fáceis são essas, mas existe uma um pouquinho mais difícil, porém com resultado totalmente satisfatório.

Abra o style.css do seu tema, e no final dele, acrescente a seguinte linha:

img.wp-smiley { border:0; padding:0; margin:0; }

A mágica é simples. Os emoticons padrões do WordPress são introduzidos nos textos com a classe CSS .wp-smiley. Logo, basta acrescentar alguns atributos na folha de estilo, e todos os emoticons se comportarão uniformemente.

Colocando essa linha no final do arquivo, a classe incluída no código do emoticon sobrepõe-se à regra geral para imagens. CSS usado com inteligência é isso.

A propósito, se os emoticons não aparecem em seus textos, verifique se o recurso está habilitado no WordPress. Vá em Settings, depois em Writing, e certifique-se de que a opção Convert emoticons like :-) and :-P to graphics on display está marcada.

Vejam a mesma imagem acima, porém com o código do CSS incluído:

PS: Érico, habilita emoticons aqui no pBlog? Hehe :D

No site Form Style Generator é possível criar passo-a-passo o visual dos formulários do seu blog. Seguindo todas as etapas você poderá realizar o download do CSS e das imagens, caso utilize alguma como background, ao final do processo.

Bom pessoal, estamos chegando a última parte deste tutorial e conforme prometido anteriormente, vou disponibilizar para download o tema que elaboramos durante todo este tempo. Para quem está chegando agora, é bom dar uma olhada nos posts anteriores deste tutorial, parte I, parte II, parte III e parte IV.

Antes de disponibilizar o tema, gostaria de esclarecer para quem acompanhou todo o tutorial, que fiz algumas modificações nos templates e adicionei mais alguns arquivos ao nosso tema, para que o mesmo ficasse completíssimo.

Os arquivos adicionados foram:

• single.php - arquivo cuja função é exibir um único post. A única diferença para o index.php é a inserção da tag comments_template(), que insere o arquivo comments.php;
• comments.php - tem a função de exibir os comentários e o formulário para comentar no arquivo single.php;
• functions.php - torna o tema compatível com widgets.

Tenho certeza que, quem leu todas as partes do tutorial não terá dificuldades em entender os acréscimos que foram feitos. De qualquer maneira se alguém tiver alguma dúvida basta perguntar. Críticas, sugestões e opiniões são muito bem-vindos.

Espero que este tutorial tenha ajudado vocês a elaborar seus próprios temas, pois esse foi meu principal objetivo ao escrevê-lo. Quem quiser informações mais detalhadas sobre como elaborar um tema pode acessar o Wordpress Codex.

• Download do Tema Mighty - 2 colunas, XHTML/CSS válido, compatível com widget e totalmente em português.

[download]