Cum să construiți un aspect de predică folosind câmpuri personalizate și conținut dinamic în Divi

Abilitatea de a accesa și de a asculta predici este o parte vitală a oricărui site web al bisericii. Și, odată cu lansarea noului pachet de layout al bisericii Divi, m-am gândit că ar fi util să vă arăt cum puteți construi un aspect de predică folosind conținut dinamic. Pentru a face acest lucru, voi folosi pluginul Advanced Custom Fields pentru a crea un grup de câmpuri personalizate pe care le puteți actualiza pe backend-ul postării dvs. Și folosind funcția de conținut dinamic Divi, vă voi arăta cum puteți proiecta un aspect pentru a trage în acele câmpuri personalizate pentru a completa conținutul postării dvs. Odată ce totul a fost spus și făcut, veți avea un aspect frumos de predică cu conținut dinamic care poate fi actualizat pe backend utilizând o interfață intuitivă a câmpurilor personalizate fără a fi nevoie să implementați vreodată constructorul vizual.

Să începem.

De ce ai nevoie

Pentru acest tutorial, veți avea nevoie de următoarele:

• Tema Divi
• Pluginul Advanced Custom Fields
• Aspectul blogului bisericii din pachetul aspectului bisericii (accesibil de la Divi Builder)

Sermon Layout Sneak Peek

Iată o privire asupra aspectului pe care îl vom construi. Frumusețea acestui aspect este că cea mai mare parte a conținutului este generată din câmpuri personalizate de pe backend utilizând conținut dinamic.

Crearea câmpurilor personalizate cu pluginul Advanced Custom Fields

Pluginul Advanced Custom Fields (ACF) vă ajută să grupați câmpurile personalizate împreună pentru a fi utilizate ca conținut dinamic pe postările sau paginile dvs. Acceptă o serie de tipuri de câmpuri (cum ar fi un selector de date, un editor Wysiwyg și oEmbed) care fac actualizarea câmpurilor personalizate foarte ușoară. Acest lucru este extrem de util pentru a oferi o interfață de utilizare mai intuitivă pentru clienți care își pot actualiza site-ul folosind câmpuri personalizate.

După ce ați instalat și activat pluginul ACF, accesați tabloul de bord WordPress și câmpurile personalizate> Adăugați un nou.

Adăugați un nou grup de câmpuri

Pentru a configura un nou grup, dați noului grup de câmp un titlu.

Sub secțiunea de locație (sau comutare) modificați setările astfel încât tipul de postare să fie egal cu „Proiect” în loc de Postare. Acest lucru îi spune practic pluginului să afișeze acest grup de câmpuri personalizat numai pe tipul de postare a proiectului încorporat în Divi (Puteți lăsa ca postare și dacă doriți. Alegerea dvs.)

Apoi derulați în jos până la secțiunea de setări și actualizați următoarele:

Poziție: înaltă (după conținut)

Această setare de poziție determină locația grupului dvs. de câmpuri personalizate în editorul de backend al postării sau paginii dvs.

Adăugați câmpuri personalizate la grupul de câmpuri

Acum că grupul dvs. a fost creat și configurat, este timpul să începeți să adăugați câmpuri personalizate grupului.

Câmpul personalizat Speaker

Pentru primul câmp personalizat, să adăugăm un loc pentru ca utilizatorii să introducă un difuzor pentru predică. Pentru a adăuga un câmp nou, faceți clic pe butonul „Adăugați câmp” și introduceți următoarele:

Etichetă de câmp: difuzor
Nume câmp: vorbitor
Tipul câmpului: Selectați
Opțiuni (introduceți fiecare pe o nouă linie): pastor principal, pastor asociat, pastor tineret, vorbitor invitat

Câmpul personalizat pentru titlul predicii

Apoi, adăugați un câmp personalizat pentru titlul predicii.

Etichetă de câmp: Titlul predicii
Nume câmp: sermon_title
Tipul câmpului: Text
Text substituent: Titlul predicii

Câmpul personalizat Sermon Date

Apoi, adăugați un câmp personalizat pentru data predicii. Acesta va fi setat să aibă un tip de câmp de selecție de date, astfel încât adăugarea de date noi să fie o briză pe backend.

Etichetă de câmp: Data predicii
Nume câmp: sermon_date
Tipul câmpului: Selector de date
Format de afișare: F j, Y
Format retur: F j, Y
Săptămâna începe: luni

Câmpul personalizat Descriere predică

Apoi, adăugați un câmp personalizat pentru descrierea predicii. Acest lucru va permite utilizatorilor să actualizeze conținutul postării folosind un editor Wysiwyg fără a fi nevoie să deschidă generatorul vizual.

Etichetă de câmp: Descrierea predicii
Nume câmp: sermon_description
Tipul câmpului: Editor Wysiwyg

Sermon Audio Embed Field personalizat

Apoi, adăugați un câmp personalizat pentru încorporarea audio a predicii folosind tipul de câmp oEmbed. Acest lucru ne va permite să încorporăm o încorporare audio a predicii prin simpla actualizare a adresei URL audio pentru încorporare pe backend.

