Share
Dans ce didacticiel, nous intégrerons un lecteur intégré YouTube et Vimeo à une page d’un site Web WordPress, sans avoir à consulter les documents de l’API (qui sont l’API de YouTube et l’API de Vimeo, si cela vous intéresse). En utilisant les outils disponibles dans WordPress avec un peu de PHP, nous pouvons créer une galerie qui résout le problème de l'agrégation de contenu..
Par exemple, j'aime bien le lecteur Vimeo, mais ce ne sera pas toujours moi qui téléchargerai la vidéo. Un tiers peut télécharger sur YouTube, et je ne veux surtout pas continuer à courir dans les tailles de paramètres sur les sites pour obtenir le lecteur intégré pour chaque vidéo..
Sur le plan individuel, cela vous donne le pouvoir de choisir votre site vidéo préféré tout en pouvant vous adapter si un tiers publie une vidéo à partir d'un autre site. Pour les développeurs Web, cela signifie que vous pouvez donner à l'utilisateur un panneau de commande sans avoir à prendre d'appels téléphoniques pour obtenir des conseils sur les vidéos intégrées..
"Planifiez d'abord le site… La mise en page rétrospective est un problème."
La première partie de ce didacticiel serait évidente pour les développeurs et les concepteurs les plus expérimentés. Mais je vais le souligner quand même. Planifiez d'abord le site, dans ce cas la page de la galerie. Concevez la structure en fil de fer, choisissez la largeur et la hauteur souhaitées pour le lecteur vidéo. Une fois que cela est terminé, vous pouvez passer à fonctionner. La mise en page rétrospective est une douleur.
J'ai utilisé le système de grille 960 et rendu le lecteur 300px large et 190px haut.
Comme vous le savez peut-être, Vimeo et YouTube fournissent du code intégré que vous pouvez saisir pour le coller dans votre site WordPress. Cela nous donne le joueur de base alors allons-y.
Découvrez Zero Gravity de Betty Wans On sur Vimeo.
Avec ces deux codes d'intégration, nous pouvons les personnaliser, changer la largeur, les couleurs, etc. Mais cela prend du temps et est répétitif. Faisons donc notre code faire le travail.
Ici, nous pouvons utiliser un excellent plugin appelé Modèle de champ personnalisé par Hiroaki Miyashita. Grâce au panneau de configuration, nous pouvons entrer les champs qui deviendront nos variables.
Entrer
[ID vidéo] type = champ de texte [Site vidéo] type = valeur de sélection = youtube # vimeo
Et entrez les vidéos de type publication personnalisée. Si vous ne savez pas comment créer des types de publication personnalisés, consultez un plug-in facile, Interface utilisateur Types de publications personnalisés. Par WebDevStudios.com
Une fois que cela est fait lorsque vous ajoutez une nouvelle publication vidéo, vous verrez les options pour l'identifiant vidéo et le site vidéo..
Le facteur commun entre les sites vidéo est l'ID de la vidéo. À la fin de l'URL de YouTube, il ressemble à ceci:
http://www.youtube.com/watch?v=WhBoR_tgXCI
L'identité YouTube: WhBoR_tgXCI
À la fin de l'URL Vimeo, cela ressemble à ceci:
http://vimeo.com/29017795
Le vimeo ID: 29017795
Pour cette raison, nous pourrions ajouter plus de sites de vidéos à mesure qu’ils adoptent cette même tactique d’URL. Pour l'instant nous allons nous en tenir aux deux en question.
Nous avons donc maintenant un moyen simple d’attribuer une vidéo à une publication, de saisir l’ID et de sélectionner le site..
Avant de configurer PHP, nous devons créer une page et l'assigner à un fichier de modèle personnalisé tel qu'une galerie. Nous pouvons ensuite ouvrir notre nouvelle page et lui attribuer des propriétés de base. Pour plus d'informations sur les fichiers de modèles personnalisés, consultez le Codex WordPress pour les thèmes et modèles enfants..
Nous devons maintenant prendre ces informations et les utiliser, ajouter une boucle à votre fichier de modèle et incorporer votre structure filaire. Par exemple:
Vidéos
'videos', 'posts_per_page' => 10); $ loop = new WP_Query ($ args); while ($ loop-> have_posts ()): $ loop-> the_post (); ?>
Nous avons maintenant les messages vidéo indiquant leur titre et leur contenu. Créons quelques variables dans le .galvidprevid div (une classe, parce que nous en avons plusieurs), nous pouvons donc appeler facilement les métadonnées personnalisées.
ID, 'Site vidéo', single); $ videoid = get_post_meta ($ post-> ID, "ID vidéo", unique); ?>
Nous pouvons maintenant appeler le site Video ID et Video avec $ videosite et $ videoid. Obtenons donc le code intégré de nos deux sites avec la largeur et la hauteur définies à la taille souhaitée. Dans le code incorporé, vous pouvez trouver l’ID de la vidéo et le remplacer par notre variable..
Donc, tout ce que nous avons à faire est d'insérer notre ID en le remplaçant par notre variable $ videoid. Répondons au contenu.
écho '';
Nous avons donc notre identifiant vidéo à la place de celui que nous avions auparavant. Maintenant, nous pouvons créer une instruction if pour changer le lecteur intégré en fonction du site vidéo sélectionné.
'; else if ($ videosite == 'youtube') echo ''; else echo 'Veuillez sélectionner un site vidéo via l'administrateur WordPress'; ?>
Vérifiez que tout semble bon, ajoutez une vidéo et un prisonnier de guerre! Image ci-dessous du site et de l'administrateur.
Donc voilà, je vais ajouter certaines de mes vidéos préférées et faire un peu de CSS et c'est fait.
Voici le CSS que j'ai utilisé.
h1 font-size: 20px; #galvidcontainer width: 940px; marge: 0 auto; .galvidpre width: 300px; hauteur: 325px; float: gauche; marge: 5px; couleur de fond: #ccc; .galvidprevid width: 300px; .galvidpretext width: 280px; rembourrage: 10px;
Ici, nous avons démontré une méthode efficace pour implémenter des lecteurs vidéo intégrés sans recourir à d’énormes quantités de code. Avez-vous trouvé ceci utile? Faites-nous savoir ce que vous pensez dans les commentaires!
Accentsconagua