3 modi perfetti per impostare il video di WordPress come immagine in primo piano

Sai che puoi utilizzare un video come immagine in primo piano in WordPress?

Per impostazione predefinita, WordPress non supporta l'aggiunta di video in primo piano. Ti consente solo di impostare immagini in primo piano per le tue pagine o post. Bene, solo perché qualcosa è difficile non significa che sia impossibile.

In questo articolo, ti mostreremo alcuni trucchi per portare a termine questo compito. Ma prima, capiamo i motivi per cui hai bisogno delle miniature dei video in primo piano.

• Vantaggi dei video in primo piano di WordPress
• # 1 Usa i plug-in video in primo piano
• # 2 Incorpora video utilizzando gli URL
• #3 Applica i codici per impostare i video come immagini in primo piano

Vantaggi dei video in primo piano di WordPress

Al giorno d'oggi, quasi tutti i temi WordPress popolari ti consentono di inserire immagini in primo piano nei tuoi post e prodotti. Queste immagini primarie rappresentano le idee principali dei tuoi contenuti.

Una buona immagine in primo piano può farti guadagnare molto coinvolgimento da parte degli utenti. Tuttavia, puoi persino ottenere più clic, visualizzazioni di pagina e vendite utilizzando i video in primo piano.

Sostituire un'immagine in primo piano di un post o di un prodotto con un video in primo piano ti avvantaggia in molti modi.

I video in primo piano rendono il tuo sito molto più vivace e dinamico. I visitatori possono visualizzare questi video praticamente ovunque, inclusi gli archivi del blog, la home page e le pagine dei prodotti. Inoltre, i video ti aiutano a trasmettere il messaggio del tuo marchio meglio del testo e a far rimanere le persone sul tuo sito più a lungo.

Puoi ottenere più contatti di qualità. Se possiedi un negozio online, visualizzare un video nella parte superiore della pagina del prodotto è un'ottima mossa per catturare l'attenzione dei clienti. Li rende curiosi di scorrere e saperne di più sui tuoi prodotti. Di conseguenza, hai maggiori possibilità di effettuare una vendita.

Quindi, vediamo come puoi impostare un video come immagine in primo piano in WordPress.

# 1 Usa i plug-in video in primo piano

Numerosi plugin disponibili sul mercato ti consentono di impostare i video come immagini in primo piano in WordPress. Il tuo compito è scegliere quello giusto e il plugin si occuperà del resto.

In questo tutorial, ti guideremo attraverso l'aggiunta di video in primo piano utilizzando il plug-in Immagine in primo piano da URL (FIFU). Puoi assegnare un'immagine esterna, un video, un audio o un dispositivo di scorrimento ai media in primo piano per il tuo post o prodotto WooCommerce.

1. Installa e attiva il plug-in.

2. Nella dashboard di amministrazione di WordPress, vai a FIFU → Impostazioni .

3. Nella scheda Video in primo piano , imposta il pulsante Video in primo piano su On . Tieni presente che puoi utilizzare video auto-ospitati o esterni come immagini in primo piano.

4. Configurare le impostazioni video come Miniatura video , Pulsante Riproduci , Larghezza , Riproduzione automatica , Muto , Icona Galleria , ecc. a proprio piacimento.

5. Vai alla pagina o al post in cui desideri aggiungere un video in primo piano.

6. Copia e incolla l'URL del video nel campo Video in primo piano .

7. Premi il pulsante Pubblica o Aggiorna e goditi i risultati.

Altre opzioni

Abbiamo scoperto che FIFU è uno dei plug-in video in primo piano più potenti con molteplici funzionalità avanzate. Tuttavia, ti costa un costo aggiuntivo per utilizzare la funzione Video in primo piano.

Se preferisci un plug-in gratuito con funzioni video in primo piano di base, considera il plug-in video in primo piano davvero semplice.

Ti aiuta a incorporare video ospitati su piattaforme di terze parti come YouTube e Vimeo e utilizzarli come video in primo piano. Il plug-in funziona perfettamente anche con WooCommerce per visualizzare i video in primo piano nella parte superiore delle pagine dei prodotti.

