Créer un modèle de page de vidéos YouTube à partir d'un flux RSS

Il existe de nombreux plugins YouTube dans le référentiel de plugins WordPress.org, et même sur le marché Envato, mais parfois, un plugin est tout simplement excessif pour une implémentation très simple de vidéos récentes extraites d'un flux RSS..

Dans ce tutoriel, nous verrons comment utiliser les données renvoyées par fetch_feed () générer un modèle de page vidéo YouTube.

Création d'un modèle de page

Le code fini pourrait aussi très facilement être transformé en une fonction réutilisable, mais comme nous traitons du développement de thèmes, nous allons en faire un modèle de page..

La meilleure façon de commencer est simplement de dupliquer le thème page.php modèle s'il existe, ou commencez par le thème single.php. Les éléments clés pour vous assurer que le fichier est le nom du modèle et les appels à get_header () et get_footer (). Pour fournir le nom du modèle, il vous suffit de l'ajouter en haut du document dans les commentaires, comme suit:

Cela créera une nouvelle option dans le champ de modèle d'attributs de page pour sélectionner le modèle de page personnalisé qui devrait ressembler à la figure ci-dessous..

Transformez un flux RSS en données utilisables avec fetch_feed ()

WordPress nous fournit un petit moyen agréable de transformer un flux RSS en objet pouvant être utilisé pour parcourir des éléments et renvoyer d'autres données. Ceci est fait avec le fetch_feed () une fonction. Pour commencer à utiliser cette fonction, nous allons configurer quelques paramètres et quelques conditions d’erreur avec le prochain extrait de code..

get_item_quantity (10); $ rss_items = $ feed-> get_items (0, $ maxitems); if ($ maxitems == 0): retourne faux; else: if (is_array ($ rss_items)):?>… faire des choses… 

Tout d'abord, nous devons définir l'URL de notre flux RSS. Si vous ne parvenez pas à trouver le flux RSS que vous souhaitez, vous pouvez utiliser le générateur de flux YouTube de l'API YouTube de Google. Veillez à définir chaque paramètre avec soin, car toutes les URL de flux RSS ne renverront pas les résultats souhaités. Les paramètres par défaut devraient fonctionner et je vous conseille également d'utiliser la requête de recherche et la sortie RSS 2.0 pour obtenir de meilleurs résultats..

Une fois que vous avez votre URL, transformez-la en une variable objet avec le nom magique fetch_feed () une fonction. Exécutez ensuite une vérification pour vous assurer qu'il n'y a pas d'erreur et recherchez les éléments à renvoyer. Si vous êtes un utilisateur expérimenté, vous pourriez être diverti en faisant une var_dump ($ feed) pour voir tout ce que l'objet a à offrir.

Maintenant que nous avons les bases, notre page devrait rendre "… faire des choses…" car il y a un retour pour le flux. Nous pouvons maintenant nous préparer à sortir les vidéos renvoyées par le fil.

Poser la fondation de sortie vidéo

Avant de prendre trop d'avance sur nous-mêmes, allons de l'avant et fixons un peu de balisage et de style. Pour cette mise en page, nous aurons un grand lecteur vidéo iframe en haut de la page, puis les vignettes de chaque vidéo dans une liste à deux colonnes ci-dessous. Remplaçons notre espace réservé "do stuff" par ceci:

 
  
 
 
 
 
titre de la vidéo
 
 
 

Dans notre division contenant, nous avons deux éléments principaux. Le premier concerne le grand lecteur vidéo et contiendra l’incorporation réelle de la vidéo de travail; l'autre est une liste pour les colonnes de sélection vidéo avec des vignettes et des titres vidéo. Ensuite, nous allons styliser cela en déposant des CSS dans la feuille de style du thème.

#videos width: 640px;  .video_player padding: 15px;  .video_thumbs margin: 0;  .video_thumbs li style de liste: aucun; rembourrage: 15px; marge: 0; float: gauche; largeur: 290px;  .video_thumbs p margin: 10px 0;  .video_thumbs li: survolez img, .video_thumbs li.active img opacité: .5; 

