Habilitar sonido en video theme Twenty Seventeen

[ 10 abril 2018 ] [ Actualizado: 16 febrero 2021 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

Anteriormente habíamos visto cómo configurar el theme Twenty Seveenteen, sin embargo una de las consultas frecuentes al configurar un video como fondo es ¿Cómo habilitar el sonido en el video del theme Twenty Seventeen?

Generalidades

En la versión actual del theme Twenty Seventeen no existe una opción para configurar que el video de fondo se reproduzca con sonido y por defecto viene predeterminado para no usar sonido, esto tanto para un video que subas a tu sitio o un video de Youtube.

Pantalla de personalización cabecera multimedia

Modificando archivo javascript

La ejecución del video en el header del theme Twenty Seventeen se realiza a través de un archivo Javascript del core de WordPress llamado wp-custom-header.min.js.

.min significa archivo minificado u optimizado, será difícil hacer modificaciones en este archivo por lo que tomaremos como base el archivo wp-custom-header.js

Ubica el siguiente archivo javascript:

/wp-includes/js/wp-custom-header.js
En el archivo anterior, ubica las siguiente líneas de código:
– Línea 288 aprox, para el sonido en video subido.
```
video.muted = 'muted';
```
– Línea 330 aprox, para sonido en video de Youtube.
```
e.target.mute();
```
Simplemente comentando o eliminando estas líneas tendrás las modificaciones.

Reemplazar archivo .min.js

Una vez tienes las modificaciones, simplemente renombra el archivo a:
/wp-includes/js/wp-custom-header.min.js

Tendrás que eliminar el archivo wp-custom-header.min.js anterior.

Te recomiendo optimizar igualmente el archivo, para minificar puedes usar un servicio externo como JSCompress.com

Optimizando las modificaciones

Con lo realizado anteriormente ya debería funcionar, pero perderás los cambios en cada actualización, por lo que una manera de optimizar esto es colocar el archivo modificado en una ruta diferente y desregistrar el script y volver a registrar asignándolo a esta nueva ruta.

Primero te sugiero crear un Child Theme del Theme Twenty Seventeen
Luego copia tu archivo modificado dentro del child theme, por ejemplo en la carpeta js, el archivo entonces estaría en:

/wp-content/themes/twentyseventeen-child/js/wp-custom-header.min.js

Finalmente realiza el desregistro y registro del script, con la nueva ruta, en el archivo functions.php del child theme.


function replace_script_custom_header(){
    wp_deregister_script( 'wp-custom-header' );
 	wp_enqueue_script( 'wp-custom-header', get_stylesheet_directory_uri() . '/js/wp-custom-header.min.js');
	wp_localize_script( 'wp-custom-header', '_wpCustomHeaderSettings', get_header_video_settings() );
}	

add_action( 'wp_print_scripts', 'replace_script_custom_header' );

En el código anterior usamos la función wp_localize_script() ya que al hacer el desregistro perderemos las variables javascript que se han pasado por lo que tenemos que volver a enviarlas.

Conclusión

Ten en cuenta que habilitar el sonido podría resultar molesto para tus usuarios, por lo que te sugiero evaluar si realmente es necesario tener esta funcionalidad en tu sitio. En caso te decidas implementar esto te sugiero hacerlo en un Child Theme para no perder los cambios en cada actualización.

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