Hai visto siti popolari utilizzare le miniature dei loro video di YouTube sulla home page del loro sito? Se gestisci un canale video su siti come YouTube, Vimeo o altri, allora anche tu puoi visualizzare un'anteprima video per tutti i post contenenti video sulla home page e sulle pagine di archivio del tuo blog. In questo articolo, ti mostreremo come aggiungere miniature per i video di YouTube in WordPress.
Miniature video e miniature dei post di WordPress
WordPress è dotato di funzionalità integrate per aggiungere immagini in evidenza o miniature dei post, e la maggior parte dei temi WordPress supporta questa funzionalità. Tuttavia, se vuoi mettere in risalto i tuoi contenuti video da YouTube, allora vorrai mostrare tali contenuti con miniature video. Questo articolo ti aiuterà a farlo utilizzando la funzionalità predefinita delle miniature dei post di WordPress.
Configurazione del plugin Video Thumbnails in WordPress
La prima cosa da fare è installare e attivare il plugin Video Thumbnails. Dopo aver attivato il plugin, devi andare su Impostazioni » Miniature Video per configurare le impostazioni del plugin.
Nella schermata delle impostazioni, ti consigliamo di scegliere di archiviare la miniatura nella tua libreria multimediale. Questo ridurrà le richieste http esterne sul tuo sito e le tue pagine si caricheranno più velocemente. Nella sezione tipi di post, il plugin mostrerà post, pagine e tipi di post personalizzati se ne hai sul tuo sito web. Seleziona i tipi di post che desideri che il plugin scansiona per i link video. L'ultima opzione in questa pagina è scegliere un campo personalizzato. Alcuni plugin video per WordPress salvano gli URL video in un campo personalizzato e, se stai utilizzando tali plugin, dovrai inserire quel campo personalizzato qui. Dopodiché fai clic sul pulsante Salva modifiche.
Nella pagina delle impostazioni, vedrai anche la scheda Provider. Se stai utilizzando Vimeo per condividere i tuoi video, dovrai creare un'app su Vimeo e quindi inserire qui i valori client ID, client secret, access token e access token secret.
Nella scheda Azioni di massa, puoi scansionare i tuoi post pubblicati per i video e generare miniature video per essi. Il plugin fornisce anche un pulsante per cancellare tutte le miniature video e rimuoverle come allegati dai tuoi post.
Creazione di miniature video nei post di WordPress
Ora che hai configurato il plugin, creiamo una miniatura video aggiungendo un URL video in un post di WordPress. Per fare ciò, devi creare o modificare un post di WordPress e aggiungere il tuo URL video nell'area di modifica del post. Una volta pubblicato il post, vedrai che il plugin ha generato una miniatura video per te e l'ha aggiunta al tuo post.
Visualizzazione di una miniatura video nel tuo tema WordPress
Il plugin per le miniature video utilizza la funzionalità Miniature dei post di WordPress. La maggior parte dei temi WordPress è configurata per visualizzare automaticamente le miniature dei post. Ciò significa che il tuo tema visualizzerà automaticamente la miniatura del video insieme al contenuto o all'estratto del tuo post. Tuttavia, se il tuo tema non visualizza le miniature video, dovrai modificare i file del tuo tema e aggiungere questo codice al template dove desideri visualizzare la miniatura.
<?php the_post_thumbnail(); ?>
Come aggiungere un pulsante di riproduzione sulla miniatura del video in WordPress
Ora che hai acquisito e visualizzato correttamente le miniature video nei tuoi post di WordPress, potresti voler distinguere le tue miniature di immagini regolari dalle tue miniature video. Ciò farà sapere ai tuoi utenti che c'è un video nel post e che possono fare clic sul pulsante di riproduzione per visualizzare il post video. Ti mostreremo come utilizzare i tag condizionali per distinguere tra miniature video e miniature di post regolari e aggiungere un pulsante di riproduzione.
Per utilizzare questo metodo, devi assicurarti di pubblicare i tuoi post video sotto una categoria specifica, ad esempio, Video. Quindi, all'interno dei file del template del tuo tema come index.php, archive.php, category.php o content.php cerca questa riga di codice:
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
Ora dobbiamo sostituire questo codice con il seguente codice:
<?php if ( in_category( 'video' )) : ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?><span class="playbutton"></span></a> <?php else : ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> <?php endif; ?>
Questo codice aggiunge <span class="playbutton"?></span> dopo la miniatura del post solo per i post archiviati nella categoria video. Il passo successivo è caricare un file immagine dalla schermata Media » Aggiungi nuovo. Questa immagine verrà utilizzata come pulsante di riproduzione. Una volta caricato il file immagine, prendi nota della posizione del file immagine facendo clic sul link Modifica accanto all'immagine.
Il passo finale è visualizzare il pulsante di riproduzione. Utilizzeremo il CSS per visualizzare e posizionare il pulsante di riproduzione sulla miniatura del video. Per fare ciò, è necessario copiare e incollare questo codice CSS nel foglio di stile del tuo tema o tema figlio facendo clic su Aspetto » Editor.
.playbutton {
background: url('http://example.com/wp-content/uploads/playbutton.png') center center no-repeat;
position: absolute;
top: 50%;
left: 50%;
width: 74px;
height: 74px;
margin: -35px 0 0 -35px;
z-index: 10;
opacity:0.6;
}
.playbutton:hover {
opacity:1.0;
}
Non dimenticare di sostituire l'URL dell'immagine di sfondo con l'URL del file immagine del pulsante di riproduzione che hai caricato in precedenza. Tutto qui. I tuoi file di miniature video dovrebbero ora avere un pulsante di riproduzione su di essi.
Speriamo che questo articolo ti abbia aiutato a mettere in risalto i tuoi video di YouTube con miniature in WordPress. Per feedback e domande, lascia un commento o seguici su Twitter.
Peter
È incredibile che funzioni ancora!
Comunque qualcuno sa perché non ottiene una miniatura da una playlist YT?
Ho diversi post con playlist e l'immagine è sempre una grigia immagine "Video non trovato"
Supporto WPBeginner
Il plugin è stato creato per i video e non per intere playlist, dovresti contattare l'autore del plugin per includere la funzionalità playlist.
Amministratore
eddie art
questo funzionerebbe per ottenere un'immagine in miniatura su un video incorporato tramite iframe?
Supporto WPBeginner
Dovresti verificare con il supporto del plugin per sapere se ciò è supportato.
Amministratore
Faisal Iqbal
Dove mettere quel codice in functions.php. Non sono un tecnico, per favore qualcuno mi aiuti?
Mohammad
Ciao
Sto provando a usare questo plugin ma non funziona per me e lo sviluppatore nei forum di supporto non risponde alla maggior parte degli argomenti irrisolti. Nella pagina di debug, quando provo "Test Markup for Video", ricevo questo errore:
Miniatura trovata, ma potrebbe non esistere sul server di origine. Se l'apertura dell'URL sottostante nel tuo browser restituisce un errore, la sorgente sta fornendo un URL non valido. URL miniatura:
qual è il problema?
Neon emmanuel
cosa succede se voglio tre parametri, 1 un fallback quando non c'è una miniatura, 2 un fallback se è un video (cioè, aggiungendo un overlay con pulsante di riproduzione), e 3 un fallback se è un video con un'icona di riproduzione sovrapposta?
Bryan
Qualcuno di questi codici funzionerà per Adobe Muse/Dreamweaver?
john
Ciao
Stiamo cercando uno sviluppatore che possa implementare questo per noi. Sei disponibile?
pamela sillah
C'è un altro modo per farlo SENZA plugin?? per favore aiutami
franck
Ciao a tutti,
qualcuno sa come rimuovere video correlati quando un video di YouTube viene riprodotto fino alla fine nel plugin galleria video di Huge IT?
Ernesto
Come faccio a rimuovere l'immagine dall'interno dell'ingresso? Voglio inserire nel display video e nessuna immagine
Quoterland
Grazie, ottimo tutorial.
Rihan
And wordpress 4.0 I add the video (youtube) URL in the post edit area and its showing me a video player
on the video thumb are i can see this text only (No video thumbnail for this post.) not working!
any Idea
thanks
Staff di WPBeginner
No, la tua miniatura apparirà su Facebook ma non avrà il pulsante di riproduzione.
srem
Mi dispiace, non so perché non mostra il codice.
Mauro Scarpa
Ciao! Ottimo sito e post, ho una domanda, se poi voglio condividere il mio post su Facebook, apparirà anche con il pulsante di riproduzione? Grazie
Piet
Plugin e tutorial fantastici. Invece di mostrare un'immagine del pulsante di riproduzione, vorrei suggerire di utilizzare un'icona di carattere, ad esempio da FontAwesome.
Staff di WPBeginner
TCB: se stai usando il plugin WordPress SEO, allora puoi provare questo metodo. Una volta che il plugin miniatura video ha recuperato l'immagine in miniatura per il tuo video, devi trovare la sua posizione nella tua libreria multimediale e copiare l'URL. Dopodiché rimuovi l'immagine in miniatura del video dal post. Nella meta box di WordPress SEO sull'editor del post, fai clic sulla scheda social e incolla il link accanto al campo immagine di Facebook.
TCB
È possibile utilizzare la miniatura del video come immagine del post su Facebook?
Sarebbe fantastico perché non voglio mostrare l'immagine come immagine in evidenza.
Megha Verma
Sto riscontrando un problema poiché il pulsante di riproduzione viene visualizzato solo sul primo post... a causa della posizione assoluta... non sulle immagini degli altri post...
Sutherland Boswell
Ottimo tutorial! Come sviluppatore, adoro ricevere feedback dagli utenti e lavorare su soluzioni semplici per le funzionalità più richieste. Sovrapporre un pulsante di riproduzione e far sì che il video venga effettivamente riprodotto facendo clic sulla miniatura sono due delle funzionalità più richieste, ma entrambe dipendono fortemente dal tema. Imparare a modificare un tema da soli può essere gratificante, quindi non aver paura di provarci!
PS – Spero che tutti diano un'occhiata alla versione pro!
Jesse
Ciao Sutherland.
Ho letto cose così belle sul tuo plugin e sono ansioso di provarlo.
Tuttavia, quando uso il tuo plugin per cercare file video, trova tutti i 22 video sotto la pagina ‘video’ dove sono pubblicati. Il problema è che non trova alcuna miniatura.
Dopo aver letto le tue varie risposte di supporto a problemi simili, così come le tue istruzioni, ho cercato di scoprire se il mio tema (metric, di grandpixels) utilizza un campo personalizzato. Non sono riuscito a trovare queste informazioni.
Hai suggerimenti su come far funzionare questo?
Grazie,
Jesse
Audee
Cosa succede se voglio visualizzare la miniatura del post solo per i post archiviati sotto il ‘Formato Post’ video?
Grazie per aver condiviso l'articolo su questo plugin!
Sutherland Boswell
Dovresti essere in grado di seguire il tutorial, basta sostituire
1-click Use in WordPress
con
1-click Use in WordPress
Alex
Ciao Sutherland Boswell,
uso il tuo plugin per il tema Detube, il problema è che non c'è nessuna riga di codice <a href="”> in quei file: index.php, archive.php, category.php..
Hai qualche idea o un modo per farlo funzionare nel tema Detube?
Grazie in anticipo!
Alex
Sarei molto felice se qualcuno avesse un'idea e potesse rispondere alla mia domanda. Ho lavorato per molte ore per far funzionare questo codice su Detube, ma finora senza successo...
Qualcuno qui potrebbe aiutarmi per favore?
Ahmad Rafi Maseer
Come si riproduce direttamente nella miniatura in modo che l'utente non debba andare alla pagina del post per riprodurre il video???
Supporto WPBeginner
Per questo dovrai modificare il tuo tema e invece di visualizzare la miniatura dovrai incorporare il video.
Amministratore
Sue Anne
Grazie MILLE per le ottime istruzioni su come mettere un video e una miniatura video sul mio blog WordPress. Ci sono voluti circa 5 minuti e non sono un tecnico!
Pali Madra
Ciao!
Ottimo sito web e uno dei miei post preferiti.
Avevo una domanda correlata. Sto aggiungendo video inserendo l'URL nel codice HTML dei post, ma voglio anche mostrare una didascalia sotto di esso. È possibile senza usare un plugin?
Grazie in anticipo
Matt
Tutorial fantastico. Grazie mille per averlo pubblicato!
Tiguan
Lo ‘span’ deve essere posizionato all’interno dei tag hyperlink della miniatura, altrimenti il link dell’immagine sul pulsante di riproduzione sarà disabilitato. Quindi il codice corretto sarà:
Tuttavia, è un bel tutorial.
Supporto WPBeginner
Tiguan, grazie per averlo segnalato. Abbiamo aggiornato il tutorial.
Amministratore
adolf witzeling
Ottimo tutorial.
gottfrid q.
> Questo farà sapere ai tuoi utenti che c'è un video nel post e potranno fare clic sul pulsante di riproduzione per visualizzare il post video.
Non voglio deluderti, ma il pulsante (gira) non ha alcun metodo di clic.
Come esattamente questo pulsante doveva funzionare e come implementarlo?
Grazie per il tuo tempo.
Supporto WPBeginner
Il pulsante non riprodurrà il video lì, ma porterà l’utente alla pagina del video. L’intera miniatura è collegata al post contenente il video.
Amministratore
gottfrid q.
Lo ‘span’ deve quindi essere posizionato all’interno dei tag hyperlink della miniatura?
Akash
E. come implementare il pulsante Play nel tema GENESIS? non c’è nessun file index.php, archive.php, category.php o content.php lì per aggiungere il codice.
Grazie.
Supporto WPBeginner
Contatta i forum di supporto di Genesis.
Amministratore
Mark McGinnis
Akash, sei mai riuscito a capire come implementarlo usando il tema Genesis? Ho lo stesso problema…
Grazie!
Akash
Ma quale sarà la dimensione della miniatura del video? Sarà la stessa della miniatura dell’immagine già impostata nel blog?
Supporto WPBeginner
Utilizzerà la dimensione predefinita della miniatura. Puoi sovrascriverla aggiungendo la tua dimensione immagine e utilizzarla nel tuo template. Ad esempio, se crei una nuova dimensione per la miniatura e la chiami video-thumbnail, la chiamerai nel tuo template così:
<?php the_post_thumbnail('video-thumbnail'); ?>1-click Use in WordPress
Amministratore