Share
In diesem Tutorial werden wir einen eingebetteten YouTube- und Vimeo-Player in eine Seite einer WordPress-Website integrieren, ohne auf die API-Dokumente (die YouTube-API und Vimeo-API, falls Sie interessiert sind) zu stoßen. Durch die Verwendung der in WordPress verfügbaren Tools mit etwas PHP können wir eine Galerie erstellen, die das Problem der Aggregation von Inhalten überwindet.
Ich mag zum Beispiel den Vimeo-Player, aber ich muss nicht immer das Video hochladen. Möglicherweise wird ein Drittanbieter auf YouTube hochgeladen. Ich möchte auf keinen Fall die Größe der Websites ändern, um den eingebetteten Player für jedes Video zu erhalten.
Individuell bedeutet dies, dass Sie Ihre bevorzugte Videoseite auswählen können und sich trotzdem anpassen können, wenn ein Dritter ein Video von einer anderen Website veröffentlicht. Für Webentwickler bedeutet dies, dass Sie dem Benutzer ein Kontrollfeld geben können und keine Anrufe für eingebettete Videos tätigen müssen.
"Planen Sie die Site zuerst aus ... Das retrospektive Layout ist ein Schmerz."
Der erste Teil dieses Tutorials ist für erfahrene Entwickler und Designer offensichtlich. Aber ich werde es trotzdem betonen. Planen Sie zuerst die Site, in diesem Fall die Galerieseite. Entwerfen Sie das Drahtgitter, entscheiden Sie, in welcher Breite und in welcher Höhe der Videoplayer sein soll. Sobald dies abgeschlossen ist, können Sie mit der Funktion fortfahren. Rückblickendes Layout ist ein Schmerz.
Ich verwendete das 960-Rastersystem und machte den Player 300px breit und 190px hoch.
Wie Sie vielleicht wissen, bieten Vimeo und YouTube eingebetteten Code, den Sie in Ihre WordPress-Site einfügen können. Das gibt uns den Grundspieler, also holen wir sie uns.
Erleben Sie Zero Gravity von Betty Wants In auf Vimeo.
Mit diesen beiden Einbettungscodes können wir sie anpassen, die Breite, die Farben usw. ändern. Dies ist jedoch zeitaufwändig und wiederholend. Lassen Sie uns also unseren Code die Arbeit machen lassen.
Hier können wir ein hervorragendes Plugin mit dem Namen Custom Field Template von Hiroaki Miyashita verwenden. Über das Einstellungsfeld können wir die Felder eingeben, die zu unseren Variablen werden.
Eingeben
[Video ID] type = textfield [Video Site] type = Wert auswählen = youtube # vimeo
Geben Sie die benutzerdefinierten Post-Typ-Videos ein. Wenn Sie nicht sicher sind, wie Sie benutzerdefinierte Beitragstypen erstellen, sehen Sie ein einfaches Plugin mit der Bezeichnung Benutzerdefinierte Beitragstypen-Benutzeroberfläche von WebDevStudios.com
Sobald Sie dies getan haben, wenn Sie einen neuen Video-Beitrag hinzufügen, werden die Optionen für die Video-ID und die Video-Site angezeigt.
Der gemeinsame Faktor bei Video-Websites ist die Video-ID. Am Ende einer YouTube-URL sieht sie folgendermaßen aus:
http://www.youtube.com/watch?v=WhBoR_tgXCI
Die YouTube-ID: WhBoR_tgXCI
Am Ende der Vimeo-URL sieht es so aus:
http://vimeo.com/29017795
Die Vimeo-ID: 29017795
Aus diesem Grund könnten wir weitere Videoseiten hinzufügen, da sie dieselbe URL-Taktik anwenden. Fürs Erste bleiben wir bei den beiden in Frage.
Jetzt haben wir eine einfache Möglichkeit, einem Beitrag ein Video zuzuordnen, die ID einzugeben und die Site auszuwählen.
Bevor wir das PHP einrichten, müssen wir eine Seite erstellen und einer benutzerdefinierten Vorlagendatei (z. B. Galerie) zuweisen. Dann können wir unsere neue Seite öffnen und grundlegende Eigenschaften angeben. Weitere Informationen zu benutzerdefinierten Vorlagendateien finden Sie im WordPress-Codex für untergeordnete Themen und Vorlagen.
Jetzt müssen wir diese Informationen verwenden und verwenden, eine Schleife zu Ihrer Vorlagendatei hinzufügen und Ihr Drahtmodell integrieren. Zum Beispiel:
Videos
'videos', 'posts_per_page' => 10); $ loop = new WP_Query ($ args); while ($ loop-> have_posts ()): $ loop-> the_post (); ?>
Wir haben jetzt die Videobeiträge, die ihren Titel und Inhalt ausgeben. Lassen Sie uns ein paar Variablen im erstellen .galvidprevid div (eine Klasse, weil wir mehr als eine haben), so dass wir die benutzerdefinierten Metadaten problemlos aufrufen können.
ID, "Video Site", single); $ videoid = get_post_meta ($ post-> ID, "Video ID", single); ?>
Wir können jetzt die Video ID und Video Site mit aufrufen $ videosite und $ videoid. Lassen Sie uns also den eingebetteten Code von unseren beiden Standorten mit Breite und Höhe auf die gewünschte Größe einstellen. Im eingebetteten Code können Sie die ID für das Video finden und diese durch unsere Variable ersetzen.
Wir müssen also nur unsere ID eingeben, indem wir sie durch unsere Variable ersetzen $ videoid. Lassen Sie uns den Inhalt herausfiltern.
Echo '';
Wir haben also unsere Video-ID anstelle der zuvor dort vorhandenen. Jetzt können wir eine if-Anweisung erstellen, um den eingebetteten Player in Abhängigkeit von der ausgewählten Videoseite zu ändern.
'; else if ($ videosite == 'youtube') echo ''; else echo 'Bitte wählen Sie eine Videoseite über den WordPress-Administrator aus'; ?>
Überprüfen Sie, ob alles gut aussieht, fügen Sie ein Video und POW hinzu! Bild unten der Site und des Administrators.
Also, da haben wir es, ich werde ein paar meiner Lieblingsvideos hinzufügen und ein wenig CSS machen und fertig.
Hier ist das CSS, das ich verwendet habe.
h1 font-size: 20px; #galvidcontainer width: 940px; Marge: 0 auto; .galvidpre width: 300px; Höhe: 325px; Schwimmer: links; Marge: 5px; Hintergrundfarbe: #ccc; .galvidprevid width: 300px; .galvidpretext width: 280px; Polsterung: 10px;
Hier haben wir eine schöne und effektive Methode zum Implementieren eingebetteter Videoplayer gezeigt, ohne dass sehr viel Code benötigt wird. Fanden Sie das hilfreich? Sagen Sie uns, was Sie in den Kommentaren denken!
Accentsconagua