วิธีสร้างเค้าโครงคำเทศนาโดยใช้ฟิลด์ที่กำหนดเองและเนื้อหาแบบไดนามิกใน Divi

ความสามารถในการเข้าถึงและฟังคำเทศนาเป็นส่วนสำคัญของเว็บไซต์ของคริสตจักร และด้วยการเปิดตัว Church Layout Pack ใหม่ของ Divi ฉันคิดว่าน่าจะเป็นประโยชน์ที่จะแสดงให้คุณเห็นว่าคุณสามารถสร้างเค้าโครงบทเทศน์โดยใช้เนื้อหาแบบไดนามิกได้อย่างไร ในการดำเนินการนี้ ฉันจะใช้ปลั๊กอิน Advanced Custom Fields เพื่อสร้างฟิลด์แบบกำหนดเองของกลุ่มที่คุณสามารถอัปเดตได้ที่ส่วนหลังของโพสต์ของคุณ และด้วยการใช้คุณสมบัติเนื้อหาแบบไดนามิกของ Divi ฉันจะแสดงให้คุณเห็นว่าคุณสามารถออกแบบเลย์เอาต์เพื่อดึงฟิลด์ที่กำหนดเองเหล่านั้นเพื่อเติมเนื้อหาในโพสต์ของคุณได้อย่างไร เมื่อพูดและทำเสร็จแล้ว คุณจะมีเลย์เอาต์คำเทศนาที่ดีพร้อมเนื้อหาไดนามิกที่สามารถอัปเดตบนแบ็กเอนด์ได้โดยใช้ UI ที่ใช้งานง่ายของฟิลด์ที่กำหนดเองโดยไม่ต้องปรับใช้ตัวสร้างภาพ

มาเริ่มกันเลย.

สิ่งที่คุณต้องการ

สำหรับบทช่วยสอนนี้ คุณจะต้องมีสิ่งต่อไปนี้:

• ธีม Divi
• ปลั๊กอินฟิลด์กำหนดเองขั้นสูง
• เค้าโครงบล็อกของ Church จากชุดเค้าโครงของโบสถ์ (เข้าถึงได้จาก Divi Builder)

เค้าโครงคำเทศนา แอบดู

นี่คือรูปลักษณ์ที่เราจะสร้าง ความงามของเลย์เอาต์นี้คือเนื้อหาส่วนใหญ่ถูกสร้างขึ้นจากฟิลด์ที่กำหนดเองในแบ็กเอนด์โดยใช้เนื้อหาแบบไดนามิก

การสร้างฟิลด์แบบกำหนดเองด้วยปลั๊กอินฟิลด์กำหนดเองขั้นสูง

ปลั๊กอิน Advanced Custom Fields (ACF) ช่วยให้คุณจัดกลุ่มฟิลด์ที่กำหนดเองเข้าด้วยกันเพื่อใช้เป็นเนื้อหาแบบไดนามิกในโพสต์หรือเพจของคุณได้อย่างง่ายดาย รองรับฟิลด์หลายประเภท (เช่น ตัวเลือกวันที่ ตัวแก้ไข Wysiwyg และ oEmbed) ที่ทำให้การอัปเดตฟิลด์ที่กำหนดเองทำได้ง่ายมาก สิ่งนี้มีประโยชน์อย่างยิ่งในการจัดเตรียม UI ที่ใช้งานง่ายสำหรับลูกค้าในการอัปเดตไซต์โดยใช้ฟิลด์ที่กำหนดเอง

เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอิน ACF แล้ว ให้ไปที่แดชบอร์ด WordPress และฟิลด์ที่กำหนดเอง > เพิ่มใหม่

เพิ่มฟิลด์ใหม่ Group

หากต้องการตั้งกลุ่มใหม่ ให้ตั้งชื่อกลุ่มฟิลด์ใหม่

