วิธีใช้ Query Loop ใน WordPress เพื่อสร้างหน้ารายการโพสต์

เผยแพร่แล้ว: 2021-11-20

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

ตั้งค่าหน้าโพสต์บล็อกใน WordPress

หากคุณต้องการตั้งค่าหน้าบล็อก คุณสามารถสร้างหน้าใน WordPress ได้ง่ายๆ

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

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

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

บล็อกการสืบค้นข้อมูล

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

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

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

เพิ่ม Query Loop Block

  • คลิกที่ (+) ตัวแทรก Add Block และเลือกบล็อก Query Loop ดังที่แสดงในภาพด้านล่าง ในการค้นหาบล็อก Query Loop คุณจะต้องคลิกที่ Browse all แล้วเลื่อนไปที่ส่วน Theme ของตัวแทรก Block หรือคุณสามารถพิมพ์ "/query loop" ในบล็อกย่อหน้าใหม่เพื่อทำสิ่งเดียวกัน
เพิ่ม Query Loop Block
เพิ่ม Query Loop Block

การปรับแต่ง Query Loop Block

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

ตัวเลือกเค้าโครงบน Query Loop Block
ตัวเลือกเค้าโครงบน Query Loop Block

รูปแบบการออกแบบบล็อกการสืบค้นข้อมูล

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

รูปแบบ Query Loop ที่ WordPress มีให้โดยค่าเริ่มต้นคือ:

  • มาตรฐาน
  • รูปภาพทางด้านซ้าย
  • ภาพขนาดเล็กและชื่อเรื่อง
  • กริด
  • ชื่อใหญ่
  • ออฟเซ็ต

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

การเลือกรูปแบบการวนซ้ำของแบบสอบถาม
การเลือกรูปแบบการวนซ้ำของแบบสอบถาม

ตัวเลือกบล็อกลูปแบบสอบถาม

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

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

แถบเครื่องมือบล็อกการสืบค้นข้อมูล

ในแถบเครื่องมือของบล็อก Query Loop คุณจะพบปุ่ม Display Settings ซึ่งเมื่อคลิกแล้ว ป๊อปอัปจะเปิดขึ้นเพื่อให้คุณสามารถเลือกจำนวนโพสต์ที่จะแสดงได้

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

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

การตั้งค่าแถบเครื่องมือยอดนิยมบน Query Loop
การตั้งค่าแถบเครื่องมือยอดนิยมบน Query Loop

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

การดูรูปแบบของ Query Loop
การดูรูปแบบของ Query Loop

ที่เกี่ยวข้อง: ปลั๊กอินบล็อก Gutenberg 5 อันดับแรกสำหรับ WordPress

ตัวแก้ไขบล็อกลูปแบบสอบถาม

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

  • ตัวเลือกสีในตัวแก้ไขบล็อก Query Loop จะส่งผลต่อบล็อก Query ทั้งหมด แต่คุณยังสามารถปรับแต่งองค์ประกอบแต่ละรายการภายในบล็อกได้ด้วยการเลือกโดยเฉพาะและทำการเปลี่ยนแปลงที่เกี่ยวข้องผ่านแถบด้านข้างตัวแก้ไข ตัวแก้ไขบล็อก Query Loop มีตัวเลือกการปรับแต่งสีต่อไปนี้ภายในบล็อก:
    • สีข้อความ: ช่วยให้คุณสามารถเปลี่ยนสีข้อความที่อยู่ในลูปการสืบค้นได้ ที่นี่ คุณมีตัวเลือกในการเลือกสีที่กำหนดไว้ล่วงหน้าจากเมนู เลือกสีที่กำหนดเองจากจานสี หรือเพิ่มรหัสสีเฉพาะที่คุณต้องการ
    • สีพื้นหลัง: ซึ่งจะส่งผลต่อสีของพื้นหลังโดยรวมของบล็อก ที่นี่ คุณสามารถเลือกสีที่กำหนดไว้ล่วงหน้า เลือกสีที่กำหนดเอง เพิ่มรหัสสีเฉพาะ หรือใช้ตัวเลือกการไล่ระดับสีได้เช่นกัน คุณสามารถดูได้ว่าการใช้ตัวเลือกการไล่ระดับสีส่งผลต่อบล็อกการสืบค้นอย่างไรในภาพหน้าจอที่ให้ไว้ด้านล่าง
    • สีลิงก์: ตัวเลือกสีนี้ควบคุมสีของลิงก์ในโพสต์ใดๆ ที่อยู่ในบล็อกข้อความค้นหา ตัวเลือกนี้มีรูปแบบสีที่เหมือนกันทุกประการ เช่น ตัวเลือกสีข้อความ
