{"id":35661,"date":"2022-10-13T09:24:07","date_gmt":"2022-10-13T09:24:07","guid":{"rendered":"https:\/\/www.conectasoftware.com\/magazine\/?p=35661"},"modified":"2024-02-02T17:52:56","modified_gmt":"2024-02-02T17:52:56","slug":"asi-puedes-conseguir-una-web-mas-accesible","status":"publish","type":"post","link":"https:\/\/www.conectasoftware.com\/magazine\/asi-puedes-conseguir-una-web-mas-accesible\/","title":{"rendered":"Mejora la accesibilidad de tu sitio web"},"content":{"rendered":"\n<p>Si quieres mejorar tu p\u00e1gina web realizada en WordPress, no te pierdas la siguiente funcionalidad. Con ella podr\u00e1s<strong> convertir el contenido de tus post en audio <\/strong>con unos sencillos pasos. Una mejora en tu web para que sea m\u00e1s accesible y \u00fatil para personas invidentes o para usuarios que quieran escuchar nuestro blog a modo de podcast.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conecta tu web con Responsive Voice<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/rgkyIZJUpcC05AZAwEhVS_fZDctLt0ziithbtgQtwvDKgy1udSiZuy1J_ZAGVdjB0h3_YxjGjFEa56BopG6a5xdY9ZCY8K32fA3jXsm3nNTRmxZalQEksdiU2hrdytFXygVI87ILvk_jnFmGLC4nzM8ZGieVOBtBhbhFDl0MbLYQf7cqEP_bIQODVw\" alt=\"web mas accesible\" \/><\/figure>\n\n\n\n<p>Primero de todo vas a entrar en la web de <a href=\"https:\/\/responsivevoice.org\/\" target=\"_blank\" rel=\"noopener\">Responsive Voice<\/a> y seleccionas la opci\u00f3n de \u2018\u2018Add Voice to Your Website\u2019\u2019 tras esta opci\u00f3n agregaremos la url de tu web<em> (previamente tendr\u00e1s que registrarte).<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/M0yMbbuEX3MOJd0Bz6BpuBZu6EXIrWsr9d5zOPboQBLIu6UkiKe2YuluCnkImpISExvIcqOkhAi2JNPqc__uLfV-KBOhLta8iJaN4qTFQdNnIRPaHslGU2rFksPxRv973TfwUrHyeKS1u7K75BjWMkepY_VQ3uVALeBbJvxYKmwNZ4vZASjfQNWwxg\" alt=\"web mas accesible\" \/><\/figure>\n\n\n\n<p>Una vez realizado el paso anterior nos mostrar\u00e1 la siguiente ventana:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/9HoDx4UGVgSLdpAUVZSRRnjBYrTzGEWQqT9mUq_-nYd0fbbGpaOwkjuB8jfzjevzyXB1Tx8OM_q53_j9ro-XEo-Yg50_4t1kNqN5bgCZykNRSjHxQ0ud2bdEnggjYMDTICKz-0aJu3UlKbZYcGbOI30EHnauQDK6lIfr_yP_WPS6ErqNvgKU3FX6LQ\" alt=\"web mas accesible\" \/><\/figure>\n\n\n\n<p>Agregaremos la url de nuestra p\u00e1gina web y seleccionaremos la opci\u00f3n: \u2018\u2018Select text to speak it\u2019\u2019. Tras esta configuraci\u00f3n seleccionaremos el tipo de voz, la cual narrar\u00e1 el contenido de nuestros post:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/kpK143L8qA0-SORW6SHIc4xC5VI76lSkg6lRQwV1zo1mEI2VerLh2pZZ7ZKBesE0H7M-qpYdCJC-u8nHi5eMHufeNhS1rx8qWFWGGnSjAilS5m8Al9Kq8VWnkP5vijz2LlYqg08uyZFSK4cPqfi0v9pnfAFWmJAcToaqYzVQK0VG0Ce5ktWOf9hvXg\" alt=\"\" \/><\/figure>\n\n\n\n<p>Para terminar de conectar nuestro sitio web con Responsive Voice, instalaremos en nuestro CMS el siguiente plugin: <a href=\"https:\/\/es.wordpress.org\/plugins\/responsivevoice-text-to-speech\/\" target=\"_blank\" rel=\"noopener\"><strong>ResponsiveVoice Text To Speech<\/strong><\/a><strong>, <\/strong>una vez instalado copiaremos el siguiente c\u00f3digo para su conexi\u00f3n con la API:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/J5gqvN1DygIGRvTOWYm7uGuhnrN7xt7mlx-mqwZECRHQtDl_ofTS88HgKmsqs-QiHM44tcW8sE2HnPu4bNgqIF2MLYuDhnszxkjGkx_1x6M9p50dnAxjtbfv-Oc1fGd9p-DVwGXyaVFqUCeYMdFxySIYRP1oOn5JLhdh8fYIT1ED0ICIRLmqFtKoxw\" alt=\"\" \/><\/figure>\n\n\n\n<p>Una vez copiado este c\u00f3digo e instalado el plugin en nuestro wordpress lo pegaremos aqu\u00ed:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/jd25ppPVzgq2PT3YOOh1rPDJ7seLUg7q8Ua3WN0_odvSKcGHzI5V64u3FzP8jnqpj2nXxMKmUx1Pxe7FWJcanGAQRC9d-YQQdaVPnC2IRkC6ia6Fgb6Lh5VOwM9MkCTDAoBO7dRGLCNoOzSCvfcglbWxEnCB36BhkUbnHhO3U4Y-g7vvykCMTIhDyQ\" alt=\"\" \/><\/figure>\n\n\n\n<p>Con estos sencillos pasos ya tenemos nuestro wordpress conectado a Responsive Voice.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/UTReIXqQLWzkBNx20BM2z7FpJ0ZivWXhZGGambfHuFVLp-evWi8YQqu3PXkcym1UQwq0y4x8F_ZQiR327YNL7EogEL39SgV-p2MuWcGGucK7TEyVK4X4zuiZqMq24X5w9lcZifkpC440-QCuGwqRohFWZCqDtSw0XJhQQMdjCLhc9FnAZk7Pgjc29Q\" alt=\"web mas accesible\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u00bfNo aparece este reproductor en tus post?<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/E8S16dWLx49F-ewF6AewkmK1seG1SNAqnFFeazMD8vl7caImRvAsviryOydAkeAObfpTNun9NGaigZyUE1sahYNBQhTqn_UkNmJBV5rAu7Uxut8O78IDDhYMuELXYvYhDYsyBND5HsRngqdu1gkSMEksGbuP3cfoNnEzcG3Tc4OK5L5S1S6R_ET3Zg\" alt=\"web mas accesible\" \/><\/figure>\n\n\n\n<p>No te preocupes, a\u00fan no hemos terminado. Podemos a\u00f1adir en nuestros post el siguiente <strong>ShortCode<\/strong>, con el que lograremos agregarlo sin problema. Pero, \u00bfsi queremos a\u00f1adirlo en todos los post del blog? Uff\u2026 tengo 3 mil entradas \u00bfahora debo a\u00f1adir una por una? \u00bfAlgo tedioso, verdad?<\/p>\n\n\n\n<p>Si queremos a\u00f1adirlo a un post exacto, agregaremos al comienzo de nuestra entrada el siguiente shortcode:<\/p>\n\n\n\n<p>[responsivevoice_button voice=\u00bbSpanish Female\u00bb buttontext=\u00bbEscuchar la entrada\u00bb]<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u00bfQuiero a\u00f1adirlo a todo mi blog de forma autom\u00e1tica, esto es posible?<\/strong><\/h3>\n\n\n\n<p>Cari\u00f1o m\u00edo, esto es como una pel\u00edcula de Antena 3 en diciembre. Vamos a acabar con un final feliz.&nbsp;<\/p>\n\n\n\n<p>S\u00ed, si queremos que se a\u00f1adan autom\u00e1ticamente en todo nuestro blog y sin necesidad de agregar ning\u00fan ShortCode a cada entrada deberemos hacer lo siguiente:<\/p>\n\n\n\n<p>Instalaremos el plugin <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\" target=\"_blank\" rel=\"noopener\">Code Snippets<\/a>, una vez en nuestro plugin agregaremos un nuevo <em>fragmento de c\u00f3digo.<\/em> Quedando algo as\u00ed:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/hbH5G9QFVMUCHbvB8WQHFkQxA1FlsIGbqMpKIFJsNT9pTLyLUFgeBfr8YZ1IrxlqTq_aEpG2OH6OCyaOSvb7smgUyxvT3Nztd0zQ8b6HBo68rrgNKDh5FexJ5b5wsPtx1Zy8bN9lj3FbW22q3_ikrxKg2IoU932ytAV99JVuQOgT0ko1_jvDWMU7Lg\" alt=\"\" \/><\/figure>\n\n\n\n<p>Una vez has a\u00f1adido nuestro c\u00f3digo daremos en \u2018\u2018Guardar los cambios\u2019\u2019.<\/p>\n\n\n\n<p>Ahora s\u00ed, toca disfrutar de nuestra nueva funcionalidad y conseguir una web mas accesible. Y por supuesto no voy a despedirme sin dejarte el c\u00f3digo para que tan solo tengas que copiar y pegar, estamos aqu\u00ed para ayudarte no para que te dejes los ojos en una captura de pantalla.<\/p>\n\n\n\n<p><strong>Copiar y pegar el siguiente c\u00f3digo:<\/strong><\/p>\n\n\n\n<p>add_filter( &#8216;the_content&#8217;, &#8216;dcms_add_button_voice&#8217;, 10, 1);<\/p>\n\n\n\n<p>function dcms_add_button_voice ( $content ) {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;if ( is_singular( &#8216;post&#8217; ) ){<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$shortcode_button = do_shortcode( &#8216;[responsivevoice_button voice=\u00bbSpanish Female\u00bb buttontext=\u00bbEscuchar la entrada\u00bb]&#8217; );<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$content = $shortcode_button . $content;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;}<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;return $content;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>\u00bfTe ha gustado esta funcionalidad para tu web? Si no quieres perderte las siguientes mejoras para tu CMS.<strong> \u00a1<\/strong><a href=\"https:\/\/www.conectasoftware.com\/magazine\/suscripcion-newsletter\/\"><strong>Suscr\u00edbete<\/strong><\/a><strong> a nuestra newsletter!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si quieres mejorar tu p\u00e1gina web realizada en WordPress, no te pierdas la siguiente funcionalidad. Con ella podr\u00e1s convertir el contenido de tus post en audio con unos sencillos pasos. Una mejora en tu web para que sea m\u00e1s accesible y \u00fatil para personas invidentes o para usuarios que quieran escuchar nuestro blog a modo [&hellip;]<\/p>\n","protected":false},"author":315,"featured_media":35664,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[23],"tags":[],"class_list":{"0":"post-35661","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-diseno-web"},"_links":{"self":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/35661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/users\/315"}],"replies":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/comments?post=35661"}],"version-history":[{"count":5,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/35661\/revisions"}],"predecessor-version":[{"id":35691,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/35661\/revisions\/35691"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media\/35664"}],"wp:attachment":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media?parent=35661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/categories?post=35661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/tags?post=35661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}