ในส่วนตำแหน่ง (หรือสลับ) ให้เปลี่ยนการตั้งค่าเพื่อให้ประเภทโพสต์เท่ากับ "โครงการ" แทนที่จะเป็น "โพสต์" โดยพื้นฐานแล้วจะบอกให้ปลั๊กอินแสดงเฉพาะกลุ่มฟิลด์ที่กำหนดเองนี้ในประเภทโพสต์โครงการที่สร้างใน Divi (คุณสามารถปล่อยให้มันเป็นโพสต์ได้หากต้องการเช่นกัน ทางเลือกของคุณ)

จากนั้นเลื่อนลงไปที่ส่วนการตั้งค่าและอัปเดตสิ่งต่อไปนี้:

ตำแหน่ง: สูง (หลังเนื้อหา)

การตั้งค่าตำแหน่งนี้จะกำหนดตำแหน่งของกลุ่มฟิลด์ที่คุณกำหนดเองในตัวแก้ไขส่วนหลังของโพสต์หรือเพจของคุณ

เพิ่มฟิลด์แบบกำหนดเองไปยังกลุ่มฟิลด์

เมื่อสร้างและตั้งค่ากลุ่มของคุณแล้ว ก็ถึงเวลาเริ่มเพิ่มฟิลด์ที่กำหนดเองลงในกลุ่ม

ฟิลด์กำหนดเองของลำโพง

สำหรับฟิลด์กำหนดเองแรก ให้เพิ่มที่สำหรับให้ผู้ใช้เข้าสู่ลำโพงสำหรับเทศนา หากต้องการเพิ่มฟิลด์ใหม่ ให้คลิกปุ่ม "เพิ่มฟิลด์" และป้อนข้อมูลต่อไปนี้:

ป้ายกำกับ: Speaker
ชื่อสนาม: ลำโพง
ประเภทฟิลด์: Select
ตัวเลือก (ป้อนแต่ละรายการในบรรทัดใหม่): ศิษยาภิบาลอาวุโส ผู้ช่วยศิษยาภิบาล ศิษยาภิบาลเยาวชน วิทยากรรับเชิญ

ฟิลด์กำหนดเองชื่อเทศนา

ถัดไป เพิ่มฟิลด์แบบกำหนดเองสำหรับหัวข้อเทศนา

ป้ายกำกับ: ชื่อเทศน์
ชื่อสนาม: sermon_title
ประเภทฟิลด์: Text
Placeholder Text: คำเทศนา

ฟิลด์กำหนดวันเทศนา

จากนั้นเพิ่มฟิลด์ที่กำหนดเองสำหรับวันที่เทศนา อันนี้เราจะตั้งค่าให้มีประเภทฟิลด์ตัวเลือกวันที่เพื่อให้การเพิ่มวันที่ใหม่จะทำได้ง่ายในแบ็กเอนด์

ป้ายกำกับ: วันเทศน์
ชื่อสนาม: sermon_date
ประเภทฟิลด์: ตัวเลือกวันที่
รูปแบบการแสดงผล: Fj, Y
รูปแบบการส่งคืน: F j, Y
สัปดาห์ที่เริ่มใน: วันจันทร์

คำอธิบายคำเทศนา ฟิลด์กำหนดเอง

ถัดไป เพิ่มฟิลด์แบบกำหนดเองสำหรับคำอธิบายคำเทศนา ซึ่งจะทำให้ผู้ใช้สามารถอัปเดตเนื้อหาของโพสต์โดยใช้โปรแกรมแก้ไข Wysiwyg โดยไม่ต้องเปิดโปรแกรมสร้างภาพ

ป้ายกำกับ: คำเทศนา
ชื่อสนาม: sermon_description
ประเภทฟิลด์: Wysiwyg Editor

The Sermon Audio Embed Custom Field

