การทำเว็บไซต์สายวิชาการ วิทยาศาสตร์ หรือการเขียนบล็อกคำนวณทางสถิติบน WordPress ปัญหาคลาสสิกที่พบบ่อยคือ การพิมพ์สมการคณิตศาสตร์ ให้แสดงผลสวยงาม คมชัด และไม่แตกเมื่อซูมบนหน้าจอขนาดต่าง ๆ
การใช้ภาพตัดแปะมักส่งผลเสียต่อความเร็วหน้าเว็บและ SEO ทางออกมาตรฐานสากลคือการใช้ LaTeX Syntax แล้วแปลงผลผ่านเอนจินยอดนิยมอย่าง MathJax หรือ KaTeX ซึ่งปัจจุบันมีปลั๊กอิน WordPress ให้เลือกใช้งานตามความเหมาะสม
KaTeX vs MathJax: เลือกเทคโนโลยีไหนก่อนตัดสินใจ?
- KaTeX (พัฒนาโดย Khan Academy): ออกแบบมาเพื่อเน้น ความเร็วสูงสุด (Performance) การเรนเดอร์ทำได้รวดเร็วมาก ไม่เกิดอาการหน้ากระตุกหรือข้อความเด้ง (Layout Shift) แต่สัญลักษณ์หรือคำสั่งเฉพาะทางบางอย่างของ LaTeX อาจยังไม่ครอบคลุมเท่า MathJax
- MathJax: เป็นมาตรฐานดั้งเดิมที่ รองรับไวยากรณ์ LaTeX ได้สมบูรณ์แบบที่สุด มีฟังก์ชันการเข้าถึง (Accessibility) รองรับการอ่านสูตรสำหรับผู้พิการทางสายตา แต่ขนาดไฟล์สคริปต์ใหญ่กว่า ทำให้ใช้เวลาประมวลผลบนเบราว์เซอร์มากกว่า KaTeX เล็กน้อย
3 ปลั๊กอิน WordPress แนะนำ
KaTeX (โดย Tom Churchman)
หากใช้ Gutenberg (Block Editor) เป็นหลัก ปลั๊กอินตัวนี้คือตัวเลือกที่ตอบโจทย์ที่สุด
- จุดเด่น: มี Block เฉพาะของ KaTeX ให้ลากวาง พิมพ์สมการแล้วเห็นพรีวิวแบบ Real-time ทันทีในหน้า Editor โดยไม่ต้องสลับไปดูหน้าพรีวิวเว็บ
- วิธีใช้งาน:
- ใช้ผ่าน KaTeX Block โดยตรง
- ใช้ Shortcode
[katex]x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}[/katex]สำหรับพื้นที่ที่ไม่มีบล็อก
- เหมาะสำหรับ: เว็บไซต์ที่เน้นคะแนน Core Web Vitals และชอบพิมพ์งานผ่าน Block Editor
Simple Mathjax
ตัวเลือกสำหรับคนที่ต้องการความเรียบง่ายระดับ “ติดตั้งแล้วพิมพ์ได้เลย”
- จุดเด่น: ไม่ต้องตั้งค่าระบบให้ยุ่งยาก เพียงแค่เปิดใช้งาน ปลั๊กอินจะแปลงสัญลักษณ์ดอลลาร์ซายน์ (
$) ให้กลายเป็นสูตรคณิตศาสตร์ทันทีเหมือนเขียน LaTeX ปกติ - วิธีใช้งาน:
- เขียนในบรรทัด (Inline):
$E = mc^2$ - เขียนแยกบรรทัดกึ่งกลาง (Display Mode):
$$\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$
- เขียนในบรรทัด (Inline):
- เหมาะสำหรับ: ผู้ที่มีเอกสาร LaTeX อยู่แล้วและต้องการคัดลอกข้อความมาวางใน WordPress ได้ทันทีโดยไม่ต้องแก้แท็ก
MathJax-LaTeX
ปลั๊กอินระดับคลาสสิกที่ได้รับความนิยมยาวนาน เหมาะกับผู้ดูแลเว็บที่ต้องการควบคุมการโหลดสคริปต์
- จุดเด่น: รองรับทั้งการโหลดสคริปต์ผ่าน CDN สาธารณะ และการโฮสต์ไฟล์ไลบรารีไว้บนเซิร์ฟเวอร์ของตัวเอง เพื่อหลีกเลี่ยงปัญหา CDN ภายนอกล่ม
- วิธีใช้งาน: สามารถตั้งค่าให้ทำงานทั้งเว็บ หรือกำหนดให้โหลดสคริปต์เฉพาะบทความที่มีการใส่ Shortcode
[mathjax]เพื่อประหยัด Bandwidth ของหน้าเว็บอื่นที่ไม่มีสูตร - เหมาะสำหรับ: เว็บไซต์ขนาดใหญ่ที่มีบทความผสมกันระหว่างบทความทั่วไปและบทความวิชาการ
ตารางเปรียบเทียบเพื่อการตัดสินใจ
| คุณสมบัติ | KaTeX (Tom Churchman) | Simple Mathjax | MathJax-LaTeX |
| ความเร็วในการประมวลผล | เร็วมาก | ปานกลาง | ปานกลาง |
| การรองรับ LaTeX ขั้นสูง | ปานกลาง – สูง | สูงมาก | สูงมาก |
| Gutenberg Block | มีบล็อกพร้อม Live Preview | ไม่มี (พิมพ์ลงใน Text ได้เลย) | ไม่มี |
| รูปแบบการพิมพ์ที่รองรับ | Block / Shortcode | $ ... $ และ $$ ... $$ | Shortcode / MathJax Syntax |
หากเน้นความเร็ว โหลดไว ไม่หน่วงหน้าเว็บ และใช้งาน Gutenberg เป็นประจำ แนะนำให้เริ่มต้นด้วย KaTeX แต่ถ้าต้องการความสมบูรณ์ของไวยากรณ์ หรือจำเป็นต้องยกชุดโค้ด LaTeX จากงานวิจัยมาวางตรง ๆ โดยใช้เครื่องหมาย $...$ แนะนำให้เลือกใช้ Simple Mathjax จะสะดวกต่อการจัดการเนื้อหาที่สุด
อ่านเพิ่มเติม