3 formas perfectas de configurar el video de WordPress como imagen destacada

¿Sabes que puedes usar un video como imagen destacada en WordPress?

De forma predeterminada, WordPress no admite la adición de videos destacados. Solo le permite configurar imágenes destacadas para sus páginas o publicaciones. Bueno, que algo sea difícil no significa que sea imposible.

En este artículo, le mostraremos algunos trucos para realizar esta tarea. Pero primero, comprendamos las razones por las que necesita miniaturas de videos destacados.

• Beneficios de los videos destacados de WordPress
• #1 Use complementos de video destacados
• #2 Incrustar videos usando URL
• #3 Aplicar códigos para establecer videos como imágenes destacadas

Beneficios de los videos destacados de WordPress

Hoy en día, casi todos los temas populares de WordPress le permiten insertar imágenes destacadas en sus publicaciones y productos. Estas imágenes primarias representan las ideas principales de su contenido.

Una buena imagen destacada puede generar una gran participación de los usuarios. Sin embargo, incluso puede obtener más clics, páginas vistas y ventas utilizando videos destacados.

Reemplazar la imagen destacada de una publicación o producto con un video destacado lo beneficia de muchas maneras.

Los videos destacados hacen que su sitio sea mucho más vibrante y dinámico. Los visitantes pueden ver estos videos desde casi cualquier lugar, incluidos los archivos del blog, la página de inicio y las páginas de productos. Además, los videos lo ayudan a transmitir el mensaje de su marca mejor que el texto y hacen que las personas permanezcan en su sitio por más tiempo.

Puede obtener más clientes potenciales de calidad. Si posee una tienda en línea, mostrar un video en la parte superior de la página del producto es un excelente movimiento para captar la atención de los clientes. Les da curiosidad desplazarse y aprender más sobre sus productos. Como resultado, tiene una mayor probabilidad de hacer una venta.

Entonces, veamos cómo puede configurar un video como una imagen destacada en WordPress.

#1 Use complementos de video destacados

Numerosos complementos disponibles en el mercado le permiten configurar videos como imágenes destacadas en WordPress. Su trabajo es elegir el correcto, y el complemento se encargará del resto.

En este tutorial, lo guiaremos a través de la adición de videos destacados usando el complemento Imagen destacada de URL (FIFU). Puede asignar una imagen externa, video, audio o control deslizante a los medios destacados para su publicación o producto WooCommerce.

1. Instalar y activar el complemento.

2. En el panel de administración de WordPress, vaya a FIFU → Configuración .

3. En la pestaña Video destacado , cambie el botón Video destacado a Activado . Tenga en cuenta que puede usar videos alojados por usted mismo o externos como imágenes destacadas.

4. Configure los ajustes de video como Miniatura de video, Botón de reproducción , Ancho , Reproducción automática , Silencio , Icono de galería , etc. a su gusto.

5. Vaya a la página o publicación en la que desea agregar un video destacado.

6. Copie y pegue la URL del video en el campo Video destacado .

7. Pulse el botón Publicar o Actualizar y disfrute de los resultados.

Otras opciones

Descubrimos que FIFU es uno de los complementos de video destacados más poderosos con múltiples funciones avanzadas. Sin embargo, le cuesta una tarifa adicional usar la función de video destacado.

Si prefiere un complemento gratuito con funciones básicas de video destacado, considere el complemento Really Simple Featured Video.

Le ayuda a incrustar videos alojados en plataformas de terceros, como YouTube y Vimeo, y usarlos como videos destacados. El complemento también funciona perfectamente con WooCommerce para mostrar videos destacados en la parte superior de las páginas de productos.

1. Instalar y activar el complemento.

2. Dirígete a Configuración → Video destacado realmente simple en tu panel de administración.

3. Determine el lugar donde desea agregar miniaturas de videos destacados: páginas , publicaciones o productos de WooCommerce .

4. Pulse el botón Guardar cambios .

5. Navegue a la pestaña Controles . Aquí puede configurar los ajustes tanto para sus videos autohospedados como para los videos incrustados.

6. Pulse el botón Guardar cambios para finalizar.

#2 Incrustar videos usando URL

