Cómo añadir el enlace “Leer más” y los extractos personalizados a WordPress

Read this article in English

Añadir un enlace con el texto “leer más” o “seguir leyendo” a WordPress es fácil si tu plantilla WordPress sigue las reglas de una buena maquetación y funciones de WordPress, sin ser necesario tocar una sola línea de código para poner este botón.

Si por el contrario tu theme no parece reaccionar a las distintas opciones que vamos a ver a continuación, será necesario ir a una opción más avanzada y modificar algunos archivos de tu template y darle estilo con CSS para mostrar el resumen de tus artículos seguidos de un “Read More”. Vamos con ello!

Blog en WordPress con enlace Leer más

Mostrar todo el artículo vs mostrar un resumen en la página de Inicio

Es de la primeras decisiones que se toman al crear un blog es cómo vamos a mostrar nuestros artículos en la página de Inicio. La home de todo blog suele ser la página más visitada, y es muy importante que tenga una carga rápida y resulte amigable para el lector.

Hay dos opciones, cada una con sus ventajas e inconvenientes:

Mostrar todos los artículos completos, lo cual permite al usuario leer todos tus contenidos sin tener que abandonar la home, algo bastante cómodo. Sin embargo, cuando tienes más de 10 o 15 artículos, la cantidad de texto y su estructura puede resultar un problema, debido a la cantidad de scroll vertical que tiene que hacer el lector, teniendo una mala experiencia de usuario.

Mostrar un resumen, entradilla o extracto de tus artículos en la página de inicio, y que para seguir leyendo el post completo, un botón de “Leer más” o “Seguir leyendo” o un enlace desde el título. Un ejemplo de esto lo puedes ver en la demo del tema Rosalie, donde cada post muestra un breve resument y un botón con el texto Read More. Esto da opción al usuario a encontrar el contenido que le interesa de una forma más rápida, además de no duplicar contenido en tu web y mejorar el SEO.

WordPress dos columnas con enlace seguir leyendo

Por defecto, a menos de que tu tema diga lo contrario, la opción de mostrar la entrada entera en la home y en las páginas de categorías es la que viene activa por defecto. Si vas a mostrar mas de diez artículos y estos vana a tener una cierta extensión (400-500 palabras) mi consejo es que cambies este comportamiento y pases a la opción de mostrar un resumen o extracto. Veamos como podemos lograrlo.

Cómo añadir Leer más con la etiqueta Read More. Opción 1.

Esta es la opción más usada para dividir tu artículo en dos partes, mostrando la parte superior en la home seguido de un enlace con el texto Leer más o Seguir leyendo, y que tras hacer clic en él, nos lleva a la vista individual del artículo, donde se muestra el resto del artículo. Para añadirlo debes seguir los siguientes pasos.

Si estás en WordPress.org (confirma que estás usando WP.org y no WP.com en esta comparativa) accede al panel de administración de WordPress (wp-admin) y edita el artículo al que quieres añadir el Read More asegurándote de que estás visualizando la pestaña “Visual”. Una vez en la pantalla de edición ubicamos el cursor en la sección del texto donde queramos añadir la division y hacemos clic para indicar que ese el el punto exacto. Tras esto, hacemos clic en el icono de “Read More” o “Leer Más” para que se añada la etiqueta a nuestro artículo.

Poner etiqueta Read More en WordPress

Verás como se añade una línea que divide el texto en dos partes. Ya solo tienes que guardar los cambios y comprobar si se está aplicando y mostrando correctamente el enlace de leer más en la página de Inicio.

Añadir Etiqueta Leer Más en Panel de WordPress

Bola extra: si quieres personalizar el texto que se muestra, es decir, en vez de “Read More” o “seguir leyendo” mostrar algo parecido a “El artículo continúa..” o “Más contenido”, una vez añadido el tag, cambia la vista de “Visual” a “Texto” o “HTML” y busca el texto:

<!--more-->

y prueba a cambiarlo o modificarlo con tu propio texto:

<!--more El artículo continúa -->

Aquí tienes más info sobre personalizar el Read More.

Cambiar texto Leer más en WordPress

Si usas WordPress.com, el proceso para poner el texto seguir leyendo es exactamente el mismo, pero como el panel de edición puede cambiar, aquí tienes la captura del área y del icono sobre el que hacer clic.

Leer Más en WordPress.com

Para más info sobre esta edición en WordPress.com aquí tienes la documentación oficial.

Este primer método es fácil y si tu tema sigue las buenas prácticas de WordPress, no tendrás problemas a la hora de lograrlo. Ahora bien, como habrás podido comprobar deberás ir artículo por artículo realizando la modificación, además de duplicar contenido.

