Divi

Cambiar ‘read more’ del blog en Divi (texto del botón)

Jefferson Maldonado
Por Jefferson Maldonado 18 Ene 2021 6 min de lectura

Si tienes un blog en Divi y revisas el módulo de blog en tu sitio, lo más probable es que el botón que lleva a cada artículo diga "read more" en inglés. Es uno de esos detalles pequeños que rompen la coherencia de un sitio en español: cuidas cada palabra del contenido, defines los colores y la tipografía perfectos, y justo al final de cada card aparece "read more" como si el sitio fuera bilingüe sin quererlo. La buena noticia es que puedes cambiar ese texto "read more" en Divi por cualquier cosa que quieras, y hacerlo toma menos de dos minutos.

En este tutorial te muestro dos métodos: el primero con un snippet de jQuery que va en el Head de Divi (el más rápido y el que recomiendo), y el segundo con un filtro PHP en functions.php por si prefieres no usar JavaScript. También te explico cómo probarlo y qué hacer si el texto no cambia después de aplicarlo.

¿Por qué "read more" aparece en inglés en un sitio Divi en español?

Esto ocurre porque el texto "read more" es la cadena que WordPress usa por defecto en los archivos del tema para el enlace de continuar lectura, y Divi lo hereda. Aunque WordPress tiene traducciones al español, el módulo de blog de Divi a veces genera ese texto directamente desde su código sin pasar por el sistema de traducción estándar de WordPress. El resultado es ese "read more" que aparece aunque el resto del sitio esté en español perfecto.

Lo puedes ver con frecuencia cuando configuras el módulo de blog en Divi desde cero, especialmente con el layout de blog en lista o en rejilla. Si ya tienes el diseño configurado pero quieres mejorar estos detalles, el tutorial de blog en modo lista en Divi tiene algunas variaciones interesantes de layout que complementan bien este ajuste. Puedes ver una demo en vivo del resultado aquí.

Método 1: Snippet jQuery en el Head de Divi (recomendado)

Este es el método más rápido y no requiere tocar el archivo functions.php del tema. El snippet reemplaza el texto en el HTML renderizado antes de que el usuario lo vea.

Paso 1: Haz una copia de seguridad

Antes de meter cualquier código en tu sitio, te recomiendo siempre hacer una copia de seguridad. No porque este snippet sea riesgoso — es muy sencillo — sino como hábito. Puedes hacerla rápidamente desde tu cPanel o con un plugin como UpdraftPlus.

Paso 2: Abre las opciones de Divi

Ve a tu panel de WordPress y entra a Divi → Opciones de Divi → Integración. Ahí encontrarás varias secciones de código. La que necesitas es "Agregar código al encabezado de su blog" (Add code to the <head> of your blog). Haz clic en esa sección para expandirla.

Consejo: si tienes acceso al snippet en múltiples lugares (head de la página de inicio, head del blog, etc.), usa el campo específico del blog para no afectar otras partes del sitio. Aunque en este caso el selector CSS es lo suficientemente específico para que no genere conflictos.

Paso 3: Pega el snippet

Copia y pega el siguiente código en ese campo:

Código
<script>
jQuery(document).on('ready ajaxComplete', function () {
    jQuery(".et_pb_post a.more-link").html(function () {
        return jQuery(this).html().replace('read more', 'Ver el post completo');
    });
});
</script>

Cambia 'Ver el post completo' por el texto que quieras mostrar: "Leer el artículo", "Continuar leyendo", "Ver más", o lo que mejor encaje con la voz de tu sitio. Guarda los cambios y recarga tu blog para verificar el resultado.

🎓 ¿Quieres personalizar tu blog en Divi de forma más avanzada?
En uxdivi.com/cursos tenemos el Curso de Menús y Blogs Personalizados en Divi donde cubrimos desde la configuración del módulo blog hasta la personalización avanzada con CSS y snippets. Accede como suscriptor y dale a tu blog la identidad que merece.

Método 2: Filtro PHP en functions.php

Si prefieres una solución sin JavaScript, puedes usar el sistema de filtros de WordPress para reemplazar el texto directamente a nivel de PHP. Este método es más "limpio" desde el punto de vista técnico, pero requiere acceder al archivo functions.php de tu tema hijo.

