คอร์สออนไลน์ Ecommerce Unit8

หน่วยที่  8  การจัดการสื่อมัลติมีเดียและการเชื่อมโยงเว็บไซต์

หัวข้อเรื่อง(Topics)
8.1  การสร้างสื่อมัลติมีเดียด้วย Smart Slider 3
8.2  การใส่สื่อมัลติมีเดียหน้าเว็บเพจ
8.3  การใส่วิดีโอจาก YouTube ในเว็บเพจ
8.4  การสร้างเมนูเว็บไซต์ (Menu)
8.5  การเชื่อมโยงเว็บไซต์ (Link)
8.6  การทดสอบการทำงานของร้านค้าออนไลน์และการเชื่อมโยงเว็บไซต์

แนวคิดสำคัญ (Main Idea)

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

สมรรถนะย่อย (Element of Competency)

1. แสดงความรู้ความเข้าใจเกี่ยวกับการสร้างและการใช้งานสื่อมัลติมีเดียบนเว็บไซต์
2. ปฏิบัติการสร้างและจัดการสื่อมัลติมีเดีย เมนู และการเชื่อมโยงเว็บไซต์
3. แสดงเจตคติที่ดี มีความรับผิดชอบ และความรอบคอบในการสร้างและทดสอบเว็บไซต์

จุดประสงค์เชิงพฤติกรรม (Behavioral Objectives)

1. อธิบายหลักการและความสำคัญของการใช้สื่อมัลติมีเดียบนเว็บไซต์ได้อย่างถูกต้อง
2. สร้างสื่อมัลติมีเดียด้วยปลั๊กอิน Smart Slider 3 ได้ตามขั้นตอนที่กำหนด
3. ใส่สื่อมัลติมีเดียและวิดีโอจาก YouTube ลงในเว็บเพจได้อย่างถูกต้อง
4. สร้างและจัดการเมนูเว็บไซต์ (Menu) ได้อย่างเป็นระบบ
5. เชื่อมโยงเว็บไซต์ด้วยลิงก์ (Link) ได้อย่างเหมาะสมและใช้งานได้จริง
6. ทดสอบการทำงานของเว็บไซต์ เมนู และลิงก์ได้อย่างครบถ้วน
7. แสดงเจตคติที่ดี มีความรับผิดชอบ และความรอบคอบในการปฏิบัติงานด้านเว็บไซต์

ผลลัพธ์การเรียนรู้ (Learning Outcomes)

            แสดงความรู้และทักษะในการสร้างและจัดการสื่อมัลติมีเดีย การสร้างเมนูเว็บไซต์ การเชื่อมโยงเว็บไซต์ และการทดสอบการทำงานของเว็บไซต์ได้ถูกต้องตามขั้นตอนการปฏิบัติงาน

8.1  การสร้างสื่อมัลติมีเดียด้วย Smart Slider 3

Smart Slider 3 เป็นปลั๊กอินสำหรับ WordPress ที่ใช้ในการสร้างสื่อมัลติมีเดียในรูปแบบสไลด์ (Slider) เช่น ภาพนิ่ง ข้อความ ภาพเคลื่อนไหว และวิดีโอ ซึ่งช่วยเพิ่มความน่าสนใจและความสวยงามให้กับหน้าเว็บไซต์ โดยเฉพาะเว็บไซต์ธุรกิจดิจิทัลและร้านค้าออนไลน์ เพราะสามารถใช้สไลด์นำเสนอสินค้า โปรโมชั่น หรือข้อมูลสำคัญได้อย่างโดดเด่น

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

      8.1.1 ขั้นตอนการสร้างสื่อมัลติมีเดียด้วย Smart Slider 3

1. เข้าสู่ระบบหลังบ้าน WordPress เลือกเมนูปลั๊กอิน  > Add New Plugin
2. ที่ช่องค้นหาพิมพ์ชื่อปลั๊กอิน Smart Slider 3 โปรแกรมจะทำการค้นหาปลั๊กอินตามคีย์เวิร์ดที่ระบุ      
3. เมื่อค้นหาพบแล้ว คลิกปุ่ม Install Now ที่ปลั๊กอิน Smart Slider 3

รูปที่ 8.1 แสดงหน้าจอการติดตั้งปลั๊กอิน Smart Slider 3

• เมื่อติดตั้งเสร็จ คลิกปุ่ม Activate เพื่อเปิดการใช้งานปลั๊กอิน จะแสดงเมนู Smart Slider ด้านข้าง
• คลิกเมนู Smart Slider 3  > Dashboard  คลิกปุ่ม Go to dashboard

รูปที่ 8.2 แสดงหน้าจอ Welcome to Smart Slider 3  

