Seguindo a mesma linha de raciocínio do nosso último artigo sobre “Múltiplos loops“, hoje você vai aprender a utilizar a WP_Query para criar um loop e exibir os posts mais comentados no WordPress.

Isso pode ser muito útil em blogs que você quer dar credibilidade a alguns artigos, induzir usuários a entrarem na discussão e gerar mais tráfego naquele conteúdo. Isso ajuda seu site a crescer em diversas maneiras, tanto para usuários quanto para buscadores (SEO).

Também vou exibir partes de CSS para você configurar o conteúdo, mas isso fica a seu critério.

Então vamos ao que interessa, os códigos.

WP_Query para posts mais comentados no WordPress

Na verdade não há nada de complicado aqui, já que o WordPress já oferece a contagem de comentários para você.

Veja como é simples:

<?php
$nova_consulta = new WP_Query( 
    array( 
       'orderby'             => 'comment_count', // Ordenar pelos comentários
       'order'               => 'DESC',          // Ordem decrescente
       'posts_per_page'      => 5,               // Apenas 5 posts
       'ignore_sticky_posts' => true,            // Remove posts fixos
    ) 
);
?>

<div class="mais-comentados">
    <?php if ( $nova_consulta->have_posts() ): ?>
        <?php while ( $nova_consulta->have_posts() ): ?>
        
            <?php $nova_consulta->the_post(); ?>
            
            <div class="mais-comentado clearfix">
                
                <?php if( has_post_thumbnail() ): ?>
                    <div class="mais-comentado-thumbnail">
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail('mais-comentado-thumbnail'); ?>
                        </a>
                    </div> <!-- .mais-comentado-thumbnail -->
                <?php endif; // has_post_thumbnail ?>
                
                <h4 class="mais-comentado-titulo">
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title();?>
                    </a>
                    (<?php echo get_comments_number(); ?>)
                </h4> <!-- .mais-comentado-titulo -->
            
            </div> <!-- .mais-comentado -->
            
        <?php endwhile; ?>
    <?php endif; // have_posts ?>

    <?php wp_reset_postdata(); ?>
</div> <!-- .mais-comentados -->

Você pode incluir o loop acima em qualquer lugar que preferir dentro do seu tema, contando que não tente fazer isso dentro de outro loop.

Perceba também que estamos tentando capturar a imagem em destaque (se tiver uma)  buscando pelo tamanho “mais-comentado-thumbnail” (que provavelmente não existe no seu functions.php).

Para que os novos artigos tenham o tamanho correto, você deve adicionar o tamanho no functions.php da seguinte maneira:

function configura_tamanho_imagens() {		
    add_image_size( 'mais-comentado-thumbnail', 150, 150, true );
}
add_action( 'after_setup_theme', 'configura_tamanho_imagens' );

No código acima, você precisa editar o tamanho da imagem de 150×150 para o tamanho que preferir.

Outro problema que pode ocorrer, é que os posts antigos não terão o tamanho de imagem correto, o que pode fazer com que o CSS tente encolher uma imagem gigante para caber no local correto. Isso vai pesar seu site.

Para resolver este último problema, basta instalar o plugin Regenerate Thumbnails e executá-lo. Mas lembre-se que você deve adicionar o tamanho correto no functions.php primeiro.

Para o CSS (arquivo style.css), você pode adicionar o seguinte:

.clearfix:after {
    content: '.';
    width: 100%;
    height: 0;
    line-height: 0;
    font-size: 0;
    display: block;
    margin: 0;
    padding: 0;
    visibility: hidden;
    overflow: hidden;
}
.mais-comentado {
    max-width: 340px; /* Escolha a largura que preferir */
}
.mais-comentado-thumbnail {
    float: left;
}
.mais-comentado img.attachment-mais-comentado-thumbnail {
    max-width: 150px;  /* Escolha a largura que preferir */
    height: auto;
    margin: 0 10px 0 0;
    float: left; /* Remove margens extra */
}
.mais-comentado .mais-comentado-titulo {
    font-size: 16px;
}

Isso deve gerar algo como o seguinte:

Posts mais comentados do blog

Posts mais comentados do blog

Deixei muitas partes do CSS para serem configurados pelo CSS padrão do seu tema, então o seu widget deverá estar bem diferente do que exibi na imagem acima.

Por falar em Widget, se você quiser criar um Widget com o código acima, veja nosso tutorial sobre “Como criar Widget para WordPress“.

Caso tenha dúvidas, comete-a aí abaixo!