Share
In deze tutorial zullen we een ingesloten YouTube- en Vimeo-speler integreren op een pagina op een WordPress-website, zonder dat je de API-documenten hoeft aan te raken (die YouTube-API en Vimeo API zijn, als je geïnteresseerd bent). Door de tools te gebruiken die beschikbaar zijn in WordPress met een beetje PHP, kunnen we een galerij maken die het probleem van content-aggregatie oplost.
Ik vind bijvoorbeeld de Vimeo-speler leuk, maar het zal niet altijd zijn dat ik de video upload. Een derde partij kan uploaden naar YouTube en ik wil absoluut niet doorgaan met het instellen van de grootte op sites om de ingesloten speler voor elke video te krijgen.
In termen van het individu geeft dit je de mogelijkheid om je favoriete videosite te kiezen en je nog steeds aan te passen als een derde een video van een andere site plaatst. Voor webontwikkelaars betekent dit dat u de gebruiker een configuratiescherm kunt geven en geen telefoontjes hoeft te plegen voor advies over ingesloten video's.
"Plan eerst de site ... Retrospectieve lay-out is lastig."
Het eerste deel van deze tutorial zou voor de meeste ervaren ontwikkelaars en ontwerpers duidelijk zijn. Maar ik zal het toch benadrukken. Plan eerst de site, in dit geval de galerijpagina. Ontwerp het draadmodel, bepaal zelf welke breedte en welke hoogte de videospeler moet hebben. Zodra dit is voltooid, kunt u doorgaan naar de functie. Retrospectieve lay-out is lastig.
Ik gebruikte het 960-rastersysteem en maakte de speler 300px breed en 190px hoog.
Zoals je wellicht weet, bieden Vimeo en YouTube ingesloten code die je kunt plakken om in je WordPress-site te plakken. Dit geeft ons de basisspeler, dus laten we ze pakken.
Ervaar Zero Gravity van Betty Wants In on Vimeo.
Met deze beide insluitcodes kunnen we ze aanpassen, de breedte, kleuren, etc. wijzigen. Maar dit is tijdrovend en repetitief. Dus laten we ervoor zorgen dat onze code het werk doet.
Hier kunnen we een uitstekende plug-in gebruiken Custom Field Template By Hiroaki Miyashita. Via het instellingenpaneel kunnen we de velden invoeren die onze variabelen worden.
invoeren
[Video-ID] type = tekstveld [Videosite] type = selecteer waarde = youtube # vimeo
En voer de aangepaste video's van het posttype in. Als u niet zeker weet hoe u aangepaste berichttypen kunt maken, raadpleegt u een eenvoudige plug-in genaamd Aangepaste berichttypen UI door WebDevStudios.com
Zodra dit is gebeurd wanneer u een nieuwe videopost toevoegt, ziet u de opties voor de video-id en videosite.
De gemeenschappelijke factor op videosites is de video-ID, aan het einde van een YouTube-URL ziet het er als volgt uit:
http://www.youtube.com/watch?v=WhBoR_tgXCI
De YouTube-ID: WhBoR_tgXCI
Aan het einde van de Vimeo-URL ziet het er als volgt uit:
http://vimeo.com/29017795
De Vimeo-ID: 29017795
Vanwege dit kunnen we meer videosites toevoegen omdat ze dezelfde URL-tactiek gebruiken. Voor nu houden we vast aan de twee in kwestie.
We hebben nu dus een eenvoudige manier om een video toe te wijzen aan een bericht, de ID in te voeren en de site te selecteren.
Voordat we de PHP instellen, moeten we een pagina maken en deze toewijzen aan een aangepast sjabloonbestand, zoals galerij, waarna we onze nieuwe pagina kunnen openen en basiskenmerken kunnen geven. Raadpleeg de WordPress Codex voor kindthema's en sjablonen voor meer informatie over aangepaste sjabloonbestanden.
Nu moeten we deze informatie gebruiken en gebruiken, een lus toevoegen aan uw sjabloonbestand en uw draadframe opnemen. Bijvoorbeeld:
Videos
'video's', 'posts_per_page' => 10); $ loop = new WP_Query ($ args); while ($ loop-> have_posts ()): $ loop-> the_post (); ?>
We hebben nu de video-berichten met hun titel en inhoud. Laten we een paar variabelen maken in de .galvidprevid div (een klasse, omdat we er meer dan één hebben), zodat we met gemak de aangepaste metagegevens kunnen noemen.
ID, 'Videosite', single); $ videoid = get_post_meta ($ post-> ID, "Video ID", single); ?>
We kunnen nu de video-id en videosite bellen $ videosite en $ VideoId. Dus laten we de ingesloten code van onze twee sites ophalen met de breedte en hoogte ingesteld op de gewenste grootte. In de ingesloten code kun je de ID voor de video vinden en die vervangen door onze variabele.
Dus alles wat we moeten doen is onze ID invoegen door deze te vervangen door onze variabele $ VideoId. Laten we de inhoud herhalen.
echo '';
Dus we hebben onze video-ID in plaats van degene die we eerder hadden. Nu kunnen we een if-instructie maken om de ingesloten speler te veranderen afhankelijk van de geselecteerde videosite.
'; else if ($ videosite == 'youtube') echo ''; else echo 'Selecteer een videosite via de WordPress Admin'; ?>
Controleer of alles er goed uitziet, voeg een video toe en POW! Afbeelding hieronder van zowel de site als de beheerder.
Dus daar hebben we het, ik ga wat van mijn favoriete video's toevoegen en een beetje CSS doen en het is klaar.
Hier is de CSS die ik heb gebruikt.
h1 font-size: 20px; #galvidcontainer width: 940px; marge: 0 auto; .galvidpre width: 300px; Hoogte: 325px; float: left; margin: 5px; background-color: #ccc; .galvidprevid width: 300px; .galvidpretext width: 280px; padding: 10px;
Hier hebben we een mooie en effectieve methode laten zien voor het implementeren van ingesloten videospelers zonder de noodzaak van enorme hoeveelheden code. Heeft u dit nuttig gevonden? Laat ons weten wat je denkt in de reacties!
Accentsconagua