So erstellen Sie ein Predigtlayout mit benutzerdefinierten Feldern und dynamischem Inhalt in Divi

Die Möglichkeit, auf Predigten zuzugreifen und sie anzuhören, ist ein wesentlicher Bestandteil jeder Kirchenwebsite. Und mit der Veröffentlichung von Divis neuem Kirchen-Layout-Paket dachte ich, es wäre nützlich, Ihnen zu zeigen, wie Sie ein Predigt-Layout mit dynamischem Inhalt erstellen können. Dazu verwende ich das Advanced Custom Fields-Plugin, um eine Gruppe von benutzerdefinierten Feldern zu erstellen, die Sie im Backend Ihres Beitrags aktualisieren können. Und mit der dynamischen Inhaltsfunktion von Divi zeige ich Ihnen, wie Sie ein Layout entwerfen können, um diese benutzerdefinierten Felder einzufügen, um den Inhalt Ihres Beitrags zu füllen. Sobald alles gesagt und getan ist, haben Sie ein schönes Predigtlayout mit dynamischem Inhalt, der im Backend über eine intuitive Benutzeroberfläche mit benutzerdefinierten Feldern aktualisiert werden kann, ohne jemals den Visual Builder bereitstellen zu müssen.

Lass uns anfangen.

Was du brauchst

Für dieses Tutorial benötigen Sie Folgendes:

• Das Divi-Thema
• Das Plugin für erweiterte benutzerdefinierte Felder
• Das Kirchen-Blog-Layout aus dem Kirchen-Layout-Paket (zugänglich über den Divi Builder)

Predigt-Layout Sneak Peek

Hier ist ein Blick auf das Layout, das wir bauen werden. Das Schöne an diesem Layout ist, dass der größte Teil des Inhalts aus benutzerdefinierten Feldern im Backend mit dynamischem Inhalt generiert wird.

Erstellen von benutzerdefinierten Feldern mit dem Advanced Custom Fields Plugin

Das Plugin Advanced Custom Fields (ACF) macht es Ihnen leicht, benutzerdefinierte Felder zu gruppieren, um sie als dynamische Inhalte auf Ihren Beiträgen oder Seiten zu verwenden. Es unterstützt eine Reihe von Feldtypen (wie eine Datumsauswahl, einen Wysiwyg-Editor und oEmbed), die das Aktualisieren benutzerdefinierter Felder wirklich einfach machen. Dies ist äußerst hilfreich, um Kunden eine intuitivere Benutzeroberfläche bereitzustellen, um ihre Website mithilfe benutzerdefinierter Felder zu aktualisieren.

Sobald Sie das ACF-Plugin installiert und aktiviert haben, gehen Sie zu Ihrem WordPress-Dashboard und zu benutzerdefinierten Feldern > Neu hinzufügen.

Eine neue Feldgruppe hinzufügen

Um eine neue Gruppe einzurichten, geben Sie der neuen Feldgruppe einen Titel.

Ändern Sie im Bereich Standort (oder Umschalter) die Einstellungen so, dass der Beitragstyp „Projekt“ anstelle von „Beitrag“ entspricht. Dies weist das Plugin im Grunde an, diese benutzerdefinierte Feldgruppe nur auf dem in Divi integrierten Projektbeitragstyp anzuzeigen (Sie können es auch als Beitrag belassen, wenn Sie möchten. Ihre Wahl.)

Scrollen Sie dann nach unten zum Abschnitt Einstellungen und aktualisieren Sie Folgendes:

Position: Hoch (nach Inhalt)

Diese Positionseinstellung bestimmt die Position Ihrer benutzerdefinierten Feldgruppe im Backend-Editor Ihres Beitrags oder Ihrer Seite.

Benutzerdefinierte Felder zur Feldgruppe hinzufügen

Nachdem Ihre Gruppe erstellt und eingerichtet wurde, ist es an der Zeit, der Gruppe benutzerdefinierte Felder hinzuzufügen.

Das benutzerdefinierte Lautsprecherfeld

Fügen wir für das erste benutzerdefinierte Feld einen Ort hinzu, an dem Benutzer einen Sprecher für die Predigt eingeben können. Um ein neues Feld hinzuzufügen, klicken Sie auf die Schaltfläche „Feld hinzufügen“ und geben Sie Folgendes ein:

Feldbezeichnung: Sprecher
Feldname: Sprecher
Feldtyp: Auswählen
Auswahlmöglichkeiten (jeweils in einer neuen Zeile eingeben): Senior Pastor, Associate Pastor, Youth Pastor, Guest Speaker