Ce CSS définit le lecteur vidéo jusqu'à avoir un peu d'espace autour et crée deux colonnes égales en dessous.

Obtenir l'identifiant vidéo

Avant de commencer à analyser les données extraites du flux RSS, il reste encore une étape. Nous allons devoir trouver l'ID de la vidéo dans chaque élément vidéo.

Pour ce faire, nous allons créer une fonction séparée que nous placerons dans le thème functions.php déposer afin qu'il soit prêt à être utilisé dans le modèle.

function wptuts_get_yt_ID ($ uri) // combien de temps les ID YT sont-ils $ id_len = 11; // où commencer à chercher $ id_begin = strpos ($ uri, '? v ='); // si l'id n'est pas au début de l'URI pour une raison quelconque si ($ id_begin === FALSE) $ id_begin = strpos ($ uri, "& v ="); // tout le reste échoue si ($ id_begin === FALSE) wp_die ('ID vidéo YouTube introuvable. Vérifiez votre URL. "); // maintenant aller au début approprié $ id_begin + = 3; // récupère l'ID $ yt_ID = substr ($ uri, $ id_begin, $ id_len); return $ yt_ID; 

Ce bit de code recherche fondamentalement une URL fournie pour une chaîne de 11 caractères qui suit "& v ="dans la requête et enlève ces trois premiers caractères pour produire l'ID de la vidéo. Nous pouvons utiliser ceci pour remplacer"VIDEO_ID"dans notre balisage.

Les pièces en mouvement: Sortie des vidéos et des miniatures

Maintenant, nous pouvons utiliser notre balisage et remplacer notre balisage simple par du code de travail comme ceci:

 
  0) pause; $ id = wptuts_get_yt_ID ($ item-> get_permalink ()); ?>   
 
 get_permalink ()); $ enclosure = $ item-> get_enclosure (); ?> 
 
">
 
">get_title ()); ?>
 
  
 

Cela crée deux boucles à travers les éléments RSS. Le premier casse après le premier élément car nous ne voulons en retourner qu'un. iframe pour commencer avec.

La deuxième boucle obtient le $ id et $ enclosure de chaque élément à l’aide des fonctions SimplePie disponibles et génère l’adresse de vignette et le titre appropriés, liés à l’URL intégrée de chaque photo.

Faire fonctionner les liens miniatures

La dernière étape consiste à déposer dans un certain jQuery qui annulera le comportement par défaut de chaque lien miniature et utilisera à la place ces URL pour modifier la vidéo intégrée dans le fichier. iframe. Pour cela, mettez en file d'attente un fichier JavaScript personnalisé de votre functions.php ainsi:

add_action ('wp_enqueue_scripts', 'wptuts_enqueue_video_js'); function wptuts_enqueue_video_js () if (is_page_template ('page-cats.php')) wp_enqueue_script ('video_js', get_template_directory_uri (). '/js/video.js', array ('jquery')); 

Ce code vérifiera que nous sommes sur le modèle de page personnalisé nommé "page-cats.php"afin que nous appelions seulement le script sur cette page, puis mettons en file d'attente un fichier JS qu'il recherchera dans notre thème"js"répertoire et nécessite que jQuery soit exécuté. Vous pouvez maintenant créer ce fichier JavaScript avec le code suivant:

jQuery (function ($) $ ('#videos .video_thumbs li: premier-enfant') .addClass ('active'); $ ('#videos .video_thumbs a') .on ('clic', fonction (e) e.preventDefault (); $ ('#videos .video_thumbs li') .removeClass ('active'); $ (this) .parentsUntil ('ul') .addClass ('active'); var video = $ (this ) .attr ('href'); $ ('#videos .video_player iframe') .attr ('src', vidéo);););

Ce code ajoutera le "actif"classe à la première vignette de la vidéo li. Puis, quand un lien miniature est cliqué, il cessera de quitter la page, ajoutez le "actif"class à l'élément cliqué, et utilisez l'URL du lien pour remplacer l'URL dans le iframe source, remplaçant ainsi la vidéo active par la nouvelle.

Conclusion

À la suite de tout votre travail, vous devriez avoir une page vidéo personnalisée qui ressemble à ceci: