Tema: Lo mas comentado Tipo Engadget

He visto que a muchos les gusta la forma que tiene Engadget de mostrar los Posts mas comentados:

El problema es que para hacerlo toca usar un Plugin que cuesta $8 US, para que malgastar el dinero si podemos hacerlo fácilmente y con Cache para no tener que andar sobrecargando el servidor con consultas

1. Lo primero que necesitan es ir al archivo Functions.php y colocar este código:

Código PHP:

function limitar_titulo($title, $n)
{
 if ( strlen ($title) > $n )
  return substr($title, 0, $n) . '…';
 else
  return $title;
}


function mas_comentados_elegante($duration='',$longitud_titulo=50)
{
 if ( !$searchterms = wp_cache_get('mas_comentados','mas_comentados_elegante') )
 {
  global $wpdb;
  $no_posts = 5;

  $request = "SELECT ID, post_title, COUNT($wpdb->comments.comment_post_ID) AS 'comment_count' FROM $wpdb->posts, $wpdb->comments";

  $request .= " WHERE comment_approved = '1' AND $wpdb->posts.ID=$wpdb->comments.comment_post_ID AND post_status = 'publish'";

  if($duration !="")
   $request .= " AND DATE_SUB(CURDATE(),INTERVAL ".$duration." DAY) < post_date ";

  $request .= " GROUP BY $wpdb->comments.comment_post_ID ORDER BY comment_count DESC LIMIT $no_posts";
  $posts = $wpdb->get_results($request);
  $output = "";

  if ($posts)
  {
   foreach ($posts as $post)
   {
    $post_title = stripslashes($post->post_title);
    $comment_count = $post->comment_count;
    $permalink = get_permalink($post->ID);
 
    $title_class = '';
    if ($i==0)
    {
     $title_class = "red";
    }
    elseif ($i==1)
    {
     $title_class = "orange";
    }
    elseif ($i==2)
    {
     $title_class = "yellow";
    }
    elseif ($i==3)
    {
     $title_class = "green";
    }
    elseif ($i==4)
    {
     $title_class = "blue";
    }

    $output .= '<li class="popular_posts_bars_li ' . $title_class . '"><a href="' .$permalink. '" title="' .$post_title. '" class="popular_posts_bars_link">' .limitar_titulo($post_title, $longitud_titulo). '</a><span class="popular_posts_bars_comment_count_hold"><a href="' .$permalink. '#comments" rel="nofollow" class="popular_posts_bars_comment_count">' .$comment_count. '</a></span></li>';

    $i=$i+1;
   }
  }
  else
   $output .= "<li>No se encontraron comentarios</li>";

  wp_cache_add('mas_comentados', $output, 'mas_comentados_elegante', 86400 );

  echo $output;
 }
 else
  echo $searchterms;
} 


2. Vayan al archivo donde tienen el estilo "style.css o como lo llamen ustedes" y peguen este codigo:

Código HTML:

.popular_posts_bars{
 margin:0.3em 0 !important;
 padding:0px;
 list-style:none;
}

.popular_posts_bars_li{
 margin:0 0px -10px 0px;
 padding: 15px 0px 15px 5px;
 list-style:none;
 position: relative;
 width:100%;
}

.popular_posts_bars_li.red{
 background: url("./imagenes/red.png");
 width: 100%;
}

.popular_posts_bars_li.orange{
 background: url("./imagenes/orange.png");
 width: 95%;
}

.popular_posts_bars_li.yellow{
 background: url("./imagenes/yellow.png");
 width: 89%;
}

.popular_posts_bars_li.green{
 background: url("./imagenes/green.png");
 width: 84%;
}

.popular_posts_bars_li.blue{
 background: url("./imagenes/blue.png");
 width: 80%;
}

a.popular_posts_bars_link{
 display:block;
 min-height: 30px;
 margin-right: 40px;
 color: #333;
 text-decoration:none !important;
}

a.popular_posts_bars_link:hover{
 color: #fff;
}

.popular_posts_bars_comment_count_hold{
 display:block;
 width: 40px;
 position:absolute;
 right: -20px;
 top: 15px;
}

a.popular_posts_bars_comment_count{
 width: 38px;
 color: #fff !important;
 background: #000;
 text-align:center;
 display:block;
 border:0 !important;
 text-decoration:none !important;
 font-size:10px;
}

3. Deben subir a la carpeta del Theme que usan estas imágenes: imagenes.zip

Estas imágenes deben estar dentro de una carpeta llamada "imagenes" en la carpeta del Theme que usan, así que la ruta donde deben estar las imágenes debe ser así: tu_theme/imagenes/ y en esa carpeta debe estar los archivos: yellow.png, red.png, blue.png, orange.png, green.png

4. Vayan al sidebar y coloquen esto donde quieren que salga la lista:

Código PHP:

 <ul>
  <?php mas_comentados_elegante(1,50); ?> 
 </ul>

Explicación de la función:

mas_comentados_elegante(1,50) pide 2 valores:

El primer valor es para mostrar los Posts mas comentados de hace X días, si colocan 1 como en el ejemplo mostrara la lista con los Posts mas comentados de hace 1 día.

El segundo valor es la longitud del titulo, esto nos sirve si tienen títulos muy largos como "Aprende a crear un correo hotmail gratis online, hotmail crealo ya, leer hotmail desde tu PC".

Para que no se vea feo le colocamos un 50 a la función esto nos haría que los títulos que tienen mas de 50 caracteres se muestren de esta otra forma "Aprende a crear un correo hotmail gratis online, ...".

Les dejo una captura del como debería verse la lista de lo mas comentado con esta función:

PD: Si saben programar pueden hacer modificaciones como en la captura que les mostré, yo no ordeno los Posts por mas comentados en esa captura están ordenados por "Lo mas descargado", también pueden ordenarlo por "Lo mas visitado" todo es saber sacar los datos que guardan algunos Plugins como el que me cuenta las descargas

Mi estimado SoloNegocios, vas a llenar mi carpeta de suscripciones como sigas tan enjundioso con los tutoriales.

Se agradece

Excelente, pero, no se podra hacer esto en blogger?

buen tutorial a favoritos, en blogger debería ser diferente ya que no tienes acceso a las consultas sql

gracias por el aporte!

en el diseño original de Engadget parece que la longitud de la barra depende del número de comentarios (no va decreciendo siempre lo mismo). se os ocurre alguna idea de implementar esto? se podría hacer calculando el % de cada barra con respecto al total de comentarios que se suman en cada barra, pero igual no estoy cayendo en una forma más sencilla de hacerlo?

Iniciado por esejoker468

Excelente, pero, no se podra hacer esto en blogger?

Aqui tienes un tutorial de como hacer ese efecto en blogger
Entradas populares, numerar y añadir una clase diferente a cada li de una lista | Pizcos.net

Gracias, buen tutorial.

Iniciado por thejigg0695

Aqui tienes un tutorial de como hacer ese efecto en blogger
Entradas populares, numerar y añadir una clase diferente a cada li de una lista | Pizcos.net

Gracias!! excelente, en blogger es mas facil jejeje

como podria poner eso pero enbesde lo mas cometado quiero que sea lo mas visitado?

uuu hermoso tutorial, seria excelente si se creara por plugin para no tener problemas al actualizar el wordpress.

Muy bueno, lo implementare