• 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 / Themes / Habilitar sonido en video theme Twenty Seventeen

Habilitar sonido en video theme Twenty Seventeen

Habilitar sonido en video theme Twenty Seventeen

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

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

     

    ¿Me ayudas a llegar a más gente?

    Twittear Compartir LinkedIn WhatsApp

    Artículos Relacionados

    • Configura el tema Twenty Twenty One WordPressConfigura el tema Twenty Twenty One WordPress
    • Configura el theme Twenty Twenty de WordPressConfigura el theme Twenty Twenty de WordPress
    • Configura el Tema Twenty Nineteen WordPressConfigura el Tema Twenty Nineteen WordPress
    • Twenty Seventeen WordPressConfigura el Tema Twenty Seventeen WordPress
    Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 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

Contenidos de texto a voz en WordPress

Modificar desplegable de orden de productos en WooCommerce

Subir archivos en WordPress usando Ajax

Aprende a usar Taxonomías en WordPress

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