การใช้โมดูลบล็อก vs divi 5 ของตัวสร้างลูป

เผยแพร่แล้ว: 2025-09-06

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

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

สมัครสมาชิกช่อง YouTube ของเรา

สารบัญ
  • คำศัพท์ขนาดเล็ก 1 ตัว
  • 2 การแสดงฟีดโพสต์และโพสต์แบบง่าย ๆ ด้วยโมดูลบล็อก
    • 2.1 ประเภทโพสต์ที่กำหนดเอง: จำกัด แต่ใช้งานได้
  • 3 ประเภทโพสต์ที่กำหนดเอง + ฟิลด์ที่กำหนดเองโดยใช้ Loop Builder
    • 3.1 วิธีการสร้างลูปทำงานได้อย่างไร
    • 3.2 ตัวอย่างที่มีประเภทโพสต์ที่กำหนดเองและฟิลด์ที่กำหนดเอง
    • 3.3 FlexBox สำหรับเลย์เอาต์ที่กำหนดเอง
  • 4 การเลือกเครื่องมือที่เหมาะสมสำหรับโครงการของคุณ
    • 4.1 เมื่อโมดูลบล็อกเหมาะ
    • 4.2 เมื่อผู้สร้างลูปกลายเป็นสิ่งจำเป็น
  • 5 สร้างเค้าโครงโมดูลบล็อกของคุณเองด้วย Divi 5

อภิธานศัพท์ขนาดเล็ก

นี่เป็นคำศัพท์สั้น ๆ สำหรับผู้เริ่มต้นที่ยังใหม่กับแนวคิดของผู้สร้างลูป:

  • ประเภทโพสต์ที่กำหนดเอง (CPT): ประเภทเนื้อหาที่กำหนดเองเช่นผลิตภัณฑ์หรือหลักสูตร มันทำงานเหมือนโพสต์ แต่สามารถมีเขตข้อมูลที่เป็นเอกลักษณ์ของตัวเอง
  • ฟิลด์ที่กำหนดเอง: ฟิลด์ที่คุณเพิ่มลงในโพสต์หน้าหรือ CPT ตัวอย่างสำหรับเมนูอาหารอาจรวมถึงราคาการจัดอันดับการประกาศกลูเตน/ภูมิแพ้และระดับความเผ็ดร้อน
  • Field Field: ฟิลด์ที่เก็บรายการของรายการภายในโพสต์แต่ละโพสต์ คิดเกี่ยวกับรายการย่อยที่อาจใช้ได้กับเนื้อหาที่กำหนดเอง
  • ปลั๊กอินภาคสนาม: ACF เป็นตัวเลือกทั่วไป แต่ PODS , Meta Box , ACPT และ ชุดเครื่องมือ ก็ใช้ได้เช่นกัน

หากคุณหลงทางในรายละเอียดบางอย่างให้อ้างอิงกลับไปที่อภิธานศัพท์นี้ แต่เราจะทำให้สิ่งต่าง ๆ ง่ายขึ้นสำหรับคุณตลอดทาง

การแสดงฟีดโพสต์และโพสต์แบบง่าย ๆ ด้วยโมดูลบล็อก

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

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

    1. โพสต์ชื่อ
    2. ภาพเด่น
    3. โพสต์เนื้อหา
    4. URL Slug
    5. ผู้เขียน
    6. หมวดหมู่
    7. และอีกมาก

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

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

วิธีการสลับทำให้การเปลี่ยนแปลงไม่เจ็บปวด คุณสามารถซ่อนผู้แต่ง แต่เก็บวันที่แสดงภาพหรือข้ามข้อความที่ตัดตอนมา การตัดสินใจเล็กน้อยให้ผลลัพธ์ที่รวดเร็ว

ประเภทโพสต์ที่กำหนดเอง: จำกัด แต่ใช้งานได้

โมดูลบล็อกสามารถแสดงโพสต์ปกติและลงทะเบียนประเภทโพสต์ที่กำหนดเองได้อย่างถูกต้อง

โมดูลบล็อกโพสต์ประเภทตัวเลือกเนื้อหาการตั้งค่า

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

  • ชื่อแผนที่ไปยังชื่อ
  • แผนที่ headshot/Avatar ไปยังภาพที่โดดเด่น
  • แผนที่ชีวภาพไปยังเนื้อหา

โมดูลบล็อกจัดการกับสถานการณ์นี้ได้อย่างง่ายดาย

ฟิลด์ที่กำหนดเอง

ข้อ จำกัด จะปรากฏขึ้นพร้อมกับฟิลด์ใด ๆ ที่โพสต์เริ่มต้นไม่แชร์

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

เค้าโครงที่กำหนดเอง

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

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

ประเภทโพสต์ที่กำหนดเอง + ฟิลด์ที่กำหนดเองโดยใช้ตัวสร้างลูป

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

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

วิธีการสร้าง Loop Builder ทำงานอย่างไร

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

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

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

ตัวอย่างที่มีประเภทโพสต์ที่กำหนดเองและฟิลด์ที่กำหนดเอง

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

บล็อกโพสต์การ์ดตัวอย่างโดยใช้ตัวสร้างลูป

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

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

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

ส่วนหน้าของบัตรรายชื่ออสังหาริมทรัพย์จาก Divi's Loop Builder

การพูดคุยทั้งหมดของ CPTs คุณจะทำสิ่งเหล่านั้นได้อย่างไร? Advanced Custom Fields (ACF) เป็นตัวเลือกที่จะไปได้ที่นี่ PODS, Meta Box, ACPT และชุดเครื่องมือยังสร้างฟิลด์ที่ Loop Builder สามารถอ่านได้ ใช้สิ่งที่เหมาะกับงบประมาณประสบการณ์และสแต็กของคุณ

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

FlexBox สำหรับเลย์เอาต์ที่กำหนดเอง

Flexbox จับคู่ตามธรรมชาติกับตัวสร้างลูป คุณสามารถใช้มันได้สองระดับสำหรับโครงสร้างที่สะอาดและตอบสนองได้โดยไม่ต้องใช้ CSS ที่กำหนดเอง

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

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

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

การเลือกเครื่องมือที่เหมาะสมสำหรับโครงการของคุณ

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

เมื่อโมดูลบล็อกเหมาะอย่างยิ่ง

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

ด้วยโมดูลบล็อกคุณสามารถจัดส่งฟีดที่ใช้งานได้ในไม่กี่นาที ชิ้นส่วนที่เคลื่อนไหวน้อยลงก็หมายถึงโอกาสที่จะทำลายสิ่งต่าง ๆ น้อยลง (หรือสับสน)

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

เมื่อผู้สร้างลูปกลายเป็นสิ่งจำเป็น

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

ใช้ Loop Builder เมื่อความสัมพันธ์ของเนื้อหามีความซับซ้อน คุณอาจต้องผสมประเภทโพสต์ในมุมมองเดียวและแสดงเนื้อหาจากผู้ทำซ้ำ

สร้างเค้าโครงโมดูลบล็อกของคุณเองด้วย Divi 5

โมดูลบล็อกของ Divi ยังคงเป็นวิธีที่เร็วที่สุดในการจัดส่งฟีดมาตรฐาน ตัวสร้างลูปปลดล็อกการ์ดที่กำหนดเองฟิลด์ที่กำหนดเองและตัวทำซ้ำ ตัวสร้างลูปยังสามารถปรับแต่งและขึ้นรูปเป็นเค้าโครงและการออกแบบที่แน่นอนที่คุณมีอยู่ในใจในขณะที่โมดูลบล็อกมีข้อ จำกัด บางประการ

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

ดาวน์โหลด Divi 5Learn เพิ่มเติมเกี่ยวกับ Divi 5