การใช้เครื่องมือแก้ไข Rich Text สำหรับเนื้อหา
คุณสามารถใช้เครื่องมือแก้ไข Rich Text ของ Shopify เพื่อจัดรูปแบบและสไตล์เนื้อหาที่แสดงบนร้านค้าออนไลน์ของคุณ
ในหน้านี้
- ตำแหน่งที่สามารถใช้เครื่องมือแก้ไข Rich Text
- การเพิ่มเนื้อหา HTML ด้วยเครื่องมือแก้ไข Rich Text
- การจัดรูปแบบข้อความด้วยเครื่องมือแก้ไข Rich Text
- การล้างการจัดรูปแบบในเครื่องมือแก้ไข Rich Text
- การแทรกตารางด้วยเครื่องมือแก้ไข Rich Text
- การแทรกลิงก์ด้วยเครื่องมือแก้ไข Rich Text
- การเพิ่มลิงก์ภายในและภายนอกด้วยเครื่องมือแก้ไข Rich Text
- การลิงก์ไปยังไฟล์ในเนื้อหาของหน้า
- การแทรกรูปภาพด้วยเครื่องมือแก้ไข Rich Text
- การย้ายและปรับขนาดรูปภาพในเครื่องมือแก้ไข Rich Text
- การแก้ไขรูปภาพในเครื่องมือแก้ไข Rich Text
- การแทรกวิดีโอด้วยเครื่องมือแก้ไข Rich Text
- การแทรกไฟล์เสียงด้วยเครื่องมือแก้ไข Rich Text
- การเพิ่มหรือลบความคิดเห็นภายในในเครื่องมือแก้ไข Rich Text
- ทำความเข้าใจเกี่ยวกับเครื่องมือแก้ไข Rich Text
- การแก้ไขปัญหาเครื่องมือแก้ไข Rich Text
ตำแหน่งที่สามารถใช้เครื่องมือแก้ไข Rich Text
คุณสามารถใช้เครื่องมือแก้ไข Rich Text เพื่อเพิ่มหรือแก้ไขข้อความในส่วนต่างๆ ของร้านค้าของคุณได้
หากคุณกำลังใช้ธีมที่เข้ากันได้ คุณจะสามารถเพิ่มส่วน Rich Text ไปยังหน้าหรือเทมเพลตของคุณได้ด้วยเครื่องมือแก้ไขธีม
การเพิ่มเนื้อหา HTML ด้วยเครื่องมือแก้ไข Rich Text
คุณสามารถป้อนเนื้อหา HTML สำหรับบล็อกโพสต์ หน้า คำอธิบายสินค้า และคำอธิบายคอลเลกชันได้ด้วยเครื่องมือแก้ไข Rich Text
คลิกปุ่ม เพื่อดูโค้ด HTML สำหรับเนื้อหาที่อยู่ในเครื่องมือแก้ไข Rich Text
ในมุมมอง HTML คุณสามารถเปลี่ยนแปลงเนื้อหาในเครื่องมือแก้ไข Rich Text ได้หลายอย่าง คุณสามารถเพิ่มรูปภาพ วิดีโอ หรือตารางโดยใช้ HTML และคุณสามารถดีบักหรือปรับแต่งเลย์เอาต์และสไตล์ของเนื้อหาได้อย่างละเอียด
ฝังวิดเจ็ตสื่อ
หากคุณต้องการฝังวิดเจ็ตวิดีโอหรือเพลง คุณจะต้องโฮสต์วิดเจ็ตนั้นบนบริการอย่าง Youtube, Vimeo หรือ SoundCloud ก่อน บริการเหล่านี้จะสร้างโค้ดฝังตัวซึ่งคุณสามารถคัดลอกแล้วนำไปวางในเครื่องมือแก้ไข Rich Text ของส่วนผู้ดูแล Shopify ของคุณได้
ขั้นตอน
- ค้นหา โค้ดฝังตัว สำหรับสื่อที่คุณต้องการจะฝัง
- เลือกโค้ดฝังตัวทั้งหมดโดยการคลิกที่โค้ดแล้วกด
ctrl+Aบน PC หรือcommand+Aบน Mac - คัดลอกโค้ดฝังตัวโดยการกด
ctrl+Cบน PC หรือcommand+Cบน Mac - ในส่วนผู้ดูแล Shopify ของคุณ ให้คลิกปุ่ม แสดง HTML บนเครื่องมือแก้ไข Rich Text สำหรับเนื้อหาที่คุณกำลังแก้ไข
- วางโค้ดฝังตัวโดยการกด
ctrl+Vบน PC หรือcommand+Vบน Mac - คลิกที่ บันทึก
การจัดรูปแบบข้อความด้วยเครื่องมือแก้ไข Rich Text
ด้วยปุ่ม การจัดรูปแบบ คุณจะสามารถสร้างย่อหน้า หัวเรื่อง หรือบล็อกคำพูดได้อย่างรวดเร็ว การใช้การจัดรูปแบบและระดับหัวเรื่องที่ถูกต้องจะช่วยให้ผู้คนและเครื่องมือค้นหาสามารถอ่านเนื้อหาบนเว็บไซต์ของคุณได้
หากต้องการเลือกรูปแบบสำหรับข้อความ ให้ไฮไลท์ข้อความแล้วคลิกปุ่ม การจัดรูปแบบ
ตัวเลือกการจัดรูปแบบ
ย่อหน้า
เนื้อหาที่เป็นข้อความส่วนใหญ่ในเว็บไซต์ของคุณเป็นข้อความแบบย่อหน้า โดยปกติแล้วข้อความแบบย่อหน้าจะมีขนาดแบบอักษร 10–12 pt แต่บางธีมก็ใช้ขนาดแบบอักษรที่แตกต่างกันออกไป
หัวเรื่อง (1-6)
หัวเรื่องใช้เพื่อจัดโครงสร้างเนื้อหา หัวเรื่องมี 6 ระดับ หัวเรื่อง 1 คือระดับที่สำคัญที่สุด และ หัวเรื่อง 6 คือระดับที่สำคัญน้อยที่สุด
บล็อกคำพูด
บล็อกคำพูดใช้สำหรับแสดงข้อความที่อ้างอิงมาจากบุคคลอื่น เช่น คำพูดหรือข้อความที่ตัดตอนมาจากหนังสือหรือเว็บไซต์
ข้อความตัวหนา
หากต้องการทำให้ข้อความเป็นตัวหนา ให้ไฮไลท์ข้อความแล้วคลิกปุ่มตัวหนา
ข้อความตัวเอียง
หากต้องการทำให้ข้อความเป็นตัวเอียง ให้ไฮไลท์ข้อความแล้วคลิกปุ่มตัวเอียง
ขีดเส้นใต้ข้อความ
หากต้องการขีดเส้นใต้ข้อความ ให้ไฮไลท์ข้อความแล้วคลิกปุ่มขีดเส้นใต้
สร้างรายการสัญลักษณ์แสดงหัวข้อย่อย
หากต้องการสร้างรายการสัญลักษณ์แสดงหัวข้อย่อย ให้คลิกที่ปุ่ม Bulleted list
คุณสามารถพิมพ์เพื่อสร้างรายการแรกในสัญลักษณ์แสดงหัวข้อย่อยได้ หากต้องการสร้างรายการใหม่ ให้กดปุ่ม enter หรือ return หากต้องการสิ้นสุดรายการ ให้กดปุ่ม enter หรือ return สองครั้ง
สร้างรายการแบบระบุเลขลำดับ
หากต้องการสร้างรายการแบบระบุเลขลำดับ ให้คลิกปุ่ม Numbered list
คุณสามารถพิมพ์เพื่อสร้างรายการแรกในรายการแบบระบุเลขลำดับ หากต้องการสร้างรายการใหม่ ให้กดปุ่ม enter หรือ return หากต้องการสิ้นสุดรายการ ให้กดปุ่ม enter หรือ return สองครั้ง
ย่อหน้าข้อความ
การย่อหน้าจะเป็นการเพิ่มขอบด้านซ้ายให้กับย่อหน้า หากต้องการย่อหน้า ให้คลิกปุ่ม Indent
เลิกย่อหน้าข้อความ
การเลิกย่อหน้าจะเป็นการลบขอบที่ย่อหน้าไว้ทั้งหมด หากต้องการเลิกย่อหน้าหรือ outdent ย่อหน้า ให้คลิกปุ่ม Outdent
จัดแนวข้อความ
หากต้องการจัดแนวข้อความ ให้เลือกข้อความแล้วคลิกปุ่ม Alignment จากนั้นเลือก Left align, Center align หรือ Right align
เปลี่ยนสีตัวอักษร
- ไฮไลท์ข้อความแล้วคลิกปุ่ม Color
- คลิกสีหรือป้อนรหัสเฮกซ์เพื่อเปลี่ยนสีข้อความที่ไฮไลท์
เปลี่ยนสีพื้นหลังข้อความ
- ไฮไลท์ข้อความแล้วคลิกปุ่ม Color
- คลิกที่แท็บ Background
- คลิกสีหรือป้อนรหัสเฮกซ์เพื่อเปลี่ยนสีพื้นหลังของข้อความที่ไฮไลท์
ล้างการจัดรูปแบบในเครื่องมือแก้ไข Rich Text
หากต้องการลบการจัดรูปแบบออกจากข้อความหรือรูปภาพ ให้ไฮไลท์เนื้อหาแล้วคลิกปุ่ม Clear formatting
แทรกตารางด้วยเครื่องมือแก้ไข Rich Text
คุณสามารถแทรกตารางในบล็อกโพสต์ หน้า คำอธิบายสินค้า และคำอธิบายคอลเลกชันได้โดยใช้เครื่องมือแก้ไข Rich Text หลังจากสร้างตารางแล้ว คุณจะสามารถใส่ข้อความ รูปภาพ หรือแม้แต่วิดีโอลงในตารางได้
ขั้นตอน
- ในเครื่องมือแก้ไข Rich Text ให้คลิกปุ่ม Insert table
- คลิกที่ Insert table เพื่อแทรกตาราง การดำเนินการนี้จะสร้างตารางที่มีหนึ่งแถวและหนึ่งคอลัมน์
หลังจากที่คุณสร้างตารางแล้ว ให้คลิกปุ่ม Insert table อีกครั้งเพื่อแก้ไขแถวและคอลัมน์ของตารางได้ดังนี้
- Insert row above: วางเคอร์เซอร์ของคุณในแถวแล้วคลิกปุ่มนี้เพื่อแทรกแถวใหม่ด้านบน
- Insert row below: วางเคอร์เซอร์ของคุณในแถวแล้วคลิกปุ่มนี้เพื่อแทรกแถวใหม่ด้านล่าง
- Insert column before: วางเคอร์เซอร์ของคุณในคอลัมน์แล้วคลิกปุ่มนี้เพื่อแทรกคอลัมน์ใหม่ก่อนหน้าคอลัมน์นั้น
- Insert column after: วางเคอร์เซอร์ของคุณในคอลัมน์แล้วคลิกปุ่มนี้เพื่อแทรกคอลัมน์ใหม่ถัดจากคอลัมน์นั้น
- Delete row: วางเคอร์เซอร์ของคุณในแถวที่ต้องการลบแล้วคลิกปุ่มนี้
- Delete column: วางเคอร์เซอร์ของคุณในคอลัมน์ที่ต้องการลบแล้วคลิกปุ่มนี้
- Delete table: วางเคอร์เซอร์ของคุณที่ใดก็ได้ในตารางแล้วคลิกปุ่มนี้เพื่อลบทั้งตาราง
แทรกลิงก์ด้วยเครื่องมือแก้ไข Rich Text
คุณสามารถแทรกลิงก์ (ไฮเปอร์ลิงก์) ในบล็อกโพสต์ หน้า คำอธิบายสินค้า และคำอธิบายคอลเลกชันได้โดยใช้เครื่องมือแก้ไข Rich Text คุณสามารถเพิ่มลิงก์ที่นำลูกค้าไปยังหน้าต่างๆ ภายในร้านค้าออนไลน์ Shopify ของคุณและไปยังเว็บไซต์อื่นๆ ได้ นอกจากนี้ คุณยังสามารถเพิ่มลิงก์สำหรับเปิดข้อความอีเมลหรือโทรออกเพื่อช่วยให้ลูกค้าติดต่อคุณได้อีกด้วย
ขั้นตอน
- ไฮไลท์ข้อความหรือรูปภาพที่คุณต้องการเปลี่ยนให้เป็นลิงก์
- คลิก Insert link
- ป้อน URL ปลายทางสำหรับลิงก์ในช่อง Link to ดังนี้
- หากต้องการลิงก์ไปยังเว็บไซต์ภายนอกที่ไม่ได้อยู่ในร้านค้า Shopify ของคุณ ให้ป้อน
https://ตามด้วยที่อยู่เว็บไซต์ ตัวอย่างเช่นhttps://www.example.com - หากต้องการลิงก์ไปยังหน้าภายในร้านค้าออนไลน์ Shopify ของคุณ ให้ป้อน URL แบบย่อ ตัวอย่างเช่น
/collections/summer-collection - หากต้องการสร้างลิงก์สำหรับเปิดข้อความอีเมล ให้ป้อน
mailto:ตามด้วยที่อยู่อีเมล ตัวอย่างเช่นmailto:example@example.com - หากต้องการสร้างลิงก์สำหรับโทรออก ให้ป้อน
tel:ตามด้วยหมายเลขโทรศัพท์ ตัวอย่างเช่นtel:+0-123-456-7890
- หากต้องการลิงก์ไปยังเว็บไซต์ภายนอกที่ไม่ได้อยู่ในร้านค้า Shopify ของคุณ ให้ป้อน
- ป้อนคำอธิบายสั้นๆ ของลิงก์ในช่อง Link title
- เลือกวิธีเปิดลิงก์ด้วยเมนู Open this link in ดังนี้
- the same window: ลิงก์จะเปิดในแท็บหรือหน้าต่างเบราว์เซอร์เดิมของผู้ใช้
- a new window: ลิงก์จะเปิดในแท็บหรือหน้าต่างเบราว์เซอร์ใหม่
- คลิก Insert link เพื่อเปลี่ยนข้อความที่ไฮไลท์ไว้ให้เป็นลิงก์
เพิ่มลิงก์ภายในและลิงก์ภายนอกด้วยเครื่องมือแก้ไข Rich Text
ลิงก์ที่เชื่อมไปยังหน้าต่างๆ ภายในร้านค้า Shopify ของคุณจะเรียกว่าลิงก์ภายใน คุณสามารถใช้ URL แบบย่อเพื่อสร้างลิงก์ภายในได้ ตัวอย่างเช่น URL /collections จะชี้ไปยังหน้าคอลเลกชันของร้านค้าคุณ
หากต้องการลิงก์ไปยังหน้าที่ระบุในร้านค้าออนไลน์ของคุณ เช่น หน้าคอลเลกชันหรือหน้าสินค้า ให้ใช้รูปแบบ URL /page-type/page-handle ตัวอย่างเช่น หากต้องการลิงก์ไปยังคอลเลกชันที่คุณสร้างขึ้นโดยใช้ชื่อว่า Summer Collection ให้ใช้ URL /collections/summer-collection
ลิงก์ที่ไปยังเว็บไซต์ภายนอกร้านค้า Shopify ของคุณจะเรียกว่าลิงก์ภายนอก ลิงก์ภายนอกจำเป็นต้องป้อนแบบเต็มและขึ้นต้นด้วย http://
ลิงก์ไปยังไฟล์ในเนื้อหาของหน้า
หลังจากที่คุณ อัปโหลดไฟล์ คุณสามารถลิงก์ไฟล์ดังกล่าวไปยังเนื้อหาในเครื่องมือแก้ไข Rich Text เพื่อให้สามารถดาวน์โหลดได้จากคำอธิบายสินค้าหรือคอลเลกชัน เว็บเพจ หรือบล็อกโพสต์
ขั้นตอน
เดสก์ท็อป
จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ เนื้อหา > ไฟล์
คัดลอก URL ของไฟล์ที่คุณต้องการลิงก์
ในส่วนผู้ดูแล Shopify ให้คลิกที่สินค้า คอลเลกชัน เว็บเพจ หรือบล็อกโพสต์ที่คุณต้องการเพิ่มไฟล์
ในเครื่องมือแก้ไข Rich Text ให้ป้อนหรือเลือกข้อความลิงก์
เลือกข้อความลิงก์
คลิกแทรกลิงก์
ในช่อง ลิงก์ไปยัง ให้วาง URL ของไฟล์ที่คุณต้องการลิงก์
คลิกแทรกลิงก์ ในเครื่องมือแก้ไข Rich Text ข้อความที่ลิงก์จะแสดงเป็นสีน้ำเงินและมีขีดเส้นใต้
มือถือ
จาก Shopify app ให้แตะไอคอน
ในเมนู เนื้อหา ให้แตะไอคอน
จากนั้นแตะที่ ไฟล์
คัดลอก URL ของไฟล์ที่คุณต้องการลิงก์
ในส่วนผู้ดูแล Shopify ให้แตะสินค้า คอลเลกชัน เว็บเพจ หรือบล็อกโพสต์ที่คุณต้องการเพิ่มไฟล์
ในเครื่องมือแก้ไข Rich Text ให้ป้อนหรือเลือกข้อความลิงก์
เลือกข้อความลิงก์
แตะแทรกลิงก์
ในช่อง ลิงก์ไปยัง ให้วาง URL ของไฟล์ที่คุณต้องการลิงก์
แตะแทรกลิงก์ ในเครื่องมือแก้ไข Rich Text ข้อความที่ลิงก์จะแสดงเป็นสีน้ำเงินและมีขีดเส้นใต้
การแทรกรูปภาพด้วยเครื่องมือแก้ไข Rich Text
คุณสามารถแทรกรูปภาพโดยใช้เครื่องมือแก้ไข Rich Text ได้สามวิธีดังนี้
การอัปโหลดรูปภาพ
ขั้นตอน
ในเครื่องมือแก้ไข Rich Text ให้คลิกปุ่ม แทรกรูปภาพ
ในกล่องโต้ตอบ แทรกรูปภาพ ให้คลิกแท็บ รูปภาพที่อัปโหลด
คลิก อัปโหลดไฟล์
เลือกไฟล์รูปภาพ WebP, HEIC, SVG, GIF, JPEG หรือ PNG จากคอมพิวเตอร์ของคุณ
คลิกรูปภาพที่คุณอัปโหลดเพื่อเลือก
จากเมนู ขนาด ให้เลือกขนาดที่แสดงของรูปภาพ คุณสามารถเลือก ขนาดดั้งเดิม เพื่อแทรกรูปภาพโดยไม่เปลี่ยนขนาดที่แสดง
คลิก แทรกรูปภาพ เพื่อวางรูปภาพลงในเครื่องมือแก้ไข Rich Text
การเลือกจากรูปภาพสินค้า
ขั้นตอน
ในเครื่องมือแก้ไข Rich Text ให้คลิกปุ่ม แทรกรูปภาพ
ในกล่องโต้ตอบ แทรกรูปภาพ ให้คลิกแท็บ รูปภาพสินค้า
คลิกรูปภาพที่คุณต้องการแทรก หากคุณไม่พบสื่อสำหรับสินค้าที่คุณต้องการแทรก คุณก็สามารถใช้ปุ่มลูกศรเพื่อเรียกดูหน้าต่างๆ ได้
จากเมนู ขนาด ให้เลือกขนาดที่แสดงของรูปภาพ คุณสามารถเลือก ขนาดดั้งเดิม เพื่อแทรกรูปภาพโดยไม่เปลี่ยนขนาดที่แสดง
- คลิก แทรกรูปภาพ เพื่อวางรูปภาพสินค้าลงในเครื่องมือแก้ไข Rich Text
การใช้ URL ของรูปภาพ
ในการแทรกรูปภาพโดยใช้ URL สาธารณะ ให้ทำดังนี้
- ในเครื่องมือแก้ไข Rich Text ให้คลิกปุ่ม แทรกรูปภาพ
- ในกล่องโต้ตอบ แทรกรูปภาพ ให้คลิกแท็บ URL
- ป้อน URL ของไฟล์รูปภาพที่เข้าถึงได้แบบสาธารณะ
- คลิก แทรกรูปภาพ เพื่อแทรกรูปภาพในเครื่องมือแก้ไข Rich Text ด้วยขนาดดั้งเดิม
การย้ายและปรับขนาดรูปภาพในเครื่องมือแก้ไข Rich Text
หลังจากที่คุณเพิ่มรูปภาพลงในคำอธิบายสินค้าหรือคอลเลกชัน เว็บเพจ หรือบล็อกแล้ว คุณสามารถย้ายรูปภาพไปยังตำแหน่งอื่นในเนื้อหาได้
ขั้นตอน
- ในส่วนผู้ดูแล Shopify ให้คลิกที่สินค้า คอลเลกชัน เว็บเพจ หรือบล็อกโพสต์ที่มีรูปภาพที่คุณต้องการย้ายหรือปรับขนาด
- ในเครื่องมือแก้ไข Rich Text ให้คลิกที่รูปภาพ
- ทำอย่างใดอย่างหนึ่งต่อไปนี้
- หากต้องการย้ายรูปภาพ ให้คลิกและลากไปยังตำแหน่งอื่นในช่อง เนื้อหา
- หากต้องการปรับขนาดรูปภาพ ให้คลิกและลากมุมใดมุมหนึ่ง
- คลิกที่ บันทึก
การแก้ไขรูปภาพในเครื่องมือแก้ไข Rich Text
คุณสามารถเปลี่ยนขนาด การตัดข้อความ และการจัดตำแหน่งของรูปภาพได้ภายในเครื่องมือแก้ไข Rich Text นอกจากนี้ คุณยังสามารถแก้ไข URL ของรูปภาพ หรือเพิ่ม/แก้ไขข้อความกำกับภาพได้อีกด้วย
ขั้นตอน
- ดับเบิลคลิกที่รูปภาพในเครื่องมือแก้ไข Rich Text เพื่อเปิดกล่องโต้ตอบ แก้ไขรูปภาพ
- ใช้ตัวเลือกขนาดและการจัดตำแหน่งเพื่อแก้ไขรูปภาพดังนี้
- หากต้องการเปลี่ยนขนาดของรูปภาพ ให้เลือกตัวเลือกขนาด
- หากต้องการปรับปรุง SEO และความสามารถในการเข้าถึงของร้านค้าออนไลน์ของคุณ ให้เพิ่มหรือแก้ไขข้อความกำกับภาพ
- หากต้องการเพิ่มระยะห่าง ให้ป้อนจำนวนพิกเซลของช่องว่างที่ต้องการในแต่ละด้าน
- หากต้องการเปลี่ยนการจัดตำแหน่งของรูปภาพ ให้เลือกจากไอคอนที่แสดงการจัดตำแหน่งชิดซ้าย กึ่งกลาง หรือชิดขวา
- หากต้องการตัดข้อความล้อมรอบรูปภาพ ให้ทำเครื่องหมายที่ช่อง ตัดข้อความล้อมรอบรูปภาพ
- คลิก แก้ไขรูปภาพ เพื่อบันทึกการเปลี่ยนแปลงของคุณ
การแทรกวิดีโอด้วยเครื่องมือแก้ไข Rich Text
คุณสามารถแทรกหรือฝังวิดีโอในบล็อกโพสต์ หน้า คำอธิบายสินค้า และคำอธิบายคอลเลกชันได้โดยใช้เครื่องมือแก้ไข Rich Text
หากคุณต้องการฝังวิดีโอที่คุณสร้างขึ้นเอง คุณจะต้องอัปโหลดวิดีโอดังกล่าวไปยังเว็บไซต์สตรีมมิ่งวิดีโอก่อน เช่น YouTube หรือ Vimeo
YouTube ไม่อนุญาตให้คุณปิดใช้งานวิดีโอที่เกี่ยวข้อง แต่คุณสามารถระบุให้วิดีโอที่เกี่ยวข้องมาจากช่องทางเดียวกันกับวิดีโอที่เพิ่งเล่นจบไปได้
ขั้นตอน
- คัดลอก URL ของวิดีโอโดยกด
ctrl+Cบน PC หรือcommand+Cบน Mac
- ไปที่ Embed Responsively โดย Embed Responsively เป็นเครื่องมือที่จะมอบโค้ดฝังตัวที่ดียิ่งขึ้นสำหรับวิดีโอของคุณ
- บน Embed Responsively ให้คลิกเพื่อเลือกเว็บไซต์วิดีโอที่วิดีโอของคุณอยู่
- วาง URL ของวิดีโอที่คุณคัดลอกมาลงในช่อง Page URL บน Embed Responsively โดยกด
ctrl+Vบน PC หรือcommand+Vบน Mac - คลิก Embed จากนั้น Embed Responsively จะสร้างโค้ดฝังตัวให้คุณ
- หากวิดีโอมาจาก YouTube และคุณต้องการแสดงเฉพาะวิดีโอที่เกี่ยวข้องจากช่อง YouTube เดียวกัน ให้หา URL ของวิดีโอในโค้ดฝังตัว แล้วคัดลอกและวาง
?rel=0ต่อท้าย URL นั้นภายในเครื่องหมายอัญประกาศ - คัดลอกโค้ดทั้งหมดที่อยู่ในกล่อง Embed code
- ในส่วนผู้ดูแล Shopify ของคุณ ให้คลิกปุ่ม แทรกวิดีโอ ในเครื่องมือแก้ไข Rich Text
- วางโค้ดฝังตัวลงในกล่องของกล่องโต้ตอบ แทรกวิดีโอ
- คลิก แทรกวิดีโอ
- เมื่อดำเนินการเสร็จสิ้น ให้คลิก บันทึก เพื่อบันทึกการเปลี่ยนแปลงไปยังรายการที่คุณแก้ไข
การแทรกไฟล์เสียงด้วยเครื่องมือแก้ไข Rich Text
คุณสามารถใช้เครื่องมือแก้ไข Rich Text เพื่อแทรกหรือฝังไฟล์เสียงในบล็อกโพสต์ หน้า คำอธิบายสินค้า และคำอธิบายคอลเลกชันได้
ขั้นตอน
จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ เนื้อหา > ไฟล์
คลิก อัปโหลดไฟล์ เพื่ออัปโหลดไฟล์เสียงที่คุณต้องการแทรกหรือฝังในร้านค้าของคุณ
จากส่วน ร้านค้าออนไลน์ ให้เปิดเครื่องมือแก้ไข Rich Text สำหรับหน้าหรือบล็อกโพสต์ที่คุณต้องการแสดงไฟล์เสียง
คัดลอก
<div id="player"><audio controls="controls">แล้ววางโค้ดลงในเครื่องมือแก้ไข Rich Text เพื่อฝังเครื่องเล่นเสียงบนหน้าเว็บของคุณคัดลอกโค้ดต่อไปนี้
<source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
- วางโค้ดนี้ในเครื่องมือแก้ไข Rich Text ของคุณต่อจากโค้ดของเครื่องเล่นเสียง จากนั้นให้แทนที่
https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3ด้วย URL ที่สร้างขึ้นสำหรับไฟล์เสียงของคุณเมื่อคุณอัปโหลดไปยัง Shopify คุณสามารถดู URL ของไฟล์เสียงของคุณได้ทุกเมื่อที่หน้าไฟล์ - คลิกที่ บันทึก
- คลิก ดู เพื่อให้แน่ใจว่าไฟล์เสียงของคุณเล่นได้อย่างถูกต้อง
การเพิ่มหรือลบความคิดเห็นภายในในเครื่องมือแก้ไข Rich Text
คุณสามารถใช้แท็กความคิดเห็น <!-- และ --> สำหรับข้อความภายในที่คุณไม่ต้องการเผยแพร่ไปยังร้านค้าของคุณได้
ขั้นตอน
- ในเครื่องมือแก้ไข Rich Text ของคุณ ให้คลิกปุ่ม แสดง HTML
- หากต้องการเพิ่มความคิดเห็นภายใน ให้ใส่ข้อความที่คุณต้องการซ่อนไว้ภายใน
<!--และ-->ตัวอย่างเช่น<!--yourtext--> - คลิกที่ บันทึก
แท็ก HTML ที่อยู่ภายในแท็กความคิดเห็นจะถูกบันทึกเป็นข้อความภายใน หากต้องการให้แท็ก HTML เหล่านั้นทำงานอย่างถูกต้อง คุณจะต้องลบแท็กความคิดเห็น <!-- และ --> ที่ล้อมรอบอยู่ออก
ทำความเข้าใจเครื่องมือแก้ไข Rich Text
เครื่องมือแก้ไข Rich Text ได้รับการผสานรวมเข้ากับ TinyMCE ซึ่งเป็นเครือข่ายการส่งเนื้อหา (CDN) ภายนอก การผสานรวมนี้มีผลกระทบที่สำคัญบางประการดังนี้
- ขีดจำกัดเนื้อหา มีการจำกัดเนื้อหาที่ป้อนลงในเครื่องมือแก้ไข Rich Text ไว้อย่างเคร่งครัดที่ 64 KB โดยขีดจำกัดนี้ใช้กับหน้า บล็อกโพสต์ และสคริปต์เพิ่มเติม
- การปรับแก้โค้ด HTML TinyMCE มีตรรกะการกรองเนื้อหาที่แก้ไขการจัดรูปแบบ HTML โดยอัตโนมัติเพื่อป้องกันการทำงานผิดปกติของหน้าร้านและความเสี่ยงด้านความปลอดภัย แม้ว่าคุณจะสามารถแก้ไข HTML ด้วยตนเองให้กลับไปเป็นรูปแบบดั้งเดิมได้ แต่เราขอแนะนำให้คุณใช้การเปลี่ยนแปลงอัตโนมัตินี้เพื่อป้องกันปัญหาที่อาจเกิดขึ้น
การแก้ไขปัญหาเครื่องมือแก้ไข Rich Text
หากคุณกำลังประสบปัญหากับเครื่องมือแก้ไข Rich Text ให้ตรวจสอบขั้นตอนการแก้ไขปัญหาและปัญหาที่พบบ่อยต่อไปนี้
การแก้ไขปัญหาการจัดรูปแบบ
ปัญหาการจัดรูปแบบกับเนื้อหาที่คัดลอกมา
ข้อความจะรับการจัดรูปแบบของเครื่องมือแก้ไขหรือเว็บเพจที่เป็นต้นฉบับมาเสมอ หากคุณเขียนเนื้อหาใน Microsoft Word แล้วคัดลอกและวางลงในเครื่องมือแก้ไข Rich Text เนื้อหานั้นจะยังคงมีสี ขนาด การเยื้อง และระยะห่างเหมือนเดิม ซึ่งรวมถึงแท็ก <div> ด้วย
หากเป็นไปได้ ให้แก้ไขและจัดรูปแบบเนื้อหาของคุณในเครื่องมือแก้ไข Rich Text โดยตรง
สำหรับเลย์เอาต์ของหน้าที่มีความซับซ้อนมากขึ้น ให้พิจารณาใช้แอปตัวสร้างหน้า เช่น Shogun Drag & Drop Page Builder
การระบุปัญหาการจัดรูปแบบ
สาเหตุที่พบบ่อยที่สุดของปัญหาในเครื่องมือแก้ไข Rich Text เกิดจากสไตล์หรือการจัดรูปแบบที่ฝังมาซึ่งถ่ายทอดมาเมื่อคุณคัดลอกและวางเนื้อหาจากแหล่งอื่น
ปัญหานี้สามารถปรากฏในรูปแบบต่างๆ ได้ แต่โดยทั่วไปแล้วมักเป็นสาเหตุเมื่อเกิดความไม่ตรงกันระหว่างสิ่งที่แสดงในส่วนผู้ดูแล Shopify และสิ่งที่แสดงในร้านค้าที่เปิดให้บริการจริงของคุณ ซึ่งรวมถึงข้อมูลที่ไม่อัปเดตหรือสไตล์การแสดงผลที่แตกต่างออกไป
การแก้ไขปัญหาการจัดรูปแบบ
มีสองวิธีในการทดสอบว่าปัญหาการจัดรูปแบบเป็นสาเหตุของปัญหาหรือไม่ ได้แก่ การใช้ปุ่ม ล้างการจัดรูปแบบ หรือการนำเนื้อหาของเครื่องมือแก้ไข Rich Text ไปประมวลผลผ่านโปรแกรมล้าง HTML
ในการทดสอบ ให้สร้างสำเนาของสินค้าหรือหน้าที่เกิดปัญหาขึ้นมา จากนั้นจึงดำเนินการทดสอบอย่างใดอย่างหนึ่งต่อไปนี้กับสำเนานั้น
การทดสอบที่ 1: ล้างการจัดรูปแบบ
- ไฮไลต์เนื้อหาทั้งหมดในเครื่องมือแก้ไข Rich Text
- คลิกปุ่ม ล้างการจัดรูปแบบ
- คลิก บันทึก แล้วทดสอบ
การทดสอบที่ 2: โปรแกรมล้าง HTML
- คัดลอกเนื้อหาทั้งหมดจากเครื่องมือแก้ไข Rich Text
- นำไปวางในโปรแกรมล้าง HTML เช่น striphtml.com
- คัดลอกเนื้อหาทั้งหมดที่ผ่านการล้างแล้ว
- นำไปวางกลับลงในเครื่องมือแก้ไข Rich Text เพื่อแทนที่เนื้อหาเดิม
- คลิก บันทึก แล้วทดสอบ
หากขั้นตอนใดขั้นตอนหนึ่งเหล่านี้แก้ไขปัญหาได้ แสดงว่าปัญหาเกิดจากการจัดรูปแบบที่ถ่ายทอดมาเมื่อมีการเพิ่มเนื้อหาลงในเครื่องมือแก้ไข Rich Text ในตอนแรก คุณสามารถใช้วิธีเดียวกันนี้เพื่อแก้ไขเนื้อหาต้นฉบับได้
แก้ไขปัญหาโค้ดรูปภาพที่จัดวางไม่ตรงแนว
หากคุณประสบปัญหาในการจัดข้อความให้อยู่ข้างรูปภาพอย่างถูกต้องเมื่อใช้ตัวเลือกการล้อมรอบ คุณอาจต้องย้ายโค้ดไปมาเพื่อให้แท็กรูปภาพปรากฏที่ตอนต้นของย่อหน้า ไม่ใช่ตรงกลาง
- คลิกปุ่มแก้ไขโค้ดในเครื่องมือแก้ไข Rich Text
- ค้นหาโค้ดรูปภาพแล้วย้ายแท็ก
<img>ทั้งหมดไปยังตอนต้นของย่อหน้า โดยให้อยู่นอกแท็กย่อหน้า<p> - ลบแท็ก
<span>ใดๆ ในย่อหน้าที่ตามมาใต้รูปภาพ - คลิกบันทึก
ตัวอย่างโค้ดรูปภาพที่จัดวางไม่ตรงแนว:
<p style="float: left;"><br/><img alt="" src="your image link" style="float: left; margin-right: 20px;">This 22x34 special purchase frame...</p>
โค้ดที่แก้ไขแล้ว:
<img alt="" src="your image link" style="margin-right: 20px; float: left;">
<p>This 22x34 special purchase frame...</p>
แก้ไขปัญหาลิงก์ mailto ที่ไม่ทำงาน
หากลิงก์ mailto: ไม่ทำงาน (โหลดไปยังหน้าว่างเปล่าหรือไม่เปิดอีเมล) โปรดตรวจสอบว่าลิงก์มีโครงสร้างดังนี้
mailto:email@example.com
หากตรงกับรูปแบบข้างต้นแล้วแต่ยังคงไม่ทำงานตามที่คาดไว้ ก็อาจเป็นปัญหาจากการตั้งค่าเบราว์เซอร์หรืออีเมลไคลเอ็นต์ โปรดตรวจสอบการตั้งค่าเบราว์เซอร์และอีเมลไคลเอ็นต์ของคุณเพื่อให้แน่ใจว่าได้กำหนดค่าให้จัดการลิงก์ mailto: อย่างถูกต้อง
แก้ไขปัญหารูปภาพในหน้าเว็บกลับไปเป็นขนาดเดิมหลังจากปรับขนาด
เมื่อมีการแทรกรูปภาพลงในหน้า HTML ที่สร้างขึ้นจะประกอบด้วยพารามิเตอร์ src และพารามิเตอร์ data-mce-src หากพารามิเตอร์ทั้งสองนี้ไม่ตรงกัน ในท้ายที่สุด src จะถูกอัปเดตให้ตรงกับ data-mce-src
อย่างไรก็ตาม เมื่อคุณปรับขนาดรูปภาพโดยใช้เครื่องมือแก้ไข Rich Text จะมีเพียง src เท่านั้นที่ได้รับการอัปเดต และ data-mce-src จะยังคงเป็น URL ขนาดดั้งเดิม หลังจากคลิกอีกสองสามครั้ง src ก็จะเปลี่ยนกลับไปเป็น URL ของ data-mce-src
เพื่อหลีกเลี่ยงปัญหานี้ ให้อัปเดต data-mce-src URL ด้วยตนเองให้ตรงกับขนาดรูปภาพที่คุณต้องการ
- คลิกปุ่มแก้ไขโค้ดในเครื่องมือแก้ไข Rich Text
- ค้นหาแท็กรูปภาพที่คุณปรับขนาด
- ค้นหาพารามิเตอร์
srcและdata-mce-src - อัปเดต URL ของ
data-mce-srcให้ตรงกับ URL ของsrc - คลิกบันทึก
แก้ไขปัญหาการเปลี่ยนแปลง HTML อัตโนมัติ (การตรวจสอบและแก้ไขโค้ด)
คุณอาจสังเกตเห็นว่าเมื่อคุณทำการเปลี่ยนแปลงในเครื่องมือแก้ไข Rich Text แล้ว HTML ที่เกี่ยวข้องจะเปลี่ยนแปลงโดยอัตโนมัติ
เหตุใดจึงเป็นเช่นนี้
เครื่องมือแก้ไข Rich Text ของ Shopify ผสานการทำงานร่วมกับ TinyMCE ซึ่งเป็นเครือข่ายการส่งมอบเนื้อหา (CDN) ภายนอก CDN นี้มีชุดตรรกะการกรองเนื้อหาที่ครอบคลุมและเชื่อถือได้ ซึ่งจะแก้ไขการจัดรูปแบบของบรรทัด HTML ที่อาจทำงานผิดปกติบนหน้าร้านหรือทำให้เกิดความเสี่ยงด้านความปลอดภัยโดยอัตโนมัติ กระบวนการนี้เรียกว่า การตรวจสอบและแก้ไขโค้ด HTML
ฉันควรทำอย่างไร
แม้ว่าคุณจะสามารถหลีกเลี่ยงตรรกะการกรองเนื้อหาได้ด้วยการแก้ไข HTML ด้วยตนเองให้กลับไปเป็นเหมือนเดิม แต่เราขอแนะนำให้คุณยึดตามการเปลี่ยนแปลงอัตโนมัติ การแก้ไขอัตโนมัติเหล่านี้คือลักษณะการทำงานที่คาดไว้และมีจุดประสงค์สำคัญในการป้องกันการเปลี่ยนแปลงหน้าร้านที่อาจนำไปสู่ปัญหาต่างๆ
หากคุณกำลังพยายามบรรลุเป้าหมายที่เฉพาะเจาะจงโดยการเขียน HTML ที่ CDN พยายามจะแก้ไขอยู่ โปรดพิจารณาว่ามีวิธีที่เหมาะสมกว่าในการบรรลุเป้าหมายเหล่านั้นหรือไม่ เช่น การเปลี่ยนแปลงโค้ดธีมของคุณเพื่อรองรับการจัดรูปแบบ HTML ที่คาดไว้
แก้ไขปัญหาลิงก์ที่นำลูกค้าออกจากตลาดที่เลิอกไว้
หากคุณกำลังใช้ Shopify Markets กับโฟลเดอร์ย่อยและแอป Geolocation ลิงก์ในคำอธิบายสินค้า บล็อกโพสต์ หน้า และคำอธิบายคอลเลกชันก็อาจเปลี่ยนเส้นทางลูกค้าไปยังโดเมนหลักของคุณ แทนที่จะให้ลูกค้าอยู่ในภูมิภาคที่เลือกไว้
เหตุใดจึงเป็นเช่นนี้
เครื่องมือแก้ไข Rich Text รองรับทั้งลิงก์โดยตรง (URL แบบเต็ม) และลิงก์ภายใน (URL แบบย่อ) หากคุณใช้ลิงก์โดยตรงที่มี URL แบบเต็ม (เช่น https://yourstore.com/collections/summer) ระบบจะนำลูกค้าไปยัง URL ดังกล่าวโดยไม่คำนึงถึงตลาดที่ลูกค้าเลือกไว้
วิธีแก้ไข
เพื่อให้แน่ใจว่าลิงก์ของคุณทำงานสอดคล้องกับภูมิภาคและให้ลูกค้าอยู่ในตลาดที่เลือกไว้ โปรดใช้ลิงก์ภายในที่ขึ้นต้นด้วย / แทนที่จะใช้ URL แบบเต็ม
- ลิงก์โดยตรง (ไม่สอดคล้องกับภูมิภาค):
https://yourstore.com/collections/summer - ลิงก์ภายใน (สอดคล้องกับภูมิภาค):
/collections/summer
หากต้องการอัปเดตลิงก์ที่มีอยู่ ให้ทำดังนี้
- ในส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่สินค้า คอลเลกชัน หน้า หรือบล็อกโพสต์ที่คุณต้องการอัปเดตลิงก์
- ในเครื่องมือแก้ไข Rich Text ให้คลิกปุ่ม แก้ไขโค้ด เพื่อดู HTML
- ค้นหาลิงก์ใดๆ ที่ขึ้นต้นด้วย
https://และมีโดเมนร้านค้าของคุณรวมอยู่ด้วย - แทนที่ URL แบบเต็มด้วยรูปแบบ URL แบบย่อ ตัวอย่างเช่น เปลี่ยน
https://yourstore.com/pages/aboutเป็น/pages/about - คลิกบันทึก
หากคุณมีสินค้า คอลเลกชัน บล็อก หรือหน้าจำนวนมากที่ต้องอัปเดต คุณสามารถส่งออกรายการเหล่านั้นเป็นไฟล์ CSV ค้นหาโดเมนของคุณหรือ http เพื่อระบุลิงก์โดยตรง อัปเดตให้เป็นลิงก์ภายใน แล้วจึงนำเข้าไฟล์ CSV ที่อัปเดตแล้วกลับไปยังร้านค้าของคุณ