Skip to content
คู่มือการใช้งาน

Link Tree Mode YAML

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

Link Tree ประกอบได้ 3 ส่วนคือ

- label: Instagram
- icon: brand-instagram
- url: https://instagram.com/mystore

โดย

  • Label คือ ข้อความที่ต้องการให้ปรากฏใต้รูปไอคอนเมื่อแสดงผลในหน้าเว็บไซต์
  • Icon คือ ชื่อไอคอนที่ไปเลือกมาจากเว็บ Tabler โดยคัดลอก ชื่อของไอคอน (Icon name) มากรอกในส่วนนี้
  • URL คือ Link URL ที่ต้องการเชื่อมไปหา อาจจะเป็นชื่อเว็บของตัวร้านใน IG, Shopee และยังสามารถเป็นเบอร์โทรศัพท์ และอีเมลได้อีกด้วย

ข้อสังเกต

  • หน้าจอมือถือเล็ก-ใหญ่ อาจจะแสดงผลไอคอนลิงค์ได้ไม่เท่ากัน หากร้านค้ามีรายการไอคอนลิงค์จำนวนมาก หรือเกินกว่า 6 รายการ ลูกค้าสามารถเลื่อนดูรายการทั้งหมดจากซ้ายไปขวาได้อย่างอิสระ
  • ไฟล์ข้อความที่จัดเก็บข้อมูลติดต่อร้านค้าสำหรับแสดงในหน้าแรก จำเป็นต้องเขียนในรูปแบบ YAML เท่านั้น มิฉะนั้นระบบจะไม่สามารถประมวลผลได้
  • เมื่อแก้ไขข้อมูล ผู้ดูแลร้านต้องทำการอัปเดตระบบด้วยตนเอง 2 ครั้ง คือ
    • คลิก บันทึก(Save) เพื่อบันทึกข้อมูลในระบบหลังบ้าน
    • คลิกปุ่ม รีเฟสหน้าร้าน เพื่ออัปเดตหน้าเว็บไซต์

วิธีการตั้งค่า

:::tip[Shortcut] Wordpress → โปรไฟล์ร้านค้า → Link Tree YAML :::

  1. ไปที่หน้าตั้งค่า Wordpress เลือกเมนู โปรไฟล์ร้านค้า ไปที่กล่อง Link Tree YAML
  2. ทำการแก้ไขข้อมูล หากแก้ไขไม่ถูกต้องระบบจะปรากฏกล่องข้อความสีแดงแจ้งเตือนปัญหาที่ตรวจพบ
  3. ตรวจสอบความสอดคล้องและความถูกต้องของข้อมูลก่อน บันทึก
  4. คลิก รีเฟรสหน้าร้าน ที่อยู่มุมขวาบน เพื่ออัปเดตเว็บไซต์
  5. คลิก ดูหน้าร้าน เพื่อเปิดหน้าเว็บไซต์ และตรวจสอบว่าลิงก์แต่ละรายการทำงานได้อย่างถูกต้องและเชื่อมต่อไปยังปลายทางที่ตั้งค่าไว้

การจัดลำดับข้อมูลในกล่อง YAML

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

การปรับลำดับข้อมูลในกล่อง YAML ทำได้ง่ายๆ ด้วยการแก้ไขและสลับตำแหน่งรายการข้อมูลด้วยมือ

การตั้งค่าลิงก์เป้าหมาย

  1. เลือกช่องทางการติดต่อที่ต้องการแก้ไข
  2. แก้ไขค่าที่บรรทัด URL โดยวางลิงก์เป้าหมายใหม่ที่ต้องการ

การเปลี่ยนรูปไอคอน

  1. เลือกช่องทางการติดต่อที่ต้องการแก้ไข
  2. คัดลอกชื่อไอคอนใหม่จากเว็บไซต์ Tabler Icons
  3. วางชื่อไอคอนใหม่แทนที่ชื่อเดิมที่บรรทัด icon (ชื่อไอคอนจะระบุไว้ชัดเจนใต้แต่ละไอคอนในเว็บไซต์)

ข้อความที่ปรากฎใต้ไอคอน

  1. เลือกช่องทางการติดต่อที่ต้องการแก้ไข
  2. กรอกชื่อข้อความที่ต้องการ (ไทย/อังกฤษ) ที่บรรทัด Label