Biografia do autor do Blog no rodapé dos posts para WordPress

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Algo indispensável para qualquer blog é ter um espaço em que o visitante pode conhecer quem está por trás daqueles textos e artigos e possa se comunicar com você. Vou mostrar como adicionar um resumo de seus dados (biografia) no rodapé dos posts de seu blog no Worpdress. Será um modelo manual, mais simples e outro automático.

 

Como o WordPress tem duas modalidades, a gratuita (básica e com menos recursos) e a opção com hospedagem e domínio próprios (mais avançado), vou mostrar duas maneiras de adicionar um pequeno perfil no rodapé de seus posts que servirá para atender os dois casos de usuários.

 

Adicionar um perfil manualmente.

Esse é o modo mais simples e objetivo, cujo resultado será algo semelhante ao exemplo abaixo:

 

Sobre o Autor:

Marcos Lemos Marcos Lemos é o editor do [ Ferramentas Blog ] e do Lemos [ Idéias ]. É formado em Teologia e atualmente faz Licenciatura em Letrar. Seu interesse é ajudar o máximo de pessoas a ter um blog de qualidade. Leia mais sobre o autor…

 

 

Servirá para qualquer usuário do WordPress em qualquer modalidade. Esse é um código HTML simples que você adiciona no editor de textos padrão do WordPress logo depois de digitar todo o artigo que vai ser publicado. Vá na aba do modo HTML do editor de posts como ilustra a imagem:

 

edito-texto-wordpress

Ou leia o artigo "Entendendo o Editor de Posts padrão do Blog" para mais detalhes.

 

Vá até o final e adicione o seguinte código fazendo as mudanças como indicado:

 

<p style="border-bottom: 1px dotted #3A6DA1;"></p>
<font style="font-size:18px"><b>Sobre o Autor:</b></font>
<table border="0">
  <tr>
    <td><img src="URL_da_IMAGEM" alt="SEU_NOME" border="0" style="border-bottom: 0px; border-left: 0px; margin-left: 0px; border-top: 0px; margin-right: 5px; border-right: 0px" /></td>
    <td>Texto que deseja usar para descrever-se. Recomendo que não tenha mais que 45 palavras e coloque ao menos um link para a página completa da Biografia.</td>
  </tr>
</table>
<p style="border-bottom: 1px dotted #3A6DA1;"></p>

 

  • De verde onde está "Sobre o Autor:" você pode escrever um pequeno título para a mini-biografia.
  • Onde está rosa, "URL_da_IMAGEM", coloque o endereço de uma foto sua, que tenha um tamanho adequado. Recomendo que não seja maior que 75px de altura. Para usar uma URL de imagem recomendo o PicasaWeb que é gratuito e basta ter conta no Google ("Como enviar imagens para o PicasaWeb"). Se você usa o Wodpress com hospedagem, pode enviar a imagem para sua pasta padrão de imagens.
  • No azul, "SEU_NOME, coloque o seu nome de autor, que será exibido quando o mouse estiver sobre a foto.
  • Por fim, o que está em negrito preto, escreva um pequeno resumo de sua biografia ou apresentação, como achar mais adequado.

 

Feitas essas alterações, basta agora publicar normalmente seu post e a mini biografia aparecerá no rodapé daquela postagem em que foi adicionada. Lembrando que só aparecerá nos artigos que você adicionar isso. Não vai automático para todos.

 

Adicionar mini Perfil automaticamente em todos os posts.

(somente para o WordPress.org com hospedagem e domínio próprio)

 

1. Abra o menu "Usuários" ~> "Seu perfil" e adicione suas informações biográficas da melhor forma que achar. Inclusive pode usar links no texto.

 

2. Agora vá no menu "Aparência" ~> "Editor" e clique no arquivo "Post único (single.php)", como ilustrado abaixo:

 

aparencia-editor-wp-single-php

 

3. Agora procure pela seguinte linha, como mostrado na marca 3 da imagem acima:

 

<?php comments_template(); ?>

 

4. Imediatamente ACIMA disso, cole o seguinte trecho fazendo as mudanças que forem indicadas:

 

<div id="author-bio">
    <h3>Sobre o autor:</h3>
    <img src="URL_da_IMAGEM" alt="SEU_NOME" />
    <h4><?php the_author(); ?></h4>
       <?php the_author_description(); ?>                       
</div>

 

Recomendo que seja uma imagem de uma foto sua com no máximo 75px de altura, mas fica a seu critério.

 

5. Salve clicando em "Atualizar arquivo".

 

6. Agora abra o arquivo "Folha de estilos (style.css)", no mesmo lugar. Então vá até o final dos códigos e adicione o seguinte trecho:

 

#author-bio { border-top: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; padding: 15px 0; }
#author-bio h3 { font-size: 18px; margin: 0 0 10px 0; }
#author-bio h4 { font-size: 14px; margin: 0 0 3px 0; }
#author-bio img { float: left; padding: 2px; border: 1px solid #cccccc; margin: 2px 10px 0 0; }

 

7. Mais uma vez, salve o arquivo e veja o resultado final em seu blog.

 

Outros tutoria
is que recomendamos:

.

7 Comentários

  1. Muito obrigado pela dica. Estava procurando exatamente isso e não estava encontrando em nenhum blog, ou melhor, encontrei um monte mas não deu certo. Agora deu certo de primeira.

    Valeu

    Abraço

    Evandro Villaça

    Responder

  2. Muitas vezes quando preciso resolver algum problema ou buscar alguma dica para blog eu reviro a internet e acabo encontrando a melhor solução aqui no Ferramentas blog XD. Parabéns Marcos! Muito sucesso pra vc!

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.