Etichetă de câmp: Sermon Audio Embed
Nume câmp: sermon_audio_embed
Tipul câmpului: oEmbed

Câmpul personalizat URL Sermon Audio

Apoi, adăugați un câmp personalizat pentru adresa URL a predicii, astfel încât să putem utiliza adresa URL pentru a completa un link din cadrul unui modul pentru a crea un link de descărcare către fișier.

Etichetă de câmp: Sermon Audio URL
Nume câmp: sermon_audio_url
Tipul câmpului: URL

Bine. După ce câmpurile personalizate au fost adăugate la grupul nostru de câmpuri, nu uitați să salvați grupul de câmpuri. Acum putem începe să creăm aspectul predicii pentru conținutul predică al câmpului personalizat pentru a fi folosit ca conținut dinamic pe tot parcursul postării.

Creați un proiect nou

Din tabloul de bord WordPress, navigați la Proiecte> Adăugați un nou. Apoi introduceți un titlu pentru proiect care ar trebui să fie și titlul predicii (dar asta depinde de dvs.). Apoi faceți clic pentru a utiliza Divi Builder. Veți vedea grupul de câmpuri personalizate afișate în partea de sus a constructorului de divii.

Acum completați câmpurile personalizate cu informații despre predici specifice acestui post.

Vorbitor: Pastor Senior (selectat dintr-un meniu derulant)
Titlul predicii: O nouă creație (sau orice vrei)
Data predicii: selectați data din selectorul de date
Descrierea predicii: utilizați editorul WYSIWYG pentru a introduce descrierea predicii
Sermon Audio Embed: introduceți adresa URL a fișierului media pe care doriți să îl încorporați în playerul media
Sermon Audio URL: introduceți adresa URL a fișierului media (ar trebui să fie un fișier zip dacă doriți ca acesta să se descarce imediat făcând clic)

Apoi adăugați o imagine recomandată pentru proiectul dvs. Aceasta va servi ca imagine utilizată pentru playerul audio al aspectului predicii.

Adăugarea unui nou aspect premade pentru proiectul dvs.

Acum faceți clic pentru a utiliza Visual Builder.

(Notă: În prezent, backend builder-ul nu acceptă conținut dinamic, așa că trebuie să implementăm build-ul vizual. Dacă preferați să personalizați aspectul cu o funcționalitate mai bună a backend builder-ului, pur și simplu implementați builder-ul vizual și faceți clic pe modul wireframe.)

Apoi faceți clic pe opțiunea pentru A alege un aspect premade. Din fereastra pop-up de încărcare din bibliotecă, selectați Biserica Layout Pack și apoi faceți clic pentru a utiliza aspectul Bisericii Blog Pagina.

Odată ce aspectul este încărcat în pagină, ștergeți secțiunile a doua, a patra și a cincea din aspect. Acum aspectul dvs. ar trebui să aibă doar trei secțiuni: secțiunea de antet de sus, secțiunea „Ultimele predici” și secțiunea de subsol de jos.

Apoi ștergeți modulul blogului din a doua secțiune.

Actualizați modulul text „Ultimele predici” astfel încât să aibă următorul conținut:

<h3>Description</h3>

Apoi copiați acel modul de text și actualizați conținutul pentru a spune „Ascultați acum”.

Adăugarea conținutului dinamic Layout Sermon

Descrierea predicii

Acum suntem gata să începem să construim conținutul audio din predica dinamică pentru secțiunea noastră. Pentru început, vom adăuga descrierea predicii chiar sub modulul text cu titlul „Descriere”. Pentru aceasta, adăugați un nou modul de text. Plasați cursorul peste caseta de introducere a conținutului și faceți clic pe pictograma conținut dinamic.

Apoi selectați câmpul personalizat Descriere predică din lista derulantă.

Salvează setările.

Acum descrierea predicii dvs. va fi afișată ca conținut dinamic. Aceasta înseamnă că orice adăugați la caseta de introducere a descrierii predicii de pe ecranul editorului backend va fi actualizat în mod dinamic pe pagina proiectului.

Modulul audio și încorporarea audio

Sub modulul text cu titlul „Ascultă acum”, adaugă un nou modul audio. Apoi actualizați conținutul text cu următorul conținut dinamic:

Titlu: Titlul predicii (câmp personalizat)
Nume artist: difuzor (câmp personalizat)
Nume album: Data predicii (câmp personalizat)

Etichetele nu contează cu adevărat, deoarece ne preocupă în principal plasarea conținutului dinamic în modulul audio. Titlul predicării, difuzorul și data predicii sunt afișate frumos în modulul audio, fără a lucra deloc.

Pentru imaginea de copertă a modulului audio, adăugați conținut dinamic făcând clic pe pictograma conținut dinamic atunci când treceți cu mouse-ul peste zona de previzualizare a imaginii și selectați Imagine prezentată.

