WordPress: Crear un widget simple con tus mejores artículos

En este artículo explicaré cómo crear de manera sencilla un widget de texto para WordPress con HTML que muestre a nuestros visitantes nuestros mejores artículos, aquellos que consideramos la joya de la corona de nuestra web. ¡Y sin sobrecargar la web con más plugins! ¡Vamos al lío!

 

Los mejores artículos de nuestra web

Todos contamos en nuestra web con algún artículo al que le tenemos especial cariño por una de estas dos opciones:

  • Le hemos dedicado mucho tiempo, esfuerzo, investigación, etc…
  • Nuestro programa de analítica web (como Google Analytics) nos dice que es uno de los artículos más visitados.

 

Estadísticas de Google Analytics
Estadísticas de Google Analytics

En cualquiera de los dos casos queremos que el visitante de nuestra web tenga la oportunidad de ver estos artículos. Esa es la finalidad de este widget.

 

Cómo mostrar los mejores post de nuestra web

Ahora bien, ¿cómo conseguir que cualquier visitante de nuestra web los vea?

El primer impulso seguro que es instalar alguno de los múltiples plugins para WordPress existentes.

Pero una opción sencilla y elegante consiste en mostrar los enlaces a nuestros artículos mediante un widget. Además, de esta forma, evitaremos sobrecargar nuestro servidor, ya que vamos a utilizar HTML simple.

Aquí tenemos el resultado final.

Resultado del nuevo widget para WordPress con nuestro artículos destacados

Cómo crear el widget para nuestras entradas destacadas

La idea es sencilla:

  1. Creamos una lista ordenada con nuestros artículos favoritos, mediante el editor de artículos. Copiamos el código generado y …
  2. Pegamos el código HTML dentro de un widget de texto.

Ahora que ya lo tenemos claro vamos a verlo paso a paso.

 

Pasos a seguir para crear nuestro widget

Antes de nada tenemos que asegurarnos que estamos mostrando los widgets en nuestra web, o al menos en el área que nos interesa (el blog, la portada, etc…). En mi caso muestro el área de widgets a la derecha en prácticamente todas las áreas de mi web.

Zona de widgets en WordPress

Ahora ya sabemos dónde se va a mostrar nuestro widget.

Para poder crear la lista ordenada con nuestro artículos favoritos debemos ir al editor de artículos y crear uno nuevo.

Crear un nuevo post en WordPress

Ahora creamos una lista numerada.

Crear un nuevo post en WordPress

Y en cada uno de los elementos vamos a crear un enlace.

Crear un enlace en el editor de WordPress

En este paso elegiremos cada uno de los enlaces de nuestra web con WordPress que nos interese. No olvidemos marcar “Abrir enlace en una nueva ventana/pestaña“.

Seleccionar uno de nuestros enlaces

Una vez que hemos añadido tantos enlaces como queramos, llega el momento de copiar el código HTML que el editor de WordPress ha generado. Para ello, pulsaremos en la pestaña “Texto” en el editor de entradas de WordPress.

Opción modo texto en editor de WordPress

 

Y ahora vemos el código HTML que el editor de WordPress ha generado en base a nuestro texto.

Código de la lista en HTML

Copiaremos ese código y lo pegaremos en el bloc de notas o cualquier otro editor de texto plano (Notepad++, Sublime Text, etc…).

No debemos usar editores de texto tipo Word o similar.

Este tipo de editor añade caracteres no visibles al texto y hace que el código HTML quede inservible.

En este punto podemos eliminar el post que hemos creado o guardarlo como borrador (que es lo que yo recomiendo) para poder reutilizar el código generado.

Ahora iremos al apartado:

Apariencia -> Widgets

Opción de widgets

Y a continuación especificamos que queremos crear un nuevo widget de texto en la barra lateral.

Crear nuevo widget

En este punto ya sólo tenemos que especificar el nombre con el que va a aparecer el widget y pegaremos el código HTML que hemos copiado previamente.

Poner nombre al widget y pegar el código HTML

Según mis pruebas, WordPress no muestra la lista ordenada (con números) por defecto. He tenido que añadir a mano el estilo, que es el código marcado en amarillo.

Aunque es perfectamente válido añadir estilos de este modo, no es una práctica recomendada. Sólo la utilizo aquí para simplificar.

Puedes copiar el código para que se vean los números desde aquí abajo y pegarlo a tu HTML. Vigila con atención que no elimines algún carácter, ya que puede hacer que el widget no funcione como debiera.

Una vez que guardamos y cerramos el widget, sólo tenemos que seleccionar en qué orden queremos que aparezca respecto a otros widgets.

Ubicar el nuevo widget

Y ya está. Recordemos que podemos añadir o quitar elementos de manera sencilla repitiendo los pasos. Volvemos a recordar cómo queda el resultado final.

Resultado del nuevo widget

¿Dudas, sugerencias? Y si te ha gustado, compártelo 😉

¿Alguna duda, idea, comentario? Puedes dejarlo en los comentarios del artículo. Y si te ha gustado, compártelo 😉

6 opiniones en “WordPress: Crear un widget simple con tus mejores artículos”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *