Instalé un tema de WP con un widget que admite accesibilidad para personas con problemas de visión (permite cambiar el contraste, los colores, el tamaño del texto del contenido de una página, muy similar a los cambios en los estilos de día/noche). La demostración de este tema está disponible aquí , el widget se puede ver haciendo clic en el icono con una figura humana en silla de ruedas en la esquina superior derecha. Luego creé un tema hijo en WP para tener la posibilidad de modificar la funcionalidad y el estilo.
En las páginas de WP tengo elementos iframe que contienen otras páginas html. Cuando hago clic en el widget de accesibilidad, cambia el color de fondo y el color del texto solo en la publicación de WP pero no en el contenido del iframe. He encontrado en esta respuesta SO que el contenido del iframe también podría cambiarse agregando al controlador de eventos lo siguiente:
var iframe = document.getElementsByTagName('iframe')[0]; iframe.style.background = 'white'; iframe.contentWindow.document.body.style.backgroundColor = 'white';Escribí al desarrollador de temas de WP ya que hay soporte para los compradores de temas, y respondió cortésmente que esta característica podría considerarse para los lanzamientos futuros, lo que probablemente significa "nunca" en la vida real. Por lo tanto, necesito encontrar una solución ahora con su ayuda.
¿Podría sugerir cómo es posible modificar (o sobrescribir) en el tema secundario de WP la función JS que ya existe en el tema principal que es responsable del trabajo del widget de accesibilidad? El objetivo final es cambiar el color de fuente y el fondo tanto en la publicación principal de WP como en el contenido de iframes cuando hago clic en el widget de accesibilidad.
A continuación encontrará el contenido de la publicación de WP
<div> <p>There is some text before iframe that changes accessibility attributes appropriately</p> </div> <div> <h1 style="text-align:left;font-size:32px;font-style:normal;font-weight:bold;margin:2px">Table . This is a table that is situated inside an iframe and does not change accessibility attributes.</h1> <iframe src="/path_to_WP_dir_with_files/child.html" scrolling="auto" seamless="seamless" width="100%" height="360" name=""></iframe> </div> <div> <p>Here is some text after iframe that changes accessibility attributes appropriately</p> </div>y contenido del child.html que se inserta en iframe
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <style>body{background-color:white;}</style> </head> <body> <div> <p>There is some text inside iframe that does not change color and background if they changed in the parent window</p> </div> </body> </html>