Acum, orice ați setat ca imagine prezentată pe backend va completa automat imaginea de copertă pentru sunetul predicii.

Pentru a se potrivi mai bine cu designul aspectului, salvați setările și copiați fundalul secțiunii de jos făcând clic dreapta pe textul categoriei Background în setările secțiunii și selectând „Copy Background”.

Acum lipiți fundalul în setările de fundal ale modulului audio deschizând setările modulului audio, făcând clic dreapta pe textul categoriei de fundal și făcând clic pe opțiunea „Lipiți fundal”.

Apoi treceți la setările de proiectare și actualizați următoarele:

Orientare text: stânga
Marja personalizată: 0 px de jos

Acum, tot ce ne-a mai rămas pentru finalizarea playerului audio predică este încorporarea propriu-zisă a playerului audio. În prezent, caseta de intrare audio încorporată în modulul audio nu acceptă conținut dinamic (sunt sigur că va funcționa în viitor), așa că vom face o mică soluție. Vom crea un nou modul de text și vom adăuga fișierul audio încorporat folosind conținut dinamic. Și datorită modului în care WordPress recunoaște codul scurt generat de câmpul personalizat, acesta va afișa playerul audio implicit.

Pentru a face acest lucru, adăugați un modul text sub modulul audio și apoi adăugați câmpul personalizat „Sermon Audio Embed” ca conținut dinamic. Asigurați-vă că activați HTML brut, astfel încât codul scurt să funcționeze.

Acum putem poziționa playerul nostru audio în interiorul modulului audio cu o anumită marjă personalizată. Accesați fila Design și actualizați următoarele:

Marjă personalizată (desktop): -40 px sus, 280 px stânga, 60 px dreapta
Marja personalizată (tabletă): 0 px stânga, 0 px dreapta

Link-ul de descărcare

Uneori, este util pentru utilizatori să descarce fișierul audio. Pentru a face acest lucru mai ușor, puteți adăuga un link către fișierul audio la postarea dvs. Pentru a face acest lucru, vom folosi conținut dinamic pentru a completa un modul blurb cu titlul predicii și url-ul audio.

Adăugați un modul blurb sub modulul audio și actualizați conținutul după cum urmează:

Titlu: Titlul predicii (câmp personalizat)
Pictogramă: vezi captura de ecran
Adresa URL a titlului: adresa URL predică (câmp personalizat)

Pentru a stiliza blurb-ul pentru a semăna mai mult cu un link pe care se poate face clic, actualizați următoarele:

Culoare pictogramă: rgba (33,50,94,0.86)
Plasare imagine / pictogramă: stânga
Titlu Stil Font: U
Culoare subliniere titlu: rgba (33,50,94,0.86)
Culoare text titlu: rgba (33,50,94,0.86)
Înălțimea liniei de titlu: 2em
Lățimea conținutului: 100%

Pentru a face legătura și mai ușor de recunoscut ca descărcare, puteți edita conținutul dinamic al titlului predicii care ocupă titlul blurb cu text suplimentar în caseta de intrare după care scrie „(descărcare)”.

Adăugarea titlului și meta a predicii la titlu

Pentru ultimul pas, să ne asigurăm că secțiunea noastră de antet / proiect folosește conținut dinamic pentru titlul postării, împreună cu numele vorbitorului și data predicii. Pentru aceasta, deschideți setările modulului de antet cu lățime completă și actualizați următoarele:

Titlu: Titlul predicii (câmp personalizat)
Text subtitlu: difuzor (câmp personalizat)
(Notă: pentru conținutul dinamic al difuzorului, introduceți „de:” în intrarea anterioară)
Butonul # 1 Text de legătură: ștergeți
Butonul # 2 Text de legătură: ștergeți
Conținut: Data predicii (câmp personalizat)

Acum treceți la fila de proiectare și scoateți umplutura personalizată utilizată.

Iată rezultatul final.

Acum, tot ce va trebui să faceți în viitor este să salvați aspectul în biblioteca Divi pentru a fi folosit pentru postările de predici viitoare. Și din moment ce aveți grupul dvs. de câmpuri personalizate gata pentru a începe toate proiectele, puteți actualiza pur și simplu informațiile despre câmpul personalizat de pe backend, fără a fi nevoie să deschideți Visual Builder.

De asemenea, cu predicile salvate ca proiecte, puteți crea cu ușurință un portofoliu filtrabil pentru a afișa predicile!

Gânduri finale

Sper că acest tutorial vă va ajuta să aruncați mai multă lumină asupra conținutului dinamic și a modului în care poate fi utilizat cu pluginul Advanced Custom Fields pentru a crea un aspect puternic pentru predici. S-ar putea să dureze ceva timp pentru a configura totul, dar recompensa poate merita cu siguranță. Desigur, același proces poate fi folosit pentru a crea tot felul de conținut dinamic pentru diferite tipuri de postări. Spuneți-mi dacă aveți întrebări în comentariile de mai jos. Aștept cu nerăbdare să ne auzim.

Noroc!