Recentemente adicionei um novo recurso no meu site, o Informeishion, para exibir pequenas miniaturas ao lado dos meus textos, no entanto, o código que eu utilizava dependia do Custom Fields para exibir as imagens, o que tornava a experiência desagradável.

Então, consegui um código diferente que, depois de adicionado no index.php, fazia todos os outros passos automaticamente, porém e infelizmente não existia uma maneira correta de customizar o tamanho das imagens a serem exibidas; logo, esse também não valia pra nada. Minutos depois, com a ajuda do Cadu que descobriu um plugin especifico para isso, consegui colocar as imagens do jeito que queria e com o tamanho que eu queria.

No final das contas o resultado foi o da imagem aí em cima. Agora, sem muita perda de tempo, vamos aos passos para ter esse desejável recurso:

1. Baixe o plugin Get the Image aqui;
2. Descompacte-o e mande-o para o FTP (wp-content/plugins);
3. Ative o mesmo na página de administração dos plugins e, finalmente, vamos ao código de inserção no index.php:

[php]
<img src="<?php $values = get_post_custom_values("vthumb"); echo $values[0]; ?>" />
[/php]

Recomendo que vocês adicionem o atalho acima antes da tag content, pois só assim a thumbnail ficará perfeitamente alinhada ao seu texto e em baixo do título do post.

Como somente adicionar o código não resolveria muita coisa, pois a thumbnail ficaria ajustada, mas não ao lado do texto, eu mesmo fiz uma grande gambiarra de códigos com meus míseros conhecimentos (2 anos de PHP, CSS e HTML ), que se resume as seguintes linhas:

[html]
<span style="padding:3px;margin:5px;float:left;border:1px solid #ccc;padding:3px;width:80px;height:80px;"><?php if ( function_exists( ‘get_the_image’ ) ) get_the_image(); ?></span>
[/html]

Vejam que o código de aplicar a função de mostrar a thumbnail já está inserido e antes disso vem minhas gambiarras. Recitando o que eu disse há pouco: Recomendo que vocês coloquem o código acima antes da tag content, ou entry. Pronto? não, ainda sim tem mais uma coisa que você deve fazer, só que dessa vez dentro de um código do plugin, para que as imagens sejam exibidas na dimensão que você desejar.

Para tanto, você terá de abrir a pasta que baixou do plugin e em seguida executar o arquivo get-the-image.php no Bloco de Notas, ou Notepad… Feito isso, vá até a linha 59 e no lugar de false marque true; o mesmo procedimento deve ser feito na linha 60. Agora, navegue até a linha 236 e no lugar desse código “$width = ‘ width=”‘ . $width . ‘”‘;” coloque esse “$width = ‘ width=”80″‘;“. Agora (novamente), vá até a linha 238 e troque esse código “$height = ‘ height=”‘ . $height . ‘”‘;” por esse “$height = ‘ height=”80″‘;“.

Veja que não precisa ser 80, você pode colocar 100, 200, 500 ou quanto mais desejar. Lembrando que o número que você coloca entre as aspas é automaticamente reconhecido como 80px, ou qualquer número que você colocar, por tanto, não é necessário colocar px após o número. Depois disso é só reenviar o get-the-image.php para dentro da pasta plugin no FTP, aceitar a substituíção de arquivos e conferir os resultados na página inicial do seu blog/site.

Enfim, quem descobriu como deixar personalizável o tamanho das imagens e o plugin foi o Cadu, do Winnext, valeu ae!

Dificilmente você vai achar algum artigo na web com detalhes de como colocar informações sobre o autor do post, neste caso “Quem escreveu?”, mas logo abaixo vou explicar detalhadamente como colocar e como personalizar esse recurso dentro da página do seu blog.

Quando estiver pronto ficará como a imagem acima, mas o resultado pode ser diferente se você quiser que seja. A começar pela inclusão do código CSS, você terá um extenso número de classes para inserir no CSS:

Coloque do jeito que está aí em cima sem mudar nada, pode ser no começo do style.css, no meio ou no fim, isso é critério seu. O que você pode mudar aí é o tamanho da fonte, o fundo, a cor da letra, o tamanho da imagem ou a borda da caixa, no entanto o jeito que está esse código é o resultado da imagem no começo.

Agora, vamos ao código que devemos inserir no single.php ou em qualquer outro lugar que você quiser para exibir “Quem escreveu” o post. Enfim, aí está ele:

[php]
<div id="boxgraund"><div class="author_info"><h1>Sobre o autor <span style="float:right;font-size:12px;font-famoly:tahoma;arial,segoe ui;"><?php the_author_posts_link(); ?> j&aacute; escreveu <?php the_author_posts(); ?> posts.</span></h3>
<?php $email = get_the_author_email(); $grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=".md5($email). "&default=".urlencode($GLOBALS['defaultgravatar'] )."&size=48"; $usegravatar = get_option(‘woo_gravatar’); ?>

<span class="author_photo"><img src="<?php echo $grav_url; ?>" width="80" height="80" alt="" /></span>
<p><?php the_author_description(); ?> <br style="clear:both;" /></p>
<p class="author_email"><a href="/contato">Envie uma mensagem</a></p></div>
</div>
[/php]

