บรรณาธิการ Gutenberg ใช้ 'บล็อก (Block)' เป็นแกนหลัก เมื่อแทรกข้อความ รูปภาพ หรือเนื้อหาอื่น ๆ โดยพื้นฐานแล้วคือการเพิ่มบล็อกประเภทที่เกี่ยวข้องและแก้ไข วิธีนี้มีความยืดหยุ่นสูง สามารถควบคุมสไตล์และตำแหน่งของแต่ละองค์ประกอบได้อย่างแม่นยำ นี่คือขั้นตอนการดำเนินงานโดยละเอียด:
หนึ่ง แทรกข้อความ: ใช้บล็อก 'ย่อหน้า' และ 'หัวเรื่อง' เพื่อสร้างเนื้อหา
ข้อความเป็นส่วนหลักของบทความ Gutenberg จัดการการจัดวางข้อความผ่านบล็อก 'ย่อหน้า' และ 'หัวเรื่อง' โดยมีขั้นตอนดังนี้:
1. แทรกข้อความย่อหน้า (เนื้อหาหลัก)
- วิธีที่ 1: หลังจากเข้าสู่หน้าแก้ไขบทความ ระบบจะแสดงข้อความ "เริ่มเขียนหรือพิมพ์ / เพื่อเพิ่มบล็อก" โดยค่าเริ่มต้น พิมพ์ข้อความโดยตรง ระบบจะสร้างบล็อก "ย่อหน้า" อัตโนมัติ
- วิธีที่ 2: คลิกไอคอน "+" (ตัวแทรกบล็อก) ในพื้นที่แก้ไข ค้นหา "ย่อหน้า" และคลิก หลังจากสร้างบล็อกย่อหน้าว่างแล้วให้ป้อนเนื้อหา
การจัดรูปแบบ：
เลือกบล็อกย่อหน้า ด้านขวาจะแสดงแผง 'บล็อก' (การตั้งค่าบล็อก) ซึ่งสามารถตั้งค่าได้:
- การจัดแนว (ชิดซ้าย, กลาง, ชิดขวา, ชิดขอบทั้งสองข้าง);
- ขนาดข้อความ (เล็ก, ปกติ, ใหญ่, ใหญ่มาก);
- สีตัวอักษร (คลิกที่สี่เหลี่ยมสีเพื่อเลือก โปรดตรวจสอบความเปรียบต่างกับสีพื้นหลังเพื่อให้อ่านได้ชัดเจน)
- สีพื้นหลัง (เพิ่มสีพื้นหลังให้กับย่อหน้า เพื่อเน้นเนื้อหาสำคัญ)
2. แทรกหัวเรื่อง (แบ่งระดับเนื้อหา)
หัวเรื่องใช้เพื่อแยกโครงสร้างของบทความ (เช่น บท ข้อ) แนะนำให้ใช้ตามลำดับชั้น「H1-H6」(H1 โดยปกติจะเป็นหัวเรื่องหลักของบทความ ซึ่งมีอยู่แล้วที่ด้านบนของหน้าแก้ไขโดยค่าเริ่มต้น ไม่จำเป็นต้องเพิ่มซ้ำ)
ขั้นตอนการดำเนินการ：
- คลิกไอคอน "+" ในพื้นที่แก้ไข ค้นหา "หัวข้อ" และเลือก เพื่อสร้างบล็อกหัวข้อ
- ป้อนข้อความหัวข้อ (เช่น "1. การเตรียมการก่อนการติดตั้ง")
- เลือกบล็อกหัวข้อ ในแผงด้านขวา เลือกระดับหัวข้อ H2-H6 (H2 สำหรับหัวข้อย่อยระดับหนึ่ง H3 สำหรับหัวข้อย่อยระดับสอง และต่อๆ ไป)
เคล็ดลับ: หลังจากป้อนข้อความแล้ว ให้เลือกข้อความและกด Ctrl+B(ตัวหนา) หรือ Ctrl+I(ตัวเอียง) เพื่อตั้งค่าสไตล์ข้อความอย่างรวดเร็ว
二、แทรกรูปภาพ: ใช้บล็อก "รูปภาพ" เพื่อเพิ่มรูปภาพและปรับปรุง
รูปภาพสามารถทำให้บทความมีชีวิตชีวามากขึ้น บล็อก "รูปภาพ" ของกูเทนเบิร์กรองรับการอัปโหลด ปรับแต่งสไตล์ และปรับปรุง โดยมีขั้นตอนดังนี้:
1. 3 วิธีในการแทรกรูปภาพ
- วิธีที่ 1: อัปโหลดรูปภาพใหม่คลิกไอคอน「+」→ ค้นหา「รูปภาพ」→ คลิก「อัปโหลด」→ เลือกไฟล์รูปภาพจากคอมพิวเตอร์ → รอให้การอัปโหลดเสร็จสิ้น
- วิธีที่ 2: ใช้รูปภาพจากคลังสื่อหากรูปภาพถูกอัปโหลดไว้แล้ว (เช่น รูปภาพที่เคยแทรกมาก่อน) หลังจากคลิกบล็อก「รูปภาพ」ให้เลือก「คลังสื่อ」→ ติ๊กเลือกรูปภาพที่ต้องการ → คลิก「เลือก」
- วิธีที่ 3: วางรูปภาพโดยตรงในคอมพิวเตอร์คัดลอกภาพ (คลิกขวา 'คัดลอก') กลับไปยังพื้นที่แก้ไขคลิกขวา 'วาง' ระบบจะสร้างบล็อกรูปภาพและอัปโหลดโดยอัตโนมัติ
2. ปรับแต่งสไตล์รูปภาพ (การปรับปรุงที่จำเป็นต้องทำ)
เลือกบล็อกรูปภาพ แผงด้านขวาสามารถตั้งค่าพารามิเตอร์สำคัญดังต่อไปนี้:
- การจัดตำแหน่ง：
- จัดชิดซ้าย / จัดชิดขวา: รูปภาพอยู่ชิดขอบด้านข้าง ข้อความล้อมรอบ
- จัดกึ่งกลาง: รูปภาพอยู่ตรงกลาง ข้อความอยู่ด้านบนและล่าง
- จัดเต็มความกว้าง: รูปภาพครอบคลุมความกว้างพื้นที่แก้ไขทั้งหมด (เหมาะสำหรับรูปภาพขนาดใหญ่)
- ขนาด: ลากแถบเลื่อน "ความกว้าง" เพื่อปรับสัดส่วน (แนะนำให้เลือก "จำกัดสัดส่วน" ไว้ เพื่อหลีกเลี่ยงการบิดเบือนรูปภาพ)
- ลิงก์: คลิกช่องป้อน "ลิงก์" เพื่อเชื่อมโยงรูปภาพไปยังหน้าอื่น (เช่น คลิกที่รูปภาพเพื่อไปยังหน้ารูปภาพความละเอียดสูง) หากไม่ต้องการลิงก์สามารถเว้นว่างไว้ได้
- ข้อความแทน (Alt text): ป้อนคำอธิบายรูปภาพ (เช่น "ภาพหน้าจอขั้นตอนการติดตั้ง WordPress") เพื่อช่วยให้เครื่องมือค้นหารับรู้เนื้อหารูปภาพ ปรับปรุง SEO และอำนวยความสะดวกในการเข้าถึง
3. การแก้ไขปัญหาที่พบบ่อย
- การอัปโหลดรูปภาพล้มเหลว: ตรวจสอบขนาดรูปภาพ (แนะนำให้ไม่เกิน 5MB ต่อรูป), รูปแบบ (รองรับ JPG, PNG, WebP) หรือรีเฟรชหน้าเว็บแล้วลองอีกครั้ง
- รูปภาพเบลอ: ตรวจสอบให้แน่ใจว่าได้อัปโหลดรูปภาพต้นฉบับ (ความละเอียดอย่างน้อย 1000px กว้าง) และหลีกเลี่ยงการขยายเกินขนาดเดิม
สาม. การแทรกวิดีโอ: ใช้บล็อก「วิดีโอ」เพื่อเพิ่มวิดีโอจากเครื่องหรือออนไลน์
ไม่ว่าจะเป็นวิดีโอที่ถ่ายเองหรือวิดีโอจากแพลตฟอร์มเช่น YouTube, Bilibili ฯลฯ สามารถแทรกผ่านบล็อก "วิดีโอ":
1. การแทรกวิดีโอท้องถิ่น (วิดีโอที่คุณอัปโหลดเอง)
- คลิกไอคอน "+" → ค้นหา "วิดีโอ" → เลือก "อัปโหลด" → เลือกไฟล์วิดีโอในคอมพิวเตอร์ (รองรับรูปแบบ MP4, WebM)
- หลังจากอัปโหลดเสร็จ วิดีโอจะแสดงในบล็อกโดยอัตโนมัติ สามารถคลิกเพื่อทดสอบการเล่น
ข้อควรระวัง: ไฟล์วิดีโอท้องถิ่นมีขนาดใหญ่ อาจใช้พื้นที่เซิร์ฟเวอร์และทำให้การโหลดช้าลง แนะนำให้ใช้วิธีนี้กับวิดีโอขนาดเล็ก (ไม่เกิน 100MB) เท่านั้น สำหรับวิดีโอขนาดใหญ่ควรใช้แพลตฟอร์มออนไลน์เป็นหลัก
2. การแทรกวิดีโอออนไลน์ (แนะนำ!)
แทรกผ่านลิงก์จากแพลตฟอร์มวิดีโอ ไม่ต้องใช้พื้นที่เซิร์ฟเวอร์ และโหลดเร็วขึ้น:
- เปิดแพลตฟอร์มวิดีโอ (เช่น YouTube, Bilibili, Tencent Video) ค้นหาวิดีโอที่ต้องการ แล้วคัดลอกลิงก์แชร์ (เช่น
https://www.bilibili.com/video/BV123456）。 - ในพื้นที่แก้ไข Gutenberg เพียงแปะลิงก์ → ระบบจะจดจำและสร้างบล็อกวิดีโอโดยอัตโนมัติ พร้อมแสดงเครื่องเล่นวิดีโอ
แพลตฟอร์มที่รองรับ: YouTube, Bilibili, Tencent Video, Youku, iQiyi และแพลตฟอร์มหลักอื่น ๆ หลังจากวางลิงก์แล้ว รอ 2-3 วินาทีเพื่อโหลด
3. การปรับแต่งสไตล์วิดีโอ
เลือกบล็อกวิดีโอ แผงด้านขวาสามารถตั้งค่าได้:
- การจัดตำแหน่ง (เหมือนรูปภาพ, จัดชิดซ้าย/ขวาเพื่อให้ข้อความล้อมรอบ);
- ความกว้าง (ปรับขนาดเครื่องเล่นวิดีโอ แนะนำไม่เกิน 1,000px เพื่อหลีกเลี่ยงการแสดงผลไม่ครบบนมือถือ);
- เล่นอัตโนมัติ: ไม่แนะนำให้เปิดใช้งาน (เบราว์เซอร์ส่วนใหญ่จะบล็อกการเล่นอัตโนมัติ ซึ่งอาจส่งผลต่อประสบการณ์การใช้งาน)
สี่. แทรกลิงก์: เชื่อมโยงข้อความและรูปภาพกับเนื้อหาอื่น
ลิงก์คือ 'เส้นเลือด' ของเว็บไซต์ ที่สามารถเชื่อมโยงเนื้อหากับหน้าอื่นหรือเว็บไซต์ภายนอกได้ โดย Gutenberg รองรับการเพิ่มลิงก์ให้กับข้อความและรูปภาพ:
1. เพิ่มลิงก์ (ไฮเปอร์ลิงก์) ให้กับข้อความ
- เลือกข้อความที่ต้องการเพิ่มลิงก์ (เช่น "คลิกเพื่อดูบทเรียนโดยละเอียด")
- คลิกไอคอน "ลิงก์" (รูปโซ่) ในแถบเครื่องมือที่ปรากฏด้านบน หรือใช้ปุ่มลัด
Ctrl+K。 - วางที่อยู่ลิงก์ในช่องป้อนข้อมูล (เช่น ลิงก์หน้าภายในเว็บไซด์)
https://你的域名/教程หรือลิงก์ภายนอกhttps://example.com）。 - การตั้งค่าตามอัธยาศัย:
- เลือก "เปิดในแท็บใหม่" (แนะนำสำหรับลิงก์ภายนอก เพื่อป้องกันไม่ให้ผู้เยี่ยมชมออกจากเว็บไซต์ของคุณ);
- คลิกไอคอน "การตั้งค่าลิงก์" (เฟืองเล็ก) เพื่อเพิ่มชื่อลิงก์ (ข้อความที่ปรากฏเมื่อวางเมาส์เหนือลิงก์)
- กด 'Enter' หรือ 'ใช้' เพื่อเสร็จสิ้นการตั้งค่า ข้อความจะเปลี่ยนเป็นสีน้ำเงินและมีขีดเส้นใต้ แสดงว่าการเพิ่มลิงก์สำเร็จแล้ว
2. เพิ่มลิงก์ให้กับรูปภาพ
- เลือกบล็อกรูปภาพ แล้วไปที่ช่องป้อนข้อมูล 'ลิงก์' ในแผงด้านขวา
- ป้อนที่อยู่ลิงก์ (เช่น คลิกรูปภาพเพื่อไปยังหน้าข้อมูลผลิตภัณฑ์)
- เลือก 'เปิดในแท็บใหม่' (เลือกตามความต้องการ) คลิกที่พื้นที่ว่างเพื่อบันทึก
3. ลบลิงก์
- ลิงก์ข้อความ: เลือกข้อความที่มีลิงก์ คลิกไอคอน 'ลบลิงก์' ในแถบเครื่องมือ (โซ่ที่มีกากบาท) หรือกด
Ctrl+Kแล้วลบที่อยู่ลิงก์ออก - ลิงก์รูปภาพ: เลือกรูปภาพ แล้วลบที่อยู่ในช่องป้อนข้อมูล 'ลิงก์' ทางด้านขวา
ห้า. เคล็ดลับการใช้งานสำหรับผู้เริ่มต้น
- แป้นพิมพ์ลัดสำหรับการจัดการบล็อก：
- เพิ่มบล็อกอย่างรวดเร็ว: พิมพ์
/+ ชื่อบล็อก (เช่น/图片เรียกใช้บล็อกรูปภาพโดยตรง); - ย้ายบล็อก: เลือกบล็อกแล้วกด
↑/↓ปุ่มลูกศร หรือลากไอคอน "⋮⋮" ทางด้านซ้ายของบล็อก; - ลบบล็อก: เลือกบล็อกแล้วกดปุ่ม
Deleteหรือคลิกไอคอน "ลบ" ในแถบเครื่องมือบล็อก
- เพิ่มบล็อกอย่างรวดเร็ว: พิมพ์
- แสดงตัวอย่างแบบเรียลไทม์: คลิกปุ่ม "แสดงตัวอย่าง" ที่มุมขวาบนของหน้าแก้ไข เพื่อตรวจสอบว่าลิงก์ทำงานหรือไม่ รูปภาพ / วิดีโอแสดงผลปกติหรือไม่
- หลีกเลี่ยงการจัดวางมากเกินไปสีตัวอักษรและสีพื้นหลังไม่ควรมีมากเกินไป (แนะนำไม่เกิน 3 สี) เพื่อรักษาความเรียบร้อยของหน้า; ขนาดของรูปภาพและวิดีโอควรเป็นมาตรฐาน (เช่น กำหนดความกว้างทั้งหมดเป็น 800px) เพื่อเพิ่มความสวยงาม
ด้วยขั้นตอนข้างต้น คุณสามารถแทรกและแก้ไขข้อความ รูปภาพ วิดีโอ และลิงก์ในตัวแก้ไข Gutenberg ได้อย่างง่ายดาย จำไว้ว่า: แต่ละองค์ประกอบเป็น "บล็อก" ที่เป็นอิสระ เลือกแล้วปรับการตั้งค่าในแผงด้านขวาเพื่อให้ได้การจัดวางที่แม่นยำ ฝึกฝนอีกสองสามครั้ง คุณจะเชี่ยวชาญได้อย่างรวดเร็ว!
ไทย