So fügen Sie HTML5-Videos mit benutzerdefinierten Feldern zu WordPress hinzu

Wenn Sie 10 WordPress-Entwickler fragen, wie man etwas macht, erhalten Sie im Allgemeinen zehn verschiedene Antworten. Aber das spricht sowohl für die Vielseitigkeit des CMS als auch dafür, dass es für jede Aufgabe mehr als eine Lösung gibt.

Kürzlich stand ich vor der Herausforderung, ein HTML5-Video innerhalb einer WordPress-Seite einzurichten. Es befindet sich an einem statischen Ort und müsste von Zeit zu Zeit ersetzt werden. Es ist zwar in Ordnung, den Video-Shortcode zu verwenden, aber in diesem Fall wollte ich die Dinge für die Leute, die die Seite aktualisieren würden, besonders einfach machen. Ich wollte nicht, dass sie lernen müssen, was ein Shortcode ist oder wie man ihn benutzt.

Die einfachste Lösung (jedenfalls meiner Meinung nach) bestand darin, einige benutzerdefinierte Felder zu erstellen, in die die zugehörigen Videodateien hochgeladen werden konnten. Von dort aus würde die Vorlage des Themas automatisch den erforderlichen Code zum Anzeigen des Videos erstellen. So habe ich es gemacht:

Projektanforderungen

Sie benötigen natürlich eine WordPress-Site und Zugang zum Bearbeiten Ihres Designs (bitte verwenden Sie ein untergeordnetes Design, falls Sie dies noch nicht tun). Eine gewisse Vertrautheit mit PHP und HTML ist ebenfalls eine große Hilfe. Darüber hinaus sollten Sie haben:

• Eine Möglichkeit, benutzerdefinierte Felder zu erstellen. Die kostenlose Version von Advanced Custom Fields (ACF) erledigt die Arbeit recht gut. Installieren und aktivieren Sie es auf Ihrer WordPress-Website.
• Ein Video – idealerweise in mehreren Formaten. Obwohl MP4-Dateien jetzt von allen gängigen Browsern unterstützt werden, ist es möglicherweise keine schlechte Idee, eine WEBM-Version für zusätzliche Abdeckung bereitzustellen. Und wenn Sie schon dabei sind, ein FLV-Fallback für diejenigen, die wirklich alte Browser verwenden, könnte nicht schaden. Sie sollten sicherstellen, dass jede Version Ihres Videos auf dieselbe Auflösung eingestellt ist.
• Ein 'Poster'-Bild. Entweder eine Bildschirmaufnahme oder eine benutzerdefinierte Grafik mit der höchsten Auflösung, mit der Ihr Video abgespielt wird.

Schritt 1: Erstellen Sie die benutzerdefinierten Felder

Sobald Sie die kostenlose Version von ACF installiert und aktiviert haben, gehen Sie zum Menü Benutzerdefinierte Felder in WordPress und klicken Sie dann auf Neu hinzufügen.

In Ihren neuen Feldern (unsere heißen „Videofelder“) müssen Sie für jedes Videoformat, das Sie hochladen möchten, ein ACF-Dateifeld sowie ein weiteres für das Posterbild erstellen. In unserem Setup haben wir Felder für MP4, WEBM, FLV und ein Poster. Stellen Sie sicher, dass Sie für jedes Dateifeld das Optionsfeld „Datei-URL“ im Rückgabewert auswählen. Notieren Sie sich auch unbedingt die Feldnamen – wir brauchen diese später.

Weisen Sie als Nächstes in der ACF-Einstellung „Standort“ Ihre neuen Felder der gewünschten Seite oder dem gewünschten Beitrag zu und speichern Sie Ihre Arbeit. Wenn Sie diese zugewiesene Seite bearbeiten, sollten Sie die Felder sehen (möglicherweise müssen Sie etwas nach unten scrollen, um sie zu finden).

Schritt 2: Videodateien hochladen

Navigieren Sie zu der Seite oder dem Beitrag, auf der Sie Ihre neuen benutzerdefinierten Felder zugewiesen haben, um sie zu bearbeiten. Von dort geht es darum, die richtigen Dateien hochzuladen. Nachdem Sie die erforderlichen Dateien hochgeladen haben, speichern Sie Ihre Seite/Ihren Beitrag.

Schritt 3: Bearbeiten Sie die Vorlage

Jetzt kommt der spaßige Teil – das Hinzufügen von etwas PHP-Magie zur Vorlage Ihres Themes. Wenn Sie mit der WordPress-Vorlagenhierarchie nicht vertraut sind, ist jetzt vielleicht ein guter Zeitpunkt, sich damit zu beschäftigen.

Suchen Sie die richtige Vorlagendatei und den Speicherort, an dem Sie das Video platzieren möchten. Kopieren Sie dann das folgende Code-Snippet, fügen Sie es ein und passen Sie es an Ihre Anforderungen an:

 <?php
// Holen Sie sich die Videofelder
$video_mp4 = get_field('mp4_video'); // MP4-Feldname
$video_webm = get_field('webm_video'); // WEBM-Feldname
$video_flv = get_field('flv_video'); // FLV-Feldname
$video_poster = get_field('poster_image'); // Posterbild-Feldname
                

// Erstellen Sie den Shortcode
$attr = array(
'mp4' => $video_mp4,
'webm' => $video_webm,
'flv' => $video_flv,
'poster' => $video_poster,
'preload' => 'auto'
);

// Den Shortcode anzeigen
echo wp_video_shortcode( $attr );
?>

Der erste Codeabschnitt verweist auf die Namen der benutzerdefinierten Felder, die wir in Schritt 1 erstellt haben. Wir erstellen eine PHP-Variable für jedes Feld (sie geben die URL ihrer jeweiligen Datei aus), die wir in der Mitte verwenden müssen Abschnitt des Codes.

Unten in diesem mittleren Abschnitt haben wir ein Array von Attributen für die Funktion wp_video_shortcode . Beachten Sie, dass es für jeden Dateityp ein Attribut gibt. Wir entscheiden uns auch dafür, das Video vorab zu laden, aber das ist völlig optional. Hier können Sie auch Breite, Höhe, Schleife einstellen und sogar (keuch) das Video automatisch abspielen, wenn Sie möchten.

Der untere Abschnitt des Codes gibt das Ergebnis unserer Arbeit in unsere Vorlage aus.

Sobald Sie alles zufriedenstellend eingerichtet haben, möchten Sie Ihre Vorlage speichern und auf Ihre Website hochladen (oder einfach speichern, wenn Sie den integrierten WordPress-Theme-Editor verwenden). Überprüfen Sie dann Ihre Seite im Frontend, um sicherzustellen, dass das Video richtig angezeigt wird.

WordPress hat einen HTML5-Videoplayer, der direkt in das CMS integriert ist, und der Standardplayer sieht gut aus und funktioniert recht gut. Aber Sie können verschiedene Optionen stylen, wenn Sie ihm eine persönlichere Note verleihen möchten. Überprüfen Sie den Ausgabecode mit den Entwicklertools Ihres Browsers und notieren Sie sich die verschiedenen CSS-Klassen. Beispielsweise hat das Containerelement die Klasse .wp-video . Vielleicht möchten Sie sich auch ein Tutorial ansehen, um einen tieferen Einblick in die Möglichkeiten zu erhalten.

Benutzerdefinierte Felder vereinfachen den Prozess

Die Verwendung von benutzerdefinierten Feldern kann WordPress eine Fülle neuer Funktionen und Designmöglichkeiten bringen. Aber ein Kernelement ihrer Großartigkeit ist, dass sie die Verwaltung von Inhalten vereinfachen können. Unabhängig davon, wer Inhalte hinzufügt und bearbeitet, können benutzerdefinierte Felder den gesamten Prozess optimieren. Davon profitieren wir alle, aber es ist besonders schön für Benutzer, die keine erfahrenen Entwickler sind.

Das Hinzufügen einiger einfacher Funktionen wie der obigen HTML5-Videofelder kann die Lernkurve eines neuen Benutzers erheblich verkürzen. Anstatt darüber nachdenken zu müssen, was sie tun sollen, geht es jetzt darum, ein paar Dateien hochzuladen.

Letztendlich kann dieses bisschen zusätzliche Arbeit im Vorfeld jedem etwas Zeit und Kopfschmerzen für die Lebensdauer der Website ersparen.