Video destacado en artículos Divi con ACF

Recientemente se ha hecho una pregunta: "¿Puedes añadir un vídeo destacado en lugar de una imagen en los artículos Divi? ». Buenas noticias, la respuesta es SÍ y este artículo explica cómo hacerlo.

Para ello, necesitará utilizar una extensión llamada ACF (campo avanzado de costura) en asociación con el Divi Builder Tema.

Esta solución es ideal si eres YouTuber y quieres destacar tus vídeos en tu blog. Además, hay un Canal de YouTube Consejos Divi. ¿Has visitado alguna vez?

1 – Obtener datos de vídeo de YouTube para integrar

Para la continuación de este tutorial para mostrar videos destacados en sus artículos Divi, necesitará datos de YouTube. Probablemente estés acostumbrado a eso, pero para los grandes principiantes, así es como recuperar la URL o código iFrame de un vídeo hospedada en YouTube:

1. Nos vemos en el vídeo que desea integrar en su artículo. Haga clic Compartir.
2. El enlace del vídeo aparece, sólo copiarlo.
3. Existe una alternativa: haga clic en Integrar para copiar el código iFrame del vídeo.

Dependiendo del propósito que desee, necesitará uno o el otro. Veamos en detalle...

¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"

2 - Crear campos personalizados con ACF

Para continuar, necesitará instalar la extensión ACF – Campo personalizado avanzado. Aunque WordPress nativamente permite crear campos personalizados, estos no son óptimos para videos destacados en sus artículos DiviPor eso necesitas una extensión.

Vaya a la pestaña Prórrogas Añadir, instalar y activar el plugin ACF. Tenga cuidado, hay varias versiones, asegúrese de instalar el d-Elliot Condon instalado en más de 1 millón de sitios.

Entonces crearás tu primer campo personalizado:

1. Vaya a la pestaña ACF ■ Añadir.
2. Introduzca un título, por ejemplo « Video destacado ». Luego configura el campo personalizado:
3. Título del campo: Video Destacado.
4. Nombre del campo: Este se registrará por sí mismo. Por ejemplo: video_featured.
5. Tipo de campo: elegir o Embed en el menú desplegable.
6. Instrucción: Esto es opcional pero usted puede dar una indicación que será visible en la administración del artículo.

7. En la caja Ubicación, definir el tipo de publicación que se beneficiará de este campo. Por ejemplo: Artículos.
8. En la caja AjustesDéjalo como está. Sin embargo, puede ver el nuevo campo "en el lado". Así, el campo personalizado estará disponible en la barra lateral de administración de sus artículos, en el mismo lugar que imagen resaltada.
9. Validar su campo haciendo clic en Publish.

3 – Integrar el campo de vídeo en la plantilla de artículo

Ahora estás en posesión de un nuevo campo Video Destacado, ahora debe mostrarlo en sus artículos para que sea visible a los usuarios de Internet.

Para esto, nada mejor que usar el Theme Builder que le permitirá crear una plantilla que se aplicará a todos los artículos de su blog. Así que haz el trabajo una vez.

Si no sabes cómo hacer esto, te invito a seguir el tutorial que explica cómo crear una plantilla para sus artículos DiviEntonces vuelve aquí después.

1. Vaya a la pestaña Divi Theme Builder.
2. Crear o editarlo Cuerpo personalizado modelo asignado a Todos los artículos. Obviamente puedes asignar este modelo a otro tipo de publicación, eres tú quien ve, pero en este tutorial, te muestro cómo añadir un vídeo destacado a las publicaciones del blog.
3. En el lugar deseado en su modelo, añadir un Módulo de texto e introduzca el código corto que contiene el nombre de su campo personalizado ACF. Este código corto debe verse así: [acf field= »video_featured »].

Por último, registre su modelo.

4 - Colocar un vídeo destacado en cada artículo

Aquí, el campo personalizado se crea e integra en sus artículos. A partir de ahora, podrá informar un vídeo presentado en cada artículo antes de publicarlo:

1. Añadir un nuevo artículo. Puede utilizar el Divi Builder o el diseño predeterminado (Gutenberg). Esto no tiene impacto. Es una elección. Por mi parte, sé que solo uso Gutenberg (el editor de WordPress) para escribir mis artículos. Sólo uso el Divi Builder en mis páginas.
2. En la barra lateral de la administración del artículo, verá su nuevo campo personalizado llamado Video Destacado. Todo lo que tienes que hacer es aprovechar, en este campo, URL de vídeo de YouTube para ser incluido en su artículo.
3. Cuando visita el artículo frontal, verá que el vídeo se ha integrado en su artículo!