Agrega este código en tu archivo functions.php:

Código
add_filter( 'the_content_more_link', function( $more_link, $more_link_text ) {
    return str_replace( $more_link_text, 'Ver el post completo', $more_link );
}, 10, 2 );

De nuevo, cambia 'Ver el post completo' por el texto que quieras. Guarda el archivo y verifica el resultado en tu blog.

Consejo: si usas ambos métodos al mismo tiempo por error, el resultado puede ser texto duplicado o comportamiento inesperado. Usa solo uno de los dos — yo prefiero el snippet jQuery porque no requiere tocar el tema y es más fácil de revertir si algo no funciona.

¿El cambio aplica en todos los layouts del blog?

El snippet jQuery usa el selector .et_pb_post a.more-link, que es el que Divi genera en el módulo de blog para ese enlace. Esto significa que funciona con los diferentes layouts del módulo de blog de Divi — rejilla, lista, tiempo completo — siempre que el módulo esté generando ese enlace. Si tienes el blog construido con un método alternativo (como el Loop Builder de Divi 5), el selector puede ser diferente y necesitarías ajustarlo.

También vale la pena saber que este snippet se aplica después de que la página carga, así que en conexiones lentas puede haber un destello de "read more" antes de que el jQuery lo reemplace. Es imperceptible en la mayoría de los casos, pero si te molesta ese detalle, el método PHP es la opción más limpia.

Preguntas frecuentes sobre cambiar "read more" en Divi

¿Funciona si tengo el blog en una página creada con el Theme Builder?

Sí, el snippet jQuery actúa sobre el HTML renderizado independientemente de cómo se haya construido la página. Mientras el módulo de blog de Divi genere ese enlace con la clase more-link, el snippet funcionará.

¿Tengo que cambiar el texto en cada post individualmente?

No. El snippet y el filtro PHP actúan de forma global — una sola vez configurado, aplica en todos los posts y en cualquier instancia del módulo de blog donde aparezca el enlace.

¿Puedo usar caracteres especiales o emojis en el texto de reemplazo?

Sí, puedes usar cualquier texto, incluyendo caracteres especiales en español (ó, é, ú, ñ) y emojis si van con el tono de tu blog. Solo asegúrate de que el archivo donde lo pegas esté guardado en codificación UTF-8.

El texto sigue diciendo "read more" después de aplicar el snippet. ¿Qué hago?

Primero limpia el caché de tu sitio y del navegador — es la causa más común. Si persiste, verifica que pegaste el snippet en el campo correcto (head del blog, no el footer) y que no hay errores de sintaxis en el código. También puedes abrir las herramientas de desarrollador del navegador (F12) y buscar si el selector .et_pb_post a.more-link existe en el HTML.

Conclusión

Cambiar el texto "read more" en Divi es un ajuste pequeño que marca una diferencia real en la coherencia visual y lingüística de tu sitio. Con el snippet jQuery en el Head de Divi lo tienes resuelto en dos minutos y sin tocar código del tema. Una vez aplicado, todos los módulos de blog del sitio mostrarán el texto personalizado que definas, y tus visitas tendrán una experiencia completamente en español de principio a fin.

🎓 ¿Quieres un blog en Divi con diseño y personalización de nivel profesional?
En uxdivi.com/cursos cubrimos el módulo de blog al detalle: layouts, tipografía, CSS personalizado, snippets como este y mucho más. Accede como suscriptor y construye el blog que tu sitio merece.

// ¿Te sirvió este tutorial?

Imagina lo que aprenderás
con los cursos completos

En UXDivi llevamos los tutoriales del blog al siguiente nivel: proyectos reales de principio a fin, recursos descargables y soporte directo conmigo. Todo por menos del costo de un curso individual en otra plataforma.

+44 cursos +1113 alumnos 4.7 en Trustpilot Garantía 7 días
Jefferson Maldonado
// Escrito por

Jefferson Maldonado

UX Director · Founder UXDivi, MUX Studio y UXDivi Templates

UX Director | fundador de UXDivi y MUX Studio

Comentarios

Para dejar un comentario, accede a tu cuenta de UXDivi.

Acceder a mi cuenta