1. Installa e attiva il plug-in.

2. Vai su Impostazioni → Video in primo piano davvero semplice nel tuo pannello di amministrazione.

3. Determina il punto in cui desideri aggiungere le miniature dei video in primo piano: Pagine , Post o Prodotti WooCommerce .

4. Premi il pulsante Salva modifiche .

5. Passare alla scheda Controlli . Qui puoi configurare le impostazioni sia per i tuoi video self-hosted che per i video incorporati.

6. Premere il pulsante Salva modifiche per terminare.

# 2 Incorpora video utilizzando gli URL

L'utilizzo dell'URL del video è un'ottima tecnica se intendi includere un video per il tuo post. In questo modo, le persone possono guardare il video in primo piano su una pagina della galleria del blog senza fare clic sull'articolo. Tieni presente che questo metodo è compatibile solo con i post di WordPress, non con le pagine.

1. Vai al post in cui desideri aggiungere un video in primo piano.
2. Inserisci l'URL di condivisione del video nella parte superiore del contenuto del post.
3. Assicurati di abilitare l'opzione Formato in Opzioni schermo .

4. Selezionare Video nel campo Formato .

5. Pubblica o aggiorna il tuo post.

Questo è tutto! Ora, il video verrà visualizzato come immagine in primo piano nella pagina dell'elenco dei post. I visitatori possono riprodurre il video nella miniatura senza dover fare clic sul post.

#3 Applica i codici per impostare i video come immagini in primo piano

Segui i seguenti passaggi per creare una miniatura del video in primo piano per il tuo post e la tua pagina WordPress utilizzando i codici.

1. Nel pannello di amministrazione di WordPress, vai su Aspetto → Editor del tema .
2. Nel menu File del tema , apri il file functions.php .

3. Incolla il codice qui sotto alla fine del file per aggiungere un campo extra sulla tua pagina o post:

 <?php


// Aggiungi il meta box della pagina
funzione codeless_add_custom_meta_box() {
    add_meta_box(
            'codeless_meta_box', // $id
            'Opzioni pagina senza codice', // $title 
            'codeless_show_custom_meta_box', // $callback
            'pagina', // $pagina
            'normale', // $contesto
            'alto'); // $priorità
}


add_action('add_meta_boxes', 'codeless_add_custom_meta_box');


// Aggiungi la Meta Box della Posta
function codeless_add_custom_post_meta_box() {
    add_meta_box(
            'codeless_meta_box', // $id
            'Opzioni pagina senza codice', // $title 
            'codeless_show_custom_post_meta_box', // $callback
            'posta', // $posta
            'normale', // $contesto
            'alto'); // $priorità
}


add_action('add_meta_boxes', 'codeless_add_custom_post_meta_box');


$prefisso = 'senza codice_';


// Array di campo (Pagine Meta)
$codeless_meta_fields = array();


// Array di campo (Post Meta)
$codeless_post_meta_fields = matrice(
    Vettore(
        'label' => 'Codice di incorporamento del video in primo piano',
        'desc' => 'Incolla qui il tuo codice video per mostrare un video invece di un'immagine in primo piano.',
        'id' => $prefisso . 'video_incorporato',
        'tipo' => 'area di testo'
    )
);


// Il meta box Callback per la pagina
funzione codeless_show_custom_meta_box() {
    globale $codeless_meta_fields;
    codeless_show_page_meta_box($codeless_meta_fields);
}


// La richiamata per il meta box postale
function codeless_show_custom_post_meta_box() {
    globale $codeless_post_meta_fields;
    codeless_show_page_meta_box($codeless_post_meta_fields);
}


