Skip to content

บทความนี้เราจะมาสอนวิธีการสร้างหน้า Archive เพื่อใช้แสดงลิสท์รายการข้อมูล ส่วนใหญ่จะเป็นรายการ Post ที่มีมาจาก Post type, Category, หรือ Tag ซึ่งจะบอกทั้งวิธีสร้างโดยไม่ใช้ปลั๊กอินและแบบใช้ปลั๊กอินเสริมครับ

Archive page คืออะไร

ใน WordPress หน้า Archive หรือหน้าเก็บข้อมูล คือหน้าที่รวบรวมรายการเนื้อหาไว้ในหน้าเว็บได้อย่างเป็นระเบียบ โดย WordPress สามารถสร้างหน้า Archive ตามหมวดหมู่ (category), แท็ก (tag), ผู้เขียน (author), และวันที่ (date) ของเนื้อหา ถ้าเราเป็นบล็อกเกอร์ การมีหน้า Archive จะช่วยให้ผู้เยี่ยมชมสามารถเข้าถึงโพสต์ต่างๆ เป็นที่แสดงเป็นรายการได้ง่าย หากธีมปัจจุบันที่เราใช้ไม่มีเทมเพลตหน้า Archive หรือถ้าเราต้องการปรับแต่งหน้า Archive ให้เหมาะกับความต้องการ เราสามารถสร้างหน้า Archive ที่กำหนดเองใน WordPress ได้ครับ

ถ้าหากเป็นสมัยก่อน การสร้างหน้า Archive คงต้องไปเขียนโค้ด php สร้างใหม่กันให้วุ่นวาย แต่ในยุคปัจจุบันระบบ WordPress ได้พัฒนาขึ้นมาเรื่อยๆ โดยใช้ Gutenberg Block Editor เป็นตัวหลักในการขับเคลื่อน ซึ่งสามารถช่วยเราสามารถสร้างหน้า Archive แบบง่ายๆ พอถูไถ แต่ถ้าทำให้สวยเลยคงต้องอาศัยปลั๊กอินอื่นเข้ามาช่วยครับ

ตัวอย่างหน้า Archive

ตัวอย่างจากเว็บจริง เพื่อให้เพื่อนๆ เห็นการแสดงผลของหน้า หน้า Archive ในแบบต่างๆ จะเห็นว่ามีประโยชน์ในการช่วยให้ผู้ชมหาอ่านโพสต์ต่างๆ ได้อย่างรวดเร็ว สามารถเพิ่มจำนวน Page view ต่อบทความได้ และผู้ชมเว็บมักต้องการดูรายการเนื้อหาที่เกี่ยวข้อง ซึ่งช่วยลดอัตรา bounce rate และสร้างผลกระทบเชิงบวกต่อ SEO ได้เป็นอย่างดีเลยครับ

วิธีการสร้างหน้า Archive ด้วย WordPress

สำหรับบทความนี้ เราจะเริ่มจากวิธีการใช้ WordPress block editor ในการสร้างโดยไม่ใช้ปลั๊กอินก่อน เดี๋ยวเราไปดูวิธีกันเลยครับ

ไปทีเมนู Pages > Add new page

ตั้งชื่อตรง Title ตามต้องการ

กดเครื่องหมาย + Add block เพื่อเพิ่ม Block Archive

พิมพ์ค้นหาคำว่า “Archive” จะปรากฏ Archive ขึ้นมาให้เลือกครับ กดเลือกเลย

เราจะได้รายการ Archives แบบเบสิคสุดๆ มีตัวเลือกปรับแต่งได้เพียงเล็กน้อย

การปรับแต่ง Settings กำหนดเลือกแสดงผลเป็นแบบ Dropdown หรือให้แสดงจำนวน Post ว่ามีจำนวนเท่าไหร่ (Show post counts) และกำหนดให้แสดงผลตามหมวดแบบไหน วัน เดือน ปี สัปดาห์ เป็นต้น

การแสดงแบบ Show post counts มีตัวเลขบอกจำนวน Post ด้านใน

ทีนี้เราต้องการจะให้แสดงผลเป็นรายการของ Post ขึ้นมาด้วย ไม่ใช่มีแต่กลุ่ม Category ให้กดเครื่องหมาย + อีกครั้งพิมพ์ค้นหาคำว่า “Post” ให้เลือก Post List

จะมีหน้าต่างให้เลือก Pattern หรือรูปแบบของการแสดงผลของ Post List นี้ ทั้งนี้จะขึ้นอยู่กับธีมที่เราเลือกใช้ครับ หากเราใช้ธีมที่มากับ WordPress จะมีให้เลือก Choose a pattern เราสามารถกดปุ่ม Choose เพื่อเลือกรูปแบบได้

จะมีรายการ Patterns ให้เราเลือกใช้งานอยู่หลายแบบ

แต่ถ้าใช้ธีมอื่นๆ เช่น Spectra One จะไม่ขึ้นให้เลือกรูปแบบ Pattern แต่จะแสดงปุ่ม Start blank แทน

จะมีรูปแบบเป็นลักษณะ Wireframe ให้เราเลือกใช้ ใครชอบแบบไหนก็เลือกเอาได้ตามอัธยาศัย

ตัวอย่างรูปแบบ Pattern ที่เลือกใช้สำหรับ Post List

โครงสร้างใน List View ด้านซ้ายก็จะแบบนี้เลยครับ Post List

สามารถลากสลับตำแหน่งได้ตามต้องการ

หรือเราจะให้แสดงแบบ Grid view ก็ได้เช่นกัน

เวลาพรีวิวหน้าเว็บก็จะประมาณนี้

ในส่วนของ Pagination สามารถปรับแต่งได้

แสดงผลแบบไม่มีลูกศร

แบบมีลูกศร

แบบ Chevron

สามารถกำหนดได้ที่หน้าต่าง Block ขวามือ

วิธีการสร้างหน้า Archive ด้วยปลั๊กอิน Spectra

หลังจากสร้างด้วย Block ของ WordPress โดยตรงไปแล้ว ถ้าหากเราต้องการการจัดรูปแบบที่ดีขึ้นกว่านี้ แนะนำปลั๊กอิน Spectra ติดตั้งให้เรียบร้อยก่อนนะครับ

หลังจากติดตั้งแล้วรายการ Blocks ให้เลือกใช้งานของ Spectra โผล่ขึ้นมาเต็มไปหมด ให้ค้นหาคำว่า “Post” เลือก Post Grid

Post Grid จะแสดงผลการแสดง Post ขึ้นมาในหน้าต่างทำงานทันที

เราสามารถปรับแต่งได้ทาง Panel ขวามือ จะเห็นว่าหน้าตาปรับแต่งละเอียดกว่าของ WordPress เยอะมาก

จะให้แสดงกี่คอลัมน์ก็ทำได้ ชีวิตง่ายขึ้นเยอะ!

ปรับได้ว่าจะให้แสดงหรือไม่แสดงอะไร

Style ปรับสีพื้นหลัง, ระยะห่างของ Column Gap และ Row Gap รวมถึงระยะ Padding

รูปแบบของปุ่มก็ปรับได้แบบสำเร็จรูป

การปรับสีของปุ่มจะอยู่ตรงนี้ครับ เผื่อเพื่อนๆ หาไม่เจอ แท็บ Style > Read More Link

Color คือสีข้อความ

Background Color คือสีปุ่ม

หลังจากปรับแต่งเสร็จแล้ว ลองพรีวิวดู

สรุป

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

ปลั๊กอิน Spectra

Back To Top
Search