• แสดงหน้าจอ Dashboard ของ Smart Slider คลิก New Project

รูปที่ 8.3 แสดงหน้าจอ Dashboard ของ Smart Slider

   7. จะแสดงหน้าจอเลือกรูปแบบการสร้างให้เลือก คือ Create a New Project สร้างโปรเจกต์ใหม่ด้วยการออกแบบเอง Start with a Template การเริ่มต้นโปรเจกต์ใหม่โดยใช้เทมเพลต คลิกปุ่ม Create a New Project เพื่อเริ่มสร้างโปรเจกต์ใหม่ด้วยการออกแบบเอง

รูปที่ 8.4 แสดงหน้าจอเลือกรูปแบบการสร้าง

     8. แสดงหน้าจอการสร้างโปรเจ็กต์ใหม่ Create new project เลือกที่ Project Type เลือก Slider     ที่ Slide Type เลือก Simple ที่ Settings ขนาดกว้าง 1200 px สูง 600 px เลือก Layout เป็น  Full width หรือ Block กดปุ่ม CREATE

รูปที่ 8.5 แสดงหน้าจอ Create new project

          9. คลิกปุ่ม Add slide เพื่อเพิ่มรูปภาพให้กับสไลด์

รูปที่ 8.6 แสดงหน้าจอการเพิ่มรูปภาพให้กับสไลด์

          10. อัปโหลดรูปภาพที่ได้ออกแบบไว้ ที่คลังสื่อ จำนวน 3 รูปภาพไม่ควรใส่รูปภาพสไลด์มากเกินไปเนื่องจากการแสดงผลเว็บไซต์จะช้า คลิกปุ่ม image เลือกรูปภาพที่ต้องการ

รูปที่ 8.7 แสดงหน้าจอการเพิ่มรูปภาพให้กับสไลด์

1. ที่หน้าจอ Size กำหนดขนาดพื้นที่แสดงผลของสไลด์บนหน้าเว็บไซต์ เพื่อให้สื่อมัลติมีเดียแสดงผลได้สวยงาม เหมาะสมกับอุปกรณ์ที่ใช้งาน และไม่ทำให้เนื้อหาบิดเบี้ยวหรือหลุดจากหน้าจอ Layout เลือกการตั้งค่าเป็น Boxed

รูปที่ 8.8 แสดงหน้าจอ Size

          12. ที่หน้าจอ Autopay การตั้งค่า Autoplay เป็นการกำหนดให้สไลด์เปลี่ยนเองโดยอัตโนมัติช่วยให้เว็บไซต์ดูมีความเคลื่อนไหว เหมาะสำหรับการนำเสนอภาพสินค้า โปรโมชั่น หรือข้อมูลสำคัญโดยไม่ต้องให้ผู้ใช้งานคลิกเอง สามารถกำหนดส่วนต่าง ๆ เพิ่มเติมได้ดังนี้
              – Slide Duration – 8000 ms คือ ระยะเวลาที่สไลด์หนึ่งแสดงผลก่อนจะเปลี่ยนไปยังสไลด์ถัดไปค่า 8000 ms เท่ากับ 8 วินาที ซึ่งเป็นระยะเวลาที่เหมาะสมให้ผู้ใช้งานมีเวลาอ่านข้อความและดูภาพได้อย่างชัดเจน
   – Stop on Click คือ การหยุดการเลื่อนสไลด์อัตโนมัติเมื่อผู้ใช้งานคลิกที่สไลด์ หากเปิดใช้งานเมื่อผู้ใช้คลิกสไลด์ ระบบจะหยุด Autoplay เพื่อให้ผู้ใช้ดูเนื้อหาได้โดยไม่ถูกรบกวน
   – Stop on Mouse – Off คือ การหยุด Autoplay เมื่อเลื่อนเมาส์ไปวางบนสไลด์
             – Stop on Media คือ การหยุด Autoplay เมื่อมีการเล่นสื่อ เช่น วิดีโอภายในสไลด์ช่วยป้องกันไม่ให้สไลด์เปลี่ยนขณะผู้ใช้งานกำลังดูวิดีโอ
            – Resume on Click คือ การให้ Autoplay กลับมาเลื่อนต่อเมื่อผู้ใช้งานคลิกอีกครั้ง
            – Resume on Mouse – Off คือ การเริ่ม Autoplay ใหม่เมื่อเลื่อนเมาส์ออกจากสไลด์
            – Resume on Media การให้ Autoplay เริ่มทำงานต่อเมื่อสื่อ เช่น วิดีโอ เล่นจบแล้วช่วยให้การแสดงผลสไลด์ต่อเนื่องและไม่รบกวนการรับชมสื่อ
            – Button ปุ่มควบคุมการทำงานของ Autoplay เช่น ปุ่มหยุดและปุ่มเล่นช่วยให้ผู้ใช้งานสามารถควบคุมการเลื่อนสไลด์ได้ด้วยตนเอง เพิ่มความสะดวกในการใช้งานเว็บไซต์

รูปที่ 8.9 แสดงหน้าจอเปิด Autopay  

            13. เมื่อตั้งค่าสไลด์เรียบร้อยแล้วคลิกปุ่ม Save เพื่อบันทึกการเปลี่ยนแปลง คลิกปุ่ม preview เพื่อดูการแสดงผลสไลด์

รูปที่ 8.10 แสดงหน้าจอการบันทึกสไลด์

 14. แสดงหน้า Preview คลิกปุ่ม CLOSE เพื่อปิดการ Preview

รูปที่ 8.11 แสดงหน้าจอ Preview  

8.2  การใส่สื่อมัลติมีเดียหน้าเว็บเพจ

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

      หลังจากสร้างสไลด์ด้วยปลั๊กอิน Smart Slider 3 เสร็จเรียบร้อยแล้ว ผู้พัฒนาเว็บไซต์สามารถนำสไลด์ดังกล่าวมาแสดงบนหน้าแรกของเว็บไซต์ได้ โดยระบบจะสร้าง Shortcodeหรือบล็อก (Block) สำหรับนำไปแทรกในหน้าเว็บเพจ เมื่อแทรกสไลด์ลงในหน้าแรก สไลด์จะช่วยนำเสนอสินค้า โปรโมชั่น หรือข้อมูลสำคัญของร้านค้าในรูปแบบที่สวยงามและน่าสนใจ ขั้นตอนการนำสไลด์มาใส่หน้าแรกของเว็บไซต์ มีดังนี้

1. เข้าสู่ระบบหลังบ้าน WordPress เลือกเมนูหน้า  > Add Page

รูปที่ 8.12 แสดงการเลือกหน้า

• พิมพ์ชื่อเว็บเพจ Home เพื่อกำหนดให้เป็นหน้าแรกของเว็บไซต์
•  คลิก + ที่บล็อก พิมพ์ Smart  เพื่อค้นหาบล็อก Smart Slider 3

รูปที่ 8.13 แสดงการเพิ่มชื่อเว็บเพจและค้นหาบล็อก Smart Slider 3

• แสดงบล็อก Smart Slider คลิกปุ่ม Select  Slider

รูปที่ 8.14 แสดงบล็อก Smart Slider

• แสดงสไลด์ที่ได้สร้างไว้เลือกสไลด์ที่ต้องการ คลิกปุ่ม insert

รูปที่ 8.15 แสดงสไลด์ที่ได้สร้างไว้

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

รูปที่ 8.16 แสดงสไลด์ที่หน้าเว็บเพจ

• แสดงผลหน้าเว็บเพจที่หน้าร้านค้าออนไลน์

รูปที่ 8.17 แสดงผลหน้าเว็บเพจที่หน้าร้านค้าออนไลน์

      8.2.1 การตั้งค่าให้แสดงหน้าแรกของร้านค้า

              เพื่อให้หน้าเว็บที่ใส่สื่อมัลติมีเดียแสดงเป็นหน้าแรกของร้านค้าออนไลน์ สามารถตั้งค่าได้ดังนี้

1. เข้าเมนู การตั้งค่า > การอ่าน
2. เลือกการแสดงหน้าแรกเป็น หน้าตายตัว
3. กำหนดหน้าเว็บที่สร้างไว้เป็น Homepage
4. บันทึกการตั้งค่า และทดสอบการแสดงผลเว็บไซต์

รูปที่ 8.18 แสดงหน้าจอการตั้งค่าการอ่าน

8.3  การใส่วิดีโอจาก YouTube ในเว็บเพจ

      การใส่วิดีโอจาก YouTube ในเว็บเพจ เป็นการนำสื่อวิดีโอจากแหล่งภายนอกมาแสดงบนหน้าเว็บไซต์       เพื่อช่วยนำเสนอข้อมูลสินค้า บริการ วิธีการใช้งาน หรือสื่อประชาสัมพันธ์ต่าง ๆ ได้อย่างชัดเจนและน่าสนใจ วิดีโอช่วยเพิ่มความเข้าใจให้กับผู้เข้าชมเว็บไซต์ และช่วยดึงดูดความสนใจได้ดีกว่าการใช้ข้อความเพียงอย่างเดียว       ในระบบ WordPress ผู้พัฒนาเว็บไซต์สามารถใส่วิดีโอจาก YouTube ได้อย่างสะดวก โดยไม่จำเป็นต้องอัปโหลดไฟล์วิดีโอเข้าเว็บไซต์โดยตรง ซึ่งช่วยประหยัดพื้นที่จัดเก็บข้อมูล และทำให้เว็บไซต์โหลดได้รวดเร็วขึ้น

8.3.1 วิธีการใส่วิดีโอจาก YouTube ในเว็บเพจ

1. เข้าเว็บไซต์ YouTube และเลือกวิดีโอที่ต้องการคัดลอกลิงก์ของวิดีโอ YouTube จากแถบที่อยู่เว็บเบราว์เซอร์ หรือจากเมนูแชร์

รูปที่ 8.19 แสดงหน้าจอการคัดลอกลิงก์ของวิดีโอ YouTube

• เข้าสู่ระบบ WordPress ไปที่เมนู หน้า > เลือก Add page เพิ่มชื่อเพจ VDO
• ที่ + ค้นหาบล็อก YouTube  คลิก YouTube Embed

รูปที่ 8.20 แสดงหน้าจอการเข้าเว็บไซต์ YouTube และเลือกวิดีโอที่ต้องการ

• วางลิงก์วิดีโอ YouTube ลงในบล็อกที่กำหนด กดปุ่ม ฝัง

รูปที่ 8.21 แสดงหน้าจอการวางลิงก์วิดีโอ YouTube ลงในบล็อก

• คลิกเผยแพร่และตรวจสอบการแสดงผลของวิดีโอบนหน้าเว็บเพจ

รูปที่ 8.22 แสดงหน้าจอวิดีโอบนหน้าเว็บเพจ

8.3.2 ข้อควรคำนึงในการใส่วิดีโอจาก YouTube

1. ความเหมาะสมของเนื้อหาวิดีโอ ควรเลือกวิดีโอที่มีเนื้อหาเหมาะสมกับเว็บไซต์ กลุ่มเป้าหมายไม่ขัดต่อศีลธรรม กฎหมาย หรือวัตถุประสงค์ของเว็บไซต์
2. ลิขสิทธิ์ของวิดีโอ ควรใช้วิดีโอที่เจ้าของอนุญาตให้เผยแพร่หรือฝังในเว็บไซต์ได้ ไม่ควรทำการดาวน์โหลดวิดีโอมาอัปโหลดใหม่โดยไม่ได้รับอนุญาต
3. การตั้งค่าการแสดงผลวิดีโอ ควรกำหนดขนาดวิดีโอให้เหมาะสมกับหน้าเว็บ และรองรับการแสดงผลบนอุปกรณ์ต่าง ๆ เช่น คอมพิวเตอร์ แท็บเล็ต และโทรศัพท์มือถือ
4. ผลกระทบต่อความเร็วเว็บไซต์ การใส่วิดีโอจำนวนมากเกินไปอาจทำให้เว็บไซต์โหลดช้าลง    ควรเลือกใช้เฉพาะวิดีโอที่จำเป็น และจัดวางในตำแหน่งที่เหมาะสม
5. การเปิด–ปิดเสียงอัตโนมัติ ไม่ควรตั้งค่าให้วิดีโอเล่นอัตโนมัติพร้อมเสียง เนื่องจากอาจรบกวนผู้ใช้งานและส่งผลต่อประสบการณ์การใช้งานเว็บไซต์
6. ตำแหน่งการวางวิดีโอ ควรวางวิดีโอในตำแหน่งที่สอดคล้องกับเนื้อหา เช่น ใต้หัวข้ออธิบายสินค้า หรือหน้าแนะนำเว็บไซต์ เพื่อช่วยเสริมความเข้าใจแก่ผู้ชม
7. การทดสอบการแสดงผลก่อนเผยแพร่ ควรตรวจสอบการแสดงผลวิดีโอบนหน้าเว็บก่อนเผยแพร่เพื่อให้แน่ใจว่าวิดีโอสามารถเล่นได้ถูกต้องและไม่เกิดข้อผิดพลาด

8.3.3 ประโยชน์ของการใส่วิดีโอจาก YouTube ในเว็บเพจ

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

8.4  การสร้างเมนูเว็บไซต์ (Menu)

      เมนูเว็บไซต์ (Menu) คือ ส่วนสำคัญของเว็บไซต์ที่ใช้สำหรับแสดงรายการลิงก์ไปยังหน้าเว็บหรือส่วนต่าง ๆ ของเว็บไซต์ เช่น หน้าแรก หน้าสินค้า หน้าเกี่ยวกับเรา และหน้าติดต่อ เมนูเว็บไซต์ช่วยให้ผู้ใช้งานสามารถนำทางไปยังข้อมูลที่ต้องการได้อย่างสะดวกและรวดเร็ว ส่งผลให้เว็บไซต์ใช้งานง่ายและมีความเป็นระเบียบ สำหรับเว็บไซต์ร้านค้าออนไลน์ที่มีเมนูชัดเจนและจัดโครงสร้างอย่างเหมาะสมจะช่วยให้ลูกค้าค้นหาสินค้าได้ง่าย เพิ่มประสบการณ์การใช้งาน (User Experience) และช่วยส่งเสริมการตัดสินใจซื้อสินค้า

      8.4.1 ประเภทของเมนูเว็บไซต์

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

1. เมนูหลัก (Primary Menu / Main Menu) เป็นเมนูหลักของเว็บไซต์แสดงบริเวณส่วนหัวเว็บไซต์ใช้เชื่อมโยงไปยังหน้าสำคัญ เช่น หน้าแรก สินค้า บทความ ติดต่อเรา
   1. เมนูรอง (Secondary Menu) เป็นเมนูเสริมจากเมนูหลัก มักอยู่ด้านบนหรือใต้ Header ใช้แสดงเมนูเพิ่มเติม เช่น สมัครสมาชิก เข้าสู่ระบบ ภาษาเว็บไซต์
   1. เมนูส่วนหัว (Header Menu) เมนูที่กำหนดให้แสดงในตำแหน่ง Header ของธีม โดยธีมแต่ละแบบอาจเรียกชื่อตำแหน่งเมนูต่างกัน เช่น Top Menu, Header Menu
   1. เมนูส่วนท้ายเว็บไซต์ (Footer Menu) เมนูที่แสดงบริเวณด้านล่างของเว็บไซต์ ใช้เชื่อมโยงข้อมูลทั่วไป เช่น นโยบายความเป็นส่วนตัว เงื่อนไขการใช้งาน ช่องทางติดต่อ
   1. เมนูแบบดรอปดาวน์ (Dropdown Menu) เมนูที่มีเมนูย่อยซ้อนอยู่ใต้เมนูหลักสามารถสร้างได้จากเมนูปกติ เหมาะสำหรับจัดหมวดหมู่เนื้อหาให้เป็นระเบียบ
   1. เมนูด้านข้าง (Sidebar Menu) เมนูที่แสดงในแถบด้านข้างของเว็บไซต์ มักสร้างผ่าน Widget หรือบล็อก (Block) ใช้แสดงหมวดหมู่สินค้า หมวดหมู่บทความ
   1. เมนูบนมือถือ (Mobile Menu) เมนูที่แสดงเมื่อเปิดเว็บไซต์บนโทรศัพท์มือถือ มักอยู่ในรูปแบบเมนูแฮมเบอร์เกอร์ (☰)
   1. เมนูแบบกำหนดเอง (Custom Menu) เมนูที่ผู้ดูแลเว็บไซต์สร้างเอง สามารถเพิ่มหน้าหมวดหมู่, สินค้า หรือ URL ภายนอกได้

8.4.2 ขั้นตอนการสร้างเมนูเว็บไซต์ใน WordPress

1. เข้าสู่ระบบผู้ดูแลเว็บไซต์ WordPress เลือกเมนู รูปลักษณ์ > เมนู
2. ที่โครงสร้างเมนู ใส่ชื่อเมนู เช่น เมนูหลัก
3. การตั้งค่าเมนู เลือก Primary Menu
4. คลิกปุ่ม สร้างเมนู

รูปที่ 8.23 แสดงหน้าจอการสร้างเมนูหลัก

• ที่หน้าเพิ่มเมนูไอเทม คลิกแท็บดูทั้งหมดคลิกเลือกรายการที่ต้องการแสดงในเมนู
• คลิกปุ่ม เพิ่มลงเมนู

รูปที่ 8.24 แสดงหน้าจอหน้าเพิ่มเมนูไอเทม

• คลิกเครื่องมือ     จัดลำดับการแสดงเมนู
• คลิกปุ่ม บันทึกเมนู

รูปที่ 8.25 แสดงหน้าจอหน้าการสร้างเมนูหลัก

• คลิกที่แท็บจัดการที่อยู่ เมนูหลักจะอยู่ในตำแหน่ง Primary Menu กดปุ่มบันทึกการเปลี่ยนแปลง

รูปที่ 8.26 แสดงหน้าจอแท็บจัดการที่อยู่เมนู

              10. ตรวจสอบการแสดงผลของเมนูคลิกที่เมนูเยี่ยมชมเว็บไซต์

