Avez-vous vu des sites populaires utiliser leurs vignettes vidéo YouTube sur la première page de leur site ? Si vous exécutez une chaîne vidéo sur des sites tels que YouTube, Vimeo ou autres, vous pouvez également afficher une vignette vidéo pour tous les messages contenant des vidéos sur les pages d’accueil et d’archives de votre blog. Dans cet article, nous allons vous montrer comment ajouter des vignettes pour les vidéos YouTube dans WordPress.
Vignettes vidéo et vignettes de publication WordPress
WordPress est livré avec une fonctionnalité intégrée pour ajouter des images en vedette ou publier des vignettes, et la plupart des thèmes WordPress prennent en charge cette fonctionnalité. Toutefois, si vous souhaitez mettre en évidence votre contenu vidéo à partir de YouTube, vous souhaitez présenter ce contenu avec des vignettes vidéo. Cet article vous aidera à le faire en utilisant la fonctionnalité de vignette de publication par défaut de WordPress.
Configuration du plug-in de vignettes vidéo dans WordPress
La première chose que vous devez faire est d’installer et d’activer Vignettes vidéo brancher. Après avoir activé le plugin, vous devez vous rendre sur Paramètres » Vignettes vidéo pour configurer les paramètres du plug-in.
Sur l’écran des paramètres, nous vous recommandons de choisir de stocker la vignette 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 plug-in affichera les publications, 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 de vidéos. La dernière option sur cette page est de choisir un champ personnalisé. Certains plugins vidéo pour WordPress enregistrent les URL des vidéos dans un champ personnalisé, et si vous utilisez de tels plugins, vous devrez entrer ce champ personnalisé ici. Après cela, cliquez sur le bouton Enregistrer les modifications.
Sur la page des paramètres, vous verrez également le Fournisseurs languette. Si vous utilisez Vimeo pour partager vos vidéos, vous devrez créer une application sur Vimeo, puis saisir ici l’ID client, le secret client, le jeton d’accès et les valeurs secrètes du jeton d’accès.
Sur le Actions de masse , vous pouvez rechercher des vidéos dans vos messages publiés et générer des vignettes vidéo pour celles-ci. Le plugin fournit également un bouton pour effacer toutes les vignettes vidéo et les supprimer en tant que pièce jointe de vos publications.
Création de vignettes vidéo dans les publications WordPress
Maintenant que vous avez configuré le plugin, créons une vignette vidéo en ajoutant une URL vidéo dans un article WordPress. Pour ce faire, vous devez créer ou modifier une publication WordPress et ajouter l’URL de votre vidéo dans la zone de publication. Une fois que vous avez publié le message, vous verrez que le plugin a généré une vignette vidéo pour vous et l’a ajouté à votre message.
Afficher une vignette vidéo dans votre thème WordPress
Le plugin de vignettes vidéo utilise la fonctionnalité WordPress Post Thumbnails. La plupart des thèmes WordPress sont configurés pour afficher automatiquement les miniatures des publications. Cela signifie que votre thème affichera automatiquement la miniature de la vidéo avec le contenu ou l’extrait de votre publication. Cependant, si votre thème n’affiche pas les vignettes vidéo, vous devez modifier vos fichiers de thème et ajouter ce code au modèle où vous souhaitez afficher la vignette.
<?php the_post_thumbnail(); ?>
Comment ajouter un bouton de lecture sur la vignette vidéo dans WordPress
Maintenant que vous avez capturé et affiché avec succès des vignettes vidéo dans vos publications WordPress, vous voudrez peut-être distinguer vos vignettes d’image régulières de vos vignettes vidéo. Cela permettra à vos utilisateurs de savoir qu’il y a une vidéo dans la publication, et ils peuvent cliquer sur le bouton de lecture pour voir la publication vidéo. Nous vous montrerons comment utiliser des balises conditionnelles pour faire la distinction entre les vignettes vidéo et les vignettes de publication régulières et ajouter un bouton de lecture.
Pour utiliser cette méthode, vous devez vous assurer que vous publiez vos publications vidéo dans 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, or content.php cherchez cette ligne de code :
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
Maintenant, nous devons 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 vignette du message uniquement pour les messages classés dans la catégorie vidéo. L’étape suivante consiste à télécharger un fichier image à partir de Médias » Ajouter un nouveau écran. 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 Éditer lien à côté de l’image.
La dernière étape consiste à afficher le bouton de lecture. Nous utiliserons CSS pour afficher et positionner le bouton de lecture sur la vignette de la vidéo. Pour cela, vous devez copier et coller ce code CSS dans la feuille de style de votre thème ou 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 vignettes vidéo devraient maintenant comporter un bouton de lecture.
Nous espérons que cet article vous a aidé à mettre en valeur vos vidéos YouTube avec des vignettes dans WordPress. Pour des commentaires et des questions, veuillez laisser un commentaire ou suivez-nous sur Twitter.
