เริ่มต้นใช้งาน

Design Controller ให้เว็บ WordPress มีหน้าจอเดียวสำหรับระบบดีไซน์ หน้านี้พาคุณจากไฟล์ zip ไปจนถึงการเผยแพร่ครั้งแรก ซึ่งตั้งใจให้ไม่เปลี่ยนอะไรเลย แล้วต่อด้วยงานที่คุณจะทำทุกสัปดาห์

ติดตั้ง

1. ตัวฟรี: ติดตั้งจาก WordPress.org หรืออัปโหลด design-controller-x.y.z.zip ที่ ปลั๊กอิน → เพิ่มปลั๊กอินใหม่ → อัปโหลดปลั๊กอิน Pro: ดาวน์โหลด design-controller-pro-x.y.z.zip จากหน้าบัญชีแล้วอัปโหลด แบบเดียวกัน ติดตั้งทับตัวฟรีได้เลย โฟลเดอร์เดียวกัน slug เดียวกัน
2. เปิดใช้งาน ต้องการ WordPress 6.5 ขึ้นไปและ PHP 7.4 ขึ้นไป
3. ไปที่ รูปแบบเว็บ (Appearance) → Design Controller

ตัวช่วยสามขั้น ไม่มีอะไรเปลี่ยน

1. อ่านค่าปัจจุบัน ระบบอ่านสีและฟอนต์ที่ธีม (Flatsome, Global Styles) และ Elementor ใช้อยู่ แล้วแสดงเป็นตารางพร้อมบอกว่าแต่ละค่ามาจากไหน ยังไม่มีอะไรถูกเปลี่ยน
2. ฟอนต์ ถ้าเว็บโหลด Google Fonts จะเสนอให้โฮสต์บนเซิร์ฟเวอร์ของคุณเอง เร็วขึ้น ตัด subset ไทย/ละติน และไม่ส่งข้อมูลผู้เข้าชมไป Google
3. ยืนยัน สร้างดีไซน์และเผยแพร่ตามค่าเดิม เว็บยังเหมือนเดิมทุกประการ

ตั้งแต่นี้ไป ทุกอย่างเรื่องดีไซน์แก้ที่หน้านี้หน้าเดียว

หน้าจอ

• ซ้าย: แผงต่าง ๆ ได้แก่ ภาพรวม, ตัวอักษร, สี, ระยะห่าง, รูปทรง, คอมโพเนนต์, ฟอนต์, ชุดสำเร็จรูป, ตรวจสุขภาพ, ตั้งค่า
• กลาง: ตัวอย่างเว็บจริง เลือกหน้าและอุปกรณ์ได้ที่แถบบน ทุกการปรับเห็นผลทันที
• ขวา: ตัวควบคุมของแผงที่เลือก

ป้ายที่แถบบนบอกสถานะ: เผยแพร่แล้ว / ร่าง ● (มีการแก้ที่ยังไม่เผยแพร่) / กำลังบันทึก… ร่างบันทึกอัตโนมัติ ปิดแท็บแล้วกลับมาก็ยังอยู่ ใช้ ↶ ↷ (Ctrl+Z / Shift+Ctrl+Z) ย้อนกลับได้

งานที่ทำบ่อย

เปลี่ยนฟอนต์ ตัวอักษร → ฟอนต์ → กดที่บทบาท (หัวข้อ / เนื้อหา / UI / โค้ด) → เลือกจาก ติดตั้งแล้ว หรือ Google (ไทย) → ใช้ฟอนต์นี้ ฟอนต์จาก Google จะถูกดาวน์โหลดครั้งเดียว แล้วโฮสต์บนเซิร์ฟเวอร์ของคุณ ตัด subset ตามสคริปต์ ต้องการฟอนต์ไทยตัวหนึ่งกับฟอนต์ละตินอีกตัว ให้เปิด จับคู่กับฟอนต์ละตินแยกต่างหาก

เปลี่ยนสี สี → แบรนด์ → กดสีหลัก → เลือกจาก hex, สไลเดอร์ หรือดูดสีจากหน้าจอ เฉดอ่อน/เข้ม ลำดับสีกลาง และสีข้อความบนปุ่มคำนวณให้อัตโนมัติ ตารางตรวจความต่างสีบอกว่าแต่ละคู่ อ่านง่ายพอ (AA) หรือไม่ พร้อมปุ่ม ปรับให้ผ่าน AA

