Destacar autor no final das postagens! [WordPress]
Aqui no Sem Preceito, no final de todas as postagens, você encontrará informações sobre o autor: uma foto, uma pequena descrição, o nome e um link para o Twitter. Você também pode colocar estas informações no final das suas postagens. É o que iremos aprender no decorrer do post.
Este método só funciona para o WordPress instalado em servidor próprio. E, devo alertá-lo, iremos mexer com códigos. Então, prepare-se.
O interessante deste código é que, depois de configurado, você só irá mexer nele uma única vez (na hora da instalação). As mudanças de nome, twitter e da descrição serão feitas pelo seu painel administrativo sem precisar tocar em um único código!
A forma de exibição das informações que utilizo é um pouco avançada. Não ensinarei a instalar nessa forma. Após a instalação, o resultado será parecido com este:
Iremos utilizar três principais códigos que irão recolher as informações e exibir abaixo dos posts: do avatar, do nome do autor e da descrição do autor.
Também ensinarei algumas coisas a mais, como disponibilizar um link para o twitter, blog e para outras postagens do autor. Assim como colocar o botão de retweet ao lado das informações.
Instalando o estilo:
Primeiro vamos arrumar e instalar o estilo que dará o formato parecido com o de acima.
/* - INFORMAÇÕES AUTOR POSTS - */
#perfildoautor {
height: 70px;
padding: 10px;
margin-top:5px;
text-align:justify;
border-top: 3px solid #ccc;
border-bottom: 2px solid #ccc;
}
#perfildoautor h4 {
font-size: 1.2em;
}
#perfildoautor #informacoesautor {
float:left;
}
#perfildoautor #informacoesautor img {
float: left;
margin-right:5px;
border-top: 3px solid #ccc;
border-bottom: 2px solid #ccc;
}
Acesse seu painel administrativo, abra a aba “Aparência” > “Editar“. Escolha o arquivo “Folha de Estilos (style.css)“. Copie o código acima e cole em qualquer lugar desta mesma página (style.css). Clique em “Atualizar Arquivo”.
Instalando o código completo:
Abra agora o arquivo “Post único (single.php)“. Encontre “the_content” e cole logo depois o código abaixo:
<div id="perfildoautor">
<div id="informacoesautor"><?php echo get_avatar( get_the_author_id(), 64 ); ?>
<strong>Autor: <?php the_author(); ?></strong><br /><?php the_author_description(); ?></div>
</div>
Para o avatar aparecer, o mesmo e-mail que você utiliza na sua conta deverá estar cadastrado no Gravatar.
Explicando o código:
- <?php echo get_avatar( get_the_author_id(), 64 ); ?>: Exibe o avatar do autor com base no cadastro do Gravatar. Altere o “64″ para o tamanho que você quiser. Exemplo “32″.
- <?php the_author(); ?>: Mostra o nome do autor, conforme cadastrado no painel de controle.
- <?php the_author_description(); ?>: Exibe a Bio do autor, desde que esteja preenchida.
Twitter, Blog e outras postagens:
Vou ensinar a colocar os links “Twitter“, “Blog do Autor” e “Outras postagens“. Antes acesse o painel do autor e preencha os campos “AIM”, com o link (completo) do Twitter do autor, e “Site”, com a url do blog do autor. Após fazer isso, voltei para a página de edição, abra o arquivo “Post único (single.php)” e depois de “</strong> adicione o código abaixo:
| <a href="<?php the_author_aim(); ?>" title="Ver Twitter de <?php the_author(); ?>" target="_blank">Twitter</a> | <a href="<?php the_author_url(); ?>" title="Ver Blog de <?php the_author(); ?>" target="_blank">Blog</a> | <a href="http://URL DO SEU BLOG/author/<?php the_author_login(); ?>/" title="Ver outros posts de <?php the_author(); ?>" target="_blank">Outras postagens</a>
Colocando botão do Topsy:
Acesse o arquivo “Folha de estilos (style.css)” e acrescente o estilo abaixo:
#perfildoautor #topsy {
width:50px;
float:right;
margin-left:5px;
vertical-align: middle;
display: table-cell;
}
Acrescente também no código “#perfildoautor #informacoesautor {” um “width:90%;“. Salve a página.
Acesse o arquivo “Post único (single.php)“, depois do fechamento da primeira div (</div>), cole o seguinte código, altere o campo em azul pelo seu nick no twitter e salve.
<div id="topsy"><script type="text/javascript">
var topsy_style = "big";
var topsy_nick = "NICK TWITTER";
</script>
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script></div>
Espero que tenha gostado deste tutorial. Assine o feed e fique por dentro. Assine por e-mail, por GReader ou pelo FeedBurner.
Muito bom, é com essas e outras dicas que vou aprendendo um pouco sobre o WordPress, so estou aprendendo a criar um template para ele!
At+
Olá, querido. Um dia vim aqui e tinha um anúncio de hospedagem premium no rapidshare. Hoje me deu vontade de comprar e voltei aqui mas não achei. Você ainda tá nisso? Se estiver me manda o link ok? Responda-me no meu email se puder, senão minha vontade de comprar passa uahuahuah
E quanto a descrição?
@Hugo, se a “descrição” a que você se refere for a “Bio” do autor, o código é: < *?php the_author_description(); ?*> (Sem os *)
Oi Luan,
sou novo com o wordpress e estou desenvolvendo um site em cima de um template.
Gostaria de saber como faço para deixar as páginas do meu template com um único post?
Tb queria saber se tem outras dicas para quem esta começando com o Worpress, por ex. aonde fuçar para encontrar respostas?
Obrigado!
E parabéns pelo blog!
Olá @Samuel, bem-vindo ao WordPress e ao Sem Preceito. Não entendi a sua primeira pergunta, você quer criar uma página estática? Especifique, por favor.
Na segunda pergunta, se você puder especificar as dicas (e as respostas) que você quer receber, eu agradeço.
Obrigado.
Muito Bom. Me ajudou muito. Obrigado…
Amigo, coloquei isso no meu blog, ficou show de bola, o único problema é que o link do twitter não abre direito o caminho fica o endereço do post + o endereço do twitter, ai da página não encontrada, como posso resolver isso?
abraço e parabens
@Ricardo, que bom que funcionou! Quanto ao link, certifique-se de ter colocado o http://, pois se não ele será interpretado como um link interno e causará esse erro que você descreveu.
Obrigado! /o/