Cara Membuat Tata Letak Khotbah Menggunakan Bidang Kustom dan Konten Dinamis di Divi

Kemampuan untuk mengakses dan mendengarkan khotbah adalah bagian penting dari situs web gereja mana pun. Dan, dengan dirilisnya Paket Tata Letak Gereja baru Divi, saya pikir akan berguna untuk menunjukkan kepada Anda bagaimana Anda dapat membangun tata letak khotbah menggunakan konten dinamis. Untuk melakukan ini, saya akan menggunakan plugin Bidang Kustom Tingkat Lanjut untuk membuat bidang khusus grup yang dapat Anda perbarui di bagian belakang posting Anda. Dan dengan menggunakan fitur konten dinamis Divi, saya akan menunjukkan kepada Anda bagaimana Anda dapat merancang tata letak untuk menarik bidang khusus tersebut untuk mengisi konten posting Anda. Setelah semuanya dikatakan dan dilakukan, Anda akan memiliki tata letak khotbah yang bagus dengan konten dinamis yang dapat diperbarui di bagian belakang menggunakan UI bidang kustom yang intuitif tanpa harus menggunakan pembuat visual.

Mari kita mulai.

Apa yang kau butuhkan

Untuk tutorial ini, Anda memerlukan yang berikut:

• Tema Divi
• Plugin Bidang Kustom Tingkat Lanjut
• Tata Letak Blog Gereja dari Paket Tata Letak Gereja (dapat diakses dari Divi Builder)

Tata Letak Khotbah Sneak Peek

Berikut ini adalah tampilan layout yang akan kita buat. Keindahan tata letak ini adalah sebagian besar konten dihasilkan dari bidang khusus di backend menggunakan konten dinamis.

Membuat Bidang Kustom dengan Plugin Bidang Kustom Tingkat Lanjut

Plugin Advanced Custom Fields (ACF) memudahkan Anda untuk mengelompokkan bidang kustom bersama-sama untuk digunakan sebagai konten dinamis pada posting atau halaman Anda. Ini mendukung sejumlah jenis bidang (seperti pemilih tanggal, editor Wysiwyg, dan oEmbed) yang membuat pembaruan bidang khusus menjadi sangat mudah. Ini sangat membantu untuk menyediakan UI yang lebih intuitif bagi klien untuk memperbarui situs mereka menggunakan bidang khusus.

Setelah Anda menginstal dan mengaktifkan plugin ACF, buka Dasbor WordPress Anda dan Bidang Kustom > Tambah Baru.

Tambahkan grup bidang baru

Untuk menyiapkan grup baru, beri judul grup bidang baru.

Di bawah bagian lokasi (atau sakelar) ubah pengaturan sehingga Jenis Postingan sama dengan “Proyek”, bukan Postingan. Ini pada dasarnya memberi tahu plugin untuk hanya menampilkan grup bidang khusus ini pada jenis posting proyek yang dibangun ke dalam Divi (Anda dapat membiarkannya sebagai posting jika Anda mau juga. Pilihan Anda.)

Kemudian gulir ke bawah ke bagian pengaturan dan perbarui yang berikut:

Posisi: Tinggi (setelah konten)

Pengaturan posisi ini menentukan lokasi grup bidang khusus Anda di editor backend posting atau halaman Anda.

Tambahkan Bidang Kustom ke Grup Bidang

Sekarang grup Anda telah dibuat dan disiapkan, saatnya untuk mulai menambahkan bidang khusus ke grup.

Bidang Kustom Pembicara

Untuk bidang kustom pertama, mari tambahkan tempat bagi pengguna untuk memasukkan pembicara untuk khotbah. Untuk menambahkan bidang baru, klik tombol "Tambah Bidang" dan masukkan yang berikut:

Label Bidang: Pembicara
Nama Bidang: pembicara
Jenis Bidang: Pilih
Pilihan (masukkan masing-masing pada baris baru): Senior Pastor, Associate Pastor, Youth Pastor, Guest Speaker

