การใช้งาน Shortcodes



การใช้งาน Shortcodes

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

  1. Login เข้าใช้งาน Webedit ด้วย Username และ Password ที่ทาง Ecomsiam ได้จัดส่งให้
  2. ไปยังเว็บเพจที่ต้องการจัดทำ โดยไปที่เครื่องมือ "เพิ่มเว็บเพจ" หรือ "แก้ไขเว็บเพจ"
  3. คลิก  "Row setting"
  4. คลิก "Insert Shortcodes"
  5. จะมีแถบหน้าต่างใหม่ขึ้นมา โดยให้เลือกรูปแบบการวาง layout ได้ตามต้องการ
  6. ทำการแก้ไขข้อมูลใน Layout
  7. คลิก"Save change"

ตัวอย่างการใช้งาน Shortcodes

1. ไปยังเว็บเพจที่ต้องการจัดทำ โดยไปที่เครื่องมือ "เพิ่มเว็บเพจ" เพื่อสร้างหน้าเว็บเพจใหม่ หรือ ไปที่ "แก้ไขเว็บเพจ" เพื่อแก้ไขหน้าเว็บเพจเดิมที่จัดทำไว้แล้ว
2. คลิก "Row setting" 

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes

3. จะมี Pop up ขึ้นมา คลิก "Insert Shortcodes"

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes



4.คลิกเลือกรูปแบบ Shorcodes ที่ต้องการใช้งาน

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes



วิธีการใส่รูปภาพใน shortcodes

1. คลิกที่กรอบรูปภาพให้ขึ้นสีน้ำเงิน และคลิกที่เครื่องมือ "รูปภาพ" 

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes

2.คลิก "เปิดหน้าต่างจัดการไฟล์อัพโหลด"

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes



วิธีการใส่รูปภาพใน shortcodes

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

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes

2. เลือกรูปภาพจากคอมพิวเตอร์และคลิก "เปิด" 

3. คลิก "อัปโหลดไฟล์"

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes



4. คลิกชื่อไฟล์รูปที่ทำการอัปโหลดในช่องซ้ายมือ

5. คลิก "Link"

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes

6. ตรวจสอบรูปภาพที่เลือกในช่อง "ดูหน้าเอกสารตัวอย่าง" 

7. ใส่คำอธิบายรูปในช่อง "คำประกอบรูปภาพ"

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes



8. ลบความกว้างของรูปภาพ

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes

9. คลิกแถบ "ขั้นสูง" ตรวจสอบในช่องคลาสของไฟล์กำหนดลักษณะแสดงผล จะต้องระบุ "img-responsive"

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes



10. คลิก "ตกลง"

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes

11. ใส่รูปภาพให้ครบตามที่ต้องการ จากนั้นคลิก "Save change" 

คู่มือเว็บไซต์สำเร็จรูป ninenic - การใช้งาน Shortcodes

เพจที่เกี่ยวข้อง