Como observarás, la entradilla que se muestra en la home sigue apareciendo en la página individual del artículo. Esto es así porque si el usuario accede directamente al artículo sin pasar por la home (ya sea a través de las redes sociales o un buscador tipo Google) necesita leer el inicio del artículo para entenderlo completamente, por lo que no es posible eliminarlo. Si este contenido duplicado es un problema para tu web o blog, pasemos al siguiente punto, los extractos personalizados.

Cómo añadir Seguir Leyendo con los extractos personalizados. Opción 2.

Si la opción de la etiqueta “Read More” no te ha funcionado o no quieres tener contenido duplicado, entonces vamos con el plan B. Se trata de crear una entradilla o resumen personalizado para cada artículo, algo laborioso pues requiere más trabajo que la etiqueta de “Leer Más”, pero que tiene un beneficio claro para el SEO, pues no estamos duplicando contenido y creamos una página de inicio y categorías más ricas. Después veremos esto con más profundidad. Vamos con el método.

Nuevamente, si estás en WordPress.org accede al panel de administración (wp-admin) y edita el artículo al que quieres añadir el extracto personalizado. Necesitarás hacer scroll y buscar bajo el cuadro de texto un cuadro llamado Extracto o Excerpt.

Agregar extractos personalizados a WordPress

Si no lo ves, es posible que lo tengas oculto. Comprueba las opciones de visualización y activa el checkbox de los Extracto.

Activar extractos en WordPress

Ya puedes rellenar el cuadro de texto con tu resumen personalizado y guardar los cambios. Esto hará que el la página principal, bajo el título de tu artículo se muestre este texto en forma de entradilla seguido de un “leer más” que WordPress añade de forma automática. Con este método no tienes forma de modificar el texto de Seguir leyendo, pero tenemos la ventaja de controlar la extensión y el contenido que se muestra.

Extractos personalizados en WordPress.com

Si estás en WordPress.com, también tienes opción de incluir extractos manuales desde el panel lateral, haciendo clic en “Más opciones” y rellenado el campo de Extracto.

Aquí tienes más info sobre WordPress.com y los extractos.

Esta opción genera automáticamente un enlace tipo “Read More” tras el resumen que hemos incluido. Este texto no se puede modificar desde el panel de WordPress. Sin embargo, como hemos comentado antes, nos permite tener una página de inicio y páginas de categorías más ricas, ya que dichos resúmenes no son contenido duplicado y podemos peronalizarlo buscando un call to action.

Para que esto sea completo, es buena idea añadir una descripción personalizada a la página de categorías y permitir que Google indexe su contenido. Ya verás como notas una mejoría en el SEO de estás páginas, ya que cada vez que escribas un artículo nuevo, está pagina se actualizará con el resumen personalizado y a Google le encanta el contenido nuevo y actualizado.

Añadir Read More a todos los artículos tras un número de palabras. Opción 3.

Si ninguna de las opciones anteriores ha funcionado, es hora de tocar código. Lo que necesitamos es añadir la función the_excerpt(); que nos va a generar un resumen automático de los primeros 55 caracteres de nuestros artículos. Además esta es la función que utiliza también los extractos manuales de los que hemos hablado en el punto 2, así que dos pájaros de un tiro!

Desafortunadamente WordPress.com no permite la edición de los archivos del tema, por lo que este método solo es válido para WordPress.org. Y como vamos a añadir una función propia, lo recomendable es crear un tema hijo o child theme para no sobrescribir los archivos de tu plantilla y poder seguir actualizando el tema sin perder estos cambios. Vamos con los pasos para llevarlo a cabo.

Paro 1: Crear un tema Hijo. Sigue este tutorial para ello.

Paso 2: Una vez tengas tu tema hijo creado, lo primero es comprobar si el tema padre está usando la función correcta para mostrar un pequeño resumen o el texto completo. Para ello buscaremos el loop en el archivo index.php de tu tema padre, lo identificarás fácilmente porque empieza con algo parecido a:

if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();

Paso 3: Una vez ubicado tendremos que ver como carga cada uno de los post. Es posible que el código esté justamente ahí, con la llamada al título del post (entry-title) y a la imagen destacada (the_post_thumbnail();), pero si no es así, es posible que tu tema esté realizando una llamada a un segundo archivo, para que todo esté bien ordenado. Identificarás la llamada a otro archivo por algo similar a lo siguiente:

get_template_part( 'template-parts/content', 'index' );

Básicamente el desarrollador del theme ha sido ordenado y ha dividido el código en varios archivos, ubicando el que nos interesa dentro de la carpeta template-parts, y llamándose al archivo content-index.php. Así lo tenemos en varios de nuestros temas, como en Rosalie, el te que estamos usando como ejemplo y hace que sea mucho mas fácil editar el theme e identificar las clases y funciones para futuras actualizaciones.

