Einbindung selbst gehosteter Videos in Divi mit ACF: Ein umfassender Leitfaden

Selbstgehostete Videos mittels ACF in Divi einbinden

Divi und Advanced Custom Fields (ACF) sind kraftvolle Tools, die Webentwicklern unbegrenzte Möglichkeiten bieten. In diesem Beitrag erfahren Sie, wie Sie selbst gehostete Videos in Divi mithilfe von ACF einbinden können.

Problemstellung

Obwohl Divi viele intuitive Module zur Verfügung stellt, bietet das Video-Modul keine Unterstützung für dynamische Inhalte. Wie also können wir ein selbst gehostetes Video dynamisch in unsere Website integrieren?

1. Erstellen eines ACF-Feldes für das selbst gehostete Video

  1. Installieren und aktivieren Sie das Plugin „Advanced Custom Fields“.
  2. Im WordPress-Dashboard navigieren Sie zu „Benutzerdefinierte Felder > Feldgruppen“ und klicken auf „Neue hinzufügen“.
  3. Geben Sie der Feldgruppe einen Namen, zum Beispiel „Selbst gehostetes Video“.
  4. Fügen Sie ein neues Feld mit dem Feldnamen „video_file“ und dem Feldtyp „Datei“ hinzu.
  5. Wählen Sie
  6. Speichern Sie die Feldgruppe und ordnen Sie sie den relevanten Beitragsarten zu.

2. PHP-Code für die functions.php

Dieser Code wird benötigt, um das Video aus dem ACF-Feld abzurufen und einzubetten. Kopieren Sie ihn in die functions.php ihres Childthemes, nicht des Hauptthemes, da der Code sonst mit dem nächsten Update des Themes gelöscht wird. Dies ist der Code:


function acf_selfhosted_video_shortcode() {
    $video_file = get_field('video_file');
    if($video_file) {
        return '<video controls width="100%"><source src="' . esc_url($video_file['url']) . '" type="video/mp4">Ihr Browser unterstützt das Video-Tag nicht.</video>';
    }
    return '';  // Gibt nichts zurück, wenn keine Videodatei gefunden wird
}
add_shortcode('acf_selfhosted_video', 'acf_selfhosted_video_shortcode');

3. Vorbereiten des Videos

Bevor Sie Ihr Video hochladen, ist es wichtig, es für das Web zu optimieren. Das bedeutet, es in ein gängiges Format wie MP4 zu konvertieren und die Dateigröße zu reduzieren, ohne die Qualität wesentlich zu beeinträchtigen. Tools wie HandBrake können dabei helfen.

4. Hochladen des optimierten Videos

Nachdem Sie Ihr Video optimiert haben, können Sie es in den Medienbereich Ihrer WordPress-Website hochladen. Sobald das Hochladen abgeschlossen ist, können Sie die URL des Videos kopieren und im zuvor erstellten ACF-Feld „video_file“ hinterlegen.

5. Einbinden des Videos im Divi Theme Builder

Verwenden Sie den Shortcode [acf_selfhosted_video] in einem Divi Text-Modul, um Ihr selbst gehostetes Video dynamisch anzuzeigen. Achten Sie darauf, dass die Orts-Regeln auf den richtigen Beitrags- oder Inhaltstyp ausgerichtet sind.

Fazit

Die Kombination von Divi, ACF und selbst gehosteten Videos ermöglicht eine individuelle und performante Videoeinbindung. Mit den richtigen Schritten und etwas Vorbereitung können Sie eine nahtlose und benutzerfreundliche Videodarstellung auf Ihrer Website gewährleisten.

Möchten Sie lieber Youtube Videos einbinden, dann folgen Sie diesem Tutorial.