Das benutzerdefinierte Feld für den Predigttitel

Fügen Sie als Nächstes ein benutzerdefiniertes Feld für den Predigttitel hinzu.

Feldbezeichnung: Titel der Predigt
Feldname: sermon_title
Feldtyp: Text
Platzhaltertext: Titel der Predigt

Das benutzerdefinierte Feld für das Predigtdatum

Fügen Sie dann ein benutzerdefiniertes Feld für das Predigtdatum hinzu. In diesem werden wir einen Datumsauswahlfeldtyp festlegen, damit das Hinzufügen neuer Daten im Backend zum Kinderspiel wird.

Feldbeschriftung: Predigtdatum
Feldname: sermon_date
Feldtyp: Datumsauswahl
Anzeigeformat: Fj, Y
Rückgabeformat: F j, Y
Woche beginnt am: Montag

Das benutzerdefinierte Feld für die Beschreibung der Predigt

Fügen Sie als Nächstes ein benutzerdefiniertes Feld für die Predigtbeschreibung hinzu. Auf diese Weise können Benutzer den Inhalt des Beitrags mit einem Wysiwyg-Editor aktualisieren, ohne den Visual Builder öffnen zu müssen.

Feldbezeichnung: Predigtbeschreibung
Feldname: sermon_description
Feldtyp: Wysiwyg-Editor

Das benutzerdefinierte Feld zum Einbetten von Sermon Audio

Fügen Sie als Nächstes ein benutzerdefiniertes Feld für die Einbettung von Predigt-Audio hinzu, indem Sie den Feldtyp oEmbed verwenden. Auf diese Weise können wir eine Audio-Einbettung der Predigt einbetten, indem wir einfach die Audio-URL für die Einbettung im Backend aktualisieren.

Feldbezeichnung: Sermon Audio Embed
Feldname: sermon_audio_embed
Feldtyp: oEmbed

Das benutzerdefinierte Feld für die Audio-URL der Predigt

Als nächstes fügen Sie ein benutzerdefiniertes Feld für die Predigt-Audio-URL hinzu, damit wir die URL verwenden können, um einen Link innerhalb eines Moduls zu füllen, um einen Download-Link zu der Datei zu erstellen.

Feldbezeichnung: Predigt-Audio-URL
Feldname: sermon_audio_url
Feldtyp: URL

In Ordung. Nachdem die benutzerdefinierten Felder zu unserer Feldgruppe hinzugefügt wurden, vergessen Sie nicht, Ihre Feldgruppe zu speichern. Jetzt können wir damit beginnen, das Predigtlayout für unseren benutzerdefinierten Predigtinhalt zu erstellen, der als dynamischer Inhalt im gesamten Beitrag verwendet wird.

Erstellen Sie ein neues Projekt

Navigieren Sie im WordPress-Dashboard zu Projekte > Neu hinzufügen. Geben Sie dann einen Titel für das Projekt ein, der auch der Titel der Predigt sein sollte (aber das liegt an Ihnen). Klicken Sie dann auf , um den Divi Builder zu verwenden. Die Gruppe der benutzerdefinierten Felder wird oben im divi Builder angezeigt.

Füllen Sie nun die benutzerdefinierten Felder mit den für diesen Beitrag spezifischen Predigtinformationen aus.

Sprecher: Senior Pastor (ausgewählt aus einem Dropdown-Menü)
Titel der Predigt: Eine neue Schöpfung (oder was immer Sie wollen)
Predigtdatum: Datum aus der Datumsauswahl auswählen
Predigtbeschreibung: Verwenden Sie den WYSIWYG-Editor, um die Beschreibung für die Predigt einzugeben
Sermon Audio Embed: Geben Sie die URL der Mediendatei ein, die Sie in den Mediaplayer einbetten möchten
Predigt-Audio-URL: Geben Sie die URL zur Mediendatei ein (sollte eine ZIP-Datei sein, wenn diese sofort beim Klicken heruntergeladen werden soll)

Fügen Sie dann ein empfohlenes Bild für Ihr Projekt hinzu. Dies dient als Bild für den Audioplayer des Predigtlayouts.

Hinzufügen eines neuen vorgefertigten Layouts für Ihr Projekt

Klicken Sie nun, um den Visual Builder zu verwenden.

(Hinweis: Derzeit unterstützt der Back-End-Builder keine dynamischen Inhalte, daher müssen wir den visuellen Builder bereitstellen. Wenn Sie das Layout lieber mit einer stärkeren Back-End-Builder-Funktionalität anpassen möchten, stellen Sie einfach den visuellen Builder bereit und klicken Sie auf den Drahtmodellmodus.)