Bidang Kustom Judul Khotbah

Selanjutnya, tambahkan bidang khusus untuk judul khotbah.

Label Bidang: Judul Khotbah
Nama Bidang: khotbah_title
Jenis Bidang: Teks
Teks Placeholder: Judul Khotbah

Bidang Kustom Tanggal Khotbah

Kemudian, tambahkan bidang khusus untuk tanggal khotbah. Yang ini kita akan mengatur untuk memiliki jenis bidang pemilih tanggal sehingga menambahkan tanggal baru akan mudah di backend.

Label Bidang: Tanggal Khotbah
Nama Bidang: khotbah_date
Jenis Bidang: Pemilih Tanggal
Format Tampilan: Fj, Y
Format Pengembalian: Fj, Y
Minggu Dimulai Pada: Senin

Bidang Kustom Deskripsi Khotbah

Selanjutnya, tambahkan bidang khusus untuk deskripsi khotbah. Ini akan memungkinkan pengguna untuk memperbarui konten posting menggunakan editor Wysiwyg tanpa harus membuka pembuat visual.

Label Bidang: Deskripsi Khotbah
Nama Bidang: khotbah_deskripsi
Jenis Bidang: Editor Wysiwyg

Bidang Kustom Sematkan Audio Khotbah

Selanjutnya, tambahkan bidang khusus untuk embed audio khotbah menggunakan jenis bidang oEmbed. Ini akan memungkinkan kami untuk menyematkan sematan audio khotbah dengan hanya memperbarui url audio untuk penyematan di backend.

Label Bidang: Sematkan Audio Khotbah
Nama Bidang: khotbah_audio_embed
Jenis Bidang: oEmbed

Bidang Kustom URL Audio Khotbah

Selanjutnya, tambahkan bidang khusus untuk URL audio khotbah sehingga kita dapat menggunakan URL untuk mengisi tautan di dalam modul untuk membuat tautan unduhan ke file.

Label Bidang: URL Audio Khotbah
Nama Bidang: khotbah_audio_url
Jenis Bidang: Url

Baik. Setelah bidang khusus telah ditambahkan ke grup bidang kami, jangan lupa untuk menyimpan grup bidang Anda. Sekarang kita dapat mulai membuat tata letak khotbah untuk konten khotbah bidang khusus kita untuk digunakan sebagai konten dinamis di seluruh pos.

Buat Proyek Baru

Dari Dasbor WordPress, navigasi ke Projects > Add New. Kemudian masukkan judul Proyek yang juga harus menjadi judul khotbah (tapi terserah Anda). Kemudian klik untuk menggunakan Divi Builder. Anda akan melihat grup bidang khusus yang ditampilkan di bagian atas pembuat divi.

Sekarang isi bidang khusus dengan informasi khotbah khusus untuk posting ini.

Pembicara: Pendeta Senior (dipilih dari menu dropdown)
Judul Khotbah: Ciptaan Baru (atau apa pun yang Anda inginkan)
Tanggal Khotbah: pilih tanggal dari pemilih tanggal
Deskripsi Khotbah: gunakan editor WYSIWYG untuk memasukkan deskripsi khotbah
Embed Audio Khotbah: masukkan url ke file media yang ingin Anda sematkan ke pemutar media
URL Audio Khotbah: masukkan url ke file media (harus file zip jika Anda ingin ini langsung di klik)

Kemudian tambahkan gambar Unggulan untuk proyek Anda. Ini akan berfungsi sebagai gambar yang digunakan untuk pemutar audio tata letak khotbah.

Menambahkan Tata Letak Premade Baru untuk Proyek Anda

Sekarang klik untuk menggunakan Visual Builder.

(Catatan: Saat ini pembuat backend tidak mendukung konten dinamis sehingga kami perlu menerapkan pembuat visual. Jika Anda lebih suka menyesuaikan tata letak dengan fungsionalitas pembuat backend yang lebih banyak, cukup terapkan pembuat visual dan klik mode gambar rangka.)