ถัดไป เพิ่มฟิลด์แบบกำหนดเองสำหรับการฝังเสียงเทศนาโดยใช้ประเภทฟิลด์ oEmbed ซึ่งจะทำให้เราสามารถฝังเสียงที่ฝังไว้ของคำเทศนาโดยเพียงแค่อัปเดต URL ของเสียงสำหรับการฝังในแบ็กเอนด์

ป้ายกำกับ: Sermon Audio Embed
ชื่อสนาม: sermon_audio_embed
ประเภทฟิลด์: oEmbed

ฟิลด์ URL เสียงคำเทศนาที่กำหนดเอง

ถัดไป เพิ่มฟิลด์ที่กำหนดเองสำหรับ URL เสียงเทศนา เพื่อให้เราสามารถใช้ URL เพื่อเติมลิงก์ภายในโมดูลเพื่อสร้างลิงก์ดาวน์โหลดไปยังไฟล์

ป้ายกำกับ: URL เสียงเทศน์
ชื่อสนาม: sermon_audio_url
ประเภทฟิลด์: Url

ไม่เป็นอะไร. เมื่อเพิ่มฟิลด์ที่กำหนดเองลงในกลุ่มฟิลด์ของเราแล้ว อย่าลืมบันทึกกลุ่มฟิลด์ของคุณ ตอนนี้ เราสามารถเริ่มสร้างเค้าโครงคำเทศนาสำหรับเนื้อหาคำเทศนาภาคสนามที่กำหนดเองของเราเพื่อใช้เป็นเนื้อหาแบบไดนามิกตลอดทั้งโพสต์

สร้างโครงการใหม่

จากแดชบอร์ดของ WordPress นำทางไปยัง โปรเจ็กต์ > เพิ่มใหม่ จากนั้นป้อนชื่อโครงการซึ่งควรเป็นชื่อบทเทศนาด้วย (แต่ขึ้นอยู่กับคุณ) จากนั้นคลิกเพื่อใช้ Divi Builder คุณจะเห็นกลุ่มของฟิลด์ที่กำหนดเองแสดงที่ด้านบนของตัวสร้าง Divi

กรอกข้อมูลคำเทศนาเฉพาะสำหรับโพสต์นี้ลงในฟิลด์ที่กำหนดเอง

วิทยากร : ศิษยาภิบาลอาวุโส (เลือกจากเมนูดรอปดาวน์)
ชื่อเทศนา: การสร้างใหม่ (หรือสิ่งที่คุณต้องการ)
วันที่เทศนา: เลือกวันที่จากตัวเลือกวันที่
คำอธิบายคำเทศนา: ใช้โปรแกรมแก้ไขแบบ WYSIWYG เพื่อป้อนคำอธิบายสำหรับคำเทศนา
Sermon Audio Embed: ป้อน url ไปยังไฟล์สื่อที่คุณต้องการฝังลงในเครื่องเล่นสื่อ
Sermon Audio URL: ป้อน url ของไฟล์มีเดีย (ควรเป็นไฟล์ zip หากคุณต้องการดาวน์โหลดทันทีเมื่อคลิก)

จากนั้นเพิ่มรูปภาพเด่นสำหรับโครงการของคุณ นี้จะทำหน้าที่เป็นภาพที่ใช้สำหรับเครื่องเล่นเสียงของรูปแบบการเทศนา

การเพิ่มเลย์เอาต์ที่สร้างไว้ล่วงหน้าใหม่สำหรับโปรเจ็กต์ของคุณ

ตอนนี้คลิกเพื่อใช้ Visual Builder

(หมายเหตุ: ปัจจุบันตัวสร้างแบ็กเอนด์ไม่สนับสนุนเนื้อหาแบบไดนามิก เราจึงต้องปรับใช้ตัวสร้างภาพ หากคุณต้องการปรับแต่งเค้าโครงด้วยฟังก์ชันตัวสร้างส่วนหลังมากขึ้น เพียงปรับใช้ตัวสร้างภาพและคลิกโหมดโครงร่าง)