ตัวเลือกสีบน Query Loop
ตัวเลือกสีบน Query Loop
  • บนแถบด้านข้างตัวแก้ไขบล็อก Query Loop คุณจะเรียกใช้ คิวรีรับค่าจาก ตัวเลือก เทมเพลต ตัวเลือกนี้สามารถเปิดหรือปิดได้ ขึ้นอยู่กับว่าคุณต้องการกำหนดคิวรีที่สร้างลูปเองหรือไม่ หากคุณเปิดใช้งาน ตัวเลือกการปรับแต่งบางอย่างจะถูกซ่อน แต่ถ้าคุณปิด ตัวเลือกการปรับแต่งเพิ่มเติมจะปรากฏขึ้น เช่น:
    • คอลัมน์: นี่จะเป็นแถบลากที่ให้คุณเลือกจำนวนคอลัมน์ที่คุณต้องการให้แสดงโพสต์ของคุณ ตัวเลือกนี้จะปรากฏขึ้นก็ต่อเมื่อเลือกมุมมองกริดแทนที่จะเป็นมุมมองรายการ
    • สั่งซื้อโดย: คุณจะสามารถสั่งซื้อโพสต์ในหน้ารายการโพสต์โดยใช้เกณฑ์ข้อใดข้อหนึ่งต่อไปนี้:
      • ใหม่ที่สุดไปยังเก่าที่สุด นี่คือตัวเลือกคำสั่งซื้อเริ่มต้น
      • เก่าที่สุดไปใหม่สุด
      • ตามตัวอักษร A ถึง Z
      • ตามตัวอักษร Z ถึง A
    • โพสต์ที่ติดหนึบ: เมื่อใช้ตัวเลือกนี้ โพสต์บล็อกสามารถวางไว้ที่ด้านบนสุดของหน้าแรกของโพสต์ โดยเก็บไว้ที่นั่นจนกว่าจะมีการเผยแพร่โพสต์ที่ติดหนึบใหม่ คุณสามารถรวม ยกเว้น หรือแสดงเฉพาะโพสต์ที่ติดหนึบ
  • นอกจากนี้ คุณยังจะพบ ตัว เลือกตัว กรอง ในแถบด้านข้างตัวแก้ไขบล็อก Query Loop ซึ่งเป็นตัวเลือกที่จะช่วยให้คุณปรับแต่งเพิ่มเติมเกี่ยวกับโพสต์ที่กำลังแสดงได้ ตัวเลือกนี้จะไม่ปรากฏให้เห็นหากคุณสลับบนตัวเลือกรับ ค่าคิวรีจาก ตัวเลือก เทมเพลต ในการสร้างตัวกรองสำหรับแสดงโพสต์ในหน้ารายการโพสต์ของคุณ คุณสามารถลองใช้ตัวเลือกต่อไปนี้ได้
    • หมวดหมู่: คุณจะต้องระบุหมวดหมู่ของโพสต์ที่คุณต้องการรวมไว้ โปรดจำไว้ว่า คุณจะต้องกำหนดโพสต์ของคุณเป็นหมวดหมู่ต่างๆ เพื่อให้ตัวกรองนี้ทำงานได้
    • ผู้แต่ง: คุณสามารถใช้ตัวกรองนี้หากคุณต้องการแสดงเฉพาะบล็อกที่เขียนโดยผู้เขียนคนใดคนหนึ่งในหน้าดัชนีของคุณ
    • คำหลัก: หากคุณต้องการกรองโพสต์ตามคำหลักใดๆ ที่โพสต์อาจมี ให้ใช้ตัวเลือกตัวกรองนี้
  • สุดท้าย คุณยังจะพบตัวเลือก การตั้งค่าขั้นสูง ซึ่งจะช่วยให้คุณสามารถเพิ่มคลาส CSS แบบกำหนดเองได้ ซึ่งคุณสามารถปรับแต่งสไตล์บล็อกได้ตามความต้องการเฉพาะของคุณ คุณยังสามารถกำหนดองค์ประกอบ HTML ได้หากต้องการ อย่างไรก็ตาม หากคุณไม่มีพื้นหลังของการพัฒนาเว็บส่วนหน้า เราขอแนะนำให้คุณปล่อยตัวเลือกนี้ไว้ตามเดิม และใช้ตัวเลือกการปรับแต่งบล็อกอื่นๆ เพื่อจัดรูปแบบบล็อกลูป Query ของคุณ

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