Madly Luv - O mLuv é um blog pessoal no qual aborda vários assuntos como design, músicas, literatura, arte, televisão etc. Desenvolvido e mantido por Ana Flávia Cador.

WP: Lista dos últimos comentaristas (com foto)

Tutorial Wordpress

Para quem tenta evitar ao máximo usar plugins em seu wordpress, como eu, sempre busca usar as tags PHP do WP e desta vez não foi diferente quando se trata de lista de últimos comentários. Como você já deve saber, existe vários e vários plugins para isso, mas para quê ocupar espaço em sua hospedagem e deixar o seu WP mais lento se há como usar uma tag tão linda como essa e super maléavel? Segue abaixo o exemplo:

Para conseguir este resultado, você usará esta tag:

<?php
$query = "SELECT * from $wpdb->comments WHERE comment_approved= '1'
ORDER BY comment_date DESC LIMIT 0 ,4";
$comments = $wpdb->get_results($query);

if ($comments) {
    echo '';
    foreach ($comments as $comment) {
        $url = '<a href="'. get_permalink($comment->comment_post_ID).'#comment-'.$comment->comment_ID .'" title="Por '.$comment->comment_author .', em '.get_the_title($comment->comment_post_ID).'">';
        echo '';
        echo '<div class="imagem-gravatar-comentarista">';
        echo $url;
        echo get_avatar( $comment->comment_author_email, $img_w);
        echo '</a></div>';

        echo '<div class="excerpt-comment">';
        echo $url;
        echo $comment->comment_author;
	echo '</a>: ';
	echo $excerpt = wp_html_excerpt( $comment->comment_content, 110 );
        echo '...</div><div style="clear:both;"></div>';
    }
    echo '';
}
?>

Na terceira linha, na frente de DESC LIMIT é só trocar o nº 6 para a quantidade de comentaristas que você deseja. Percebe o número 110 na linha 20? É a quantidade de palavras que irá aparecer na frente do gravatar (funciona no mesmo estilo do excerpt de posts). Mude para a quantidade que quer dependendo do espaço onde você irá colocar a tag.

Se você quiser que apareça o link do blog de quem comentou em vez do link de seu respectivo comentário, é só trocar o item da linha 9 por este código aqui:

$url = '<a href="'.$comment->comment_author_url .'" title="Por '.$comment->comment_author .', em '.get_the_title($comment->comment_post_ID).'">';

Para definir o tamanho da imagem do gravatar e alinhar junto com o texto do comentário, basta usar este CSS que criei:

/*** lista últimos comentarios - madlyluv.com ***/
.imagem-gravatar-comentarista img {
	background: #F0F0F0;
	padding: 5px;
	margin: 2px 5px 5px 0;
	width: 32px; /*largura da img*/
	height: 32px; /*altura da img*/
	float: left;
}
.excerpt-comment {
	min-height: 42px; /*altura mínima para não ocorrer sobreposição*/
}

A classe imagem-gravatar-comentarista define a altura, largura e borda da imagem do gravatar, enquanto a classe excerpt-comment alinha o texto na mesma altura do gravatar para evitar sobreposição. O alinhamento ideal de excerpt-comment sempre é a soma da height da imagem vezes duas de padding (32 + 2 x 5 = 42) ;D

Tutorial original por WP Recipes e modificado por mim.

Veja também...

Resenha: Protetor Solar Perfect Bright Milk, da Bioré
Além da Henna: Como ter reflexos dourados com Cassia Obovata
As ilustrações de Pauline (a.k.a. Punziella)

9 Comentário(s)

(9 pelo blog e pelo facebook)
  • Fernanda Maria
    Visitar blog
    09 . 03 . 2016

    @Aninha,
    É, eu até abandonei isso por enquanto porque o código aparece só que lá no final da barra e transparente e, sem formatação, estranho mesmo e mais estranho que não vi nenhum código que deu certo até agora eheheheee então por enquanto deixo quieto né.

    Responder

  • Fernanda Maria
    Visitar blog
    06 . 03 . 2016

    Olha eu aqui de novo rsss
    Olha, eu coloquei essa tag na sidebar ok, coloquei o css ok, mas não aparece as imagens :(
    E se eu quero deixar as imagens redondas como faz???
    PS:to usando no blog de testes e óbvio, fica dificil ver imagem de comentario né rsss

    Responder

    • Aninha
      Visitar blog
      07 . 03 . 2016

      @Fernanda Maria, eu precisov verificar esse código porque ele é bastante antigo, ele é de 2012 e foi atualizado em 2014, então faz um tempinho que eu não testo ele, hehe. Para usar as bordas arredondadas é só você colocar border-radius: 50% dentro de .imagem-gravatar-comentarista img {}.

      Responder

  • Alessandra Ramos
    Visitar blog
    27 . 02 . 2015

    Oi, Aninha
    Amore, estou me descabelando aqui, não consegui fazer funcionar… Tentei usaer o tutorial (http://madlyluv.com/extras/wp-habilitando-linguagem-php-nos-widgets-sem-plugin/). Ao tentar seguir este tuto, passo-a-passo, salvo…mas a mensagem que aparece é esta: "Fatal error: Call to a member function get_results() on a non-object in /home/a6484582/public_html/wp-content/themes/temabase_mLuv1.0/functions/funcoes-gerais.php(15) : eval()'d code on line 4"
    Estou fazendo algo errado? Me ajude!!!!

    Responder

    • Aninha
      Visitar blog
      28 . 02 . 2015

      @Alessandra, isso acontece porque o tema que você está usando já vem com esta função de habilitar o PHP nos seus widgets. Ao repetir o código ele entra em conflito e dá "fatal error". :)

      Responder

      • Alessandra Ramos
        Visitar blog
        03 . 03 . 2015

        @Aninha, Aff, tirei, mas nada, amiga…frustrada aqui kkkkkkkkkk

        Responder

      • Alessandra
        Visitar blog
        03 . 03 . 2015

        @Aninha, querida, ultima tentativa… não sei ficar frustrada sem tentar mais vezes, rsrsrs. Em nome de 'JAGA"! (Thundercats hahahaha)
        Tô retornando ao wordpress, e aprendendo tb…Já fiz de tudo o CSS tá em style.css, apareceu direitinho quando coloquei a tag no sidebar.php , só que, no footer!
        Onde exatamente coloco a tag? Estou usando o seu tema base… Sofrendo aqui kkkkkkkkk Agradeço a luz desde já!

        Responder

        • Alessandra Ramos
          Visitar blog
          11 . 04 . 2015

          @Aninha, amiga, troquei para o seu Tema Base Responsivo atualizado vs.1.1, num dia de muuuuuita inspiração, e li com muita calma todas as instruções, apesar de leiga em wordpress, cheguei lá!!! Obrigada por disponibilizar o tema, querida!!! Tô mega feliz!!! Beijão!!!

        • Aninha
          Visitar blog
          12 . 04 . 2015

          @Alessandra, ai que felicidade! *-* Fico feliz que tenha dado tudo certo!