Paso 4: Pues bien, una vez localizado ese archivo hay que buscar la función the_excerpt();. Si existe, para al siguiente paso (al paso 6), pero si no existe, tendrás que copiar este archivo y el index.php (y todos los que hagan llamada al loop que vamos a editar) y pegarlo en nuestro tema hijo. Importante conservar la misma estructura de carpetas en el tema hijo que el te padre.

Paso 5: Ahora toca editar estos archivos. Lo que vamos a hacer es sustituir la función the_content(); por the_excertp(); para que en vez de mostrarnos el contenido completo nos muestre un extracto autogenerado de 55 caracteres.

Paso 6: Una vez realizado esto, es hora de decirle a WordPress que añada automáticamente un enlace “Read More” al final de cada extracto autogenerado. Para ello, tienes que añadir la siguiente función a tu archivo functions.php de tu tema hijo:

function silocreativo_custom_excerpt_more( $output ) {
return $output . '<a href="'. esc_url( get_permalink() ) . '" class="read-more">' . esc_html__( 'Read More', 'silocreativo' ) . '</a>';
}
add_filter( 'the_excerpt', 'silocreativo_custom_excerpt_more' );

Debes sustituir silocreativo por el nombre de tu tema hijo. El texto Read More viene preparado para traducirse mediante el archivo .po y .mo, pero si no necesitas un sitio multilingual y vas a utilizar WordPress en un solo idioma, puedes cambiar ese “Read More” por “Seguir Leyendo” o cualquier texto para que el usuario haga clic.

Seguir leyendo personalizado con código en WordPress

Paso 7: guarda los cambios y actualiza tu tema por FTP. Comprueba que está todo ok y puedes darle estilo usando la clase read-more que hemos añadido en el código anterior, para convertirlo en un botón bien diseñado.

Aumentar o Disminuir número de caracteres en el extracto

¿Necesitas más texto en los extractos automáticos antes de tu enlace para seguir leyendo? Como hemos comentado, WordPress genera estos resúmenes de forma automática con un límite máximo de 55 caracteres. A ves esto puede ser mucho o poco en algunos casos (por ejemplo en un layout con tres columnas).

Para cambiar este valor puedes añadir la siguiente función a tu tema WordPress:

function silocreativo_custom_excerpt_length( $length ) {
	return 80;
}
add_filter( 'excerpt_length', 'silocreativo_custom_excerpt_length', 999 );

En este ejemplo hemos modificado el valor por defecto para conseguir 80 caracteres por artículo en vez de los 55. Varía el numero de caracteres dependiendo del diseño de tu tema para que no queden muy cortos ni muy extensos. Por ejemplo en el theme Paulie vendrían bien textos más largos, mientras que en Artie, lo ideal serían más cortos.

Usa el poder de los extractos e invita a tus lectores a seguir leyendo

A menos que tengas un blog con estradas muy cortas, a nadie le gusta hacer scroll infinito pasando textos y textos hasta encontrar el artículo que le guste. Es mucho mas fácil para el usuario tener una visión global de lo que hay en tu blog (como si de na carta de un restaurante se tratara) e ir visitando post a post de forma individual.

Los extractos y el botón leer más nos permiten darle al blog un punto extra de usabilidad y mejorar la experiencia de usuario de nuestros lectores. Si te tomas esto enserio y cuidas de la “salud” de tus seguidores, es también buena idea tener un menú WordPress bien organizado y resaltar aquella página o enlace que sea importante para ellos. Hacerle la vida más fácil al usuario es algo que seguro te van a agradecer!

Escrito por 

Hola! Mi nombre es Ricardo Prieto y trabajo (y escribo) sobre diseño web, maquetación y experiencia de usuario en SiloCreativo, desde donde ayudamos a personas a desarrollar sus proyectos con tutoriales, consejos y recursos.

2 Comentarios en “Cómo añadir el enlace “Leer más” y los extractos personalizados a WordPress

  1. Vive Hoy

    excelente articulo, tengo una duda respecto a algo que quiero hacer en mi blog, es un blog magazine y quisiera crear contenido que pueda verse en la pagina de inicio y al dar clic en la noticia me lleve a la categoría al que pertenece el articulo y aun no lo logro, e podrias ayudar con ello? gracias y felicitaciones.

    1. Saludos!
      Por defecto WordPress al hacer clic en la noticia o artículo, lo que enlaza es la vista individual del artículo, en lugar de la categoría.
      Para conseguir lo que quieres, lo ideal es tener junto al título enlaces de la categoría a la que pertenece dicha noticia, como por ejemplo en esta plantilla.

      Para ello deberás editar los archivos php de tu template, u optar por otra plantilla que ya lleve incorporado esta funcionalidad.

      Suerte!

Deja un comentario

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