Kemudian klik opsi Choose a Premade Layout. Dari popup beban dari perpustakaan, pilih Paket Tata Letak Gereja dan kemudian klik untuk menggunakan tata letak Halaman Blog Gereja.

Setelah tata letak dimuat ke halaman, hapus bagian kedua, keempat, dan kelima dari tata letak. Sekarang tata letak Anda seharusnya hanya memiliki tiga bagian: bagian header atas, bagian “Khotbah Terbaru”, dan bagian footer bawah.

Selanjutnya hapus modul blog di bagian kedua.

Update modul teks “Khotbah Terbaru” sehingga memiliki konten sebagai berikut:

<h3>Description</h3>

Kemudian duplikat modul teks itu dan perbarui konten untuk mengatakan "Dengarkan Sekarang".

Menambahkan Konten Dinamis Tata Letak Khotbah

Deskripsi Khotbah

Sekarang kita siap untuk mulai membangun konten audio khotbah yang dinamis untuk bagian kita. Sebagai permulaan kita akan menambahkan deskripsi khotbah tepat di bawah modul teks dengan judul “Deskripsi”. Untuk melakukannya, tambahkan modul teks baru. Arahkan kursor ke kotak input konten dan klik ikon konten dinamis.

Kemudian pilih bidang khusus Deskripsi Khotbah dari daftar turun bawah.

Simpan Pengaturan.

Sekarang deskripsi khotbah Anda akan ditampilkan sebagai konten dinamis. Ini berarti bahwa apa pun yang Anda tambahkan ke kotak input deskripsi khotbah di layar editor backend akan diperbarui ke halaman proyek secara dinamis.

Modul Audio dan Sematan Audio

Di bawah modul teks dengan judul "Dengarkan Sekarang", tambahkan Modul Audio baru. Kemudian perbarui konten teks dengan konten dinamis berikut:

Judul: Judul Khotbah (bidang khusus)
Nama Artis: Pembicara (bidang khusus)
Nama Album: Tanggal Khotbah (bidang khusus)

Label tidak terlalu penting karena kami terutama memperhatikan penempatan konten dinamis di dalam modul audio. Judul Khotbah, Pembicara, dan Tanggal Khotbah ditampilkan dengan baik di dalam modul audio tanpa banyak pekerjaan sama sekali.

Untuk Gambar Sampul Seni modul audio, tambahkan konten dinamis dengan mengklik ikon konten dinamis saat mengarahkan kursor ke area pratinjau gambar dan pilih Gambar Unggulan.

Sekarang apa pun yang telah Anda tetapkan sebagai gambar unggulan Anda di backend akan secara otomatis mengisi gambar sampul untuk audio khotbah Anda.

Untuk mencocokkan desain tata letak dengan lebih baik, simpan pengaturan Anda dan salin latar belakang bagian bawah dengan mengklik kanan pada teks kategori Latar Belakang di pengaturan bagian dan memilih "Salin Latar Belakang".

Sekarang rekatkan latar belakang ke pengaturan latar belakang modul audio Anda dengan membuka pengaturan modul audio, klik kanan pada teks kategori latar belakang, dan klik opsi "Tempel Latar Belakang".

Kemudian lompat ke pengaturan desain dan perbarui yang berikut:

Orientasi Teks: Kiri
Margin Kustom: 0px bawah

Sekarang yang tersisa untuk menyelesaikan pemutar audio khotbah adalah embed pemutar audio yang sebenarnya. Saat ini, kotak input audio yang terpasang di modul audio tidak mendukung konten dinamis (saya yakin akan mendukungnya di masa mendatang), jadi kami akan melakukan solusi kecil. Kita akan membuat modul teks baru dan menambahkan embed file audio menggunakan konten dinamis. Dan karena cara WordPress mengenali kode pendek yang dihasilkan oleh bidang khusus, itu akan menampilkan pemutar audio default.

Untuk melakukan ini, tambahkan modul teks di bawah modul audio dan kemudian tambahkan bidang khusus "Sermon Audio Embed" sebagai konten dinamis. Pastikan untuk Mengaktifkan Raw HTML agar kode pendeknya berfungsi.

Sekarang kita dapat memposisikan pemutar audio kita di dalam modul audio dengan beberapa margin khusus. Buka tab desain dan perbarui yang berikut:

Margin Kustom (desktop): -40px Atas, 280px Kiri, 60px Kanan
Margin Kustom (tablet): 0px Kiri, 0px Kanan

Tautan Unduh

Terkadang, sangat membantu bagi pengguna untuk mengunduh file audio. Untuk membuatnya lebih mudah, Anda dapat menambahkan tautan ke file audio ke posting Anda. Untuk melakukan ini, kita akan menggunakan konten dinamis untuk mengisi modul uraian dengan judul khotbah dan url audio.

Tambahkan modul uraian di bawah modul audio dan perbarui konten sebagai berikut:

Judul: Judul Khotbah (bidang khusus)
Ikon: lihat tangkapan layar
URL Tautan Judul: Url Audio Khotbah (bidang khusus)

Untuk menata uraian uraian agar lebih terlihat seperti tautan yang dapat diklik, perbarui yang berikut:

Warna Ikon: rgba(33,50,94,0.86)
Penempatan Gambar/Ikon: Kiri
Judul Font Style: U
Judul Warna Garis Bawah: rgba(33,50,94,0.86)
Warna Teks Judul: rgba(33,50,94,0.86)
Tinggi Baris Judul: 2em
Lebar Konten: 100%

Untuk membuat link lebih dikenali sebagai download, Anda dapat mengedit konten dinamis judul khutbah yang menempati judul blurb dengan teks tambahan di kotak input setelah yang bertuliskan “(download)”.

Menambahkan Judul Khotbah dan Meta ke Heading

Untuk langkah terakhir, pastikan bagian project/post heading kita menggunakan konten dinamis untuk judul postingan beserta nama pembicara dan tanggal khotbah. Untuk melakukan ini, buka pengaturan modul header lebar penuh dan perbarui yang berikut ini:

Judul: Judul Khotbah (bidang khusus)
Teks Subjudul: Speaker (bidang khusus)
(Catatan: Untuk konten dinamis Speaker, masukkan “by: ” di input sebelum)
Tombol #1 Teks Tautan: hapus
Tombol #2 Teks Tautan: hapus
Isi: Tanggal Khotbah (bidang khusus)

Sekarang buka tab desain dan keluarkan bantalan khusus yang digunakan.

Berikut adalah hasil akhirnya.

Sekarang yang perlu Anda lakukan selanjutnya adalah menyimpan tata letak ke perpustakaan Divi Anda untuk digunakan untuk posting khotbah di masa mendatang. Dan karena Anda memiliki grup bidang khusus yang siap untuk mengerjakan semua proyek, Anda cukup memperbarui informasi bidang khusus di backend tanpa harus membuka Visual Builder.

Juga, dengan khotbah yang disimpan sebagai proyek, Anda dapat dengan mudah membuat portofolio yang dapat disaring untuk menampilkan khotbah Anda!

Pikiran Akhir

Saya harap tutorial ini membantu menjelaskan lebih banyak tentang konten dinamis dan bagaimana itu dapat digunakan dengan plugin Bidang Kustom Tingkat Lanjut untuk membuat tata letak yang kuat untuk khotbah. Mungkin perlu beberapa waktu untuk menyiapkan semuanya, tetapi hasilnya pasti sepadan. Tentu saja, proses yang sama ini dapat digunakan untuk membuat semua jenis konten dinamis untuk jenis posting yang berbeda. Beri tahu saya jika Anda memiliki pertanyaan di komentar di bawah. Saya berharap mendengar kabar dari kamu.

Bersulang!