• 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

Contenidos de texto a voz en  WordPress

[ hace 5 meses ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Básico] [ ]

accesibilidad

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
  • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

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

*

* Gravatar habilitado

Barra lateral principal

Presentación

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

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Mostrar lista de sub páginas en página padre en WordPress

Qué debes tener en cuenta para modificar código en WordPress

Guía visual de Hooks para StoreFront y WooCommerce

¿Qué son los Nonces en WordPress?

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