รูปที่ 8.27 แสดงหน้าจอการคลิกเมนูเยี่ยมชมเว็บไซต์

1. แสดงเมนูหลักส่วนหัวของเว็บไซต์

รูปที่ 8.28 แสดงหน้าเมนูหลักส่วนหัวเว็บไซต์

      8.4.3 ข้อควรคำนึงในการสร้างเมนูเว็บไซต์

1. ชื่อเมนูต้องชัดเจนและเข้าใจง่าย ควรใช้คำสั้น กระชับ สื่อความหมายตรงกับเนื้อหา เพื่อให้ผู้ใช้งานรู้ว่าคลิกแล้วจะไปหน้าใด
   1. จัดลำดับเมนูอย่างเป็นระบบ เมนูสำคัญควรอยู่ด้านหน้า เช่น หน้าแรก สินค้า เกี่ยวกับเรา ติดต่อ เพื่อให้ผู้ใช้เข้าถึงได้ง่าย
   1. จำนวนเมนูไม่ควรมากเกินไป เมนูที่มากเกินไปอาจทำให้ผู้ใช้งานสับสน ควรจัดกลุ่มเมนูย่อยแทน
   1. รองรับการใช้งานบนอุปกรณ์ต่าง ๆ เมนูควรแสดงผลได้ดี กับอุปกรณ์คอมพิวเตอร์ แท็บเล็ต และโทรศัพท์มือถือ (Responsive Menu)
   1. เชื่อมโยงไปยังหน้าที่ถูกต้อง ตรวจสอบลิงก์ที่เชื่อมโยงไปยังหน้าเว็บต่าง ๆ ของเมนูทุกเมนูให้ใช้งานได้จริงไม่มีลิงก์เสีย (Broken Link)
   1. รูปแบบเมนูควรสอดคล้องกับธีมเว็บไซต์ สี ขนาดตัวอักษร และตำแหน่งเมนูควรเข้ากับธีมเพื่อให้เว็บไซต์ดูเป็นระเบียบและสวยงาม
   1. แสดงตำแหน่งปัจจุบันของผู้ใช้งาน เมนูควรมีการเน้นหน้าที่กำลังเปิดอยู่ เพื่อให้ผู้ใช้รู้ว่ากำลังอยู่หน้าใดของเว็บไซต์

     8.4.4 ประโยชน์ของการสร้างเมนูเว็บไซต์

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

1. ช่วยให้ผู้ใช้งานเข้าถึงข้อมูลได้สะดวกและรวดเร็ว
2. ลดความสับสนในการใช้งานเว็บไซต์
3. เพิ่มประสบการณ์ที่ดีแก่ผู้ใช้งาน (User Experience)
4. ช่วยจัดระเบียบเนื้อหาเว็บไซต์อย่างเป็นระบบ
5. ส่งเสริมภาพลักษณ์ที่ดีของเว็บไซต์
6. ช่วยสนับสนุนการขายในเว็บไซต์ร้านค้าออนไลน์
7. รองรับการใช้งานบนอุปกรณ์หลากหลาย

8.5  การเชื่อมโยงเว็บไซต์ (Link)

       การเชื่อมโยงเว็บไซต์ (Link)คือ การกำหนดจุดเชื่อมต่อจากข้อความ รูปภาพ ปุ่ม หรือเมนู เพื่อพาผู้ใช้งานไปยังหน้าอื่นภายในเว็บไซต์เดียวกัน หรือไปยังเว็บไซต์ภายนอก ช่วยให้การนำทางเป็นระบบ และทำให้เว็บไซต์ใช้งานได้สะดวกยิ่งขึ้น

 8.5.1 ประเภทของการเชื่อมโยง (Link)

1. ลิงก์ภายในเว็บไซต์ (Internal Link) เชื่อมโยงไปยังหน้า (Page) บทความ (Post) สินค้า หรือหมวดหมู่ภายในเว็บไซต์เดียวกัน
2. ลิงก์ภายนอกเว็บไซต์ (External Link) เชื่อมโยงไปยังเว็บไซต์อื่น เช่น เว็บไซต์ธนาคาร ช่องทางโซเชียลมีเดีย หรือ YouTube
3. ลิงก์เมนู (Menu Link) ลิงก์ที่อยู่ในเมนูเว็บไซต์ ใช้เชื่อมโยงไปยังหน้า หมวดหมู่ สินค้า หรือ URL   ที่กำหนดเอง
4. ลิงก์ข้อความ (Text Link) ลิงก์ที่แทรกอยู่ในข้อความหรือเนื้อหาบทความ เมื่อคลิกจะพาไปยังหน้าที่เชื่อมโยงไว้
5. ลิงก์รูปภาพ (Image Link) การคลิกที่รูปภาพแล้วเชื่อมโยงไปยังหน้าเว็บหรือเว็บไซต์อื่น
6. ลิงก์ปุ่ม (Button Link) ลิงก์ที่อยู่ในรูปแบบปุ่ม เช่น ปุ่มสั่งซื้อ ปุ่มติดต่อเรา
7. ลิงก์ไฟล์ (File Link) เชื่อมโยงไปยังไฟล์ต่าง ๆ เช่น PDF รูปภาพ หรือเอกสารดาวน์โหลด

