Seleccionar página
4
Volver al contenido del HUB: Hub | Snippets Divi

Como hacer el módulo de video dinámico en Divi

En este HUB Content te daremos un pequeño Divi Snippet que te funcionará para hacer el módulo de video dinámico en Divi. Como sabes, está opción no viene por defecto en el módulo de vídeo de Divi, pero con este pequeño php snippet, lograremos insertar vídeos de manera dinámica en Divi de forma nativa, quédate para saber más.

Índice

¿Como hacer el módulo de video dinámico en Divi?

El módulo de vídeo de Divi te permite mostrar videos en tu sitio web de forma nativa. Puedes cargar un archivo de video mp4 o agregar una URL de YouTube, de ambas maneras estarás permitiéndole al usuario visualizar un video en tu sitio web.

Pero existe un problema ¿qué pasa si quieres usar este módulo de vídeo en el theme builder para mostrar, quizá un tutorial en tus post del blog? Pues bien, de forma nativa, lo que sucede es que no puedes usar el módulo de vídeo en Divi para cargar un vídeo de manera dinámica, y eso es lo que resolveremos en este mini-tutorial de uxdivi.

Nota importante: si usas el plugin Divi Pixel en tu sitio, no necesitas introducir este pequeño Snippet, pues el plugin (del cual tenemos un curso) trae por defecto esta función ya activa.

De forma predeterminada, el campo de la URL del vídeo no es dinámico, por lo que no podemos usar campos personalizados para obtener la URL del vídeo en Divi automáticamente, el módulo se ve un poco así:

Como hacer el módulo de video dinámico en Divi

La solución es bastante sencilla y agradecemos a la gente de Divi pixel por proporcionarla para todos nosotros. Solo necesitamos agregar unas pocas líneas de código PHP personalizado que podrás incluir en el archivo funtion.php de tu tema hijo o con el plugin code Snippet, acá te mostraremos como hacerlo con esta segunda opción.

Paso 1: Haz copia de seguridad de tu WordPress

Como vamos a meter código al sitio, siempre recomendamos que antes hagas una copia de seguridad por si algo sale mal. En este post te enseñamos como hacer una copia de seguridad en WordPress y como recuperarla tambien.

Paso 2. Instala el Plugin Code Snippets

Code Snippets te permitirá insertar código PHP en tu sitio web sin necesidad de ir a tocar los archivos base del tema. Con este plugin nos olvidamos de hacer temas hijos o todo ese jaleo, simplemente lo instalamos y podemos insertar allí el código con seguridad.

Paso 3: Insertar el snippet para generar funcionalidad de vídeo dinámico en Divi

En este paso, vamos a ir a Fragmentos de código > agregar nuevo fragmento. Una vez en la interfaz colocaremos un titulo que haga referencia a la función, y luego copiaremos y pegaremos en el campo de fragmento el siguiente código:

// Funcion para hacer modulo de video dinamico en divi

add_filter('et_builder_get_parent_modules', function($modules){
foreach ($modules as $module_slug => $module) {
if($module_slug === 'et_pb_video' && isset($module->fields_unprocessed)){
$module->fields_unprocessed['src']['dynamic_content'] = 'url';
$module->fields_unprocessed['src_webm']['dynamic_content'] = 'url';
}
}
return $modules;
});

Con esté código, le diremos al sitio que haga el que campo de vídeo permita importar URL’s de vídeo dinámicas desde el maquetador visual de Divi.

Como hacer el módulo de video dinámico en Divi

Después de aplicarlo, el módulo de vídeo de Divi se verá de esta manera. Ejemplo de la solución:

Como hacer el módulo de video dinámico en Divi

¡Y listo! Así hemos podido arreglar el problema que no nos permitía colocar un vídeo de forma dinámica en Divi de manera nativa. A partir de aquí solo debes generar un campo de texto con ACF para colocar allí en enlace del video al que quieras apuntar, y que se cargue de manera dinámica en tu contenido, ya sea un post del blog o un layout de producto.

¿Te ha gustado este tutorial?

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este post.

Nos vemos en el próximo Divi Snippet en uxdivi.

Contenido Relacionado

1 Comentario

  1. Jerry Castillo

    Excelente, lo que estaba buscando, buen tutorial, Gracias por tu excelente trabajo.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *