Codepress no WordPress 2.8

Codepress é um editor visual open source para programação que realça o código, facilitando a edição do mesmo. Recentemente eu li no Ayuda WordPress que este software será incorporado ao editor de temas e plugins do WordPress 2.8. Se de fato isto vir a acontecer, poderei aposentar o PSPad e passar a modificar os códigos diretamente da administração do WordPress, pois a forma como é exibida atualmente é impraticável seu manuseio.

Outro aspecto interessante do Codepress que será incorporado ao WordPress é um menu pulldown que exibirá todas as funções existentes do próprio WordPress. Para utilizá-lo será necessário apenas clicar na opção Lookup durante a edição do código.

Editando CSS

Editando CSS

[caption id="attachment_1735" align="alignleft" width="100" caption="Editando Temas"]Editando Temas[/caption]
Editando Plugins (PHP)

Editando Plugins

[caption id="attachment_1737" align="alignleft" width="100" caption="Função Lookup"]Função Lookup[/caption]

Como adicionar a opção “Imprimir este artigo”

Imprimir um artigo não é tão interessante para blogs de maneira geral, quem é que imprime os artigos do pBlog? Ninguém. De qualquer forma eu adicionei um link na página dos posts para testar este recurso. Porém, em alguns projetos, é muito interessante ter este recurso, por exemplo, em um site sobre culinária é legal ter esta facilidade para imprimir as receitas, afinal você não vai levar o notebook para junto do fogão, ou vai??! :)

<a href="javascript:window.print()">imprimir este post</a>

O código acima ativa a opção de impressão do navegador e será ele que você adicionará ao seu tema, mas aí você me pergunta: qual a vantagem de colocar um link que apenas irá abrir o quadro de impressão? Agora é que vem o pulo do gato, antes de inserir este código você deverá criar um estilo CSS só para impressão, assim você terá uma formatação específica para tal finalidade.

O novo tema do pBlog, por exemplo, não tinha um estilo CSS para impressão, então eu tive que criar um e não foi nada complicado. Baseado nas dicas do CatsWhoCode criei o seguinte estilo, que chamei-o de print.css:

html {width:100%}
body {background-color: #fff; color: #000; font-size: 12pt;}
a {color: #000;}
img {border: 0;}
#header, #menu, #footer, #sidebar, .postmeta, .navPost, #related, .inAds, .commentlist, #commentform {display:none;}
h1, h2 {page-break-before: auto;}
p {page-break-inside: avoid;}

Você pode e deve copiar este código para criar o seu print.css, a única alteração a ser feita será na linha 05 onde será necessário adicionar os ID’s e classes do seu tema que não deverão aparecer na impressão. Por exemplo, de cara eu adicionei o #header, #menu, #footer, #sidebar, com a propriedade display:none;, assim estas partes do site não aparecerão na hora de imprimir. Depois dei mais uma olhada no código e fui adicionando outras partes que gostaria que não fossem impressas.

Por último será adicionado no header.php a chamada do estilo CSS para impressão, este código deverá estar entre as tags e . Agora basta ligar a impressora!

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" type="text/css" media="print" />

Esta dica eu encontrei no blog WP Recipes, que a cada dia trás ótimos códigos para customizar o WordPress. Se você manda bem no inglês adicione-o ao seu leitor de feeds imediatamente, caso contrário, acompanhe o pBlog. :)

Trabalhando as legendas nas imagens do WordPress 2.6

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

Como adicionar o seu logotipo em um tema WordPress

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.

Tema Maggo MagO 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:


Adicione o código da imagem da seguinte forma:

Logotipo

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

Microsoft Visual Studio 2008

Visual Studio 2008Novamente 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:

Visual Studio - Intellisense Javascript
Microsoft Visual Studio - Intellisense CSS

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.

Tutorial sobre como converter um layout PSD em HTML

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.

Tutorial para converter PSD em HTML

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