8.5.2 ขั้นตอนสร้างเว็บเพจและการเชื่อมโยง (Link)

    1. เข้าสู่ระบบผู้ดูแลเว็บไซต์ > เลือกเมนูหน้า
    2. คลิกปุ่ม Add Page เพิ่มหน้าใหม่

รูปที่ 8.29 แสดงการเพิ่มหน้าใหม่

3. ใส่ชื่อเว็บเพจ : สินค้าลดราคา
4. คลิก + เพิ่มบล็อก พิมพ์ข้อความค้นหา สินค้าลดราคา
5. เลือกบล็อก %สินค้าลดราคา

รูปที่ 8.30 แสดงการสร้างหน้าเว็บเพจสินค้าลดราคา

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

รูปที่ 8.31 แสดงการสร้างหน้าการปรับแต่งเว็บเพจสินค้าลดราคา

• แสดงที่อยู่ของหน้าเว็บเพจ คลิกที่ปุ่มคัดลอก ที่อยู่เว็บเพจเพื่อใช้ในการเชื่อมโยง

รูปที่ 8.32 แสดงการคัดลอกที่อยู่เว็บเพจ

1.  การเชื่อมโยงหน้าเว็บเพจยังเมนู สามารถไปที่เมนูควบคุม เลือกรูปลักษณ์ > เมนู ที่ด้านบนคลิกปุ่ม จัดการด้วยการดูก่อนแบบสด

รูปที่ 8.33 แสดงหน้าจอเมนู

1.  คลิกไอคอนรูปดินสอ  ที่เมนูเรื่องล่าสุด เพื่อทำการสร้างเมนูเชื่อมโยงเว็บเพจ
2.  ที่เมนูวิดเจ็ต Sidebar จะแสดงบล็อกให้แก้ไข

รูปที่ 8.34 แสดงหน้าการสร้างเมนูเชื่อมโยงเว็บเพจ

1.  ลบหัวข้อเรื่องล่าสุดออกและพิมพ์เมนูสินค้า คลิก + เพิ่มบล็อก ค้นหาลิสต์

รูปที่ 8.35  แสดงหน้าการสร้างเมนูเชื่อมโยงเว็บเพจ

                   14. ลากคลุมข้อความที่ต้องการให้เป็นลิงก์กดไอคอนรูปโซ่ 🔗 บนแถบเครื่องมือของตัวแก้ไข

                15. วางลิงก์ที่คัดลอกไว้

รูปที่ 8.36 แสดงหน้าการสร้างเมนูเชื่อมโยงเว็บเพจ

รูปที่ 8.37 แสดงหน้าการสร้างเมนูเชื่อมโยงเว็บเพจ

1. เปิดหน้าเว็บเพจในโหมดแสดงผล (View) และคลิกตรวจสอบข้อความลิงก์เชื่อมโยง

รูปที่ 8.38 แสดงหน้าการตรวจสอบเมนูลิงก์เชื่อมโยง

17. แสดงหน้าเว็บเพจที่ทำการเชื่อมโยงจากเมนูลิงก์

รูปที่ 8.39 แสดงหน้าเว็บเพจที่ทำการเชื่อมโยงจากเมนูลิงก์

8.6  การทดสอบการทำงานของร้านค้าออนไลน์และการเชื่อมโยงเว็บไซต์

การทดสอบการทำงานของร้านค้าออนไลน์และการเชื่อมโยงเว็บไซต์เป็นขั้นตอนสำคัญก่อนเปิดใช้งานร้านค้าจริง เพื่อให้มั่นใจว่าระบบร้านค้าและลิงก์ต่าง ๆ ทำงานได้ถูกต้องครบถ้วน

8.6.1 การตรวจสอบการแสดงผลหน้าเว็บไซต์และการเชื่อมโยงเว็บไซต์

              การตรวจสอบการแสดงผลหน้าเว็บไซต์และการเชื่อมโยงหน้าเว็บเพจแต่ละหน้า เช่น หน้าแรก หน้าร้านค้า หน้าสินค้า หน้าตะกร้าสินค้า และหน้าชำระเงิน ตรวจสอบการจัดวางเนื้อหา รูปภาพ และตัวอักษรว่าถูกต้องและเหมาะสมโดยเปิดโปรแกรมเว็บเบราว์เซอร์ พิมพ์ที่อยู่เว็บไซต์ localhost/mywebsite

