Comment ajouter des vignettes pour les vidéos YouTube dans WordPress

Avez-vous déjà vu des sites populaires utilisant leurs miniatures vidéo YouTube sur la page d'accueil de leur site? Si vous diffusez une chaîne vidéo sur des sites tels que YouTube, Vimeo ou autres, vous pouvez également afficher une vignette vidéo pour toutes les publications contenant des vidéos au recto ainsi que les pages d'archive de votre blog. Dans cet article, nous allons vous montrer comment ajouter des vignettes pour les vidéos YouTube dans WordPress.

Miniatures vidéo et miniatures post WordPress

WordPress est livré avec une fonctionnalité intégrée pour ajouter des images en vedette ou des vignettes de publication, et la plupart des thèmes WordPress prennent en charge cette fonctionnalité. Toutefois, si vous souhaitez mettre en valeur votre contenu vidéo à partir de YouTube, vous souhaitez afficher ce contenu avec des vignettes vidéo. Cet article vous aidera à le faire en utilisant la fonctionnalité de miniatures de publication WordPress par défaut..

Configurer le plugin de miniatures vidéo dans WordPress

La première chose à faire est d’installer et d’activer le plug-in Video Thumbnails. Après avoir activé le plugin, vous devez aller à Règlements »Miniatures vidéo configurer les paramètres du plugin.

Sur l'écran des paramètres, nous vous recommandons de stocker la vignette dans votre bibliothèque multimédia. Cela réduira les demandes http externes sur votre site et vos pages se chargeront plus rapidement. Sous la section types de publication, le plug-in affichera des publications, des pages et des types de publication personnalisés, le cas échéant. 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 consiste à choisir un champ personnalisé. Certains plugins vidéo pour WordPress enregistrent les URL de la vidéo dans un champ personnalisé. 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 devez créer une application sur Vimeo, puis saisir ici les valeurs de l'ID client, du secret client, du jeton d'accès et du jeton d'accès..

Sur le Actions de masse onglet, vous pouvez analyser vos publications et rechercher des vidéos 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 pièce jointe de vos messages..

Création de miniatures vidéo dans des publications WordPress

Maintenant que vous avez configuré le plug-in, créons une vignette vidéo en ajoutant une URL de 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. Une fois que vous avez publié le message, vous verrez que le plug-in a généré une vignette vidéo pour vous et l'a ajoutée à votre message..

Affichage d'une vignette vidéo dans votre thème WordPress

Le plug-in 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 vignette de la vidéo avec le contenu ou l'extrait de votre message. Toutefois, 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..

Comment ajouter un bouton de lecture sur la vignette vidéo dans WordPress

Maintenant que vous avez capturé et affiché avec succès les vignettes vidéo dans vos publications WordPress, vous pouvez distinguer les vignettes d’image ordinaires des vignettes de vos vidéos. Cela permettra à vos utilisateurs de savoir qu’il existe une vidéo dans la publication. Ils peuvent cliquer sur le bouton de lecture pour afficher la vidéo. Nous allons vous montrer comment utiliser les balises conditionnelles pour faire la distinction entre les vignettes vidéo et les vignettes de messages ordinaires, et ajouter un bouton de lecture..

Pour utiliser cette méthode, vous devez vous assurer de publier vos publications vidéo dans une catégorie spécifique, par exemple, Vidéos. Ensuite, dans les fichiers de modèles de votre thème, comme index.php, archive.php, category.php ou content.php cherche cette ligne de code:

Nous devons maintenant remplacer ce code par le code suivant:

Ce code ajoute après la vignette du message uniquement pour les messages classés dans la catégorie vidéo. La prochaine étape consiste à télécharger un fichier image à partir de Media »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 son emplacement en cliquant sur le bouton modifier 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 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 »Editeur.

 .playbutton background: url ('http://example.com/wp-content/uploads/playbutton.png') center center no-repeat; position: absolue; en haut: 50%; à gauche: 50%; largeur: 74px; hauteur: 74px; marge: -35px 0 0 -35px; z-index: 10; opacité: 0,6;  .playbutton: survol opacité: 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 chargé précédemment. C'est tout. Vos fichiers de vignettes vidéo devraient maintenant avoir un bouton de lecture sur eux.

Nous espérons que cet article vous a aidé à mettre en valeur vos vidéos YouTube avec des vignettes dans WordPress. Pour les commentaires et les questions s'il vous plaît laissez un commentaire ou suivez-nous sur Twitter.