ปุ่ม ช่องกรอก การ์ด เมนู คอมโพเนนต์ → เปิดสวิตช์ ให้ Design Controller จัดการ… ของคอมโพเนนต์ที่ต้องการ (ปิด = ธีมจัดการเองเหมือนเดิม) → ปรับพื้นหลัง ตัวอักษร รัศมี และระยะขอบ โดยอ้างจาก token ("เหมือนกับ สีหลัก") หรือกำหนดเอง

เผยแพร่ กด เผยแพร่ → กล่องสรุปว่าจะเปลี่ยนอะไรบ้าง → ยืนยัน → เว็บเปลี่ยนทันที และล้าง แคชให้ถ้ามีปลั๊กอินแคช ย้อนกลับ: เพิ่มเติม → ประวัติ → เลือกเวอร์ชัน → กู้คืนเป็นร่าง → เผยแพร่

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

ตรวจสุขภาพ ตรวจ 12 ข้อ เช่น ฟอนต์โหลดซ้ำ งบฟอนต์ contrast ระยะบรรทัดไทย ค่าตายตัวใน Additional CSS แคชค้าง ข้อที่แก้ได้อย่างปลอดภัยมีปุ่ม แก้ให้ ซึ่งเขียนลงร่างของคุณเท่านั้น ดูใน preview ก่อนแล้วค่อยเผยแพร่

Pro: ไลเซนส์และอัปเดต

ปลั๊กอินฟรีใช้งานได้ครบและไม่มีอะไรล็อก Pro เป็น build แยกที่เพิ่มการเชื่อมต่อ Flatsome / UX Builder และ Elementor, กฎสำหรับทีม, ชุดแบรนด์ของคุณเอง, การนำเข้าจาก Tokens Studio, ซัพพอร์ตแบบเร่งด่วน และอัปเดตอัตโนมัติ

ไปที่ รูปแบบเว็บ → Design Controller → ตั้งค่า → ไลเซนส์ วางคีย์จากอีเมลยืนยันการซื้อ (DCT-XXXX-XXXX-XXXX-XXXX) แล้วกด เปิดใช้งาน จากนั้นอัปเดตจะแสดงในหน้า ปลั๊กอิน ตามปกติ ปลั๊กอินติดต่อเซิร์ฟเวอร์ของเราไม่เกินวันละสองครั้ง

ไลเซนส์แบบไซต์เดียวใช้ได้ทีละหนึ่งเว็บ จะย้ายไปเว็บใหม่ ให้กด ยกเลิกการใช้งาน ที่เว็บเดิมก่อน หรือคืน seat จากหน้าบัญชี แล้วค่อยเปิดใช้งานที่เว็บใหม่

ถ้าไลเซนส์หมดอายุ หรือติดต่อเซิร์ฟเวอร์ไม่ได้เกิน 14 วัน เว็บของคุณไม่เปลี่ยน bridge ล็อก และชุดที่บันทึกไว้ยังทำงานตามที่เผยแพร่ไว้ทุกอย่าง สิ่งที่หยุดรอคือส่วนที่ต้องใช้ไลเซนส์ ได้แก่ การแก้การตั้งค่า Pro การบันทึกหรือลบชุด การนำเข้าจาก Tokens Studio และอัปเดต จนกว่าจะเปิด ใช้งานอีกครั้ง สถานะแสดงเฉพาะในแท็บไลเซนส์ ไม่มีการแจ้งเตือนรบกวน

ถอนการติดตั้ง

ปิดใช้งานแล้วเว็บกลับเป็นเหมือนเดิมทันที เพราะ Design Controller ไม่เคยเขียนทับการตั้งค่าของธีม ของ Elementor หรือของ WordPress เอง ถ้าต้องการลบข้อมูลถาวร: ตั้งค่า → ถอนการติดตั้ง → เปิด ลบข้อมูลทั้งหมดเมื่อลบปลั๊กอิน และแยกต่างหากสำหรับฟอนต์ที่ติดตั้งผ่าน Design Controller เพราะ Site Editor อาจใช้อยู่ → แล้วลบปลั๊กอินตามปกติ