Folge 6: Ein einfacher YouTube Player mit custom fields unter WordPress

Entschuldigung, dass es so langsam vorangeht. Damit ihr eure Seite aber mal endlich verwenden könnt, möchte ich euch in diesem Artikel zeigen, wir ihr unter Beachtung der vorherigen Folgen einen ersten YouTube Player zu eurer Webseite hinzufügen könnt.

Wichtig ist vor allem, dass ihr ein Child-Theme angelegt habt, da wir nun Dateien aus unserem originalen Theme bearbeiten wollen und müssen. Was wir im folgenden machen werden, kann schnell unübersichtlich werden und ist mehr oder weniger eine schnelle Lösung für das, was wir uns für unsere Webseite wünschen. In erster Linie benötigen wir auch nur zusätzlich für unser Vorhaben das hinzugefügte benutzerdefinierte Feld mit der YouTube ID (oder einer YouTube URL, wenn man das abändern möchte).

Den Rest haben wir ja auf die Kernfunktionen von WordPress ausgelagert, vor allem entsprechend die Kategorien. Dies soweit nur mal als Erinnerung.

Ich plane irgendwann das ganze als Theme, Plugin oder was auch immer in einer benutzerfreundlicheren Variante mit mehr (und vor allem einfach vordefinierten) Funktionen zu veröffentlichen. Ist nur die Frage, ob ich jemals dazu kommen werde. Solange möchte ich euch die Basics zum Projekt aber auch weiterhin mittels Artikeln wie diesem versuchen zu vermitteln. Weiteres können erfahrene sowie interessierte Nutzer dann auch selbst mit ein wenig Kreativität nach eigenem Geschmack ausbauen :D

Aber mal weiter hier mit dem eigentlichen Thema, genug der Vorrede!

Erstellung eines einfachen YouTube Players als Teil unseres Themes

Die Betonung dessen, was wir hier erstmal erreichen wollen liegt auf dem Wort „einfach“. Nach dem Prinzip „quick and dirty“ wollen wir einfach erstmal was funktionierendes auf die Beine stellen, bevor wir uns um alle weitere Verschönerung kümmern.

Zuerst müssen wir ein paar Vorbereitungen treffen:

  • Halte Filezilla mit Zugriff auf deinen Webspace mit der WordPress Installation bereit –> Navigiere in den Theme-Ordner des Eltern-Themes
  • Wir wollen genau eine Datei bearbeiten, dazu solltest du diese erstmal auf deinen Desktop ziehen — Die Datei ist jene, innerhalb der wir den YouTube Player platzieren möchten. Da ich den über dem Artikel platzieren will, setze ich den Player in die header.php
  • Wir brauchen die Breite der Bereiche über und unter dem zukünftigen Players (also i.d.R. dem Header und Inhalt darunter) zwecks Angleichung daran. Im Falle von Iconic One wären dies 1040px. Am besten irgendwo notieren, merken oder bei Bedarf nochmal nachschauen.
  • Weiterhin brauchen wir die dazugehörige Höhe des Players. Dazu einfach mal ein Video auf der YouTube-Seite öffnen und unter diesem auf Teilen–>Einbetten gehen und die Breite eingeben. Die Webseite generiert uns direkt die passende Höhe, die wir uns auch notieren sollten..

Dann kann es auch schon losgehen!

Wir öffnen nun die heruntergeladene header.php mit dem Editor, um diese zu bearbeiten. Uns interessiert aber erstmal nur die letzte/vorletzte Zeile. Also der Bereich nach dem </header> … und vor dem <div id=“main“ … >.

Genau an diese Stelle wollen wir den YouTube Player setzen. Ich geb euch an dieser Stelle einfach mal den einfachen Code und liefere anschließend (oder währenddessen per Kommentar) ein paar Informationen dazu, um das an dieser Stelle möglichst kurz zu halten. Der Quellcode sollte auch ziemlich einfach mit dem Auge lesbar und nachvollziehbar sein.. sonst bei Unklarheiten einfach Fragen!

Änderungen an der header.php

Diesen Code also einfach an die benannte Stelle innerhalb der header.php kopieren und abspeichern.

<? // Abholung d. benutzerdefinierten Feldes
	$youtube_IDs = get_post_custom_values( 'youtube_id' );
	if(is_single() && $youtube_IDs){ // Folgendes wird nur dargestellt, wenn die aktuelle Seite ein Artikel ist, und eine YouTube ID für diesen hinterlegt wurde
  ?> 
<div id="youtube-player"> // Box außerhalb des Players zur Positionierung, Stilisierung etc
// Jetzt kommt der eigentliche Player, Maße beachten und ggf. anpassen!
        <iframe width="1040" height="585" src="//www.youtube.com/embed/<? echo $youtube_IDs[0]; ?>" frameborder="0" allowfullscreen></iframe>
</div>
<? } ?>

Diese Datei dann per Filezilla wieder hochladen. Aber NICHT in den Ordner des Eltern-Themes, dem wir die Datei entnommen haben! Die Datei kommt einfach in den Ordner des angelegten Child-Themes. Warum, wurde im letzten Artikel angesprochen.

Änderungen an der style.css

Folgendes fügen wir zudem der style.css-Datei des Child-Themes hinzu:

#youtube-player{
	margin: 0 auto;
	padding: 0px; 
	margin: 0px; 
	width: 1040px;
}

Im Grunde sind wir dann auch schon fertig.

Eure Webseite würde so bereits funktionieren und das so, wie wir uns das wünschen. Natürlich in der Form nur im einfachen Sinne. Ich werde mir aber erstmal überlegen müssen, wie wir an dieser Stelle fortfahren werden :)

Jens Jakob

Autor, Fotograf, Videoproduzent... und mehr - oder weniger. Ich mache, worauf ich Lust habe. Auf lichtbahn.de schreibe ich über eben solche vielseitige Themen, was mich interessiert, was ich mache und was mich antreibt. Viel Spaß beim Lesen!

Kommentar verfassen - Was meinst du dazu?