Klicken Sie dann auf die Option zum Auswählen eines vorgefertigten Layouts. Wählen Sie im Popup-Fenster „Aus Bibliothek laden“ das Layoutpaket der Kirche aus und klicken Sie dann auf , um das Layout der Blogseite der Kirche zu verwenden.

Nachdem das Layout auf die Seite geladen wurde, löschen Sie den zweiten, vierten und fünften Abschnitt aus dem Layout. Jetzt sollte Ihr Layout nur noch drei Abschnitte haben: den oberen Kopfzeilenabschnitt, den Abschnitt „Neueste Predigten“ und den unteren Fußzeilenabschnitt.

Als nächstes löschen Sie das Blog-Modul im zweiten Abschnitt.

Aktualisieren Sie den Textbaustein „Neueste Predigten“ mit folgenden Inhalten:

<h3>Description</h3>

Dann duplizieren Sie dieses Textmodul und aktualisieren Sie den Inhalt, um "Jetzt anhören" zu sagen.

Hinzufügen des dynamischen Inhalts des Predigtlayouts

Die Predigtbeschreibung

Jetzt können wir mit dem Aufbau des dynamischen Predigt-Audioinhalts für unsere Sektion beginnen. Für den Anfang fügen wir die Predigtbeschreibung direkt unter dem Textbaustein mit dem Titel „Beschreibung“ hinzu. Fügen Sie dazu einen neuen Textbaustein hinzu. Bewegen Sie den Mauszeiger über das Inhaltseingabefeld und klicken Sie auf das Symbol für dynamische Inhalte.

Wählen Sie dann das benutzerdefinierte Feld Predigtbeschreibung aus der Dropdown-Liste aus.

Einstellungen speichern.

Nun wird Ihre Predigtbeschreibung als dynamischer Inhalt angezeigt. Das bedeutet, dass alles, was Sie dem Eingabefeld für die Predigtbeschreibung auf dem Bildschirm des Backend-Editors hinzufügen, dynamisch auf der Projektseite aktualisiert wird.

Das Audiomodul und die Audioeinbettung

Fügen Sie unter dem Textmodul mit dem Titel „Jetzt anhören“ ein neues Audiomodul hinzu. Aktualisieren Sie dann den Textinhalt mit den folgenden dynamischen Inhalten:

Titel: Titel der Predigt (benutzerdefiniertes Feld)
Künstlername: Sprecher (benutzerdefiniertes Feld)
Albumname: Predigtdatum (benutzerdefiniertes Feld)

Die Bezeichnungen sind nicht wirklich wichtig, da es uns hauptsächlich um die Platzierung des dynamischen Inhalts innerhalb des Audiomoduls geht. Der Titel der Predigt, der Sprecher und das Datum der Predigt werden innerhalb des Audiomoduls ohne viel Arbeit gut angezeigt.

Fügen Sie für das Cover-Art-Bild des Audiomoduls dynamischen Inhalt hinzu, indem Sie auf das Symbol für dynamische Inhalte klicken, wenn Sie mit der Maus über den Bildvorschaubereich fahren, und wählen Sie Featured Image.

Was auch immer Sie im Backend als Ihr vorgestelltes Bild festgelegt haben, wird automatisch das Titelbild für Ihr Predigt-Audio füllen.

Um die Gestaltung des Layouts besser anzupassen, speichern Sie Ihre Einstellungen und kopieren Sie den Hintergrund des unteren Abschnitts, indem Sie in den Abschnittseinstellungen mit der rechten Maustaste auf den Kategorietext Hintergrund klicken und „Hintergrund kopieren“ auswählen.

Fügen Sie nun den Hintergrund in die Hintergrundeinstellungen Ihres Audiomoduls ein, indem Sie die Audiomoduleinstellungen öffnen, mit der rechten Maustaste auf den Hintergrundkategorietext klicken und auf die Option "Hintergrund einfügen" klicken.

Springen Sie dann zu den Designeinstellungen und aktualisieren Sie Folgendes:

Textausrichtung: Links
Benutzerdefinierter Rand: 0 Pixel unten

Jetzt müssen wir nur noch den Audioplayer einbetten, um den Predigt-Audioplayer fertigzustellen. Derzeit unterstützt die in das Audiomodul integrierte Audioeingangsbox keine dynamischen Inhalte (ich bin mir sicher, dass dies in Zukunft der Fall sein wird), daher werden wir eine kleine Problemumgehung durchführen. Wir werden ein neues Textmodul erstellen und die Audiodatei mit dynamischem Inhalt einbetten. Und aufgrund der Art und Weise, wie WordPress den vom benutzerdefinierten Feld generierten Shortcode erkennt, wird der Standard-Audioplayer angezeigt.

