วิธีปรับความกว้างหน้าเว็บ WordPress ให้พอดีกับเนื้อหา

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

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

❶ ความกว้างหน้าเว็บ WordPress มีแบบใดบ้าง

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

① ความกว้างเนื้อหา

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

② ความกว้างแบบกว้างและเต็มหน้าจอ

บางธีมมีตัวเลือก Wide Width หรือ Full Width สำหรับภาพ แบนเนอร์ วิดีโอ หรือส่วนตกแต่ง หน้าบทความยังอาจจำกัดความกว้างข้อความไว้ แม้ภาพประกอบจะขยายกว้างกว่าก็ตาม

③ ความกว้างขององค์ประกอบเฉพาะ

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

❷ วิธีปรับความกว้างในธีมแบบบล็อก

ธีมแบบบล็อกมักให้ปรับความกว้างเนื้อหาและเลย์เอาต์ผ่าน Site Editor แต่ชื่อเมนูและตัวเลือกอาจต่างกันตามธีม

① ปรับความกว้างภาพรวมของเว็บไซต์

1. ไปที่ รูปแบบเว็บ > ตัวแก้ไข
2. เปิด Styles หรือ สไตล์
3. เลือก Layout หรือ เค้าโครง
4. ตรวจค่าความกว้างเนื้อหาและความกว้างแบบกว้าง
5. ปรับทีละค่า แล้วตรวจตัวอย่างบนหน้าเว็บ
6. กด บันทึก เมื่อพอใจกับผลลัพธ์

การปรับจาก Styles อาจกระทบหลายหน้า ควรตรวจหน้าแรก หน้าบทความ และหน้าสำคัญก่อนบันทึก

② ปรับความกว้างของบล็อกเฉพาะจุด

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

หากต้องการให้เฉพาะส่วนแนะนำบริการกว้างขึ้น ให้ปรับบล็อกนั้นแทนการขยายความกว้างของเนื้อหาทั้งเว็บไซต์

❸ วิธีปรับความกว้างในธีมแบบคลาสสิก

ธีมแบบคลาสสิกอาจมีตัวเลือกความกว้างใน Customizer หน้าตั้งค่าของธีม หรือการตั้งค่าเฉพาะหน้า

① ตรวจตัวเลือก Layout ของธีม

ไปที่ รูปแบบเว็บ > ปรับแต่ง แล้วมองหาหัวข้อเกี่ยวกับ Layout, Container, Content Width หรือ Sidebar หากไม่พบ ให้ตรวจหน้าตั้งค่าของธีม เพราะธีมแต่ละตัวมีตัวเลือกไม่เหมือนกัน

② เลือกเทมเพลตของหน้า

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

③ ตรวจการตั้งค่าของ Page Builder

หากสร้างหน้าด้วย Page Builder ตัวเลือกความกว้างอาจอยู่ในเครื่องมือนั้น เช่น การตั้งค่า Container หรือ Page Layout ตรวจว่าหน้าเดียวกันไม่ได้ถูกควบคุมทั้งจากธีมและ Page Builder พร้อมกัน เพราะอาจทำให้ค่าทับซ้อนกัน

❹ เลือกความกว้างให้เหมาะกับประเภทเนื้อหา

① บทความและข้อความยาว

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

② ภาพ แบนเนอร์ และวิดีโอ

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

③ ตารางและข้อมูลเปรียบเทียบ

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

④ หน้า Landing Page

หน้า Landing Page อาจใช้ส่วนพื้นหลังกว้างเต็มหน้า แต่ข้อความ ปุ่ม และรายละเอียดควรอยู่ในพื้นที่ที่อ่านและกดใช้งานสะดวก แยกการตั้งค่าพื้นหลังออกจากความกว้างของเนื้อหาเมื่อธีมรองรับ

❺ วิธีตรวจว่าปรับความกว้างพอดีแล้วหรือยัง

① ตรวจบนคอมพิวเตอร์และมือถือ

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

② ตรวจหน้าเว็บหลายประเภท

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

③ ตรวจความสัมพันธ์ระหว่างเนื้อหากับ Sidebar

ถ้ามี Sidebar ให้ดูว่าสัดส่วนพื้นที่ข้อความยังเหมาะสมหรือไม่ หากเนื้อหาหลักแคบเกินไป อาจเลือกเอา Sidebar ออกเฉพาะบางหน้าหรือเลือกเทมเพลตที่เหมาะกว่า

❻ สาเหตุที่ปรับความกว้างแล้วไม่เปลี่ยน

• ธีมไม่รองรับตัวเลือกความกว้างที่ต้องการ
• หน้านั้นใช้เทมเพลตหรือ Page Builder ที่ตั้งค่าแยกไว้
• บล็อกมีการกำหนดความกว้างเฉพาะตัว
• มีการตั้งค่าจากธีมและ Plugin ซ้อนกัน
• แคชยังแสดงรูปแบบเดิม

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

❼ เช็กลิสต์ก่อนเผยแพร่

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

❽ สรุป

ปรับความกว้างหน้าเว็บ WordPress ได้จาก Layout ของ Site Editor, Customizer, เทมเพลตหน้า หรือ Page Builder ขึ้นอยู่กับธีมและเครื่องมือที่ใช้ ควรปรับส่วนที่ต้องการจริง แล้วตรวจทั้งข้อความ ภาพ Sidebar และการแสดงผลบนมือถือ

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