วิธีเพิ่มหลายคอลัมน์ใน WordPress (2 วิธี)

เผยแพร่แล้ว: 2021-10-15

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

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

คุณยังสามารถใช้เลย์เอาต์นี้ได้โดยใช้ตัวแก้ไขแบบคลาสสิกและปลั๊กอินตัวสร้างเพจ

ในบทช่วยสอนนี้ เราจะมาดูวิธีการเพิ่มหลายคอลัมน์ใน WordPress

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

เหตุใดจึงต้องใช้เค้าโครงหลายคอลัมน์

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

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

การสาธิต Divi แบบหลายคอลัมน์

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

คุณยังสามารถใช้คอลัมน์เพื่อจับคู่วิดเจ็ตต่างๆ เข้าด้วยกันในลักษณะที่สอดคล้องกัน ดังที่แสดงในธีม BuddyBoss:

ธีม BuddyBoss

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

วิธีเพิ่มหลายคอลัมน์ใน WordPress (2 วิธีง่ายๆ)

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

โชคดีที่ตอนนี้มีวิธีง่ายๆ สองวิธีในการเพิ่มคอลัมน์ใน WordPress — ไม่จำเป็นต้องใช้ HTML

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

ทีนี้มาดูทั้งสองวิธีกัน

วิธีที่หนึ่ง: ใช้ฟังก์ชันการทำงานดั้งเดิมของตัวแก้ไขบล็อก

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

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

รูปภาพของเครื่องมือแก้ไขบล็อกที่เปิดช่องค้นหา

ในการเริ่มต้น ให้ป้อน "คอลัมน์" ลงในช่องค้นหาของเครื่องมือแก้ไขบล็อก ซึ่งคุณสามารถเปิดได้โดยคลิกปุ่ม + หรือคุณสามารถคลิกบนหน้าจอและเริ่มพิมพ์ “/columns” เพื่อแสดงตัวเลือกเดียวกัน

ซึ่งจะเรียกหน้าต่างที่คุณสามารถเลือกเค้าโครงคอลัมน์ได้:

โคลสอัพของตัวเลือกต่างๆ ที่มีให้สำหรับบล็อกคอลัมน์

เริ่มต้นด้วยสองคอลัมน์เริ่มต้นและปรับการตั้งค่าในภายหลังก็เป็นตัวเลือกเช่นกัน

เมื่อคุณได้ระบุจำนวนส่วนที่คุณต้องการและวิธีที่คุณต้องการแบ่งออกแล้ว คุณสามารถลากและวางบล็อกได้ทุกที่ที่คุณต้องการ

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

บล็อกคอลัมน์ที่มีบล็อกปฏิทินและย่อหน้าในตัวแก้ไขบล็อก

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

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

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

คอลัมน์บล็อกที่ส่วนหน้า

เมื่อคุณเข้าใจพื้นฐานแล้ว ก็ยังมีคอลัมน์ให้สำรวจอีกมากมาย

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

วิธีที่สอง: ใช้ Classic Editor และ Page Builder โดย SiteOrigin

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

เนื่องจากฉันเป็นแฟนตัวยงของปลั๊กอิน Page Builder by SiteOrigin ฉันจะใช้อันนี้เพื่อสร้างเลย์เอาต์แบบหลายคอลัมน์ในตัวแก้ไขแบบคลาสสิก:

Page Puilder โดย SiteOrigin

Page Builder เป็นตัวเลือกฟรีที่มั่นคงซึ่งใช้อินเทอร์เฟซแบบลากและวางที่ใช้งานง่ายและมีการติดตั้งที่ใช้งานอยู่มากกว่า 1 ล้านครั้ง

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

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

การตั้งค่า SiteOrigin Page Builder

โปรดทราบว่าคุณต้องติดตั้งและเปิดใช้งานปลั๊กอิน Classic Editor บนไซต์ของคุณเพื่อให้ตัวเลือกนี้ใช้งานได้

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

แท็บ Page Builder ใน Classic Editor

ที่นี่ ให้คลิกปุ่ม เพิ่มแถว ที่จะสร้างแถวใหม่ที่คุณสามารถเพิ่มคอลัมน์ได้:

SiteOrigin เพิ่มคุณสมบัติแถว

ซึ่งจะเปิดอินเทอร์เฟซที่คุณสามารถปรับการตั้งค่าเริ่มต้นบางอย่าง ซึ่งรวมถึงจำนวน อัตราส่วน และทิศทางของคอลัมน์ของคุณ:

หน้าจอการสร้างแถวใหม่ใน SiteOrigin Page Builder

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

เช่นเดียวกับตัวแก้ไขบล็อก ปลั๊กอิน Page Builder by SiteOrigin ช่วยให้คุณสามารถแทรกวิดเจ็ตต่างๆ ลงในโครงสร้างคอลัมน์ได้

เลือกคอลัมน์ที่คุณต้องการเพิ่มวิดเจ็ตลงไป จากนั้นคลิกปุ่ม เพิ่มวิดเจ็ ต ซึ่งจะแสดงแผงต่อไปนี้:

ตัวอย่างตัวเลือกวิดเจ็ตของ Page Builder

เลือกองค์ประกอบที่คุณต้องการรวมและเติมลงในเนื้อหาของคุณ

แบ็กเอนด์ของโพสต์ของคุณตอนนี้ควรมีลักษณะดังนี้:

โพสต์คอลัมน์ Page Builder ซึ่งเต็มไปด้วยวิดเจ็ต

เสร็จสิ้นการเปลี่ยนแปลงของคุณ

สิ่งนี้จะแปลเป็นผลลัพธ์ในส่วนหน้าซึ่งมีลักษณะดังนี้:

คอลัมน์ที่ส่วนหน้า

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

บทสรุป

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

ในบทช่วยสอนนี้ เราได้กล่าวถึงวิธีการทีละขั้นตอนสองวิธีในการเพิ่มหลายคอลัมน์ใน WordPress:

  1. การใช้บล็อกคอลัมน์ในตัวของตัวแก้ไขบล็อก
  2. การติดตั้งปลั๊กอิน เช่น Page Builder เพื่อใช้กับตัวแก้ไขแบบคลาสสิก

วิธีที่คุณชื่นชอบในการเพิ่มคอลัมน์ใน WordPress คืออะไร? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!