1. ตรวจสอบการแสดงผลหน้าแรกของเว็บไซต์ คลิกลิงก์ร้านค้าเพื่อตรวจสอบการเชื่อมโยงไปยังหน้าร้านค้า

รูปที่ 8.40 แสดงหน้าแรกของเว็บไซต์

                 2. แสดงหน้าร้านค้า คลิกรายการสินค้าเพื่อตรวจสอบหน้าสินค้า

รูปที่ 8.41 แสดงหน้าร้านค้า

            3. แสดงหน้ารายการสินค้าที่เลือก ทดสอบเลือกการแสดงผลตามคุณสมบัติสีที่เลือก

รูปที่ 8.42 แสดงหน้ารายการสินค้าที่เลือก

8.6.2 การทดสอบระบบสินค้า

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

1. ทดลองเลือกสินค้ากดปุ่มหยิบสินค้าใส่ตะกร้า
2. จะแสดงแถบสีเขียวแจ้งสถานะการเพิ่มสินค้าในตะกร้าเรียบร้อย คลิกดูตะกร้าสินค้า

รูปที่ 8.43 แสดงหน้าการเพิ่มสินค้าในตะกร้า

• ทดสอบเพิ่มจำนวนสินค้าในตะกร้าสินค้า ตรวจสอบการคิดยอดรวมสินค้า

รูปที่ 8.44 แสดงหน้าการทดสอบเพิ่มสินค้าในตะกร้า

8.6.3 การทดสอบระบบการสั่งซื้อ

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

1. เลือกสินค้ามายังตะกร้าสินค้าคลิกปุ่มดำเนินการสั่งซื้อ

รูปที่ 8.45 แสดงหน้าการทดสอบเพิ่มสินค้าในตะกร้า

• ระบบจะสรุปคำสั่งซื้อ ทดสอบกรอกข้อมูลการสั่งซื้อสินค้า
• เมื่อกรอกข้อมูลครบเรียบร้อยแล้วคลิกปุ่มสั่งซื้อ

รูปที่ 8.46 แสดงหน้าการทดสอบกรอกข้อมูลการสั่งซื้อสินค้า

• แสดงรายการสั่งซื้อที่ได้รับ ระบบจะแจ้งรายละเอียดการสั่งซื้อและรายละเอียดต่าง ๆ

รูปที่ 8.47 แสดงหน้ารายการสั่งซื้อที่ได้รับ

8.6.4 การตรวจสอบการสั่งซื้อสินค้าของลูกค้า

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

1. เข้าสู่ระบบผู้ดูแลเว็บไซต์ไปที่เมนู WooCommerce > คำสั่งซื้อ
2. แสดงรายการสั่งซื้อที่มีการสั่งซื้อสินค้าเข้ามาตรวจสอบรายการสั่งซื้อ ระบบจะแสดงรายการ คำสั่งซื้อทั้งหมด พร้อมสถานะ เช่น รอดำเนินการ ชำระเงินแล้ว หรือสำเร็จแล้ว

รูปที่ 8.48 แสดงรายการสั่งซื้อที่มีการสั่งซื้อสินค้า

• เปิดดูรายละเอียดคำสั่งซื้อ คลิกที่หมายเลขคำสั่งซื้อเพื่อตรวจสอบข้อมูล เช่น รายการสินค้า จำนวน ราคา ค่าขนส่ง และภาษี ตรวจสอบข้อมูลลูกค้าตรวจสอบชื่อ ที่อยู่จัดส่ง เบอร์โทรศัพท์ และอีเมลของลูกค้าให้ถูกต้อง ตรวจสอบวิธีการชำระเงินตรวจสอบช่องทางการชำระเงินที่ลูกค้าเลือก เช่น โอนเงิน หรือชำระเงินปลายทาง เปลี่ยนสถานะคำสั่งซื้อให้ตรงกับขั้นตอนการดำเนินงาน คลิกปุ่ม อัปเดต 

รูปที่ 8.49 แสดงการเปลี่ยนสถานะคำสั่งซื้อ

• ที่เมนู WooCommerce > คำสั่งซื้อ ตรวจสอบรายการคำสั่งซื้อเปลี่ยนสถานะเรียบร้อย

รูปที่ 8.50 แสดงตรวจสอบรายการคำสั่งซื้อเปลี่ยนสถานะ