Avez-vous vu des sites populaires utiliser les miniatures de leurs vidéos YouTube sur la page d'accueil de leur site ? Si vous gérez une chaîne vidéo sur des sites comme YouTube, Vimeo, ou d'autres, vous pouvez alors également afficher une miniature vidéo pour tous les articles contenant des vidéos sur les pages d'accueil et d'archives de votre blog. Dans cet article, nous vous montrerons comment ajouter des miniatures pour les vidéos YouTube dans WordPress.
Miniatures vidéo et miniatures d'articles WordPress
WordPress est doté d'une fonctionnalité intégrée pour ajouter des images mises en avant ou miniatures d'articles, et la plupart des thèmes WordPress prennent en charge cette fonctionnalité. Cependant, si vous souhaitez mettre en avant votre contenu vidéo de YouTube, vous voudrez alors présenter ce contenu avec des miniatures vidéo. Cet article vous aidera à le faire en utilisant la fonctionnalité par défaut de miniatures d'articles de WordPress.
Configuration du plugin Video Thumbnails dans WordPress
La première chose à faire est d'installer et d'activer le plugin Video Thumbnails. Après avoir activé le plugin, vous devez aller dans Réglages » Miniatures vidéo pour configurer les paramètres du plugin.
Sur l'écran des paramètres, nous vous recommandons de choisir de stocker la miniature dans votre médiathèque. Cela réduira les requêtes http externes sur votre site, et vos pages se chargeront plus rapidement. Dans la section des types de publication, le plugin affichera les articles, les pages et les types de publication personnalisés si vous en avez sur votre site web. Sélectionnez les types de publication que vous souhaitez que le plugin analyse pour les liens vidéo. La dernière option sur cette page consiste à choisir un champ personnalisé. Certains plugins vidéo pour WordPress enregistrent les URL vidéo dans un champ personnalisé, et si vous utilisez de tels plugins, vous devrez saisir ce champ personnalisé ici. Après cela, cliquez sur le bouton Enregistrer les modifications.
Sur la page des paramètres, vous verrez également l'onglet Fournisseurs. Si vous utilisez Vimeo pour partager vos vidéos, vous devrez créer une application sur Vimeo, puis y saisir les valeurs de l'ID client, du secret client, du jeton d'accès et du secret du jeton d'accès.
Dans l'onglet Actions de masse, vous pouvez analyser vos articles publiés pour y trouver des vidéos et générer des miniatures vidéo pour ceux-ci. Le plugin fournit également un bouton pour effacer toutes les miniatures vidéo et les supprimer en tant que pièce jointe de vos articles.
Créer des miniatures vidéo dans les articles WordPress
Maintenant que vous avez configuré le plugin, créons une miniature vidéo en ajoutant une URL vidéo dans un article WordPress. Pour ce faire, vous devez créer ou modifier un article WordPress et ajouter votre URL vidéo dans la zone d'édition de l'article. Une fois que vous publiez l'article, vous verrez que le plugin a généré une miniature vidéo pour vous et l'a ajoutée à votre article.
Afficher une miniature vidéo dans votre thème WordPress
Le plugin de miniatures vidéo utilise la fonctionnalité WordPress Post Thumbnails. La plupart des thèmes WordPress sont configurés pour afficher automatiquement les miniatures de publication. Cela signifie que votre thème affichera automatiquement la miniature vidéo avec votre contenu de publication ou votre extrait. Cependant, si votre thème n'affiche pas les miniatures vidéo, vous devrez modifier les fichiers de votre thème et ajouter ce code au modèle où vous souhaitez afficher la miniature.
<?php the_post_thumbnail(); ?>
Comment ajouter un bouton de lecture sur la miniature vidéo dans WordPress
Maintenant que vous avez capturé et affiché avec succès des miniatures vidéo dans vos publications WordPress, vous pourriez vouloir distinguer vos miniatures d'image régulières de vos miniatures vidéo. Cela permettra à vos utilisateurs de savoir qu'il y a une vidéo dans la publication, et qu'ils peuvent cliquer sur le bouton de lecture pour voir la publication vidéo. Nous allons vous montrer comment utiliser des balises conditionnelles pour distinguer les miniatures vidéo des miniatures de publication régulières et ajouter un bouton de lecture.
Pour utiliser cette méthode, vous devez vous assurer de publier vos publications vidéo sous une catégorie spécifique, par exemple, Vidéos. Ensuite, dans les fichiers de modèle de votre thème comme index.php, archive.php, category.php, ou content.php, recherchez cette ligne de code :
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
Nous devons maintenant remplacer ce code par le code suivant :
<?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; ?>
Ce code ajoute <span class="playbutton"?></span> après la miniature de l'article uniquement pour les articles classés dans la catégorie vidéo. La prochaine étape consiste à télécharger un fichier image depuis l'écran Médiathèque » Ajouter. Cette image sera utilisée comme bouton de lecture. Une fois que vous avez téléchargé le fichier image, notez l'emplacement du fichier image en cliquant sur le lien Modifier à côté de l'image.
La dernière étape consiste à afficher le bouton de lecture. Nous utiliserons le CSS pour afficher et positionner le bouton de lecture sur la miniature de la vidéo. Pour ce faire, vous devez copier et coller ce code CSS dans la feuille de style de votre thème ou de votre thème enfant en cliquant sur Apparence » Éditeur.
.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;
}
N'oubliez pas de remplacer l'URL de l'image d'arrière-plan par l'URL du fichier image du bouton de lecture que vous avez téléchargé précédemment. C'est tout. Vos fichiers de miniatures vidéo devraient maintenant avoir un bouton de lecture dessus.
Nous espérons que cet article vous a aidé à mettre en valeur vos vidéos YouTube avec des miniatures dans WordPress. Pour vos commentaires et questions, veuillez laisser un commentaire ou nous suivre sur Twitter.
Peter
C'est incroyable que ça marche encore !
Cependant, quelqu'un sait pourquoi il n'obtient pas de miniature d'une playlist YT ?
i´ve plusieurs posts avec des playlists et l'image est toujours une image grise "Vidéo introuvable"
Support WPBeginner
Le plugin a été créé pour les vidéos et non pour des playlists entières, vous devriez contacter l'auteur du plugin pour inclure la fonctionnalité de playlist.
Admin
eddie art
cela fonctionnerait-il pour obtenir une image miniature sur une vidéo intégrée via un code iframe ?
Support WPBeginner
Vous devrez vérifier auprès du support du plugin si cela est pris en charge.
Admin
Faisal Iqbal
Où mettre ce code dans functions.php. Je ne suis pas un expert, quelqu'un peut-il m'aider ?
Mohammad
Salut
J'essaie d'utiliser ce plugin mais il ne fonctionne pas pour moi et le développeur sur les forums de support ne répond pas à la plupart des sujets non résolus. Dans la page de débogage, lorsque j'essaie "Tester le balisage pour la vidéo", j'obtiens cette erreur :
Miniature trouvée, mais elle peut ne pas exister sur le serveur source. Si l'ouverture de l'URL ci-dessous dans votre navigateur Web renvoie une erreur, la source fournit une URL invalide. URL de la miniature :
Quel est le problème ?
Neon emmanuel
et si je veux trois paramètres, 1 un secours lorsqu'il n'y a pas de miniature, deux un secours s'il s'agit d'une vidéo (c'est-à-dire ajouter une superposition de bouton de lecture), et trois un secours s'il s'agit d'une vidéo avec une icône de lecture superposée dessus.
Bryan
Ce code fonctionnera-t-il pour Adobe Muse/Dreamweaver ?
john
Salut
Nous recherchons un développeur qui peut implémenter cela pour nous. Êtes-vous disponible ?
pamela sillah
Y a-t-il un autre moyen pour moi de faire cela SANS plugins ?? s'il vous plaît aidez-moi
franck
Bonjour à tous,
Quelqu'un sait comment supprimer les vidéos connexes lorsque la vidéo Youtube est lue jusqu'à la fin dans le plugin de galerie vidéo de Huge IT ?
Ernesto
Comment puis-je supprimer l'image de l'intérieur de l'entrée ? Je veux que l'entrée soit dans l'affichage vidéo et sans image
Quoterland
Merci, excellent tutoriel.
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
L'équipe de WPBeginner
Non, votre miniature apparaîtra sur Facebook mais elle n'aura pas le bouton de lecture.
srem
Désolé, je ne sais pas pourquoi le code ne s'affiche pas.
Mauro Scarpa
Salut ! Excellent site web et article, j'ai une question, si je veux ensuite partager mon article sur Facebook, apparaîtra-t-il aussi avec le bouton de lecture ? Merci
Piet
Plugin et tutoriel sympas. Au lieu d'afficher une image de bouton de lecture, je voudrais suggérer d'utiliser une icône de police, par exemple de FontAwesome.
L'équipe de WPBeginner
TCB : si vous utilisez le plugin WordPress SEO, vous pouvez essayer cette méthode. Une fois que le plugin de miniature vidéo a récupéré l'image miniature de votre vidéo, vous devez trouver son emplacement dans votre médiathèque et copier l'URL. Après cela, supprimez l'image miniature de la vidéo de l'article. Dans la boîte méta de WordPress SEO sur l'éditeur d'article, cliquez sur l'onglet social, et collez le lien à côté du champ image Facebook.
TCB
Est-il possible d'utiliser la miniature de la vidéo comme image de publication sur Facebook ?
Ce serait génial car je ne veux pas montrer l'image comme image mise en avant.
Megha Verma
Je rencontre un problème car le bouton de lecture n'apparaît que sur le premier article... en raison de la position absolue... pas sur les images des autres articles...
Sutherland Boswell
Super tutoriel ! En tant que développeur, j'adore recevoir les commentaires des utilisateurs et travailler sur des solutions simples pour les fonctionnalités les plus demandées. Superposer un bouton de lecture et faire en sorte que la vidéo démarre réellement en cliquant sur la miniature sont deux des fonctionnalités les plus demandées, mais elles dépendent toutes deux fortement du thème. Apprendre à modifier un thème par soi-même peut être gratifiant, alors n'ayez pas peur de vous lancer !
PS – J'espère que tout le monde ira jeter un œil à la version pro !
Jesse
Salut Sutherland.
J'ai lu tellement de bonnes choses sur votre plugin et j'ai hâte de l'essayer.
Cependant, lorsque j'utilise votre plugin pour rechercher des fichiers vidéo, il trouve toutes les 22 vidéos sous la page « vidéo » où elles sont publiées. Le problème est qu'il ne trouve aucune miniature.
Après avoir lu vos différentes réponses de support à des problèmes similaires, ainsi que vos instructions, j'ai cherché à savoir si mon thème (metric, par grandpixels) utilisait un champ personnalisé. Je n'ai pas réussi à trouver cette information.
Avez-vous des suggestions sur la façon de faire fonctionner cela ?
Merci,
Jesse
Audee
Et si je veux afficher la miniature du post uniquement pour les posts classés sous le « Format de post » vidéo ?
Merci d'avoir partagé cet article sur ce plugin !
Sutherland Boswell
Vous devriez pouvoir suivre le tutoriel, remplacez simplement
1-click Use in WordPress
par
1-click Use in WordPress
Alex
Salut Sutherland Boswell,
j'utilise votre plugin pour le thème Detube, le problème est qu'il n'y a pas de ligne de code <a href="”> dans ces fichiers : index.php, archive.php, category.php..
Avez-vous une idée ou un moyen de le faire fonctionner dans le thème Detube ?
Merci d'avance !
Alex
je serais tellement heureux si quelqu'un avait une idée et pouvait répondre à ma question. J'ai travaillé pendant de nombreuses heures pour faire fonctionner ce code sur Detube, mais sans succès jusqu'à présent…
Quelqu'un ici pourrait-il m'aider s'il vous plaît ?
Ahmad Rafi Maseer
Comment jouer directement dans la miniature pour que l'utilisateur n'ait pas à aller sur la page du post pour lire la vidéo ???
Support WPBeginner
Pour cela, vous devrez modifier votre thème et, au lieu d'afficher la miniature, vous devrez intégrer la vidéo.
Admin
Sue Anne
Merci BEAUCOUP pour les excellentes instructions sur la façon de mettre une vidéo et une miniature vidéo sur mon blog WordPress. Cela a pris environ 5 minutes et je ne suis pas une experte en technologie !
Pali Madra
Salut !
Super site web et l'un de mes posts préférés.
J'avais une question connexe. J'ajoute des vidéos en plaçant l'URL dans le code HTML des posts, mais je veux aussi afficher une légende en dessous. Est-ce possible sans utiliser de plugin ?
Merci d'avance
Matt
Tutoriel fantastique. Merci beaucoup d'avoir posté ceci !
Tiguan
Le « span » doit être placé à l'intérieur des balises de lien hypertexte de la miniature, sinon le lien de l'image sur le bouton de lecture sera désactivé. Le code correct sera donc :
Cependant, c'est un bon tutoriel.
Support WPBeginner
Tiguan, merci de l'avoir signalé. Nous avons mis à jour le tutoriel.
Admin
adolf witzeling
Super tutoriel.
gottfrid q.
> Cela permettra à vos utilisateurs de savoir qu'il y a une vidéo dans le message, et ils pourront cliquer sur le bouton de lecture pour voir le message vidéo.
Je ne veux pas vous décevoir, mais le bouton (spin) n'a pas de méthode de clic.
Comment ce bouton était-il censé fonctionner exactement et comment l'implémenter ?
Merci pour votre temps.
Support WPBeginner
Le bouton ne lira pas la vidéo directement, mais il redirigera l'utilisateur vers la page de la vidéo. La miniature entière est liée à la publication contenant la vidéo.
Admin
gottfrid q.
Le 'span' doit-il être placé à l'intérieur des balises de lien hypertexte de la miniature alors ?
Akash
Et. comment implémenter le bouton Play dans le thème GENESIS ? il n'y a pas de fichier index.php, archive.php, category.php, ou content.php pour ajouter le code.
Merci.
Support WPBeginner
Contactez les forums de support Genesis.
Admin
Mark McGinnis
Akash, as-tu réussi à l'implémenter en utilisant le thème Genesis ? J'ai le même problème…
Merci !
Akash
Mais quelle sera la taille de la miniature de la vidéo ? Sera-t-elle la même que la miniature d'image déjà définie dans le blog ?
Support WPBeginner
Il utilisera la taille de miniature par défaut. Vous pouvez la remplacer en ajoutant votre propre taille d'image et en l'utilisant dans votre modèle. Par exemple, si vous créez une nouvelle taille de miniature et que vous la nommez video-thumbnail, vous l'appelleriez dans votre modèle comme ceci :
<?php the_post_thumbnail('video-thumbnail'); ?>1-click Use in WordPress
Admin