Hacer uso de la URL del video es una excelente técnica si tiene la intención de presentar un video para su publicación. De esta manera, las personas pueden ver el video destacado en la página de la galería de un blog sin hacer clic en el artículo. Tenga en cuenta que este método solo es compatible con las publicaciones de WordPress, no con las páginas.

1. Vaya a la publicación en la que desea agregar un video destacado.
2. Inserte la URL compartida del video en la parte superior del contenido de la publicación.
3. Asegúrese de habilitar la opción Formato en Opciones de pantalla.

4. Seleccione Vídeo en el campo Formato .

5. Publica o actualiza tu publicación.

¡Eso es! Ahora, el video se mostrará como una imagen destacada en la página de la lista de publicaciones. Los visitantes pueden reproducir el video en miniatura sin tener que hacer clic en la publicación.

#3 Aplicar códigos para establecer videos como imágenes destacadas

Realice los siguientes pasos para crear una miniatura de video destacada para su publicación y página de WordPress usando códigos.

1. En el panel de administración de WordPress, dirígete a Apariencia → Editor de temas .
2. En el menú Archivos de temas , abra el archivo functions.php .

3. Pegue el código a continuación al final del archivo para agregar un campo adicional en su página o publicación:

 <?php


// Añadir el metabox de la página
función codeless_add_custom_meta_box() {
    agregar_meta_box(
            'codeless_meta_box', // $id
            'Opciones de página sin código', // $título 
            'codeless_show_custom_meta_box', // $devolución de llamada
            'pagina', // $pagina
            'normal', // $contexto
            'elevado'); // $prioridad
}


add_action('add_meta_boxes', 'codeless_add_custom_meta_box');


// Agregar el cuadro Meta de publicación
función codeless_add_custom_post_meta_box() {
    agregar_meta_box(
            'codeless_meta_box', // $id
            'Opciones de página sin código', // $título 
            'codeless_show_custom_post_meta_box', // $devolución de llamada
            'publicar', // $publicar
            'normal', // $contexto
            'elevado'); // $prioridad
}


add_action('add_meta_boxes', 'codeless_add_custom_post_meta_box');


$prefijo = 'sin código_';


// Matriz de campo (páginas Meta)
$codeless_meta_fields = array();


// Matriz de campo (Posts Meta)
$codeless_post_meta_fields = array(
    formación(
        'label' => 'Código de inserción de video destacado',
        'desc' => 'Pega el código de tu video aquí para mostrar un video en lugar de una imagen destacada.',
        'id' => $prefijo. 'video_embed',
        'tipo' => 'área de texto'
    )
);


// La devolución de llamada para el cuadro meta de la página
función codeless_show_custom_meta_box() {
    global $codeless_meta_fields;
    codeless_show_page_meta_box($codeless_meta_fields);
}


// La devolución de llamada para el meta cuadro de publicación
función codeless_show_custom_post_meta_box() {
    global $codeless_post_meta_fields;
    codeless_show_page_meta_box($codeless_post_meta_fields);
}


// La devolución de llamada
función codeless_show_page_meta_box($meta_fields) {


    publicación global $;
// Usar nonce para verificación
    echo '<input type="hidden" name="custom_meta_box_nonce" value="' .wp_create_nonce(basename(__FILE__)) . '" />';


    // Comienza la tabla de campos y el ciclo
    echo '<clase de tabla="tabla-formulario">';
    foreach ($meta_fields como $campo) {
        // obtener el valor de este campo si existe para esta publicación
        $meta = get_post_meta($post->ID, $field['id'], true);
        // comienza una fila de la tabla con
        eco '<tr>
        <th><etiqueta para="' . $campo['id'] . '">' . $campo['etiqueta'] . '</etiqueta></th>
        <td>';
        cambiar ($campo['tipo']) {


            // texto
            caso 'texto':
                echo '<tipo de entrada="texto" nombre="' . $campo['id'] . '" valor="' . $meta . '" />
                                                    <br /><span class="descripción">' . $campo['desc'] . '</span>';
                descanso;


            // área de texto
            caso 'área de texto':
                echo '<textarea filas="2" nombre="' . $campo['id'] . '">' . $meta. '</textarea>
                                                    <br /><span class="descripción">' . $campo['desc'] . '</span>';
                descanso;


            // casilla de verificación
            caso 'casilla de verificación':
                echo '<input type="checkbox" name="' . $field['id'] . '" ', $meta ? ' marcado="marcado"' : '', '/>
                                                    <etiqueta para="' . $campo['id'] . '">' . $campo['desc'] . '</etiqueta>';
                descanso;


            // Seleccione
            caso 'seleccionar':
                echo '<seleccionar nombre="' . $campo['id'] . '">';
                foreach ($campo['opciones'] como $opción) {
                    echo '<opción', $meta == $opción['valor'] ? ' seleccionado="seleccionado"' : '', ' valor="' . $opción['valor'] . '">' . $opción['etiqueta'] . '</opción>';
                }
                echo '</select><br /><span class="description">' . $campo['desc'] . '</span>';
                descanso;
        } //interruptor final
        echo '</td></tr>';
    } // finaliza cada uno
    echo '</tabla>'; // mesa final
}


