Photoshop y Tutoriales

La facilidad de encontrar plugins de wordpress para agregar tus post más populares  o más leídos y colocarlos en el sidebar de tu blog a través de los widgets que wordpress tiene y que están disponibles única y exclusivamente si tu plantilla de wordpress lo tiene configurado.

Como recientemente cambié la plantilla y la plantilla de wordpress anterior me gustaba por el hecho de tener en el sidebar configurado unas tabs que mostraban los post más populares del blog, se me ocurrió buscar en internet algo que hiciera referencia a ello y encontré un tutorial bien explicado para crear desde la función hasta la clase en el css y eso es lo que voy a compartir contigo en esta oportunidad “Como listar tus post más populares de tu blog sin utilizar plugins“. Si no tienes mucha experiencia en el código de wordpress te recomiendo hacer un respaldo o hacer estas modificaciones en un theme que no estés utilizando, así si sucede cualquier error (que no debería) al menos tienes tus archivos intactos.

Básicamente vamos a modificar 3 archivos de tu wordpress theme (recuerda respaldarlos inicialmente):

1. functions.php, que es el archivo en el que se almacenan todas las funciones del theme, no importa que plantilla estés utilizando en tu blog, este archivo siempre va a estar dentro del theme.
2. style.css, el archivo css de tu blog
3. 404.php, en mi caso este es el archivo en el que mando a llamar la función. Todos los themes traen una aburrida pagina de error, asi que, tomando en cuenta que la plantilla que utilizo no tiene el listado de las entradas más populares, ¿porqué no mostrarlas en la pagina de error?.

Configurando la función en nuestro blog

Es realmente sencillo, tomando en cuenta que la función ya está hecha , ero básicamente lo que hace es hacer un llamado a la Base de Datos y por medio de los comentarios y llamados de este mismo archivo los ordena de Mayor a Menor. La función es la siguiente:

function popularPosts($num) {
    global $wpdb;
 
    $posts = $wpdb->get_results("SELECT comment_count, ID, post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , $num");
 
    foreach ($posts as $post) {
        setup_postdata($post);
        $id = $post->ID;
        $title = $post->post_title;
        $count = $post->comment_count;
 
        if ($count != 0) {
            $popular .= '<li>';
            $popular .= '<a href="' . get_permalink($id) . '" title="' . $title . '">' . $title . '</a> ';
            $popular .= '</li>';
        }
    }
    return $popular;
}

Esta función la vas a insertar al final del archivo functions.php antes del corchete de cierre, Es decir, en la penúltima línea del archivo, de esta forma no interfieres con ninguna función de la plantilla.

Clase CSS para la función [styles.css]

Aqui hice una modificación, y es que agregué al codigo css original una regla para la Lista desordenada, lo que hice fue deshabilitar la viñeta para que se cargara y mostrara unicamente la imagen, ya que al probarlo en el archivo noté que se mostraban tanto la viñeta como la imagen, esto lo hice agregando a la UL que sigue a la clase popular list-style:none, eso lo vimos en el tutorial para crear menu desplegable con CSS, ahi lo explico con detenimiento.

Código CSS modificado:

.popular {
	clear: both;
	float: left;
	margin: 10px 0;
	width: 283px;
	}
 .popular ul {
  list-style:none;
}
	.popular ul, .popular ul li {
		margin: 0;
		padding: 0;
		font-size: 12px;
		}
 
		.popular ul li {
			margin: 4px 0;
			padding-left: 20px;
			background: url(images/star.png) no-repeat 2px 2px;
			}
 
	.popular h2 {
		border: 0;
		border-bottom: 1px solid #aaa;
		font-size: 22px;
		font-weight: normal;
		font-family: Georgia,serif;
		margin: 0 0 15px;
		padding: 0 0 5px;
		}

Ahora necesitas la imagen de la estrella, puedes crear una imagen de 10px X 9px en forma de estrella o flecha o un punto y la llamas estrella.png, esta imagen debes subirla via ftp al servidor dentro de la carpeta images de la plantilla que estés utilizando en wordpress.

Llamando la función en nuestro archivo, para mostrar los post mas populares del blog

Esta es la parte más sencilla, solo debemos colocar lo siguiente dentro del archivo, en la posición que queramos, para que se muestren los post más vistos del blog:

<div class="popular">
    <h2>Most Popular Posts</h2>
    <ul>
        < ?php echo popularPosts(10); ?>
    </ul>
</div>

El 10 indica la cantidad de post que quieras mostrar.

Y de esta forma terminamos, el crédito no es mío, como te comenté al inicio necesitaba una forma de mejorar mi pagina de error para que mejorar la misma. Haz clic aqui para que veas como quedó al final dentro de mi página de error.

Este tutorial lo encuentras originalmente en bavotasan.com

Te podria interesar:

1. Post Relacionados con imagenes para WordPress
2. Como personalizar plantillas wordpress sin codificar nada
3. Tweets mas populares en la API de búsqueda de Twitter
4. Los 10 post mas visitados durante el primer semestre 2010
5. Post relacionados con imagenes en wordpress

Tags: blog, css, plantilla wordpress, post populares, theme, wordpress