• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Contenidos de texto a voz en WordPress

Contenidos de texto a voz en WordPress

[ 25 agosto 2022 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Básico] [ ]

accesibilidad

Suscríbete a DecodeCMS:  

Tener la funcionalidad de escuchar los textos en tu sitio web WordPress mejora la accesibilidad de tu sitio, especialmente útil para personas con problemas de visión o simplemente para usuarios que quieren tener una guía de lectura con voz.

 

Generalidades

Existen muchos plugins, usualmente asociados con servicios externos, que brindan esta funcionalidad, sin embargo en nuestro caso veremos un plugin asociado con el servicio gratuito que brinda ResponsiveVoice.

Responsive Voice logo

 

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

Responsive Voice resultado final

 

Registro y activación

Debido a que la funcionalidad de texto con voz es a través de un servicio externo, será necesario que te registres en el sitio web de Responsivevoice. Tras el registro necesitarás activar tu sitio web.

 
Puedes ingresar la url del sitio, y luego en la parte inferior de la página guardar los cambios.

Url verificación

 
Tendrías que insertar un código javascript, sin embargo en nuestro caso no será necesario ya que usaremos un plugin que entre otras cosas realizará esto, por lo que sólo necesitaremos el código «key».

Key de verificación

 
Puedes descargar el plugin ResponsiveVoice Text To Speech desde el respositorio de WordPress. Tras descargar e instalar, verás una pantalla de configuración en donde tienes que ingresar el «key» anterior.

Plugin configuración key code

 
Finalmente tras ingresar este código en el plugin verás que ahora ya aparece correctamente tu sitio verificado.

Verificación correcta del sitio

 

Usando el plugin con un Shortcode

La sintaxis básica para usar el Shortcode del plugin es agregar el parámetro de voice y también opcionalmente el texto del botón, tal como se muestra a continuación:

[responsivevoice_button voice="Spanish Latin American Female" buttontext="Escuchar la entrada"]

Este Shortcode puedes agregarlo al inicio del contenido de la página o entrada.

Puedes revisar la documentación del plugin ResponsiveVoice Text To Speech, en donde encontrarás las diferentes voces que puedes usar así como algunos parámetros adicionales para el Shortcode.

 

Insertar automáticamente ResponsiveVoice en las entradas

Si deseas tener la funcionalidad de texto a voz para todas tus entradas, no es muy práctico estar agregando manualmente el Shortcode, por lo que podrías hacerlo a través de código.

Puedes agregar el siguiente código como parte de tu archivo functions.php de tu tema hijo.

add_filter( 'the_content', 'dcms_add_button_voice', 10, 1);
function dcms_add_button_voice ( $content ) {
    if ( is_singular( 'post' ) ){
        $shortcode_button = do_shortcode( '[responsivevoice_button voice="Spanish Latin American Female" buttontext="Escuchar la entrada"]' );
        $content = $shortcode_button . $content;
    }
    return $content;
}

Como puedes ver, como parte del código, esta la sintaxis del Shortcode la cual puedes variar de acuerdo a tus necesidades.

 

Conclusión

Como hemos podido comprobar, puedes tener la funcionalidad de texto a voz para tu contenido de WordPress, hemos visto como realizar esto de manera simple usando un servicio externo y un plugin.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Quitar el menú de WooComerce en la administración de WordPress para ciertos usuariosQuitar el menú de WooComerce en la administración de WordPress para ciertos usuarios
  • Eliminar automáticamente las imágenes al borrar una entradaEliminar automáticamente las imágenes al borrar una entrada
  • Ocultar precios de productos a usuarios visitantesOcultar precios de productos a visitantes en WooCommerce
  • Deshabilitar Información de Usuarios de la REST API de WordPressDeshabilitar Información de Usuarios de la REST API de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Miguel

    17 mayo, 2023

    hola neceisto traducir el pop up qu eme sale pidiendo autorizacion para leer las noticias el mimos sale en ingles y lo neceiso en español podrias indicarme como se realizaa? vale aclarar que me sale en los celularas la notificacion

  2. Pasley

    14 mayo, 2024

    Gracias, muy útil y práctico 🙏

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Omnisend
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad SEO social woocommerce

Populares

Mostrar contenido solo a usuarios que compraron un producto en WooCommerce

Usar Tailwind en WordPress

Cómo eliminar todos los productos de WooCommerce

¿Qué es el Loop de WordPress?

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2026 Todos los derechos reservados