Tutorial: Lista Actualizada Engadget Posts Populares

  • Autor Autor SoloNegocios
  • Fecha de inicio Fecha de inicio
S

SoloNegocios

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

bjh846.png

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:

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:

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: Ver el archivo adjunto 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:

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:

rvx9fr.png

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
 
Última edición:
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?
 
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
 
Excelente tutorial SN 🙂
 
alguien lo puede hacer como lo mas visitado?
 
Excelente tutorial SoloNegocios.

Pero solo te tengo una pregunta. ¿Cómo podría hacer para esto me funcione desde el widget?

Pues te cuento que provee colocando:

PHP: 
<?php mas_comentados_elegante(1,50); ?>


Y no me funciona. Pues creo que desde ahí no se puede correr PHP.

Como lo puedo hacer?

Auto respuesta.

Bueno a quienes tengan la misma duda. Les cuento que existe un plugin llamado PHP code widget. El cual luego de instalarlo nos permite agregar código PHP en el widget.
 
Última edición:
Lo puse todo ok. pero me dice No se encontraron comentarios :S
y en realidad hay comentarios de los últimos 30 dias 😛

Sera porque uso IntenseDebate??
 
Mykeura dijo:
Excelente tutorial SoloNegocios.

Pero solo te tengo una pregunta. ¿Cómo podría hacer para esto me funcione desde el widget?

Pues te cuento que provee colocando:

PHP: 
<?php mas_comentados_elegante(1,50); ?>


Y no me funciona. Pues creo que desde ahí no se puede correr PHP.

Como lo puedo hacer?

Auto respuesta.

Bueno a quienes tengan la misma duda. Les cuento que existe un plugin llamado PHP code widget. El cual luego de instalarlo nos permite agregar código PHP en el widget.
Hacer clic para expandir...

También lo puedes colocar directamente en el sidebar.php pues es nadamás la llamada a la función.

Muy buen tutorial SoloNegocios.

missha dijo:
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?
Hacer clic para expandir...

No lo he probado pero viendo el código, si lo implementó porque según la posición/color del <li> le va disminuyendo el width:%, mira el CSS ahí viene eso.
 
gracias amigo por el aporte
 
Que genio. Gracias por el aporte.
 
Muchas gracias tío, ya lo he puesto en práctica en un wordpress que tengo y queda de lujo! 😉
 
No sabia que se podia hacer esto... Queda mucho mas vistoso de esta forma, lo probare a ver si me funciona y ver que tal queda.... Se agradece el tuto 🙂
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba