Cómo crear un Slider con Contenido Destacado en la Home de WordPress

Seguramente tengas algunos artículos que quieras destacar para los lectores de tu web o blog. Es decir, quieres crear unas publicaciones destacadas, o un contenido destacado. Y si tienes tu web o blog alojado en WordPress, es posible no solo hacer esto, sino que se muestre en forma de slider, y que automáticamente vayan pasando diferentes diapositivas con estos artículos destacados. Una forma excelente para que ciertas entradas no se pierdan en el tiempo. O para que las nuevas tengan un lugar destacado en tu homepage.

Y es que en el pasado ya vimos como podíamos fijar un artículo destacado en la home de nuestro WordPress. Pero, a veces, solo una entrada nos puede parecer insuficiente. Y para eso, el uso del slider resulta idóneo, ya que en un espacio mínimo, podemos mostrar mucha información a nuestros visitantes. Ideal para no recargar nuestra web con demasiada información al mismo tiempo.

Instalando el plugin Jetpack

Para poder añadir este slider a nuestra página web, en primer lugar lo que deberemos hacer es instalar uno de los plugin para WordPress más usados y conocidos: Jetpack. Si tienes alguna duda sobre como instalar un plugin en WordPress, tenemos un artículo que puede resolverte todas tus dudas al respecto.

jetpack plugin wordpress

Como decimos, Jetpack es uno de los plugins para WordPress más conocidos. Y no es para menos, ya que reúne en una misma extensión multitud de funcionalidades según los módulos que activemos. Estos van desde herramientas para SEO, creación de formularios, o estadísticas de tu web, por poner algunos ejemplo. Sin ir más lejos, hace un tiempo hablamos en Silo Creativo de dos de los módulos de Jetpack: el de Apariencia y el de Imágenes.

Una vez que tengamos Jetpack instalado y activado en nuestra web, pasaremos directamente al siguiente paso de este mini-tutorial. Que no es mas que elegir nuestros artículos destacados para que se muestren en la portada de la web.

Creando el Slider con Contenido Destacado

En primer lugar, desde el Panel de Administración de WordPress, entraremos en el apartado de Personalización. Si tenemos Jetpack correctamente instalado y activado, podremos observar como aparece una nueva sección llamada Contenido Destacado. Entramos en ella, y vemos cuales son sus opciones.

contenido destacado opciones wordpress
Opciones del Panel de Contenido Destacado

En primer lugar, vemos un campo de texto titulado Nombre de la etiqueta. Esto nos ofrece una pista sobre como va a funcionar nuestro slider de Contenido Destacado. Lo que vamos a hacer es crear una nueva Etiqueta en nuestra web, y todos aquellos artículos que lleven esa etiqueta, automáticamente van a aparecer en el slider de la portada. Así que, vamos a escribir un nombre lo suficientemente remarcable como para acordarnos entre la nube de Etiquetas que tengamos en nuestra web. Podemos usar la palabra que queramos. En mi caso, voy a elegir la palabra destacado. Fácil y directo.

Si seguimos observando, justo debajo del campo de texto que hemos rellenado, tenemos abajo dos opciones más. Si activamos la primera, la Etiqueta no se mostrará de cara a nuestros visitantes. Ni en el listado de Etiquetas de los artículos, ni en la nube de Etiquetas, si es que tenemos una en nuestra web. Esto se debe a que esta nueva Etiqueta puede que la utilicemos, por así decirlo, para uso interno. Solo para que nosotros, como administradores de la web, sepamos que ciertos artículos son Contenido Destacado, y no queremos que se vea que tienen un Etiqueta extra. Si es nuestro caso, activaremos este primer checkbox.

La segunda opción sirve para que el Contenido Destacado se muestre tanto en el slider que queremos crear, como en el timeline de artículos de nuestra web. Si queremos que se muestren en ambos sitios, activaremos esta casilla. Si por el contrario solo queremos que los artículos destacados se vean en el slider, pero que no aparezcan junto con el resto de artículos, lo mantendremos desactivado.

Creando y Asignando la Nueva Etiqueta

Ya le hemos dicho a Jetpack cual será la Etiqueta que va a funcionar para crear nuestro slider de Contenido Destacado. Pero nos hemos saltado un paso importante: crear la Etiqueta en sí misma. Proceso tremendamente sencillo, como todos sabemos. Solo hay que ir, desde el Panel de Administración de WordPress, a Entradas > Etiquetas. Y aquí, creamos una nueva Etiqueta que sea exactamente la misma palabra que hemos añadido anteriormente en la sección de Contenido Destacado, dentro de Personalizar.

