สวัสดีครับ ผมมิวจาก taxcount เอง วันนี้ขอชวนคุณมานั่งจัดเมนูบนหัวเว็บ taxcount quick กันครับ
ลองนึกภาพแบบนี้ครับ เช้าวันจันทร์คุณเปิดหลังบ้านแล้วนึกขึ้นได้ว่า "เราเพิ่งเปิดบริการจดทะเบียน VAT เพิ่ม อยากให้ลูกค้าที่เข้ามาออกใบกำกับภาษีเห็นเมนูนี้ด้วย" หรือบางทีก็แค่อยากย้ายเมนู "ติดต่อเรา" ขึ้นมาให้เด่นกว่าเดิม งานพวกนี้ไม่ต้องแก้โค้ดเลยครับ ทำได้เองจากหน้า "Menu" ในหลังบ้าน ผมจะพาคุณทำไปทีละขั้นครับ
หมายเหตุ: ถ้ายังไม่เคยเข้าหลังบ้านมาก่อน แนะนำให้อ่าน คู่มือผู้ดูแลระบบ taxcount quick: เข้าสู่ระบบและภาพรวม Dashboard ก่อนนะครับ จะได้เห็นภาพรวมทั้งระบบก่อนลงรายละเอียด
ทำความเข้าใจหน้ารายการเมนูก่อน
เริ่มจากกดเมนู Menu ที่ sidebar ด้านซ้ายครับ คุณจะเจอหน้ารายการเมนูที่แสดงเป็น โครงต้นไม้ 2 ระดับ คือมีเมนูหลักอยู่ชั้นบน และเมนูย่อยเยื้องเข้าไปอยู่ข้างใต้
ในแต่ละแถวจะมีข้อมูลให้คุณดูครบครับ ลองไล่ทีละช่อง
| สิ่งที่เห็นในแถว | ความหมาย |
|---|---|
| จุดสถานะ | เขียว = เปิดใช้งาน (ลูกค้าเห็นบนหน้าบ้าน), เทา = ปิดอยู่ |
| ชื่อ TH / EN | ชื่อเมนูทั้งภาษาไทยและอังกฤษ |
| URL | ลิงก์ปลายทางเมื่อคลิกเมนูนั้น |
| order | ตัวเลขบอกลำดับการแสดงผล |
| ปุ่ม ↑ ↓ | ใช้เลื่อนเมนูขึ้น-ลงเพื่อจัดลำดับ |
| แก้ไข / ลบ | เข้าฟอร์มแก้ไข หรือลบเมนูทิ้ง |
แค่หน้ารายการนี้หน้าเดียว คุณก็มองออกแล้วครับว่าตอนนี้หน้าบ้านมีเมนูอะไรบ้าง อันไหนเปิด อันไหนปิด และเรียงลำดับยังไง
กฎเหล็ก 3 ข้อของเมนู taxcount quick
ก่อนจะลงมือสร้าง ขอให้คุณจำกติกา 3 ข้อนี้ไว้ก่อนนะครับ เพราะมันคือหัวใจที่ทำให้เมนูทำงานถูกต้อง
- รองรับสูงสุด 2 ระดับเท่านั้น — มีเมนูหลัก และเมนูย่อยใต้เมนูหลักได้ แต่ไม่มีเมนูย่อยของย่อยอีกชั้นครับ
- เมนูหลักที่เว้น URL ว่าง = ตัวเปิด dropdown — ถ้าเป็นเมนูหลัก (Top Level) แล้วคุณไม่ใส่ URL มันจะกลายเป็นหัวข้อที่กดแล้วกาง dropdown ลงมา ดังนั้นต้องมีเมนูย่อยอยู่ข้างใต้ด้วยเสมอ ไม่งั้นกดแล้วจะว่างเปล่าครับ
- เมนูย่อยต้องมี URL เสมอ — เพราะเมนูย่อยมีหน้าที่พาลูกค้าไปหน้าปลายทาง ถ้าไม่มี URL ก็ไม่รู้จะพาไปไหนครับ
จำ 3 ข้อนี้ไว้แล้วที่เหลือจะง่ายมากครับ
รู้จักช่องต่าง ๆ ในฟอร์มสร้างเมนู
พอกดปุ่มสร้าง (หรือกดแก้ไขเมนูเดิม) คุณจะเข้าสู่ฟอร์มครับ หน้าตาประมาณนี้
มาดูกันทีละช่องครับ
| ช่อง | ใส่อะไร |
|---|---|
| Parent | เลือก "(Top Level)" ถ้าจะให้เป็นเมนูหลัก หรือเลือกชื่อเมนูหลักที่จะให้เป็น "แม่" ถ้าจะทำเป็นเมนูย่อย |
| เปิดใช้งาน (active) | ติ๊กเพื่อให้แสดงบนหน้าบ้าน ถ้าไม่ติ๊กจะซ่อนไว้ (จุดสถานะเป็นสีเทา) |
| Label TH | ชื่อเมนูภาษาไทย (จำเป็น) |
| Label EN | ชื่อเมนูภาษาอังกฤษ (จำเป็น) |
| URL | ลิงก์ปลายทาง (เว้นว่างได้เฉพาะเมนูหลักที่จะทำเป็น dropdown) |
| Link target | `_self` เปิดในหน้าต่างเดิม / `_blank` เปิดแท็บใหม่ |
| Icon | ใส่ emoji เช่น 🧾 หรือชื่อ class ของไอคอนก็ได้ |
เคล็ดเล็ก ๆ ครับ: ถ้าลิงก์ไปเว็บภายนอก แนะนำให้เลือก `_blank` เพื่อให้เปิดแท็บใหม่ ลูกค้าจะได้ไม่หลุดออกจากหน้า taxcount quick ครับ
ลงมือสร้างเมนูหลักแบบมีลิงก์ (แบบง่ายสุด)
เริ่มจากเคสง่ายที่สุดก่อนครับ สมมติคุณอยากเพิ่มเมนู "ติดต่อเรา" ที่กดแล้วพาไปหน้าติดต่อโดยตรง
- กดปุ่มสร้างเมนูใหม่
- ที่ช่อง Parent เลือก (Top Level)
- ติ๊ก เปิดใช้งาน
- Label TH ใส่ `ติดต่อเรา`, Label EN ใส่ `Contact`
- URL ใส่ลิงก์หน้าติดต่อ เช่น `/contact`
- Link target เลือก `_self`
- Icon จะใส่ 📞 ไว้ก็ได้ครับ
- กดบันทึก
เท่านี้เมนู "ติดต่อเรา" ก็จะไปโผล่บนหัวเว็บแล้วครับ กดแล้วพาไปหน้าปลายทางทันที
สร้างเมนูแบบ dropdown สองระดับ (เคสใช้งานจริง)
ทีนี้มาถึงพระเอกของบทความครับ การทำเมนูหลักที่กางเป็น dropdown ลงมา เหมาะมากเวลาคุณมีบริการหลายอย่างแล้วอยากจัดกลุ่มให้เป็นระเบียบ
สมมติคุณอยากทำเมนู "บริการ" ที่กดแล้วกางลงมาเป็น "จดทะเบียน VAT" กับ "ที่ปรึกษาภาษี" ครับ ทำตามนี้
ขั้นที่ 1 — สร้างเมนูหลัก "บริการ" แบบไม่มีลิงก์
- กดสร้างเมนูใหม่
- Parent เลือก (Top Level)
- ติ๊ก เปิดใช้งาน
- Label TH ใส่ `บริการ`, Label EN ใส่ `Services`
- URL — สำคัญมากครับ ให้ เว้นว่างไว้ เพราะเราจะให้ตัวนี้เป็นหัว dropdown
- กดบันทึก
ตอนนี้เมนู "บริการ" ยังกดไม่กางอะไรนะครับ เพราะยังไม่มีลูก เดี๋ยวเราไปเพิ่มในขั้นถัดไป
ขั้นที่ 2 — เพิ่มเมนูย่อยใต้ "บริการ"
- กดสร้างเมนูใหม่อีกครั้ง
- Parent คราวนี้เลือก บริการ (เมนูหลักที่เพิ่งสร้าง)
- ติ๊ก เปิดใช้งาน
- Label TH ใส่ `จดทะเบียน VAT`, Label EN ใส่ `VAT Registration`
- URL ใส่ลิงก์ปลายทาง เช่น `/services/vat-registration` (เมนูย่อยต้องมี URL เสมอครับ)
- กดบันทึก
- ทำซ้ำขั้นตอนเดิมเพื่อเพิ่ม `ที่ปรึกษาภาษี` / `Tax Consulting` อีกอันหนึ่ง
พอเสร็จแล้ว กลับไปดูที่หน้ารายการครับ คุณจะเห็น "บริการ" เป็นเมนูหลัก และมี "จดทะเบียน VAT" กับ "ที่ปรึกษาภาษี" เยื้องเข้าไปอยู่ข้างใต้ พอไปดูหน้าบ้านจริง กดที่ "บริการ" ก็จะกาง dropdown ลงมาให้เลือกครับ
จัดลำดับเมนูให้เรียงอย่างที่ต้องการ
อยากให้ "บริการ" อยู่ก่อน "ติดต่อเรา" ใช่ไหมครับ ง่ายมาก ที่หน้ารายการเมนู แต่ละแถวจะมีปุ่มลูกศร ↑ และ ↓ อยู่
- กด ↑ เพื่อเลื่อนเมนูนั้นขึ้นไปก่อนหน้า
- กด ↓ เพื่อเลื่อนลงไปทีหลัง
ตัวเลข order จะปรับตามให้อัตโนมัติ และเมนูย่อยก็จัดลำดับภายในกลุ่มของตัวเองได้เหมือนกันครับ ค่อย ๆ กดเลื่อนจนได้ลำดับที่ถูกใจ แล้วเปิดหน้าบ้านเช็กอีกทีก็เรียบร้อยครับ
ปิดเมนูชั่วคราวโดยไม่ต้องลบ
บางทีคุณอาจอยากพักเมนูบางอันไว้ก่อน เช่น บริการที่ยังไม่พร้อมเปิด แต่ไม่อยากลบทิ้งเพราะเดี๋ยวต้องมาสร้างใหม่ วิธีที่แนะนำคือเข้าไปแก้ไขเมนูนั้นแล้ว เอาเครื่องหมายติ๊ก "เปิดใช้งาน" ออก ครับ
เมนูจะหายไปจากหน้าบ้านทันที แต่ยังอยู่ในหลังบ้าน (จุดสถานะจะเป็นสีเทา) พอพร้อมเมื่อไหร่ค่อยกลับมาติ๊กเปิดใหม่ได้เลย ไม่ต้องกรอกข้อมูลซ้ำครับ
เช็กลิสต์ก่อนปิดงาน
ก่อนจะปล่อยให้ลูกค้าเห็น ลองไล่เช็กตามนี้สักนิดนะครับ
| รายการ | เช็ก |
|---|---|
| เมนูหลักที่ทำ dropdown เว้น URL ว่างแล้วใช่ไหม | ☐ |
| เมนูย่อยทุกอันมี URL ครบไหม | ☐ |
| Label TH และ EN กรอกครบทั้งคู่ไหม | ☐ |
| ลิงก์ภายนอกตั้ง target เป็น `_blank` แล้วหรือยัง | ☐ |
| ลำดับเมนูเรียงอย่างที่ต้องการแล้วไหม | ☐ |
| เปิดหน้าบ้านจริงทดสอบกดเมนูแล้วใช่ไหม | ☐ |
สรุป
มาถึงตรงนี้คุณก็จัดเมนูนำทางของ taxcount quick ได้ครบทุกแบบแล้วครับ ตั้งแต่เมนูหลักธรรมดา เมนูแบบ dropdown สองระดับ การจัดลำดับด้วยปุ่มลูกศร ไปจนถึงการปิดเมนูชั่วคราวโดยไม่ต้องลบ
หัวใจจริง ๆ มีแค่ 3 ข้อครับ คือ ระบบรองรับ 2 ระดับ, เมนูหลักที่เว้น URL ว่างจะกลายเป็น dropdown (ต้องมีลูกข้างใต้), และเมนูย่อยต้องมี URL เสมอ จำสามข้อนี้ได้ก็จัดเมนูได้สบายแล้วครับ
ถ้าลองทำตามแล้วยังติดตรงไหน หรืออยากวางโครงเมนูให้ลูกค้าใช้งานง่ายขึ้น ทักมาคุยกับทีม taxcount ได้เลยนะครับ 🙂