// Guardar los datos
función codeless_save_custom_meta($post_id) {
    global $codeless_meta_fields;
    global $codeless_post_meta_fields;


    // verificar una vez
    if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], nombre base(__FILE__)))
        devolver $post_id;
    // comprobar autoguardado
    if (definido('HACER_AUTOSGUARDAR') && HACER_AUTOSGUARDAR)
        devolver $post_id;
    // comprobar permisos
    if ('página' == $_POST['tipo_publicación']) {
        if (!current_user_can('edit_page', $post_id))
            devolver $post_id;
    } elseif (!current_user_can('edit_post', $post_id)) {
        devolver $post_id;
    }


    // ya sea en los campos de publicación o de página con los que trabajaremos
    $campos;


    // Comprobar permisos (páginas o publicaciones)
    if ('página' == $_POST['tipo_publicación']) {


        $campos = $codeless_meta_fields;
    } else if ('post' == $_POST['post_type']) {


        $campos = $codeless_post_meta_fields;
    }


    // recorrer los campos y guardar los datos
    foreach ($campos como $campo) {
        $antiguo = get_post_meta($post_id, $field['id'], true);
        $nuevo = $_POST[$campo['id']];
        if ($nuevo && $nuevo != $viejo) {
            update_post_meta($post_id, $campo['id'], $nuevo);
        } elseif ('' == $nuevo && $antiguo) {
            delete_post_meta($post_id, $campo['id'], $antiguo);
        }
    } // finaliza cada uno
}


add_action('save_post', 'codeless_save_custom_meta');
?>

4. Encuentra la función responsable de la imagen destacada: the_post_thumbnail()

 if ( has_post_thumbnail() && $post_format != 'gallery' && ( ! is_single() || is_single() ) ) :

get_template_part( 'template-parts/blog/parts/entry', 'thumbnail' );

terminara si; ?>

5. Reemplácelo con el siguiente código:

 if ( has_post_thumbnail() && $post_format != 'gallery' && ( ! is_single() || is_single() ) ) 
    
    get_template_part( 'template-parts/blog/parts/entry', 'thumbnail' );





else if (get_post_meta(get_the_ID(), 'codeless_video_embed', true)) { ?>


<!-- mostrar el video destacado-->
        <div class="envoltura de video">
            <?php echo get_post_meta(get_the_ID(), 'codeless_video_embed', true); ?>
        </div>


<?php } más { ?>


        <!--si no hay imagen destacada o miniatura, haga algo...-->


<?php } ?>

6. Pulse el botón Actualizar archivo para guardar los cambios.

Finalmente, en su publicación o página, aparecerá un nuevo campo para agregar el video destacado.

Aproveche al máximo las miniaturas de sus videos destacados

Hemos demostrado 3 formas de configurar un video como una imagen destacada en WordPress. Puede elegir entre usar un complemento, incrustar la URL de un video con la función integrada o escribir códigos.

Recomendamos encarecidamente el primer y el segundo método si no puede encontrar la función de miniaturas de publicación en su archivo de tema.

En caso de que tenga algún problema siguiendo nuestras instrucciones, no dude en hacérnoslo saber en la sección de comentarios a continuación. Y lo más importante, no olvide suscribirse a nuestro sitio web para obtener más tutoriales útiles.