หน้าจอเดียวคุมดีไซน์ทั้งเว็บ
ไทยและละติน โดยไม่ต้องเขียน CSS
Design Controller ให้เว็บ WordPress มีที่เดียวสำหรับระบบดีไซน์ ทั้งฟอนต์ สเกลตัวอักษร สี ระยะห่าง รูปทรง และสไตล์ของคอมโพเนนต์ เปลี่ยนค่าแล้วดูเว็บจริงเปลี่ยนตามในตัวอย่างสด จากนั้นเผยแพร่ ไม่มีอะไรถูกเขียนลง Customizer, Site Editor หรือ page builder ปิดใช้งานเมื่อไหร่ทุกอย่างกลับเป็นเหมือนเดิม
ทำไมสีแบรนด์สีเดียวถึงไปอยู่ห้าที่
เว็บ WordPress เก็บดีไซน์ไว้ตามที่แต่ละเครื่องมือถนัด ทั้ง Customizer, Site Editor, page builder, WooCommerce และ stylesheet ที่ใครสักคนเขียนไว้เมื่อหลายปีก่อน สีเดียวกัน ฟอนต์เดียวกัน ซ้ำห้าที่ และทุกครั้งที่จะเปลี่ยนก็ต้องไล่หาให้ครบ
ค่าเดียว ห้าสำเนา
สีแบรนด์อยู่ทั้งใน theme options, Global Styles, kit ของ builder และ Additional CSS แก้ที่หนึ่ง อีกสี่ที่ยังเป็นค่าเก่า
ฟอนต์โหลดซ้ำสองรอบ
ธีมเรียก Google Fonts, builder เรียกซ้ำอีกรอบ, ปลั๊กอินเพิ่มสำเนาที่สาม ผู้เข้าชมจ่ายทุกรอบ แล้วตัวอักษรไทยก็ยังหล่นไปใช้ฟอนต์สำรองที่ไม่มีใครเลือก
ไม่มีใครกล้าแตะ
ทุกการตั้งค่าคือความเสี่ยงเมื่อไม่มีใครรู้ว่ามีอะไรอ่านค่านั้นอยู่อีก ดีไซน์จึงแช่แข็ง และเรื่องเล็ก ๆ ต้องรอนักพัฒนา
เอกสารเดียว ไปถึงทุกที่ตอน render
ดีไซน์ของคุณอยู่ในเอกสารเดียวตามฟอร์แมต W3C Design Tokens แล้วไปถึงเว็บตอนที่หน้าถูก render: เป็น CSS custom properties, เป็น preset ใน theme.json สำหรับ block editor และเป็นค่าที่ธีม builder และ WooCommerce อ่านอยู่แล้ว ไม่มีการคัดลอกลงที่เก็บอื่น จึงไม่มีอะไรตกรุ่น
Custom properties ทุกที่
ทุก token เป็นตัวแปร --dc-* บนหน้าเว็บ ผ่าน inline style ชิ้นเดียวขนาดราวสองกิโลไบต์ ให้ stylesheet ธีม หรือบล็อกไหนก็ใช้ได้
ตัวแก้ไขตามไปด้วย
Block editor ได้สี ฟอนต์ และขนาดของคุณเป็น preset ใน theme.json ส่วนปุ่ม ช่องกรอก และการ์ดของ WooCommerce ตามคอมโพเนนต์ที่คุณเลือกดูแล
ย้อนกลับได้โดยโครงสร้าง
Design Controller ไม่เคยเขียนลง Customizer, Site Editor, kit ของ Elementor หรือ Additional CSS ปิดใช้งานแล้วเว็บกลับเป็นเหมือนเดิมทุกประการ
สามขั้นตอน และเว็บยังหน้าตาเหมือนเดิมจนกว่าคุณจะเปลี่ยนเอง
ขั้นตอนเริ่มต้นอ่านค่าที่เว็บใช้อยู่แล้วเผยแพร่ตามนั้น การเผยแพร่ครั้งแรกจึงไม่เปลี่ยนอะไรเลยโดยตั้งใจ
ติดตั้งแล้วเปิด
อัปโหลดปลั๊กอินแล้วไปที่ รูปแบบเว็บ → Design Controller ตัวช่วยจะอ่านสีและฟอนต์ที่ธีมกับ builder ใช้อยู่ พร้อมบอกว่าแต่ละค่ามาจากไหน
โฮสต์ฟอนต์เอง
ถ้าเว็บโหลด Google Fonts ตัวช่วยจะเสนอให้โฮสต์บนเซิร์ฟเวอร์ของคุณเอง ตัด subset ตามสคริปต์ ให้ WordPress พิมพ์เอง ผู้เข้าชมไม่ต้องติดต่อผู้ให้บริการฟอนต์อีก
ดูตัวอย่าง แล้วเผยแพร่
เปลี่ยนค่าที่แผงขวาแล้วดูเว็บจริงเปลี่ยนตรงกลางทันที ร่างบันทึกอัตโนมัติ การเผยแพร่แสดงว่าจะเปลี่ยนอะไรบ้าง และทุกเวอร์ชันที่เผยแพร่แล้วกู้คืนได้
ทำไมต้อง Design Controller
ตัวอักษรไทยมาก่อน
ทุกตัวอย่างแสดงข้อความไทยพร้อมสระและวรรณยุกต์ที่มักพังก่อน มีคำแนะนำ line-height สำหรับไทย ตัวกันการใส่ letter-spacing กับอักษรไทย การจับคู่ฟอนต์ไทย + ละตินแยกตามสคริปต์ และป้าย "ไทย ✓" บนทุกแหล่งฟอนต์
ฟอนต์โฮสต์เอง ไม่มี layout shift
เลือกฟอนต์จาก Google Fonts หรือ Bunny Fonts แล้วระบบดาวน์โหลดครั้งเดียวลง Font Library ของ WordPress เป็น woff2 ตัด subset ไทยและละติน preload ไม่เกินสองไฟล์ พร้อมฟอนต์สำรองที่ปรับ metric ให้ตรงกัน ข้อความจึงไม่กระโดด
แทบไม่มีภาระบนหน้าเว็บ
inline style ชิ้นเดียวที่ wp_head ราว 2 KB หลัง gzip ไม่มี JavaScript บนหน้าเว็บ ไม่มี query ฐานข้อมูลเพิ่ม วัดจริงทุกรุ่น ตัวเลขอยู่ด้านล่าง
ตัวอย่างสดและการแก้ไขที่ปลอดภัย
สามแผง: แผงเมนู ตัวอย่างเว็บจริงบนเดสก์ท็อป แท็บเล็ต หรือมือถือ และตัวควบคุม ร่างบันทึกอัตโนมัติ ย้อนกลับ/ทำซ้ำได้ กล่องเผยแพร่ที่ไล่ทุกการเปลี่ยนแปลง และประวัติสำหรับกู้คืน
คอมโพเนนต์แบบสูตรสำเร็จ
ปุ่ม ลิงก์ ช่องกรอก การ์ด และเมนู ให้ตาม token ของคุณบน selector ของธีมเองได้ เปิดทีละคอมโพเนนต์ ที่เหลือปล่อยให้ธีมดูแล
Design Doctor
สิบสองรายการตรวจพร้อมวิธีแก้ที่ปลอดภัยและย้อนกลับได้: ฟอนต์โหลดซ้ำ ฟอนต์ไม่มีอักษรไทย contrast ต่ำกว่า WCAG AA ตัวอักษรเนื้อหาเล็กเกิน ค่าตายตัวใน Additional CSS แคชค้าง และอื่น ๆ
ดูของจริง
สร้างมาเพื่อข้อความไทยก่อน
เครื่องมือดีไซน์ส่วนใหญ่มองภาษาไทยเป็นเรื่องทีหลัง คือฟอนต์ละตินกับฟอนต์สำรองที่ไม่มีใครเลือก Design Controller เริ่มจากสคริปต์ที่พังก่อน
ตัวอย่างเป็นภาษาไทย
ทุกฟอนต์ ขนาด และ line-height แสดงบนข้อความไทยที่มีสระซ้อนและวรรณยุกต์ อะไรที่จะถูกตัดบนเว็บจริงจะถูกตัดในตัวอย่างให้เห็นก่อน
คำแนะนำที่รู้จักภาษาไทย
line-height อย่างน้อย 1.6 สำหรับเนื้อหาไทย ตัวกันการใส่ letter-spacing กับอักษรไทย และขนาดเนื้อหาขั้นต่ำ เป็นคำแนะนำ ไม่ใช่การบังคับ
จับคู่แยกตามสคริปต์
ฟอนต์ไทยหนึ่งตระกูลกับฟอนต์ละตินหนึ่งตระกูลในสแตกเดียว ต่างตัวรับผิดชอบอักษรของตัวเองผ่าน subset แบบ unicode-range ชื่อสินค้ากับประโยคไทยจึงอยู่บรรทัดเดียวกันด้วยฟอนต์ที่เหมาะกับแต่ละฝั่ง
ไทย ✓ ทุกแหล่งฟอนต์
Google Fonts, Bunny Fonts และไฟล์ที่อัปโหลดถูกตรวจว่ามีอักษรไทยก่อนถูกเสนอให้เลือก และ Doctor จะเตือนเมื่อฟอนต์ไหนไม่มี
Design Doctor: สิบสองรายการตรวจ สิบสองวิธีแก้ที่ปลอดภัย
Doctor อ่านเว็บแบบที่นักพัฒนา front-end ที่รอบคอบจะอ่าน และทุกวิธีแก้ที่เสนอย้อนกลับได้ เพราะแตะแค่ร่าง การตั้งค่า และแคช ไม่แตะธีม
- ฟอนต์โหลดซ้ำ
- งบฟอนต์
- ฟอนต์หาย
- contrast ต่ำกว่า WCAG AA
- line-height ภาษาไทย
- letter-spacing กับอักษรไทย
- ฟอนต์ที่ไม่มีอักษรไทย
- ตัวอักษรเนื้อหาเล็กเกิน
- ค่าที่ Site Editor ทับไว้
- ค่าตายตัวใน Additional CSS
- สุขภาพของ bridge
- CSS ค้างและการล้างแคช
รันได้จากแผง ผ่าน REST หรือ WP-CLI จึงเข้ากับ pipeline การ deploy ได้เท่า ๆ กับบ่ายวันอังคาร
วัดจริง ไม่ใช่สัญญา
ทุกตัวเลขด้านล่างมาจากเอกสาร PERFORMANCE ของปลั๊กอินเอง วัดทุกรุ่นพร้อมวิธีวัดที่เขียนกำกับไว้
query เพิ่ม 0, สคริปต์ 0
หน้าเว็บอ่าน option ที่ autoload หนึ่งตัวแล้วพิมพ์ inline style หนึ่งชิ้น มีเทสต์ PHPUnit นับ query ทุกรุ่น และแดงทันทีถ้าเกินศูนย์
−0.09 ms ต่อหน้า
wp_head() ที่มี Design Controller เทียบกับ wp_head() ที่ถอด hook ออก อย่างละหกสิบครั้ง ส่วนต่างอยู่ใน noise ของการวัดเอง
token 1.8 KB, recipe 1.1 KB
ขนาดหลัง gzip ของ CSS แบบ inline เมื่อเปิดทุกคอมโพเนนต์ เทียบกับงบอย่างละ 4 KB ที่ build บังคับ
preload ฟอนต์ 2 ไฟล์, ฟอนต์รวม 76 KB
คู่ฟอนต์ไทย + ละตินสองน้ำหนักส่งเป็น woff2 แบบ subset แปดไฟล์ และ preload เฉพาะฟอนต์เนื้อหา Doctor จะเตือนก่อนงบหมด
สำหรับนักพัฒนา
ทุกอย่างที่แอปทำได้ ทำได้โดยไม่ต้องเปิดแอป
token ใน stylesheet ของคุณ
var(--dc-color-brand-primary, #fallback) ใน CSS ไหนก็ได้ และ dctl_token(), dctl_var(), dctl_font_stack() ใน PHP
Hooks, REST, WP-CLI
hook dctl_* ที่มีเอกสาร REST API ใต้ design-controller/v1 และคำสั่ง wp dctl สำหรับเผยแพร่ ชุดสำเร็จรูป Doctor และไลเซนส์
นำเข้าและส่งออก
DTCG JSON เข้าและออกแบบตรงทุกไบต์ ไฟล์ CSS variables และการนำเข้าจาก Tokens Studio (Figma) ใน Pro ล็อก token และกำหนดบทบาทที่แก้ได้ ถอนการติดตั้งแบบสะอาดเมื่อเลือกเอง
ฟรีกับ Pro
ทุกอย่างในตัวฟรีครบและไม่มีอะไรถูกล็อก Pro เป็น build แยกที่เพิ่มการเชื่อมต่อและเครื่องมือสำหรับทีมตามตารางด้านล่าง พร้อมซัพพอร์ตแบบเร่งด่วนและอัปเดตอัตโนมัติ
| Free | Pro | |
|---|---|---|
| Design token: ฟอนต์ สเกลตัวอักษร สี ระยะห่าง รูปทรง คอมโพเนนต์ | ✓ | ✓ |
| ตัวอย่างสดของเว็บจริง บันทึกอัตโนมัติ ย้อนกลับ/ทำซ้ำ เผยแพร่พร้อม diff ประวัติ | ✓ | ✓ |
| ฟอนต์โฮสต์เองพร้อม subset ไทย/ละติน การจับคู่ และฟอนต์สำรองที่ไม่เกิด CLS | ✓ | ✓ |
| Bridge สำหรับ block editor, WooCommerce และแคชหน้าเว็บ | ✓ | ✓ |
| Design Doctor 12 รายการตรวจพร้อมวิธีแก้ที่ปลอดภัย | ✓ | ✓ |
| ชุดสำเร็จรูปในตัว ส่งออก DTCG JSON และ CSS, style guide, REST, WP-CLI, hooks | ✓ | ✓ |
| การเชื่อมต่อ Flatsome / UX Builder | — | ✓ |
| การเชื่อมต่อ Elementor | — | ✓ |
| Guardrail สำหรับทีม: ล็อก token และกำหนดบทบาทที่แก้ได้ | — | ✓ |
| ชุดแบรนด์ของคุณเอง (บันทึกชุดสำเร็จรูป) | — | ✓ |
| นำเข้าจาก Tokens Studio (Figma) | — | ✓ |
| ซัพพอร์ตแบบเร่งด่วนและอัปเดตอัตโนมัติ | — | ✓ |
พูดตรง ๆ: ถ้าธีมของคุณอ่าน CSS custom properties และไม่ได้ใช้ page builder ตัวฟรีก็คือทั้งผลิตภัณฑ์แล้ว Pro คุ้มค่าบนเว็บ Flatsome และ Elementor ที่ theme options และสี/ฟอนต์ส่วนกลางของ builder ตาม token ของคุณตอน render แทนการคัดลอกด้วยมือ และกับทีมที่ให้บรรณาธิการเปลี่ยนฟอนต์ได้แต่ห้ามแตะสีแบรนด์ที่ล็อกไว้
ตารางเดียวกับที่ปลั๊กอินตัวฟรีแสดงในแท็บ "Upgrade to Pro"
เหมาะกับใคร
เอเจนซีที่ทำ Flatsome หรือ Elementor
เว็บลูกค้ามาพร้อม theme options, kit ของ builder และ Additional CSS ที่ขัดกันเอง รวมเป็นเอกสารเดียวที่เชื่อมตอน render แล้วการรีดีไซน์ครั้งถัดไปคือชุดสำเร็จรูปหนึ่งชุด
ธุรกิจและสำนักพิมพ์ไทย
ข้อความไทยที่จัดวางถูกต้องตั้งแต่วันแรก: ฟอนต์ที่มีอักษรไทย line-height ที่พ้นวรรณยุกต์ และไม่มี request ไป Google Fonts ต่อผู้เข้าชม
ทีมที่ส่งมอบเว็บให้คนอื่นดูแล
บรรณาธิการเปลี่ยนฟอนต์และขนาดได้ในช่วงที่ปลอดภัย token ที่ล็อกอยู่กับผู้ดูแลระบบ และทุกเวอร์ชันที่เผยแพร่แล้วกู้คืนได้
ราคา
ตลอดชีพ
- การเชื่อมต่อ Flatsome / UX Builder
- การเชื่อมต่อ Elementor
- Guardrail สำหรับทีม: ล็อก token และกำหนดบทบาทที่แก้ได้
- ชุดแบรนด์ของคุณเอง (บันทึกชุดสำเร็จรูป)
- นำเข้าจาก Tokens Studio (Figma)
- ซัพพอร์ตแบบเร่งด่วนและอัปเดตอัตโนมัติ
- อัปเดต + ซัพพอร์ตตลอดไป
- จ่ายครั้งเดียว จบ ไม่ต้องคิดถึงอีก
เร็ว ๆ นี้
คำถามที่พบบ่อย
เปิดใช้งานแล้วเว็บจะหน้าตาเปลี่ยนไหม
ไม่ ขั้นตอนเริ่มต้นอ่านค่าที่ธีมและ page builder ใช้อยู่แล้วเผยแพร่ตามนั้น เว็บจึงเหมือนเดิมทุกประการจนกว่าคุณจะตั้งใจเปลี่ยนอะไร
ปิดใช้งานหรือถอนการติดตั้งแล้วเกิดอะไรขึ้น
ปิดใช้งานแล้วเว็บกลับเป็นเหมือนเดิมทันที เพราะ Design Controller ไม่เคยแก้ค่าของธีม ของ Elementor หรือของ WordPress เอง การถอนการติดตั้งจะลบข้อมูลก็ต่อเมื่อคุณเลือกไว้ที่ ตั้งค่า → ถอนการติดตั้ง ส่วนฟอนต์ที่ติดตั้งผ่านปลั๊กอินจะถามแยกอีกครั้ง เพราะ Site Editor อาจใช้อยู่
ใช้กับธีมและ page builder ของฉันได้ไหม
custom properties และ preset ใน theme.json ใช้ได้กับทุกธีม theme options ของ Flatsome และสี/ฟอนต์ส่วนกลางของ Elementor เชื่อมตอน render ใน Pro ส่วนปุ่ม ช่องกรอก และการ์ดของ WooCommerce ตามคอมโพเนนต์ที่คุณดูแลได้ทั้งสอง build แคชหน้าเว็บถูกล้างหลังเผยแพร่ทุกครั้ง
จะเขียน CSS ของตัวเองที่ไหน
ที่ Additional CSS ของ WordPress เหมือนเดิม มันพิมพ์หลัง Design Controller และชนะเสมอ อ้าง token (var(--dc-font-family-body)) แทนการคัดลอกค่า CSS ของคุณจะตามดีไซน์ไปด้วย
มีการส่งข้อมูลให้บุคคลที่สามไหม
เฉพาะตอนติดตั้งฟอนต์จาก Google Fonts หรือ Bunny Fonts ซึ่งเซิร์ฟเวอร์ของคุณดึงไฟล์ฟอนต์มาครั้งเดียว ผู้เข้าชมไม่ต้องติดต่อผู้ให้บริการฟอนต์เลยสำหรับฟอนต์ที่โฮสต์เอง
ถ้าไลเซนส์ Pro หมดอายุจะเป็นอย่างไร
บนเว็บของคุณไม่มีอะไรเปลี่ยน bridge, ล็อก และชุดที่บันทึกไว้ทำงานตามที่เผยแพร่ไว้ทุกอย่าง มีแค่อัปเดตอัตโนมัติหยุดและแก้การตั้งค่า Pro ไม่ได้จนกว่าไลเซนส์จะกลับมาใช้งานได้ สถานะแสดงเฉพาะในแท็บไลเซนส์ ไม่มีการแจ้งเตือนรบกวน