Y una vez realizado esto, solo nos queda ir a nuestro listado de Entradas, e ir asignando esta nueva Etiqueta a aquellas que queremos que formen parte del slider de Contenido Destacado. Así de sencillo.

slider contenido destacado
Funcionamiento del slider con Contenido Destacado en la plantilla Jennifer

Solo nos queda ir a la portada de nuestra web, y ver como ya aparece el slider con el Contenido Destacado que hayamos elegido. Como habéis podido comprobar, no es un proceso extremadamente complicado. Pero a pesar de esto, no queremos terminar sin comentar un último asunto que seguro que a muchos os puede interesar.

Algunos problemas comunes

Al incorporar esta característica en algunos de nuestros temas para WordPress como Rosalie, a veces nos encontramos con algunos usuarios que tienen dudas, o le surgen problemas. Y es que, a pesar de resultar un proceso relativamente sencillo, a la más mínima equivocación da como resultado que no aparezca el slider en nuestra homepage.

Uno de los más comunes es el añadir la etiqueta con comillas. Esto es debido porque en ciertos tutoriales, incluso en algunos antiguos que ofrecía la documentación de Jetpack, aparecía que debíamos insertar un «featured tag», o «etiqueta destacada». Por lo que es bastante habitual que muchos, en un primer momento (me incluyo en los que lo hicieron) directamente hacían un copy&paste, comillas incluidas. Provocando que no nos relacionase esta etiqueta con la que añadimos a nuestras entradas. Y ocasionando que el slider nunca llegase a aparecer.

También es bastante usual que no nos aparezca el slider con el contenido destacado si estamos usando una página estática como página de inicio. Para cambiar esto, no hay mas que irse al panel de Personalización, y entrar en la sección Ajustes de portada. Aquí, simplemente habrá que verificar que está activa la opción de Tus últimas entradas, tal como vemos en la imagen.

ajustes portada customizer

Y esto es todo. Como habéis visto, es una opción muy fácil de activar y añadir a nuestra web, con el que ganamos bastante dinamismo en nuestro diseño. Además de conseguir acentuar ciertas entradas de nuestra web, que quizás de otra forma quedarían relegadas a un segundo plano al ir añadiendo nuevo contenido.

Esperamos que os haya servido este mini-tutorial, y para cualquier duda solo tenéis que escribirnos en los comentarios!

Comentarios (8)

  1. Muy buen articulo para poner un slider en la pagina web a nosotros últimamente muchos clientes nos piden poner sliders destacados o que sean a pantalla completa en sus paginas. De lo que no se dan cuenta es que los sliders ralentizan la pagina, sobre todo si pones varios y por varias paginas (cosa, que nos suelen pedir), nosotros les recomendamos, que si quieren seguir con esa opción de poner sliders, no pongan mas de tres para que pueda cargar rápido la web y no se vaya el usuario al tener que estar esperando.

    1. Muy cierto lo que comentas. Cuando ponemos uno o varios elementos que tienen un relativo peso en nuestra web, hay que pensar muy bien si ese diseño nos compensa, ya que va a existir cierta ralentización. Siempre podemos jugar con los tipos de archivos de imagen, y con la optimización de estos para reducir la carga. Pero si, como bien dices, quieren varios slider, la carga va a ser mayor por mucho que optimicemos las imágenes.

      Supongo que es el típico tira y afloja con el cliente, en el que debemos advertirle que quizás algunas de las decisiones con las que viene en mente son contraproducente para sus propios intereses.

      Gracias por comentar, y por poner en pie este tipo de escenarios que se dan cuando tenemos un proyecto entre manos. Un saludo!

  2. Muy buen articulo pero tengo jetpack instalado y activado y no me aparece el apartado de contenido destacado en personalizacion… que puede ser???

    1. Saludos Marcos,
      gracias por comentar!

      Si tu tema no hace uso de esta función, lamentablemente no la tendrás disponible. Es una característica que pone Jetpack a disposición de los autores de temas, y son ellos los que deciden si usarlos o no. SI no te aparece, o bien no estás en la página principal o bien tu tema no hace uso del mismo.

      Suerte!

  3. Hola. Quisiera saber si se puede añadir más contenido destacado. En el tema Olsen, pone que está limitado a 6 nada más y son los que yo tengo en mi blog. Pero he visto otros blogs con el mismo tema y tienen más.
    Muchas gracias.

  4. Hola. Muchas gracias por la información. La verdad es que no sé si mi tema hace uso del jetpack. He probado a introducir los CSS que has indicado pero no veo ningún cambio. Sabes si habría otra forma?
    Muchas gracias.

Deja una respuesta

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