A primeira div boxgraund é tudo que envolva o fundo personalizado desse recurso, tanto é, que eu não uso porque não tem muita necessidade, por isso, se você analisar bem o código CSS no começo, verá que o link da imagem PNG, no final está assim: .pnga, justamente pra não exibir a imagem que está dentro da pasta images do tema.

Foi até bom falar isso, pois existe diferenças na pasta images de alguns temas, ou seja, pode ser que a pasta de imagens do seu blog seja “img” e não “images”, ou tanto faz. Se for diferente, troque para o nome que está no seu tema.

No CSS, a classe/class “.author_info p” configura o tamanho da fonte e a margem de distância do texto ao fundo. Você pode inclusive acrescentar a linha “font-family: arial, tahoma, segoe ui;” para modificar a fonte das letras e/ou “color:#ff0000;” para trocar a cor das letras.

Não menos importante e muito funcional existe também o recurso “Enviar Mensagem”, ao clicar no link, o usuário é direcionado até a página de contato do seu blog, mas se você quiser pode configurar para ir para outra página ou abrir o endereço mailto:seuemail@seuemail.com. O código dele no single.php é:

[html]
<p class="author_email"><a href="/contato">Envie uma mensagem</a></p>
[/html]

E no CSS é:

A partir dessa classe você pode modificar tudo que desejar a respeito do “Enviar Mensagem”, trocar até o ícone, inclusive… Bom, esses são todos os códigos necessários para adicionar o recurso “Quem escreveu?”, espero que tenha ajudado e, se alguma coisa não ocorreu como espero no seu blog, manda um comentário especificando o erro.

Recentemente, venho recebido muitas perguntas de como eu coloquei um recurso que ao passar o mouse sobre os links aparece uma “caixinha” contendo uma informação. Agora eu irei lhes ensinar passo a passo como você poderá ter esse recurso em seu blog!

É um processo bem simples, então vamos lá:

O Script

Antes de iniciar o tutorial, gostaria de avisar que o responsável por esse efeito é um script chamado qTip. Ele pode ser usado em qualquer site ou blog que possibilite editar os códigos, ou seja, esse script não funciona em blogs WordPress.com e provavelmente também não funcione em blogs do Blogger.

Colocando a mão na massa

Primeiramente, você deve fazer o download do script aqui (ou clique com o botão direito do mouse em cima deste link e selecione Salvar Link como…). Recomendo que você salve em um lugar muito simples de achar no seu blog/site, por exemplo: Envie seu arquivo para a pasta raíz do site, sendo assim o resultado será: http://meusite.com/qTip.js.

Feito isso, vá até seu arquivo CSS do seu tema. No WordPress, o arquivo está normalmente localizado na pasta do seu tema, com o nome style.css. Cole esse código abaixo do body{}:

div#qTip {
padding: 3px;
border: 1px solid #666;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: #999;
color: #FFF;
font: bold 9px Verdana, Arial, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;
}

Você pode personalizar as cores e a fonte do qTip.

Porém, o processo não é tão simples assim, agora você vai ter que colar um pequeno código no arquivo do cabeçalho do seu tema, para “chamar” o script que você enviou para a pasta raíz do seu tema. Abra o header.php e cole o código abaixo entre a tag <head>:

<script language="JavaScript" src="qTip.js" type="text/JavaScript"></script>

Abra a página inicial do seu blog, e seja feliz.

Detalhes adicionais

Nem todos os links irão ter esse recurso. Para que apareça uma “caixinha” em seus links, é necessário que eles tenham o título, ou seja, a tag <a title="">. Portanto para o código funcionar, você terá que colocar o título. Se quiser colocar pelo editor de posts do WordPess, basta inserir uma descrição no link como mostra a imagem abaixo:

Opa , meu primeiro post aqui no TutoPress e gostaria de chegar com uma pequena definição sobre um tema estilo magazine, espero que gostem.

Definição

É um tema estilo portal, com várias funcionalidades na página principal e o destaque vai para o visual e as categorias e nem de longe parece um blog. Normalmente, este tipo de tema é pago e elegante, perfeito para quem gostaria de ter um portal ao invés de um simples blog.

Na esquerda vemos um simples blog, formato de blog, layout de blog. Na direita, vemos um blog, com formato de portal, e layout de portal (chamado de magazine). Perceberam a diferença?

Vantagens

As principais vantagens, como você mesmo pôde ver, é o fato de haver um tema extremamente bonito com a opção de dividir seu site em várias partes, exibir artigos aonde bem entender e edição completa. Só lembramos que se seu site não tem a necessidade de ser um portal, então não seja, pois nem tudo é maravilhas.

Desvantagens

Como já disse anteriormente, esse tipo de tema é muito pesado (com exceção de alguns) e o mais chato: apesar de ter uma completa possibilidade de editar o que bem quiser, é bastante complexo isso. Não são todos os que conseguem deixar um layout deste com a cara do site, por isso não recomenda-se pagar por um destes sem que se saiba mexer pelo menos razoavelmente bem. Ah claro, o preço também não é muito barato.

Conclusão

Tudo dependerá do seu site. Se você tiver um site com muitas categorias, difíceis de organizar, será bom de usar um tema magazine, apesar de precisar de precisar de um bom servidor para aguentar talvez um tema pesado. Mas como já dissemos anteriormente, não tente inovar desnecessariamente, se o seu blog é um simples blog, evite fazer firolas e seja simples. Muitas vezes a simplicidade agrada.