Fügen Sie dazu unter dem Audiomodul ein Textmodul hinzu und fügen Sie dann das benutzerdefinierte Feld „Predigt Audio Embed“ als dynamischen Inhalt hinzu. Stellen Sie sicher, dass Sie Raw HTML aktivieren, damit der Shortcode funktioniert.

Jetzt können wir unseren Audioplayer mit etwas benutzerdefiniertem Spielraum im Audiomodul positionieren. Gehen Sie zur Registerkarte Design und aktualisieren Sie Folgendes:

Benutzerdefinierter Rand (Desktop): -40 Pixel oben, 280 Pixel links, 60 Pixel rechts
Benutzerdefinierter Rand (Tablet): 0 Pixel links, 0 Pixel rechts

Der Download-Link

Manchmal ist es für Benutzer hilfreich, die Audiodatei herunterzuladen. Um dies zu vereinfachen, können Sie Ihrem Beitrag einen Link zur Audiodatei hinzufügen. Dazu verwenden wir dynamische Inhalte, um ein Klappenmodul mit dem Predigttitel und der Audio-URL zu füllen.

Fügen Sie unter dem Audiomodul ein Klappenmodul hinzu und aktualisieren Sie den Inhalt wie folgt:

Titel: Titel der Predigt (benutzerdefiniertes Feld)
Symbol: siehe Screenshot
Titellink-URL: Predigt-Audio-URL (benutzerdefiniertes Feld)

Damit der Klappentext eher wie ein anklickbarer Link aussieht, aktualisieren Sie Folgendes:

Symbolfarbe: rgba(33,50,94,0,86)
Bild-/Symbolplatzierung: Links
Titelschriftart: U
Farbe der Titelunterstreichung: rgba(33,50,94,0,86)
Titeltextfarbe: rgba(33,50,94,0,86)
Höhe der Titelzeile: 2em
Inhaltsbreite: 100%

Um den Link noch besser als Download erkennbar zu machen, können Sie den dynamischen Inhalt des Predigttitels, der den Klappentitel belegt, mit zusätzlichem Text im Nach-Eingabefeld „(Download)“ bearbeiten.

Den Titel der Predigt und die Meta zur Überschrift hinzufügen

Stellen wir im letzten Schritt sicher, dass unser Projekt-/Post-Überschriftsabschnitt dynamische Inhalte für den Titel des Posts zusammen mit dem Sprechernamen und dem Predigtdatum verwendet. Öffnen Sie dazu die Einstellungen des Header-Moduls in voller Breite und aktualisieren Sie Folgendes:

Titel: Titel der Predigt (benutzerdefiniertes Feld)
Untertiteltext: Sprecher (benutzerdefiniertes Feld)
(Hinweis: Geben Sie für den dynamischen Inhalt des Lautsprechers „by:“ in die vorherige Eingabe ein.)
Button #1 Linktext: löschen
Button #2 Linktext: löschen
Inhalt: Predigtdatum (benutzerdefiniertes Feld)

Gehen Sie nun zur Registerkarte Design und nehmen Sie die verwendete benutzerdefinierte Polsterung heraus.

Hier ist das Endergebnis.

Jetzt müssen Sie nur noch das Layout in Ihrer Divi-Bibliothek speichern, um es für zukünftige Predigtbeiträge zu verwenden. Und da Sie Ihre benutzerdefinierte Feldgruppe für alle Projekte bereit haben, können Sie die benutzerdefinierten Feldinformationen einfach im Backend aktualisieren, ohne den Visual Builder öffnen zu müssen.

Außerdem können Sie mit den als Projekt gespeicherten Predigten ganz einfach ein filterbares Portfolio erstellen, um Ihre Predigten anzuzeigen!

Abschließende Gedanken

Ich hoffe, dass dieses Tutorial dazu beiträgt, dynamische Inhalte besser zu beleuchten und wie sie mit dem Advanced Custom Fields-Plugin verwendet werden können, um ein leistungsstarkes Layout für Predigten zu erstellen. Es kann einige Zeit dauern, alles einzurichten, aber die Auszahlung kann sich definitiv lohnen. Natürlich kann derselbe Prozess verwendet werden, um alle Arten von dynamischen Inhalten für verschiedene Beitragstypen zu erstellen. Lassen Sie mich wissen, wenn Sie Fragen in den Kommentaren unten haben. Ich freue mich darauf, von dir zu hören.

Danke schön!