วิธีเพิ่มและจัดแนวภาพในตัวแก้ไขบล็อก WordPress
เผยแพร่แล้ว: 2025-02-27การเพิ่มและจัดแนวรูปภาพใน WordPress Block Editor (Gutenberg) เป็นสิ่งจำเป็นสำหรับการสร้างเนื้อหาที่ดึงดูดสายตา การจัดวางภาพที่เหมาะสมช่วยเพิ่มความสามารถในการอ่านปรับปรุงประสบการณ์ผู้ใช้และมีบทบาทสำคัญในประสิทธิภาพ SEO และหน้าเว็บ อย่างไรก็ตามผู้ใช้หลายคนต่อสู้กับการจัดตำแหน่งภาพปัญหาการวางตำแหน่งและการตอบสนองในอุปกรณ์ต่าง ๆ
คู่มือนี้ให้คำอธิบายทีละขั้นตอนเกี่ยวกับวิธีการแทรกและจัดแนวภาพในตัวแก้ไขบล็อก WordPress เพื่อให้แน่ใจว่าพวกเขาแสดงอย่างถูกต้องในทุกขนาดหน้าจอ
ทำความเข้าใจบล็อกภาพในตัวแก้ไขบล็อก WordPress
WordPress ใช้บล็อกเพื่อจัดรูปแบบเนื้อหาและเพิ่มรูปภาพโดยใช้บล็อกรูปภาพ ซึ่งแตกต่างจากตัวแก้ไขคลาสสิกที่มีการจัดตำแหน่งรูปภาพด้วยตนเองตัวแก้ไขบล็อกมีตัวเลือกการจัดตำแหน่งในตัวเพื่อให้การปรับแต่งง่ายขึ้น
ด้วยบล็อกรูปภาพคุณสามารถ:
- อัปโหลดรูปภาพใหม่หรือใช้ภาพที่มีอยู่จาก ไลบรารีสื่อ
- จัดตำแหน่งภาพ ซ้าย, ขวา, ตรงกลาง, กว้างกว้างหรือความกว้างเต็ม
- เพิ่ม ข้อความ ALT สำหรับ SEO และการเข้าถึง
- ปรับขนาดการครอบตัดหรือเพิ่มคำอธิบายภาพภายในตัวแก้ไขโดยตรง
การทำความเข้าใจว่าตัวเลือกเหล่านี้ทำงานอย่างไรช่วยให้คุณจัดโครงสร้างเนื้อหาได้อย่างมีประสิทธิภาพ
วิธีเพิ่มรูปภาพในตัวแก้ไขบล็อก WordPress
การเพิ่มรูปภาพใน WordPress นั้นตรงไปตรงมา ทำตามขั้นตอนเหล่านี้:
- เปิดโพสต์หรือหน้าเว็บ ที่คุณต้องการแทรกภาพ
- คลิก ปุ่ม“+” (เพิ่มบล็อก) และเลือก บล็อกรูปภาพ
- เลือกหนึ่งในตัวเลือกต่อไปนี้:
- อัปโหลด - เพิ่มภาพใหม่จากคอมพิวเตอร์ของคุณ
- ไลบรารีสื่อ - เลือกรูปภาพที่อัปโหลดไปยัง WordPress แล้ว
- แทรกจาก URL - ใช้ลิงก์ภาพภายนอก
- เมื่อแทรกแล้วคุณสามารถปรับขนาดภาพเพิ่มคำอธิบายหรือเปลี่ยนการจัดตำแหน่ง
เพื่อผลลัพธ์ที่ดีที่สุดให้ใช้ภาพที่ดีที่สุดเพื่อป้องกันเวลาการโหลดช้า JPEG และ PNG เป็นรูปแบบที่พบบ่อยที่สุดในขณะที่ WebP ให้การบีบอัดและคุณภาพดีขึ้น
จัดตำแหน่งภาพในตัวแก้ไขบล็อก WordPress
หลังจากเพิ่มภาพคุณสามารถปรับ การจัดตำแหน่ง ให้พอดีกับเค้าโครงเนื้อหาของคุณ
ตัวเลือกการจัดตำแหน่งภาพพื้นฐาน
WordPress มีตัวเลือกการจัดตำแหน่งในตัวหลายตัว:
- จัดแนวซ้าย - วางภาพทางด้านซ้ายด้วยข้อความที่พันไว้รอบ ๆ
- จัดตำแหน่งขวา - วางตำแหน่งภาพทางด้านขวาด้วยการห่อข้อความรอบ ๆ
- จัดตำแหน่งศูนย์ - ศูนย์กลางภาพที่ไม่มีการห่อข้อความ
- ความกว้างกว้าง -ขยายภาพเกินความกว้างของเนื้อหา แต่ไม่เต็มหน้าจอ
- ความกว้างเต็ม - ยืดภาพเพื่อครอบคลุมความกว้างของเนื้อหาทั้งหมด
เพื่อจัดตำแหน่งภาพ:
- คลิกที่ภาพ
- เลือก ตัวเลือกการจัดตำแหน่ง จากแถบเครื่องมือด้านบน
- ปรับเค้าโครงตามต้องการ
หากการจัดตำแหน่งไม่ทำงานตามที่คาดไว้ ข้อ จำกัด ของธีม หรือสไตล์ CSS อาจส่งผลกระทบต่อเค้าโครง
ใช้บล็อกอื่น ๆ เพื่อการจัดวางภาพที่ดีขึ้น
สำหรับเลย์เอาต์ขั้นสูงเพิ่มเติมให้พิจารณาใช้บล็อกอื่น ๆ ที่ออกแบบมาสำหรับรูปภาพ
สื่อและข้อความข้อความ (สำหรับภาพที่ห่อด้วยข้อความ)
สื่อและบล็อกข้อความ เหมาะสำหรับการแสดงภาพข้างข้อความโดยไม่มีปัญหาการจัดตำแหน่ง ช่วยให้มั่นใจว่าเค้าโครงที่สมดุลในขณะที่ทำให้ภาพและข้อความจัดเรียงอย่างถูกต้อง
เพื่อใช้:
- คลิก เพิ่มบล็อก (“+”) และเลือก สื่อและข้อความ
- อัปโหลดหรือเลือกภาพ
- ป้อนข้อความในฟิลด์ที่ให้ไว้ถัดจากภาพ
- ปรับ การจัดตำแหน่งและการตั้งค่าเค้าโครง ตามต้องการ
บล็อกแกลเลอรี่ (สำหรับหลายภาพ)
หากคุณต้องการเพิ่มหลายภาพใน รูปแบบกริด ให้ใช้ บล็อกแกลเลอรี่ แทนการแทรกบล็อกรูปภาพแยกต่างหาก
Cover Block (สำหรับภาพพื้นหลัง)
บล็อกหน้าปก มีประโยชน์สำหรับ ภาพฮีโร่ หรือ แบนเนอร์พื้นหลัง ที่มีการซ้อนทับข้อความ
บล็อกเหล่านี้ให้ความยืดหยุ่นในการออกแบบมากกว่าบล็อกภาพมาตรฐาน
การจัดตำแหน่งภาพที่ตอบสนองได้สำหรับมือถือและแท็บเล็ต
การสร้างความมั่นใจว่าภาพจะปรับขนาดได้อย่างถูกต้องบนอุปกรณ์ทั้งหมดเป็นสิ่งสำคัญสำหรับประสบการณ์การใช้งานที่ราบรื่น
วิธีสร้างภาพที่เป็นมิตรกับมือถือ:
- ใช้ ความกว้างตามเปอร์เซ็นต์ แทนมิติพิกเซลคงที่
- ตรวจสอบให้แน่ใจว่าภาพได้ รับการปรับให้เหมาะสมสำหรับขนาดหน้าจอที่แตกต่างกัน
- ดูตัวอย่างโพสต์ของคุณโดยใช้ โหมดตอบสนองของ WordPress เพื่อตรวจสอบว่ารูปภาพปรากฏบนเดสก์ท็อปแท็บเล็ตและมุมมองมือถืออย่างไร
หากรูปภาพไม่จัดเรียงอย่างถูกต้องบนมือถืออาจจำเป็นต้องใช้ CSS แบบกำหนดเอง เพื่อแก้ไขปัญหาระยะห่างและการจัดตำแหน่ง
ภาพแนวทางปฏิบัติที่ดีที่สุดของ SEO ใน WordPress Block Editor
การเพิ่มประสิทธิภาพรูปภาพช่วยเพิ่มทั้ง การจัดอันดับการค้นหาและความเร็วหน้า ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:
- เพิ่มข้อความ alt - อธิบายรูปภาพเพื่อปรับปรุงการเข้าถึงและ SEO
- ใช้ภาพที่ถูกบีบอัด - ลดขนาดไฟล์โดยใช้เครื่องมือเช่น tinypng หรือ Imagify
- เปิดใช้งาน Lazy Loading - ล่าช้าการโหลดภาพจนกว่าผู้ใช้จะเลื่อนปรับปรุงประสิทธิภาพ
- ใช้รูปแบบ WEBP - ให้การบีบอัดที่ดีกว่า JPEG หรือ PNG
การใช้การปรับให้เหมาะสมเหล่านี้ช่วยเพิ่มความเร็วของไซต์และการมีส่วนร่วมของผู้ใช้
การแก้ไขปัญหาการจัดตำแหน่งภาพใน WordPress
บางครั้งรูปภาพ ไม่จัดเรียงอย่างถูกต้อง เนื่องจากธีมหรือปลั๊กอินขัดแย้งกัน
ปัญหาทั่วไปและการแก้ไข:
- การจัดตำแหน่งไม่ทำงาน? ธีมของคุณอาจแทนที่การตั้งค่าการจัดตำแหน่งของตัวแก้ไขบล็อก ลองเพิ่มการแก้ไข CSS
- รูปภาพไม่ปรับขนาดบนมือถือ? ตรวจสอบว่าธีมของคุณใช้ ขนาดภาพคงที่ และปรับหรือไม่
- ข้อความไม่พันรอบภาพ? ใช้ สื่อและบล็อกข้อความ แทนบล็อกรูปภาพเพื่อการควบคุมที่ดีขึ้น
หากปัญหาการจัดตำแหน่งยังคงมีอยู่การเปลี่ยนไปใช้ธีมที่ยืดหยุ่นมากขึ้นหรือใช้ตัวสร้างหน้าเช่น Elementor อาจช่วยได้
เมื่อใดควรใช้ปลั๊กอินสำหรับการปรับแต่งภาพขั้นสูง
ในขณะที่ตัวเลือกเริ่มต้นของ WordPress เพียงพอสำหรับผู้ใช้ส่วนใหญ่ปลั๊กอินสามารถปรับปรุงการจัดวางภาพและการจัดตำแหน่ง
ปลั๊กอิน WordPress ที่ดีที่สุดสำหรับการจัดตำแหน่งภาพและการเพิ่มประสิทธิภาพ:
- Smush - บีบอัดและปรับภาพให้เหมาะสมสำหรับการโหลดที่เร็วขึ้น
- เปิดใช้งานการแทนที่สื่อ - แทนที่ภาพโดยไม่ต้องเชื่อมโยง
- WP Rocket - เพิ่มการโหลดขี้เกียจเพื่อประสิทธิภาพที่ดีขึ้น
ปลั๊กอินช่วยเพิ่มประสิทธิภาพโดยอัตโนมัติและให้ตัวเลือกการปรับแต่งภาพขั้นสูง
บทสรุป
การเพิ่มและจัดแนวรูปภาพในตัวแก้ไขบล็อก WordPress นั้นง่ายเมื่อคุณเข้าใจการตั้งค่าบล็อกรูปภาพตัวเลือกการจัดตำแหน่งและเทคนิคการออกแบบที่ตอบสนอง
สำหรับเลย์เอาต์ที่เรียบง่ายใช้บล็อกรูปภาพเริ่มต้นและสำหรับการออกแบบที่มีโครงสร้างมากขึ้นใช้ประโยชน์จากสื่อและข้อความแกลเลอรี่หรือบล็อกปก หากปัญหาการจัดตำแหน่งเกิดขึ้นการตรวจสอบการตั้งค่าธีมการเพิ่มประสิทธิภาพรูปภาพสำหรับมือถือและการแก้ไขปัญหาความขัดแย้งจะช่วยให้มั่นใจได้ว่าประสบการณ์ที่ราบรื่น
โดยทำตามขั้นตอนเหล่านี้คุณสามารถสร้างเนื้อหาที่มีโครงสร้างที่ดีและมีส่วนร่วมซึ่งดูดีในทุกอุปกรณ์ในขณะที่ยังคงรักษาเวลาในการโหลดอย่างรวดเร็วและประสิทธิภาพ SEO ที่แข็งแกร่ง