จากนั้นคลิกตัวเลือกเพื่อเลือกเค้าโครงที่สร้างไว้ล่วงหน้า จากป๊อปอัปการโหลดจากห้องสมุด ให้เลือก Church Layout Pack จากนั้นคลิกเพื่อใช้เค้าโครงหน้าบล็อกของ Church

เมื่อโหลดเลย์เอาต์ไปที่เพจแล้ว ให้ลบส่วนที่ 2, 4 และ 5 ออกจากเลย์เอาต์ ตอนนี้เลย์เอาต์ของคุณควรมีสามส่วนเท่านั้น: ส่วนหัวด้านบน ส่วน "คำเทศนาล่าสุด" และส่วนท้ายด้านล่าง

ถัดไป ให้ลบโมดูลบล็อกในส่วนที่สอง

อัปเดตโมดูลข้อความ "คำเทศนาล่าสุด" เพื่อให้มีเนื้อหาดังต่อไปนี้:

<h3>Description</h3>

จากนั้นทำซ้ำโมดูลข้อความนั้นและอัปเดตเนื้อหาเป็น "ฟังเลย"

การเพิ่มเนื้อหาไดนามิกเค้าโครงเทศน์

คำอธิบายคำเทศนา

ตอนนี้เราพร้อมที่จะเริ่มสร้างเนื้อหาเสียงเทศนาแบบไดนามิกสำหรับส่วนของเรา สำหรับผู้เริ่มต้น เราจะเพิ่มคำอธิบายคำเทศนาใต้โมดูลข้อความที่มีชื่อ "คำอธิบาย" ในการทำเช่นนั้น ให้เพิ่มโมดูลข้อความใหม่ วางเมาส์เหนือช่องป้อนข้อมูลเนื้อหา แล้วคลิกไอคอนเนื้อหาแบบไดนามิก

จากนั้นเลือกช่องกำหนดเองคำอธิบายเทศน์จากรายการดรอปดาวน์

บันทึกการตั้งค่า.

ตอนนี้คำอธิบายคำเทศนาของคุณจะแสดงเป็นเนื้อหาแบบไดนามิก ซึ่งหมายความว่าสิ่งที่คุณเพิ่มลงในช่องป้อนคำอธิบายคำเทศนาบนหน้าจอตัวแก้ไขส่วนหลังจะได้รับการอัปเดตในหน้าโครงการแบบไดนามิก

โมดูลเสียงและฝังเสียง

ใต้โมดูลข้อความที่มีชื่อ "ฟังเลย" ให้เพิ่มโมดูลเสียงใหม่ จากนั้นอัปเดตเนื้อหาข้อความด้วยเนื้อหาไดนามิกต่อไปนี้:

หัวข้อ: หัวข้อเทศนา (ฟิลด์กำหนดเอง)
ชื่อศิลปิน: Speaker (ช่องกำหนดเอง)
ชื่ออัลบั้ม : Sermon Date (ช่องกำหนดเอง)

ป้ายกำกับไม่สำคัญเพราะเราให้ความสำคัญกับการจัดวางเนื้อหาแบบไดนามิกภายในโมดูลเสียงเป็นหลัก ชื่อเทศนา ผู้บรรยาย และวันที่เทศนาจะแสดงอย่างสวยงามภายในโมดูลเสียงโดยที่ไม่ต้องทำอะไรมาก

สำหรับภาพหน้าปกของโมดูลเสียง ให้เพิ่มเนื้อหาแบบไดนามิกโดยคลิกไอคอนเนื้อหาแบบไดนามิกเมื่อวางเมาส์เหนือพื้นที่แสดงตัวอย่างรูปภาพแล้วเลือกรูปภาพเด่น

ตอนนี้สิ่งที่คุณกำหนดเป็นภาพเด่นของคุณที่ส่วนหลังจะใส่ภาพหน้าปกสำหรับเสียงเทศนาของคุณโดยอัตโนมัติ

เพื่อให้เข้ากับการออกแบบเลย์เอาต์ได้ดีขึ้น ให้บันทึกการตั้งค่าของคุณและไปคัดลอกพื้นหลังของส่วนล่างโดยคลิกขวาที่ข้อความหมวดหมู่พื้นหลังในการตั้งค่าส่วนและเลือก "คัดลอกพื้นหลัง"

ตอนนี้วางพื้นหลังลงในการตั้งค่าพื้นหลังโมดูลเสียงของคุณโดยเปิดการตั้งค่าโมดูลเสียง คลิกขวาที่ข้อความหมวดหมู่พื้นหลัง แล้วคลิกตัวเลือก "วางพื้นหลัง"

จากนั้นข้ามไปที่การตั้งค่าการออกแบบและอัปเดตสิ่งต่อไปนี้:

การวางแนวข้อความ: ซ้าย
มาร์จิ้นที่กำหนดเอง: 0px ด้านล่าง

ตอนนี้ สิ่งที่เราเหลือเพื่อให้เครื่องเล่นเสียงเทศน์สมบูรณ์คือเครื่องเล่นเสียงที่ฝังอยู่จริง ขณะนี้ กล่องอินพุตเสียงในโมดูลเสียงไม่สนับสนุนเนื้อหาแบบไดนามิก (ฉันแน่ใจว่าจะเป็นเช่นนั้นในอนาคต) ดังนั้นเราจะดำเนินการแก้ไขปัญหาเล็กน้อย เราจะสร้างโมดูลข้อความใหม่และเพิ่มไฟล์เสียงที่ฝังโดยใช้เนื้อหาแบบไดนามิก และเนื่องจากวิธีที่ WordPress รู้จักรหัสย่อที่สร้างโดยฟิลด์ที่กำหนดเอง มันจะแสดงเครื่องเล่นเสียงเริ่มต้น

ในการดำเนินการนี้ ให้เพิ่มโมดูลข้อความใต้โมดูลเสียง แล้วเพิ่มฟิลด์ที่กำหนดเอง "Sermon Audio Embed" เป็นเนื้อหาแบบไดนามิก ตรวจสอบให้แน่ใจว่าได้เปิดใช้งาน Raw HTML เพื่อให้รหัสย่อใช้งานได้

ตอนนี้ เราสามารถวางตำแหน่งเครื่องเล่นเสียงของเราภายในโมดูลเสียงด้วยระยะขอบที่กำหนดเองได้ ไปที่แท็บการออกแบบและอัปเดตสิ่งต่อไปนี้:

ระยะขอบที่กำหนดเอง (เดสก์ท็อป): -40px ด้านบน, 280px ด้านซ้าย, 60px ด้านขวา
มาร์จิ้นที่กำหนดเอง (แท็บเล็ต): 0px ซ้าย, 0px ขวา

ลิงค์ดาวน์โหลด

บางครั้ง การดาวน์โหลดไฟล์เสียงจะเป็นประโยชน์สำหรับผู้ใช้ เพื่อให้ง่ายขึ้น คุณสามารถเพิ่มลิงก์ไปยังไฟล์เสียงในโพสต์ของคุณ ในการทำเช่นนี้ เราจะใช้เนื้อหาแบบไดนามิกเพื่อเติมโมดูลการนำเสนอด้วยชื่อบทเทศนาและ URL ของเสียง

เพิ่มโมดูลการนำเสนอภายใต้โมดูลเสียงและอัปเดตเนื้อหาดังต่อไปนี้:

หัวข้อ: หัวข้อเทศนา (ฟิลด์กำหนดเอง)
ไอคอน: ดูภาพหน้าจอ
URL ลิงค์ชื่อเรื่อง: Sermon Audio Url (ฟิลด์กำหนดเอง)

หากต้องการจัดรูปแบบการนำเสนอให้ดูเหมือนลิงก์ที่คลิกได้ ให้อัปเดตสิ่งต่อไปนี้:

ไอคอนสี: rgba(33,50,94,0.86)
ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
รูปแบบตัวอักษรของชื่อเรื่อง: U
หัวข้อขีดเส้นใต้สี: rgba(33,50,94,0.86)
ชื่อข้อความสี: rgba(33,50,94,0.86)
ความสูงของบรรทัดหัวเรื่อง: 2em
ความกว้างของเนื้อหา: 100%

ในการทำให้ลิงก์เป็นที่รู้จักมากขึ้นเมื่อดาวน์โหลด คุณสามารถแก้ไขเนื้อหาแบบไดนามิกของหัวข้อเทศนาที่ครอบครองชื่อประกาศพร้อมข้อความเพิ่มเติมในช่องป้อนข้อมูลหลังที่เขียนว่า “(ดาวน์โหลด)”

การเพิ่มหัวข้อเทศนาและ Meta ให้กับหัวเรื่อง

สำหรับขั้นตอนสุดท้าย ให้ตรวจสอบให้แน่ใจว่าหัวข้อของโปรเจ็กต์/โพสต์ของเรานั้นใช้เนื้อหาแบบไดนามิกสำหรับชื่อโพสต์พร้อมกับชื่อวิทยากรและวันที่เทศนา ในการดำเนินการนี้ ให้เปิดการตั้งค่าโมดูลส่วนหัวแบบเต็มและอัปเดตสิ่งต่อไปนี้:

หัวข้อ: หัวข้อเทศนา (ฟิลด์กำหนดเอง)
ข้อความหัวข้อย่อย: ผู้พูด (ฟิลด์กำหนดเอง)
(หมายเหตุ: สำหรับเนื้อหาไดนามิกของ Speaker ให้ป้อน “by: ” ในช่อง before input)
ปุ่ม #1 ลิงก์ข้อความ: ลบ
ปุ่ม #2 ลิงก์ข้อความ: ลบ
เนื้อหา: วันที่เทศน์ (ฟิลด์กำหนดเอง)

ตอนนี้ไปที่แท็บการออกแบบและนำช่องว่างภายในแบบกำหนดเองที่ใช้ออกไป

นี่คือผลลัพธ์สุดท้าย

ตอนนี้สิ่งที่คุณต้องทำต่อไปคือบันทึกเลย์เอาต์ลงในห้องสมุด Divi ของคุณเพื่อใช้สำหรับโพสต์คำเทศนาในอนาคต และเนื่องจากคุณมีกลุ่มฟิลด์แบบกำหนดเองที่พร้อมสำหรับทุกโครงการ คุณสามารถอัปเดตข้อมูลฟิลด์แบบกำหนดเองบนแบ็กเอนด์ได้โดยไม่ต้องเปิด Visual Builder

นอกจากนี้ ด้วยบทเทศนาที่บันทึกเป็นโครงการ คุณสามารถสร้างพอร์ตโฟลิโอที่กรองได้เพื่อแสดงคำเทศนาของคุณ!

ความคิดสุดท้าย

ฉันหวังว่าบทช่วยสอนนี้จะช่วยให้เข้าใจเนื้อหาไดนามิกมากขึ้น และสามารถนำไปใช้กับปลั๊กอินฟิลด์กำหนดเองขั้นสูงเพื่อสร้างเลย์เอาต์ที่ทรงพลังสำหรับการเทศนาได้อย่างไร อาจใช้เวลาสักครู่ในการตั้งค่าทุกอย่าง แต่ผลตอบแทนคุ้มค่าแน่นอน แน่นอน กระบวนการเดียวกันนี้สามารถใช้เพื่อสร้างเนื้อหาไดนามิกทุกประเภทสำหรับโพสต์ประเภทต่างๆ แจ้งให้เราทราบหากคุณมีคำถามใด ๆ ในความคิดเห็นด้านล่าง ฉันหวังว่าจะได้ยินจากคุณ.

ไชโย!