Estilizar comentários de Autores – Sem plugin

Depois de um fim de semana um pouco fora do normal para mim, já que dedico esse período a outras atividades fora da blogosfera como dar atenção a família e a igreja, é apesar de ser blogueiro, gosto muito de ir a igreja e passo grande parte do meu sábado por lá, por isso apenas posto no sábado pela noite. Hoje ensinarei como estilizar os comentários de autores no WordPress.

Para quê estilizar os comentários de autores?

Eu acredito que quando um professor, em uma sala de aula fala, os alunos darão mais atenção por pensar-se que o professor sabe um pouco mais sobre o assunto em questão. Não que o blogueiro seja um professor, ou mesmo que o professor seja melhor ou mais inteligente que seus alunos, apenas pensa-se que o blogueiro sabe um pouco mais sobre o assunto tratado que os demais. Por isso quando o blogueiro responde os comentários ou mesmo comenta seu próprio artigo, os leitores estarão mais atentos para escutar  ler.

Mas às vezes os comentários podem ficar desapercebidos, sobretudo em blogs que recebam muitos comentários, para isso acho uma estratégia superinteressante a estilização dos comentários do autor ou mesmo da equipe (é vou ensinar a estilizar diferentemente), e isso que vou tentar passar no artigo de hoje.

ByUser (Equipe), ByPostAuthor (Autor do artigo) e o Comment-author-admin

Para entender como funciona a estilização de comentários vindos de autores e membros da equipe do blog, precisamos entender um pouco o sistema de comentários do WordPress. Recomendo que leia o artigo Porque nunca usar o Disqus no WordPress e entenda porque nunca usar outros sistemas de comentários e sim usar o sistema do próprio WordPress, pois o mesmo é fantástico.

  • byuser: O WordPress usa está classe CSS para identificar que o comentário está vindo de um usuário do WordPress, ou seja, de um dos autores do blog, isso se você não usa o banco de dados do WordPress para guardar usuários (leitores) do Blog.
  • bypostauthor: O WordPress identifica através desta classe os comentários vindos do autor do artigo em questão.
  • comment-author-admin: O WordPress usa esta classe para identificar que o administrador do Blog, comentou no artigo.

Agora vamos estilizar tudo. Farei da seguinte forma. Postarei o código CSS referente a estilização e o mesmo deve ser colocada ao fim do arquivo style.css. Para evitar erros, recomendo que baixei o arquivo, pois às vezes o código de esilização de scripts, gera alguma tag que não é necessária, além disso dentro do arquivo vai também as imagens utilizadas na estilização, as mesmas devem estar dentro da pasta images, dentro da pasta de seu template wordpress.

O código

{code type=css}
.byuser{
background-image: url(“images/comment-equipe.png”) !important;
background-repeat: no-repeat !important;
background-position: left bottom !important;
border: 1px solid #000 !important;
background-color: #336699 !important;
padding-bottom: 40px !important;
color: white;
}

.bypostauthor{
background-image: url(“images/comment-autor.png”) !important;
background-repeat: no-repeat !important;
background-position: left bottom !important;
border: 1px solid #000 !important;
background-color: #0066FF !important;
padding-bottom: 40px !important;
color: white;
}

.comment-author-admin{
background-image: url(“images/comment-admin.png”) !important;
background-repeat: no-repeat !important;
background-position: left bottom !important;
border: 1px solid #000 !important;
background-color: #555 !important;
padding-bottom: 40px !important;
color: white;
}
{/code}

O Resultado e o Download

Para que você tenha uma ideia, antes mesmo de colocar o código em seu próprio blog, você pode acessar a demonstração que preparei no endereço: http://escolasites.com/testes/wordpress/?p=5.

Para acessar os arquivos, css e a imagens, peço que baixem os mesmo aqui: [download id=”2″].

Possui alguma dúvida? Caso tenha não deixe de perguntar! Deixe também o feedback de seus resultados.

Receba as melhores dicas para criar um negócio digital lucrativo

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br