¡No te demores! Descubre el tema Divi aquí. !

5 - Alternativa: Mostrar vídeo en YouTube en "autoplay"

La solución anterior le permite integrar un vídeo de YouTube en sus artículos que el usuario puede lanzar si desea...

Pero te veo venir y estoy seguro de que vas a preguntarme cómo hacer lo mismo con un video de YouTube que empieza a cargar automáticamente la página. ¿Me equivoco?

Así que aquí está la solución si quieres integrar un video en autoplay :

Empezamos de nuevo como el tutorial anterior:

1. Vaya a la pestaña ACF ■ Añadir.
2. Introduzca un título, por ejemplo "Autoplay Video". Luego configura el campo personalizado:
3. Título del campo: Video Autoplay.
4. Nombre del campo: Este se registrará por sí mismo. Por ejemplo: video_autoplay.
5. Tipo de campo: elegir Texto en el menú desplegable.
6. Instrucción: Esto es opcional pero usted puede dar una indicación que será visible en la administración del artículo.
7. En la caja Ubicación, definir el tipo de publicación que se beneficiará de este campo. Por ejemplo: Artículos.
8. En la caja AjustesDéjalo como está. Sin embargo, puede ver el nuevo campo "en el lado". Así, el campo personalizado estará disponible en la barra lateral de administración de sus artículos, en el mismo lugar que imagen resaltada.
9. Validar su campo haciendo clic en Publish.

Como antes, una vez que se crea su campo personalizado, sólo tiene que integrarlo en su plantilla de artículo creada con el Divi Theme Builder :

1. Vaya a la pestaña Divi Theme Builder.
2. Crear o editarlo Cuerpo personalizado modelo asignado a Todos los artículos. Obviamente puedes asignar este modelo a otro tipo de publicación, eres tú quien ve, pero en este tutorial, te muestro cómo añadir un vídeo destacado a las publicaciones del blog.
3. En la ubicación deseada en su plantilla, agregue un módulo de texto e introduzca el código corto que contiene el nombre de su campo personalizado ACF. Este código corto debe verse así: [acf field= »video_autoplay »].

Graba tu modelo.

Entonces cada vez que creas un nuevo artículo, puedes usar el campo Video Autoplay para integrar un vídeo de YouTube. Sin embargo, hay una pequeña diferencia con autojuego, necesitas i Código de marco :

1. Añadir un nuevo artículo. Puede utilizar el Divi Builder o el diseño predeterminado (Gutenberg). Esto no tiene impacto.
2. En la barra lateral de la administración del artículo, verá su nuevo campo personalizado llamado Video Autoplay. Entonces sólo pega. i Código de marco de vídeo de YouTube para ser incluido en su artículo.
3. Tenga cuidado, para que el juego automático funcione, debe añadir un parámetro en la URL iFrame. Añadir: Autoplay=1 al final de la URL y antes de las citas de cierre. Aquí, el video de YouTube comienza a cargar la página. Note, sin embargo, que algunos navegadores bloquean el lanzamiento de vídeos automáticos.

6 - Mejorar el diseño del modelo

Ahora que todo funciona, puede mejorar el diseño de su modelo de artículo. Por ejemplo, aquí está la representación final de mi ejemplo:

Algunas explicaciones:

1. En la plantilla de artículo creada con Theme builder, añadí un Título de posición del módulo en la sección superior.
2. Luego añadí otra sección que estilizaba con un separador de bisel. Todo sobre Divi separadores Toma.
3. El vídeo se muestra gracias al código corto ACF colocado en Módulo de texto, como se explicó anteriormente.
4. No te olvides de colocar un Publish Content module que permite mostrar el contenido de su artículo, que fue creado con Gutenberg o Divi.

7 - Video destacado en artículos: en conclusión...

Aquí, en unos pocos clics usted creó campos personalizados en su sitio WordPress y los publicó en sus artículos Divi!

ACF es una extensión muy poderosa que te permite hacer cosas increíbles! No dude en navegar por la documentación oficial para ir mucho más lejos que insertar sólo uno vídeo destacado en sus artículos Divi !!!

Aquí está una pequeña lista de reproducción que puede ayudarle:

• Documentación oficial ACF
• Crear personalizado Palabra Campos de prensa
• Cómo crear campos personalizados con WordPress
• Cómo crear un modelo dinámico de cartera con Divi y ACF