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.
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.
- 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
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' );
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.