Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 9: การสร้างเมนูนำทาง (Navigation Menus) ใน WordPress

1. เมนูนำทาง (Navigation Menus) คืออะไร?

เมนูนำทางเป็นส่วนสำคัญของเว็บไซต์ที่ช่วยให้ผู้ใช้งานเข้าถึงหน้าหรือเนื้อหาสำคัญได้อย่างง่ายดาย เมนูสามารถวางไว้ในตำแหน่งต่าง ๆ เช่น Header, Sidebar, หรือ Footer ขึ้นอยู่กับธีมที่ใช้งาน

2. การสร้างเมนูใหม่

ขั้นตอนการสร้างเมนู

  1. ไปที่ “Appearance” > “Menus”
  2. คลิก “Create a new menu”
  3. ตั้งชื่อเมนู เช่น “Main Menu” หรือ “Footer Menu”
  4. คลิก “Create Menu”

3. การเพิ่มลิงก์ลงในเมนู

3.1 การเพิ่มลิงก์ไปยังหน้า (Pages)

  1. ในหน้า “Edit Menus” ให้เลือก “Pages”
  2. เลือกหน้าที่ต้องการเพิ่ม เช่น Home, About Us
  3. คลิก “Add to Menu”

3.2 การเพิ่มลิงก์ไปยังโพสต์ (Posts)

  1. คลิกแท็บ “Posts”
  2. เลือกโพสต์ที่ต้องการเพิ่มและคลิก “Add to Menu”

3.3 การเพิ่มลิงก์กำหนดเอง (Custom Links)

  1. คลิกแท็บ “Custom Links”
  2. กรอก URL และข้อความที่จะใช้แสดงในเมนู
  3. คลิก “Add to Menu”

3.4 การเพิ่มหมวดหมู่ (Categories)

  1. คลิกแท็บ “Categories”
  2. เลือกหมวดหมู่ที่ต้องการเพิ่ม
  3. คลิก “Add to Menu”

4. การจัดการโครงสร้างเมนู

4.1 การเรียงลำดับลิงก์

  • ลากและวางรายการในเมนูเพื่อเปลี่ยนลำดับ

4.2 การสร้างเมนูแบบ Dropdown

  • ลากรายการไปไว้ด้านใต้และเยื้องไปทางขวาเล็กน้อยเพื่อสร้างเมนูย่อย

5. การตั้งค่าตำแหน่งเมนู

ขั้นตอนการตั้งค่าตำแหน่ง

  1. ในหน้า “Edit Menus” ไปที่ “Menu Settings”
  2. เลือกตำแหน่งเมนูที่ต้องการ เช่น Primary, Footer, หรือ Mobile Menu
  3. คลิก “Save Menu”

6. การใช้ Widgets สำหรับเมนู

การเพิ่มเมนูใน Sidebar หรือ Footer

  1. ไปที่ “Appearance” > “Widgets”
  2. ลาก “Navigation Menu” ไปยังพื้นที่ Widget ที่ต้องการ
  3. เลือกเมนูที่ต้องการแสดง และคลิก “Save”

7. การปรับแต่งเมนูด้วย Customizer

  1. ไปที่ “Appearance” > “Customize”
  2. เลือก “Menus”
  3. เลือกเมนูที่ต้องการแก้ไขและปรับแต่ง
  4. คลิก “Publish” เพื่อบันทึกการเปลี่ยนแปลง

8. เคล็ดลับในการสร้างเมนู

  1. ใช้ชื่อเมนูที่เข้าใจง่าย เช่น Home, Services, Contact
  2. จัดระเบียบลำดับลิงก์ตามความสำคัญของเนื้อหา
  3. หลีกเลี่ยงการใช้เมนูที่ซับซ้อนเกินไปเพื่อไม่ให้ผู้ใช้สับสน
  4. ใช้เมนูแบบ Responsive เพื่อรองรับการใช้งานบนมือถือ

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการสร้างและปรับแต่งเมนูนำทางใน WordPress ซึ่งเป็นส่วนสำคัญในการช่วยให้ผู้ใช้งานเข้าถึงเนื้อหาได้ง่ายและรวดเร็ว ในบทถัดไป คุณจะได้เรียนรู้เกี่ยวกับการใช้งาน Widgets เพื่อเพิ่มความสามารถและการแสดงผลบนเว็บไซต์ของคุณ!