// Il richiamo
function codeless_show_page_meta_box($meta_fields) {


    globale $post;
// Usa nonce per la verifica
    echo '<input type="hidden" name="custom_meta_box_nonce" value="' . wp_create_nonce(basename(__FILE__)) . '" />';


    // Inizia la tabella dei campi e il ciclo
    echo '<table class="form-table">';
    foreach ($meta_campi come $campo) {
        // ottiene il valore di questo campo se esiste per questo post
        $meta = get_post_meta($post->ID, $field['id'], true);
        // inizia una riga della tabella con
        echo '<tr>
        <th><label for="' . $field['id'] . '">' . $campo['etichetta'] . '</label></th>
        <td>';
        cambia ($campo['tipo']) {


            // testo
            caso 'testo':
                echo '<input type="text" name="' . $field['id'] . '" value="' . $meta . '" />
                                                    <br /><span class="description">' . $campo['desc'] . '</span>';
                rompere;


            // area di testo
            caso 'textarea':
                echo '<textarea rows="2" name="' . $field['id'] . '">' . $ meta. '</textarea>
                                                    <br /><span class="description">' . $campo['desc'] . '</span>';
                rompere;


            // casella di spunta
            caso 'casella di spunta':
                echo '<input type="checkbox" name="' . $field['id'] . '" ', $meta ? 'checked="checked"' : '', '/>
                                                    <label for="' . $field['id'] . '">' . $campo['desc'] . '</etichetta>';
                rompere;


            // Selezionare
            caso 'seleziona':
                echo '<select name="' . $field['id'] . '">';
                foreach ($campo['opzioni'] come $opzione) {
                    echo '<opzione', $meta == $opzione['valore'] ? ' selected="selected"' : '', ' value="' . $option['value'] . '">' . $opzione['etichetta'] . '</opzione>';
                }
                echo '</select><br /><span class="description">' . $campo['desc'] . '</span>';
                rompere;
        } //fine interruttore
        echo '</td></tr>';
    } // termina foreach
    echo '</table>'; // tavolo finale
}


// Salva i dati
funzione codeless_save_custom_meta($post_id) {
    globale $codeless_meta_fields;
    globale $codeless_post_meta_fields;


    // verifica il nonce
    if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))
        return $post_id;
    // controlla il salvataggio automatico
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
        return $post_id;
    // controlla i permessi
    if ('page' == $_POST['post_type']) {
        if (!current_user_can('edit_page', $post_id))
            return $post_id;
    } elseif (!current_user_can('edit_post', $post_id)) {
        return $post_id;
    }


    //i campi del post o della pagina con cui lavoreremo
    $campi;


    // Controlla i permessi (pagine o post)
    if ('page' == $_POST['post_type']) {


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


        $fields = $codeless_post_meta_fields;
    }


    // scorre i campi e salva i dati
    foreach ($campi come $campo) {
        $old = get_post_meta($post_id, $field['id'], true);
        $new = $_POST[$field['id']];
        if ($nuovo && $nuovo != $vecchio) {
            update_post_meta($post_id, $field['id'], $new);
        } elseif ('' == $nuovo && $vecchio) {
            delete_post_meta($post_id, $field['id'], $old);
        }
    } // termina foreach
}


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

4. Trova la funzione responsabile dell'immagine in primo piano: the_post_thumbnail()

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

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

finisci se; ?>

5. Sostituiscilo con il seguente codice:

 if ( has_post_thumbnail() && $post_format != 'galleria' && ( ! 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)) { ?>


<!-- mostra il video in primo piano-->
        <div class="videoWrapper">
            <?php echo get_post_meta(get_the_ID(), 'codeless_video_embed', true); ?>
        </div>


<?php } altro { ?>


        <!--se non ci sono immagini o miniature in primo piano, fai qualcosa...-->


<?php } ?>

6. Premi il pulsante Aggiorna file per salvare le modifiche.

Infine, nel tuo post o nella tua pagina, verrà visualizzato un nuovo campo per aggiungere il video in primo piano.

Fai pieno uso delle miniature dei tuoi video in primo piano

Abbiamo dimostrato 3 modi per impostare un video come immagine in primo piano in WordPress. Puoi scegliere tra l'utilizzo di un plug-in, l'incorporamento dell'URL di un video con la funzione integrata o la scrittura di codici.

Consigliamo vivamente il primo e il secondo metodo se non riesci a trovare la funzione di anteprima del post nel file del tema.

In caso di problemi nel seguire le nostre istruzioni, non esitare a farcelo sapere nella sezione commenti qui sotto. E, soprattutto, non dimenticare di iscriverti al nostro sito Web per ulteriori tutorial utili.