การพัฒนาเว็บไซต์ทางธุรกิจ

6.3 ทำการสร้างเมนูโดยคลิกที่ create a new menu รูปที่ 2.15 แสด create a new menu 6.4 ตั้งชื่อเมนู หลังจากนั้น คลิกสร้างเมนู 7. การเพิ่มและการลบเมนู 8. การเพิ่มเมนูย่อยภายในเมนูหลัก 9. การสร้างเมนูหน้าหลักพร้อมแสดงลิ้งค์ รูปที่ 2.16 การสร้างชื่อเมนู 34

6.5 สร้างหัวข้อเมนู รูปที่ 2.17 การสร้างเมนู 7. การเพิ่มและการลบเมนู การสร้างเมนูใหม่ต้องการเพิ่มลงไปสามารถดเมเมนูไปก่อนที่จะเขียนเพจภายหลังได้ พร้อมกับกำหนดลิ้ง ไปยังเพจที่ต้องการได้ โดยดำเนินการดังนี้ 7.1 คลิกที่รูปลักษณ์ ปรากฏหน้าเพิ่มเมนูไอเทม รูปที่ 2.18 หน้าเพิ่มเมนูไอเทม 35

7.2 การลบหน้าเมนูคลิกเมนูที่ต้องการลบ และคลิกที่ลบเมนู รูปที่ 2.19 หน้าลบเมนูไอเทม 8. การเพิ่มเมนูย่อยภายในเมนูหลัก การเพิ่มเมนูที่แสดงด้านบนของเพจ สามารถกำหนดเนื้อหา โดยอาจแสดงหัวข้อรายการเมนูหลักและมีเมนู ย่อยได้ โดยดำเนินการดังนี้ รูปที่ 2.20 ตัวอย่างเมนูด้านบนหน้าเพจ 8.1 คลิกสร้างเมนูเพิ่มเมนูที่ต้องการแสดง รูปที่ 2.21 สร้างเมนูเพิ่มเมนู 36

8.2 เลือกเมนูด้านซ้ายมาวางด้านขวาจัดเรียงตามลำดับ ปรากฏดังรูป รูปที่ 2.22 ปรากฏเมนูย่อย 9. การสร้างเมนูหน้าหลักพร้อมแสดงลิ้งค์ การสร้างเมนูในหน้าเว็บหรือหน้าแรก โดยต้องการแสดงลิ้งจำเป็นต้องตั้งค่าเพื่อให้คลิกที่ลิ้งแล้วกลับไป ยังหน้าแรกหรือหน้าหลัก 9.1 คลิกที่รูปลักษณ์ เลือกปรับแต่งลิ้งก์ ใส่ลิ้งก์ที่ต้องการเชื่อมโยง รูปที่ 2.23 ปรับแต่งลิ้งก์ ใส่ลิ้งก์ที่ต้องการเชื่อมโยง 37

ใบงานที่ 2.1 รายวิชา การพัฒนาเว็บไซต์ทางธุรกิจ รหัสวิชา 31910-2011 เรื่อง การตกแต่งเนื้อหาและเมนู WordPress เวลา 1 ชั่วโมง 30 นาที จุดประสงค์ 4. เพื่อให้ผู้เรียนได้เพิ่มพูนความรู้ความเข้าใจเกี่ยวกับการตกแต่งเนื้อหาและเมนู WordPress 5. เพื่อให้ผู้เรียนสามารถอภิปราย วิเคราะห์ สรุป และนำเสนอข้อมูล 6. เพื่อให้ผู้เรียนมีด้านการมีวินัย การตรงต่อเวลา ความรับผิดชอบ ความสนใจใฝ่รู้ และความซื่อสัตย์ สุจริต วัสดุและอุปกรณ์ 4. เครื่องไมโครคอมพิวเตอร์และอุปกรณ์ต่อพ่วง 5. เครื่องทีวี ขั้นตอนการปฏิบัติ 1. ให้ผู้เรียนแบ่งกลุ่ม จำนวน 6 กลุ่ม กลุ่มละเท่า ๆ กัน ตามความพึงพอใจ แล้วศึกษา ใบ มอบหมายงานที่ครูผู้สอนแจกให้โดยจับฉลากเพื่อเลือกหัวข้อ กลุ่มละ 1 หัวข้อ ดังนี้ กลุ่มที่ 1 การปรับเปลี่ยนสีพื้นหลังในหน้าเว็บเพจ กลุ่มที่ 2 การปรับเปลี่ยนภาพโปรไฟล์ใน WordPress กลุ่มที่ 3 การแสดงภาพส่วนหัวเว็บของ WordPress กลุ่มที่ 4 การสร้างโพสต์ปักหมุดใน WordPress กลุ่มที่ 5 การเปลี่ยนสีเนื้อหาและฟอนต์ กลุ่มที่ 6 การสร้างเมนูบนหน้า WordPress กลุ่มที่ 7 การเพิ่มและการลบเมนู กลุ่มที่ 8 การเพิ่มเมนูย่อยภายในเมนูหลัก กลุ่มที่ 9 การสร้างเมนูหน้าหลักพร้อมแสดงลิ้งค์ 2. ให้ผู้เรียนจับกลุ่มระดมความคิด นำข้อมูล ความรู้ที่ศึกษาได้มาร่วมกันอภิปราย วิเคราะห์ และสรุป และเรียบเรียงเนื้อหาให้เข้าใจ โดยเขียนเป็นข้อๆ 3. จัดพิมพ์และจัดทำรูปเล่มรายงานให้สมบูรณ์และถูกต้อง 4. นำเสนอหน้าชั้นเรียน โดยใช้สื่อ canva กลุ่มละ 5 นาที 38

แบบประเมินผลการปฏิบัติกิจกรรมกลุ่ม รายวิชา การพัฒนาเว็บไซต์ทางธุรกิจ หัสวิชา 31910-2011 หน่วยที่ 1 เรื่อง การตกแต่งเนื้อหาและเมนู WordPress ชื่องาน กิจกรรมการอภิปรายเกี่ยวกับ “การตกแต่งเนื้อหาและเมนู WordPress” ชื่อหัวข้อที่ศึกษา…………………………………………………………………………………………………………. นักศึกษา ระดับชั้น ปวส สาขาวิชาเทคโนโลยีธุรกิจดิจิทัลสมาชิกของกลุ่มประกอบด้วย …………………………………………………………………………………………………………………………………………. เกณฑ์การประเมิน คะแนน เต็ม ได้ 1.การปฏิบัติงาน (5 คะแนน) 1.1 การปฏิบัติงานกลุ่ม (3คะแนน) 1.1.1 มีการวางแผนทำงานร่วมกัน แบ่งหน้าที่รับผิดชอบอย่างชัดเจน 3 1.1.2 ปฏิบัติงานด้วยความตั้งใจ เอาใจใส่ 2 1.1.3 ขาดความร่วมมือในกลุ่ม ต่างคนต่างทำ/ทำงานเพียงคนเดียว 1 1.2 เวลาที่ใช้ในการปฏิบัติงาน (2คะแนน) 1.2.1 ปฏิบัติงานจนแล้วเสร็จในเวลาที่กำหนด 2 1.2.2 ปฏิบัติงานไม่แล้วเสร็จในเวลาที่กำหนด 1 2.ข้อมูลที่ศึกษา (10 คะแนน) 2.1 กำหนดหัวข้อสำคัญครอบคลุมเนื้อหา (3คะแนน) 2.1.1 กำหนดหัวข้อครอบคลุมเนื้อหา 3 2.1.2 หัวข้อที่กำหนดครอบคลุมเนื้อหาเป็นส่วนมาก 2 2.1.3 หัวข้อที่กำหนดยังไม่ครอบคลุมเนื้อหา 1 2.2 ความละเอียดสมบูรณ์ของเนื้อหา (3คะแนน) 2.2.1 เนื้อหาแต่ละหัวข้อมีความละเอียดสมบูรณ์ 3 2.2.2 เนื้อหาแต่ละหัวข้อมีความละเอียดสมบูรณ์เป็นส่วนมาก 2 2.2.3 เนื้อหาแต่ละหัวข้อมีความละเอียดและสมบูรณ์เป็นส่วนน้อย 1 39

แบบประเมินผลการปฏิบัติกิจกรรมกลุ่ม (ต่อ) เกณฑ์การประเมิน คะแนน เต็ม ได้ 2.3 ความชัดเจน เหมาะสม และสมบูรณ์ของภาพประกอบ (2 คะแนน) 2.3.1 ภาพประกอบมีความชัดเจน เหมาะสม และสมบูรณ์ 2 2.3.2 ภาพประกอบมีความชัดเจน เหมาะสม แต่ไม่สมบูรณ์ 1 2.4 การใช้ภาษาเรียบเรียงข้อมูล (2 คะแนน) 2.4.1 ใช้ภาษาเรียบเรียงข้อมูลอย่างถูกต้อง เหมาะสม 2 2.4.2 ใช้ภาษาเรียบเรียงข้อมูลยังขาดความถูกต้อง เหมาะสม 1 3. การนำเสนอ (5 คะแนน) 3.1 ความพร้อม สมบูรณ์ และเหมาะสมของสื่อ (1 คะแนน) 1 3.2 ความพร้อม สมบูรณ์ และเหมาะสมของสื่อ (2 คะแนน) 3.2.1 ความพร้อม สมบูรณ์ และเหมาะสมของสื่อประกอบการนำเสนอ 2 3.2.2 ความไม่พร้อม ไม่สมบูรณ์ ของสื่อประกอบการนำเสนอ 1 3.3 บุคลิกภาพเหมาะสม มีความมั่นใจ เสียงดัง (2 คะแนน) 3.3.1 บุคลิกภาพเหมาะสม มีความมั่นใจ เสียงดัง 2 3.3.2 บุคลิกภาพเหมาะสม ไม่มีความมั่นใจ เสียงไม่ดัง 1 รวมคะแนน 20 40

แบบประเมินด้านคุณธรรมจริยธรรม คุณลักษณะที่พึงประสงค์ หน่วยที่ 2 รายวิชา การพัฒนาเว็บไซต์ทางธุรกิจ รหัสวิชา 31910-2011 ระดับชั้น / ห้อง วันที่…………………เดือน……………พ.ศ…………. เลขที่ ชื่อ -สกุล คุณธรรม จริยธรรม คุณลักษณะที่พึงประสงค์การมีวินัย การตรวต่อเวลา ความรับผิดชอบ ความสนใจใฝ่รู้ ความซื่อสัตย์ คะแนนรวม 1 1 1 1 1 5 หมายเหตุ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 เกณฑ์การให้คะแนน ได้ 1 คะแนน เมื่อผู้เรียนปฏิบัติ ได้ 0 คะแนน เมื่อผู้เรียนไม่ปฏิบัติ เกณฑ์การประเมิน ดีมาก หมายถึง ได้คะแนนรวม 5 คะแนน ดี หมายถึง ได้คะแนนรวม 4 คะแนน พอใช้ หมายถึง ได้คะแนนรวม 3 คะแนน ปรับปรุง หมายถึง ได้คะแนนรวมน้อยกว่า 3 คะแนน 41 141

หน่วยการเรียนรู้ที่ 2 เรื่อง การตกแต่งเนื้อหาและเมนู WordPress จุดประสงค์การเรียนรู้ 1. บอกวิธีการปรับเปลี่ยนสีพื้นหลังในหน้าเว็บเพจ 2. อธิบายการปรับเปลี่ยนภาพโปรไฟล์ใน WordPress 3. อธิบายการแสดงภาพส่วนหัวเว็บของ WordPress 4. อธิบายการสร้างโพสต์ปักหมุดใน WordPress 5. อธิบายการเปลี่ยนสีเนื้อหาและฟอนต์ 6. บอกการสร้างเมนูบนหน้า WordPress 7. อธิบายการเพิ่มและการลบเมนู 8. อธิบายการเพิ่มเมนูย่อยภายในเมนูหลัก 9. อธิบายการสร้างเมนูหน้าหลักพร้อมแสดงลิ้งค์ คำสั่ง ให้ผู้เรียนตอบคำถามต่อไปนี้ให้ถูกต้องและได้ใจความสมบูรณ์ 1. บอกวิธีการปรับเปลี่ยนสีพื้นหลังในหน้าเว็บเพจ …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… ………………………………………………………………….................................................................................. 2. อธิบายการปรับเปลี่ยนภาพโปรไฟล์ใน WordPress …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… ………………………………………………………………….................................................................................. 3. อธิบายการแสดงภาพส่วนหัวเว็บของ WordPress …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… ………………………………………………………………… 4. อธิบายการสร้างโพสต์ปักหมุดใน WordPress …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………................................................................................. 42

5. อธิบายการเปลี่ยนสีเนื้อหาและฟอนต์ …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… ………………………………………………………………….................................................................................. 6. บอกการสร้างเมนูบนหน้า WordPress …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………................................................................................. 7. อธิบายการเพิ่มและการลบเมนู …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… ………………………………………………………………….................................................................................. 8. อธิบายการเพิ่มเมนูย่อยภายในเมนูหลัก …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………................................................................................. 9. อธิบายการสร้างเมนูหน้าหลักพร้อมแสดงลิ้งค์ …………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………….......................................... ……………………………………………………………………………………………………….…………………………………… ………………………………………………………………………………………………………........................................ 43

แบบทดสอบหลังเรียน คำชี้แจง ให้นักเรียนเลือกคำตอบที่ถูกที่สุดเพียงคำตอบเดียวและทำเครื่องหมาย () ลงในกระดาษคำตอบ (10 คะแนน) 1. ถ้าต้องการเปลี่ยนสีพื้นหลังบล็อกใหม่ ต้องเลือกใช้เครื่องมือข้อใด ก. Posforio > รูปแบบบล็อก > Themes > ส่วนหัวบันทึกการใช้งาน ข. Posforio > รูปแบบบล็อก > Themes > Color Background > บันทึกการใช้งาน ค. Posforio > รูปแบบบล็อก > Themes > ส่วนหัว > บันทึก ง. Posforio > รูแบบบล็อก > Themes > พื้นหลัง > บันทึก 2. ถ้าต้องการเลือก Themes แต่งบล็อก ต้องปฏิบัติตามขั้นตอนในข้อใด ก. เว็บของฉัน > Posforio > รูปแบบบล็อก > Themes > บันทึกการใช้งาน ข. เว็บของฉัน > รูปแบบบล็อก > Themes > บันทึกการใช้งาน ค. เว็บของฉัน > Posforio > รูปแบบบล็อก > Themes > บันทึก ง. เว็บของฉัน > รูแบบบล็อก > Themes > บันทึก 3. หากต้องการเปลี่ยนหัวบล็อกใหม่ ต้องเลือกใช้เครื่องมือตามข้อใด ก. Posforio > รูปแบบบล็อก > Themes > ส่วนหัว>บันทึกการใช้งาน ข. Posforio > รูปแบบบล็อก > Themes > พื้นหลัง>บันทึกการใช้งาน ค. Posforio > รูปแบบบล็อก > Themes > ส่วนหัว> บันทึก ง. Posforio > รูแบบบล็อก > Themes > พื้นหลัง> บันทึก 4. ข้อใดไม่ใช่ลักษณะของ WordPress ก. Open Source Web Software ข. เครื่องมือไว้สำหรับสร้างเว็บไซต์ประเภท Web CMS ค. เครื่องมือไว้สำหรับสร้าง Blog ง. เครื่องมือไว้สำหรีบสร้างเว็บไซต์ประเภท Wen Editor 5. ถ้าต้องปักหมุด WordPress ให้ Post นั้นๆอยู่บนสุด ควรทำอย่างไร ก. คลิกที่ปุ่มปักหมุดไว้บนสุดของบล็อก ข. คลิกที่ปักหมุด WordPress ใน Post ค. คลิกที่การสร้างเมนูบนหน้า WordPress ง. คลิกที่การเปลี่ยนสีเนื้อหาและฟอนต์ 44

6. ข้อใดเป็นการเปลี่ยนสีเนื้อหาและฟอนต์ได้อย่างถูกต้อง ก. คลิกที่พื้นที่และเลือกสีที่ต้องการ ข. คลิกที่ข้อความที่ต้องการเปลี่ยนเลือก สีที่ต้องการ ค. คลิกที่การสร้างเมนูบนหน้า WordPress ง. คลิกที่การเปลี่ยนสีเนื้อหาและฟอนต์ 7. ข้อใดเป็นการสร้างเมนูบนหน้า WordPressได้อย่างถูกต้อง ก. คลิกที่หน้าเลือกเมนูบนหน้า WordPress ข. คลิกที่รูปลักษณ์เลือกเมนูและสร้าง ค. คลิกที่การสร้างเมนูบนหน้า WordPress ง. คลิกที่รูปลักษณ์เลือกธีมและสร้าง 8. ข้อใดเป็นการลบเมนูได้อย่างถูกต้อง ก. คลิกที่หน้าเลือกเมนูบนหน้า WordPress ลบตามที่ต้องการ ข. คลิกที่รูปลักษณ์เลือกเมนูที่ต้องการลบ ค. คลิกที่การสร้างเมนูบนหน้า WordPress ง. คลิกที่รูปลักษณ์เลือกธีมและสร้างและลบเมนู 9. ข้อใดเป็นการเพิ่มเมนูย่อยภายในเมนูหลักได้อย่างถูกต้อง ก. คลิกที่หน้าเลือกหัวข้อหรือ Menu เลือกส่วนด้านบน ข. คลิกที่รูปลักษณ์เลือกเมนูย่อย ค. คลิกที่การสร้างเมนูบนหน้า WordPress เมนูย่อย ง. คลิกที่รูปลักษณ์เลือกธีมและสร้างเมนูย่อย 10. ข้อใดเป็นการสร้างเมนูหน้าหลักพร้อมแสดงลิ้งค์ได้อย่างถูกต้อง ก. คลิกที่รูปลักษณ์ เลือก เมนู (Menu ) พิมพ์ URL ข. คลิกที่หน้า HOME >เมนู (Menu ) พิมพ์ URL ค. คลิกที่การสร้างเมนูบนหน้า WordPress เมนูย่อย พิมพ์ URL ง. คลิกที่รูปลักษณ์เลือกธีมและสร้างเมนูย่อย พิมพ์ URL สแกน QRCODE เพื่อทำแบบทดสอบออนไลน์ 45

เฉลย ข้อ คำตอบ ข้อ คำตอบ 1 ข 6 ข 2 ก 7 ข 3 ก 8 ข 4 ข 9 ก 5 ก 10 ก 46

หน่วยที่ 3 การแตกแต่ง Media ใน WordPress 1. สาระสำคัญ การออกแบบเว็บไซต์นั้นเป็นการออกแบบส่วนประกอบทั้งหมดของเว็บไซต์ที่ต้องการแสดงให้ผู้เข้าชมทราบ ว่าเว็บไซต์นั้นมีทั้งหมดกี่หน้า ในแต่ละหน้าเป็นส่วนการแสดงของรายละเอียดอะไรและมีการเชื่อมโยงกันอย่างไร 2. สมรรถนะประจำหน่วย ผู้เรียนสามารถแตกแต่ง Media ใน WordPress ได้ 3. จุดประสงค์การเรียนรู้ จุดประสงค์ทั่วไป 3. เพื่อให้มีความรู้ความเข้าใจการแตกแต่ง Media ใน WordPress 4. เพื่อให้มีคุณธรรม จริยธรรมในงานอาชีพและตระหนักถึงคุณค่าของปรัชญาของเศรษฐกิจพอเพียง จุดประสงค์เชิงพฤติกรรม ด้านความรู้(ทฤษฏี) 5. บอกส่วนประกอบ Media ใน WordPress ได้ 6. อธิบายการตั้งค่าต่างๆใน Media WordPress ได้ ด้านทักษะ (ปฏิบัติ) 1. สามารถแทรกไฟล์ Youtubeได้ 2. สามารถใส่โค๊ดแบบ PDFได้ 3. สามารถแทรกไปยังหน้า Facebookได้ 4. สามารถแทรกเสียงในหน้าโพสต์ได้ 5. สามารถฝั่งคลิปประเภท VDOได้ 6. สามารถแทรก Short Codeได้ 7. สามารถแทรก Animation Gif ลงใน WordPressได้ ด้านจิตพิสัย 11. ความมีวินัย 12. ความมุ่งมั้นในการทำงาน 13. ความซื่อสัตย์ 14. ความสนใจใฝ่รู้ 15. ความมีมนุษย์สัมพันธ์ 47

4.เนื้อหาสาระ 1. การแทรกไฟล์ Youtube 2. การใส่โค๊ดแบบ PDF 3. การแทรกไปยังหน้า Facebook 4. การแทรกเสียงในหน้าโพสต์ 5. การฝั่งคลิปประเภท VDO 6. การแทรก Short Code 7. การแทรก Animation Gif ลงใน WordPress 48

แบบทดสอบก่อนเรียน คำชี้แจง ให้นักเรียนเลือกคำตอบที่ถูกที่สุดเพียงคำตอบเดียวและทำเครื่องหมาย () ลงในกระดาษคำตอบ (10 คะแนน) 1. ข้อใดต่อไปนี้เป็นการแทรกสัญลักษณ์ไฟล์ Youtube ได้ถูกต้อง ก. ข. ค. ง. 2. ข้อใดต่อไปนี้เป็นการแทรกสัญลักษณ์ไฟล์ PDF ได้ถูกต้อง ก. ข. ค. ง. 49

3. ข้อใดต่อไปนี้เป็นการแทรกสัญลักษณ์ไฟล์ Facebook ได้ถูกต้อง ก. ข. ค. ง. 4. ข้อใดเป็นการแทรกเสียงในหน้าโพสต์ ก. คลิกที่หน้า เรื่อง (Dashboard) > เพิ่มเรื่องใหม่ (Post) ข. คลิกที่หน้า เรื่อง (Dashboard) > เพิ่มเรื่องใหม่ (Post) ค. คลิกที่เพิ่มหน้าใหม่ > คลิกที่เครื่องมาย + คลิกเพลง ง. เลือกคลิปที่ต้องการใส่ เช่น Tiktok 5. ข้อใดต่อไปนี้เป็นการแทรกสัญลักษณ์ไฟล์ VDO ข้อใดถูกต้องที่สุด ก. ข. ค. ง. 50

6. ข้อใดต่อไปนี้เป็นการแทรกสัญลักษณ์ไฟล์ Short Code ได้ถูกต้อง ก. ข. ค. ง. 7. ข้อใดต่อไปนี้เป็นนามสกุลไฟล์ Animation Gif ลงใน WordPress ได้ถูกต้อง ก. Gif ข. Jpeg ค. Png ง. Doc 8. โปรแกรมใดต่อไปนี้ใช้ในการตกแต่งเว็บไซต์ ก. Word ข. Photoshop ค. Pain ง. Access 51

9. ถ้าต้องการแทรกรูปภาพควรดำเนินการเลือกสัญลักษณ์ใดต่อไปนี้ ก. ข. ค. ง. 10. วิธีการเข้าใช้งานการแทรกไฟล์มัลติมีเดียควรเลือกที่ใด ก. สื่อ ข. หน้า ค. ธีม ง. ปลั๊กอิน สแกน QRCODE เพื่อทำแบบทดสอบออนไลน์ 52

หน่วยที่ 3การแตกแต่ง Media ใน WordPress โปรแกรมผ่านเว็บไซต์ WordPress นั้นมีระบบการจัดการรูปภาพที่มีการอัปโหลดลงไปในระบบในรูปแบบของ Media เนื่องจาก เพราะในปัจจุบันเว็บไซต์ต้องมีการปรับเปลี่ยนหน้าตาตามอุปกรณ์ที่เปิด หรือที่เรียกกันกว่า Responsive โดยรูปภาพทุกภาพที่อัปโหลดลงระบบ WordPress จะทำการ Generate ออกเป็น 3 ขนาด คือ 1. Thumbnail size 2. Medium size 3. Large size 1.การแทรกไฟล์ Youtube การออกแบบเนื้อหา โดยการแทรกภาเคลื่อนไหว ในรูปแบบของคลิปวีดีโอลงไป เพื่อเป็นการแนะนำสินค้า รีวิว สนค้า สามารดำเนินการได้ดังนี้ 1.1 คลิกที่หน้า เรื่อง (Dashboard) > เพิ่มเรื่องใหม่ (Post) รูปที่ 3.1. หน้าเรื่องที่ต้องการลงไฟล์ Youtube 53

1.2 คลิกเลือกไฟล์วีดีโอที่ต้องการ รูปที่ 3.2 เลือกไฟล์วีดีโอYoutube 2.การใส่โค๊ดแบบ PDF ในการออกแบบเว็บเพจ หรือการโพสต์ สามารถดำเนินการแนบไฟล์เอกสาร คู่มือ หรือรูปแบบสื่อ ฯลฯ ใน รูปแบบไฟล์ PDF หรือการเลือกไฟล์เอกสารอื่นๆ เช่น ไฟล์ WORD, EXCEL,POWERPOINT รวมถึงไฟล์เอกสาร อื่นได้ ดังตัวอย่างต่อไปนี้ a. คลิกที่หน้า เรื่อง (Dashboard) > เพิ่มเรื่องใหม่ (Post) รูปที่ 3.3 เรื่องใหม่ (Post) 2.2 คลิกที่เครื่องหมายบวก รูปที่ 3.4 เครื่องหมายบวก 54

2.3 คลิกเลือกไฟล์ที่ต้องการลงนำมาเผยแพร่ทางเว็บเพจ รูปที่ 3.5 คลิกไฟล์ PDF 2.4 ปรากฏดังรูปภาพ รูปที่ 3.6 ผลลัพธ์ไฟล์ PDF 55

3. การแทรกไปยังหน้า Facebook การแทรกไปยังโซเซียลมีเดีย สามารถดำเนินการได้ดังนี้ 3.1 เลือกติดตั้งปลั๊กอิน โดยไปที่หน้า ปลั๊กอิน รูปที่ 3.7 ผลลัพธ์หน้าปลั๊กอิน 3.2 เลือก เพิ่มปลั๊กอิน > ค้นหา > พิมพ์คำว่า Facebook for WooCommerce รูปที่ 3.8 ผลลัพธ์หน้าค้นหา 3.3 พิมพ์คำว่า FAuto Poster พิมพ์ค้นหา > Facebook for WooCommerce >คลิก ติดตั้งตอนนี้ รูปที่ 3.9 ผลลัพธ์หน้าFacebook for WooCommerce 56

4.การแทรกเสียงในหน้าโพสต์ การทำงานใน WordPress เพื่อให้มีเสียงเพลง เสียงบรรยาย เสียงเอฟเฟกต์ เพื่อให้ผู้เข้าชมเปิดฟัง สามารถทำ ได้ดังนี้ 4.1 คลิกที่เพิ่มหน้าใหม่ > คลิกที่เครื่องมาย + รูปที่ 3.10 ผลลัพธ์หน้าการแทรกเสียงในหน้าโพสต์ 5. การฝั่งคลิปประเภท VDO การทำงานใน WordPress รองรับการแทรกคลิปวีดีโอ เช่น Tiktok VideoPress Anomoto ฯลฯ a. เมื่อดำเนินการสร้างโพสต์ ขึ้นมาให้ดำเนินการคลิกที่ เครื่องหมาย + รูปภาพที่ 3.11 ผลลัพธ์การฝั่งคลิปประเภท VDO 57

5.2 เลือกคลิปที่ต้องการใส่ เช่น Tiktok รูปภาพที่ 3.12 ผลลัพธ์การฝั่งคลิปประเภท Tiktok 6. การแทรก Short Code Short Code ใช้สำหรับแสดงเนื้อหาที่กำหนด ซึ่งในปลั๊กอินหรือธีมที่นำมาพร้อม Short Code เพื่อให้ผู้ใช้ นำไปใช้งาน โดยมีวิธีการเข้าใช้งานดังนี้ 6.1 คลิก ปลั๊กอิน รูปภาพที่ 3.13 ผลลัพธ์หน้าปลั๊กอิน 58

6.2 จะปรากฏหน้า Short Code รูปภาพที่ 3.14 ผลลัพธ์หน้า Short Code 7. การแทรก Animation Gif ลงใน WordPress การใส่เนื้อหาประกอบรูปภาพที่สามารถให้เคลื่อนไหวได้ เช่น ภาพ Animation Gif เพื่อแสดงเป็น ภาพเคลื่อนไหวประกอบเนื้อหาของโพสต์หรือเพจ สามารถดำเนินการได้ดังนี้ 7.1 คลิกที่เพิ่มหน้าใหม่ > เลือก เครื่องหมาย + รูปที่ 3.14 ผลลัพธ์หน้าการแทรก Animation Gif 7.2 คลิกเลือก Image > อัปโหลดรูปภาพนามสกุล Gif รูปภาพที่ 3.15 ผลลัพธ์หน้าการแทรก Animation Gif 59

ใบงานที่ 3.1 รายวิชา การพัฒนาเว็บไซต์ทางธุรกิจ รหัสวิชา 31910-2011 เรื่อง การแตกแต่ง Media ใน WordPress เวลา 1 ชั่วโมง 30 นาที จุดประสงค์ 1. เพื่อให้ผู้เรียนได้เพิ่มพูนความรู้ความเข้าใจเกี่ยวกับการแตกแต่ง Media ใน WordPress 2. เพื่อให้ผู้เรียนสามารถอภิปราย วิเคราะห์ สรุป และนำเสนอข้อมูล 3. เพื่อให้ผู้เรียนมีด้านการมีวินัย การตรงต่อเวลา ความรับผิดชอบ ความสนใจใฝ่รู้ และความซื่อสัตย์ สุจริต วัสดุและอุปกรณ์ 1. เครื่องไมโครคอมพิวเตอร์และอุปกรณ์ต่อพ่วง 2. เครื่องฉายภาพ ขั้นตอนการปฏิบัติ 1. ให้ผู้เรียนแบ่งกลุ่ม จำนวน 6 กลุ่ม กลุ่มละเท่า ๆ กัน ตามความพึงพอใจ แล้วศึกษา ใบมอบหมาย งานที่ครูผู้สอนแจกให้โดยจับฉลากเพื่อเลือกหัวข้อ กลุ่มละ 1 หัวข้อ ดังนี้ กลุ่มที่ 1 การแทรกไฟล์ Youtube กลุ่มที่ 2 การใส่โค๊ดแบบ PDF กลุ่มที่ 3 การแทรกไปยังหน้า Facebook กลุ่มที่ 4 การแทรกเสียงในหน้าโพสต์ กลุ่มที่ 5 การฝั่งคลิปประเภท VDO กลุ่มที่ 6 การแทรก Short Code กลุ่มที่ 7 การแทรก Animation Gif ลงใน WordPress 2. ให้ผู้เรียนจับกลุ่มระดมความคิด นำข้อมูล ความรู้ที่ศึกษาได้มาร่วมกันอภิปราย วิเคราะห์ และสรุป และเรียบเรียงเนื้อหาให้เข้าใจ โดยเขียนเป็นข้อๆ 3. จัดพิมพ์และจัดทำรูปเล่มรายงานให้สมบูรณ์และถูกต้อง 4. นำเสนอหน้าชั้นเรียน โดยใช้สื่อ Powerpoint กลุ่มละ 5 นาที 60

แบบประเมินผลการปฏิบัติกิจกรรมกลุ่ม รายวิชา การพัฒนาเว็บไซต์ทางธุรกิจ หัสวิชา 31910-2011 หน่วยที่ 3 เรื่อง การแตกแต่ง Media ใน WordPress ชื่องาน กิจกรรมการอภิปรายเกี่ยวกับ “การแตกแต่ง Media ใน WordPress” ชื่อหัวข้อที่ศึกษา…………………………………………………………………………………………………………. นักเรียนนักศึกษา ระดับชั้น ปวส. 1 สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล สมาชิกของกลุ่มประกอบด้วย …………………………………………………………………………………………………………………………………………. เกณฑ์การประเมิน คะแนน เต็ม ได้ 4.การปฏิบัติงาน (5 คะแนน) 1.1 การปฏิบัติงานกลุ่ม (3คะแนน) 1.1.1 มีการวางแผนทำงานร่วมกัน แบ่งหน้าที่รับผิดชอบอย่างชัดเจน 3 1.1.2 ปฏิบัติงานด้วยความตั้งใจ เอาใจใส่ 2 1.1.3 ขาดความร่วมมือในกลุ่ม ต่างคนต่างทำ/ทำงานเพียงคนเดียว 1 1.2 เวลาที่ใช้ในการปฏิบัติงาน (2คะแนน) 1.2.1 ปฏิบัติงานจนแล้วเสร็จในเวลาที่กำหนด 2 1.2.2 ปฏิบัติงานไม่แล้วเสร็จในเวลาที่กำหนด 1 5.ข้อมูลที่ศึกษา (10 คะแนน) 2.1 กำหนดหัวข้อสำคัญครอบคลุมเนื้อหา (3คะแนน) 2.1.1 กำหนดหัวข้อครอบคลุมเนื้อหา 3 2.1.2 หัวข้อที่กำหนดครอบคลุมเนื้อหาเป็นส่วนมาก 2 2.1.3 หัวข้อที่กำหนดยังไม่ครอบคลุมเนื้อหา 1 2.2 ความละเอียดสมบูรณ์ของเนื้อหา (3คะแนน) 2.2.1 เนื้อหาแต่ละหัวข้อมีความละเอียดสมบูรณ์ 3 2.2.2 เนื้อหาแต่ละหัวข้อมีความละเอียดสมบูรณ์เป็นส่วนมาก 2 2.2.3 เนื้อหาแต่ละหัวข้อมีความละเอียดและสมบูรณ์เป็นส่วนน้อย 1 61

แบบประเมินผลการปฏิบัติกิจกรรมกลุ่ม (ต่อ) เกณฑ์การประเมิน คะแนน เต็ม ได้ 2.3 ความชัดเจน เหมาะสม และสมบูรณ์ของภาพประกอบ (2 คะแนน) 2.3.1 ภาพประกอบมีความชัดเจน เหมาะสม และสมบูรณ์ 2 2.3.2 ภาพประกอบมีความชัดเจน เหมาะสม แต่ไม่สมบูรณ์ 1 2.4 การใช้ภาษาเรียบเรียงข้อมูล (2 คะแนน) 2.4.1 ใช้ภาษาเรียบเรียงข้อมูลอย่างถูกต้อง เหมาะสม 2 2.4.2 ใช้ภาษาเรียบเรียงข้อมูลยังขาดความถูกต้อง เหมาะสม 1 6. การนำเสนอ (5 คะแนน) 3.1 ความพร้อม สมบูรณ์ และเหมาะสมของสื่อ (1 คะแนน) 1 3.2 ความพร้อม สมบูรณ์ และเหมาะสมของสื่อ (2 คะแนน) 3.2.1 ความพร้อม สมบูรณ์ และเหมาะสมของสื่อประกอบการนำเสนอ 2 3.2.2 ความไม่พร้อม ไม่สมบูรณ์ ของสื่อประกอบการนำเสนอ 1 3.3 บุคลิกภาพเหมาะสม มีความมั่นใจ เสียงดัง (2 คะแนน) 3.3.1 บุคลิกภาพเหมาะสม มีความมั่นใจ เสียงดัง 2 3.3.2 บุคลิกภาพเหมาะสม ไม่มีความมั่นใจ เสียงไม่ดัง 1 รวมคะแนน 20 62

แบบประเมินด้านคุณธรรมจริยธรรม คุณลักษณะที่พึงประสงค์ หน่วยที่ 3 รายวิชา การพัฒนาเว็บไซต์ทางธุรกิจ รหัสวิชา 31910-2011 ระดับชั้น / ห้อง วันที่…………………เดือน……………พ.ศ…………. เลขที่ ชื่อ -สกุล คุณธรรม จริยธรรม คุณลักษณะที่พึงประสงค์การมีวินัย การตรวต่อเวลา ความรับผิดชอบ ความสนใจใฝ่รู้ ความซื่อสัตย์ คะแนนรวม 1 1 1 1 1 5 หมายเหตุ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 เกณฑ์การให้คะแนน ได้ 1 คะแนน เมื่อผู้เรียนปฏิบัติ ได้ 0 คะแนน เมื่อผู้เรียนไม่ปฏิบัติ เกณฑ์การประเมิน ดีมาก หมายถึง ได้คะแนนรวม 5 คะแนน ดี หมายถึง ได้คะแนนรวม 4 คะแนน พอใช้ หมายถึง ได้คะแนนรวม 3 คะแนน ปรับปรุง หมายถึง ได้คะแนนรวมน้อยกว่า 3 คะแนน 63

หน่วยการเรียนรู้ที่ 3 เรื่อง การแตกแต่ง Media ใน WordPress จุดประสงค์การเรียนรู้ 1. บอกส่วนประกอบ Media ใน WordPress ได้ 2. อธิบายการตั้งค่าต่างๆใน Media WordPress ได้ คำสั่ง ให้ผู้เรียนตอบคำถามต่อไปนี้ให้ถูกต้องและได้ใจความสมบูรณ์ 1. บอกส่วนประกอบ Media ใน WordPress ได้ ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………......................................................................... ………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………….......................................................................... 2.อธิบายการตั้งค่าต่างๆใน Media WordPress ได้ พอสังเขป ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………....................................................... ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………........................................................ 3. จงบอกบริการเวิลด์ไวเว็บ (Media WordPress) มา พอสังเขป ………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………........................................ ………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………........................................... 4. จงบอกประวัติ ทิม เบอร์เนอร์ส ลี (Media WordPress) เป็นผู้คิดค้นเวิลด์ไวเว็บมา พอสังเขป ………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………......................................... ………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………........................................ 5. จงอธิบายการทำงาน Media WordPress ………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………..........................................… ………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………….......................................... แบบฝึกหัดที่ 1.1 64

แบบทดสอบหลังเรียน คำชี้แจง ให้นักเรียนเลือกคำตอบที่ถูกที่สุดเพียงคำตอบเดียวและทำเครื่องหมาย () ลงในกระดาษคำตอบ (10 คะแนน) 1. ข้อใดต่อไปนี้เป็นการแทรกสัญลักษณ์ไฟล์ Youtube ได้ถูกต้อง ก. ข. ค. ง. 2. ข้อใดต่อไปนี้เป็นการแทรกสัญลักษณ์ไฟล์ PDF ได้ถูกต้อง ก. ข. ค. ง. 65

3. ข้อใดต่อไปนี้เป็นการแทรกสัญลักษณ์ไฟล์ Facebook ได้ถูกต้อง ก. ข. ค. ง. 4. ข้อใดเป็นการแทรกเสียงในหน้าโพสต์ ก. คลิกที่หน้า เรื่อง (Dashboard) > เพิ่มเรื่องใหม่ (Post) ข. คลิกที่หน้า เรื่อง (Dashboard) > เพิ่มเรื่องใหม่ (Post) ค. คลิกที่เพิ่มหน้าใหม่ > คลิกที่เครื่องมาย + คลิกเพลง ง. เลือกคลิปที่ต้องการใส่ เช่น Tiktok 5. ข้อใดต่อไปนี้เป็นการแทรกสัญลักษณ์ไฟล์ VDO ข้อใดถูกต้องที่สุด ก. ค. ข. ง. 66

6. ข้อใดต่อไปนี้เป็นการแทรกสัญลักษณ์ไฟล์ Short Code ได้ถูกต้อง ก. ข. ค. ง. 7. ข้อใดต่อไปนี้เป็นนามสกุลไฟล์ Animation Gif ลงใน WordPress ได้ถูกต้อง ก. Gif ข. Jpeg ค. Png ง. Doc 8. โปรแกรมใดต่อไปนี้ใช้ในการตกแต่งเว็บไซต์ ก. Word ข. Photoshop ค. Pain ง. Access 67

9. ถ้าต้องการแทรกรูปภาพควรดำเนินการเลือกสัญลักษณ์ใดต่อไปนี้ ก. ข. ค. ง. 10. วิธีการเข้าใช้งานการแทรกไฟล์มัลติมีเดียควรเลือกที่ใด ก. สื่อ ข. หน้า ค. ธีม ง. ปลั๊กอิน สแกน QRCODE เพื่อทำแบบทดสอบออนไลน์ 68

เฉลย ข้อ คำตอบ ข้อ คำตอบ 1 ข 6 ค 2 ก 7 ก 3 ก 8 ข 4 ค 9 ก 5 ก 10 ก 69

หน่วยที่ 4 การสร้างร้านค้าด้วยธีม WooComerce 1.สาระสำคัญ การประยุกต์การนำ WordPress มาจัดการเนื้อหาเพื่อการสร้างร้านค้าขายสินค้าในการค้าขายผ่านทาง ออนไลน์มีอิทธิพลอย่างยิ่งต่อการทำธุรกิจในปัจจุบัน ธุรกิจส่วนใหญ่ล้วนแต่ต้องใช้เครื่องมือต่าง ๆ เพื่อดึงดูดให้ลูกค้า เข้ามาซื้อสินค้าผ่านทางออนไลน์ 2. สมรรถนะประจำหน่วย ผู้เรียนสามารถสร้างร้านค้าด้วยธีม WooComerce ได้ 3. จุดประสงค์การเรียนรู้ จุดประสงค์ทั่วไป 5. เพื่อให้มีความรู้ความเข้าใจการสร้างร้านค้าด้วยธีม WooComerce ได้ 6. เพื่อให้มีคุณธรรม จริยธรรมในงานอาชีพและตระหนักถึงคุณค่าของปรัชญาของเศรษฐกิจพอเพียง จุดประสงค์เชิงพฤติกรรม ด้านความรู้(ทฤษฏี) 1. อธิบายการติดตั้งปลั๊กอิน WooComerce 2. อธิบายารดาวน์โหลด WooComerce มาติดตั้ง 3. อธิบายการเพิ่มไอคอนแชร์สินค้า 4. อธิบายการติดตั้งธีมร้านค้ารูปแบบอื่น 5. อธิบายการตั้งการใช้ภาษาไทยใน WooComerce 6. บอกการตั้งค่าการชำระเงิน ด้านทักษะ (ปฏิบัติ) สามารถการสร้างร้านค้าด้วยธีม WooComerce ได้ ด้านจิตพิสัย 1. ความมีวินัย 2. ความมุ่งมั้นในการทำงาน 3. ความซื่อสัตย์ 4. ความสนใจใฝ่รู้ 5. ความมีมนุษย์สัมพันธ์ 70

4. เนื้อหาสาระ 1. การติดตั้งปลั๊กอิน WooComerce 2. การดาวน์โหลด WooComerce มาติดตั้ง 3. การเพิ่มไอคอนแชร์สินค้า 4. การติดตั้งธีมร้านค้ารูปแบบอื่น 5. การตั้งการใช้ภาษาไทยใน WooComerce 6. การตั้งค่าการชำระเงิน 72

แบบทดสอบก่อนเรียน คำชี้แจง ให้นักเรียนเลือกคำตอบที่ถูกที่สุดเพียงคำตอบเดียวและทำเครื่องหมาย () ลงในกระดาษคำตอบ (10 คะแนน) 1. ข้อใดต่อไปนี้กล่าวถึง ธีม WooComerce ได้ถูกต้อง ก. ปลั๊กอินใน WordPress ที่ช่วยเปลี่ยนหน้าเว็บไซต์ธรรมดา ๆ ให้กลายเป็นร้านค้าอีคอมเมิร์ช ข. ช่องทางการขายให้เจ้าของธุรกิจออนไลน์ ค. มีระบบตะกร้าสินค้า ง. ถูกทุกข้อ 2. ข้ดใดกล่าวไม่ถูกต้องในการเลือกใช้WooCommerce plugin มาใช้งาน ก. ใช้งานง่าย ข. ใช้งานฟรีไม่มีค่าใช้จ่าย ค. มีความสามารถในการปรับแต่ง ง. เหมาะกับการทำร้านค้าออนไลน์ 3. ข้อใดกล่าวไม่ถูกต้อง WooCommerce ข้อเสียมีอะไรบ้าง ก. ความซับซ้อนสำหรับผู้เริ่มต้น ข. ต้องมีการอัปเดตเป็นประจำ: ค. ต้องมีการเรียนรู้ ง. ขายสินค้าได้ทุกอย่าง 4. ข้อใดเป็นสัญลักษณ์ของ WooCommerce ก. ข. ค. ง. แบบทดสอบก่อนเรียน 73

5. ข้อใดต่อไปนี้คือสัญลักษณ์การแชร์สินค้า ก. ข. ค. ง. 6. ถ้าต้องการติดตั้งธีมร้านค้ารูปแบบร้านค้าต้องพิมพ์คำว่าอะไร ก. Shop ข. Sell ค. Theme ง. Woocomerce 7. ถ้าต้องการตั้งการใช้ภาษาไทยใน WooComerce ต้องไปที่ใด ก. การตั้งค่า ข. เมนู ค. ปลั๊กอิน ง. หน้าแรก 8. ถ้าต้องการตั้งค่าการชำระเงินต้องเข้าที่เมนูใด ก. สินค้า ข. Payment ค. คำสั่งซื้อ ง. สถานการณ์ซื้อ 74

9. WooCommerce เปิดตัวครั้งแรกในปีใด ก. 2011 ข. 2012 ค. 2013 ง. 2014 10. ข้อใดต่อไปนี้ไม่ใช่ ข้อดีWooCommerce ก. ความคุ้มค่า ข. การวิเคราะห์ ค. ขายสินค้าได้ทุกอย่าง ง. จำกัดสินค้า สแกน QRCODE เพื่อทำแบบทดสอบออนไลน์ 75

หน่วยที่ 4 การสร้างร้านค้าด้วยธีม WooComerce การประยุกต์การนำ WordPress มาจัดการเนื้อหาเพื่อการสร้างร้านค้าขายสินค้าในการค้าขายผ่านทาง ออนไลน์มีอิทธิพลอย่างยิ่งต่อการทำธุรกิจในปัจจุบัน ธุรกิจส่วนใหญ่ล้วนแต่ต้องใช้เครื่องมือต่าง ๆ เพื่อดึงดูดให้ ลูกค้าเข้ามาซื้อสินค้าผ่านทางออนไลน์กันทั้งนั้น เพราะมีความง่ายดาย สะดวกรวดเร็ว และเข้าถึงผู้บริโภคได้อย่าง ทั่วถึง ซึ่งเจ้าของธุรกิจต่าง ๆ จะต้องมีเว็บไซต์เป็นของตัวเอง เพื่อเป็นการสร้างแบรนด์และสำหรับไว้ติดต่อค้าขาย กับลูกค้า ซึ่งโดยส่วนใหญ่มักจะใช้ WordPress เป็นเว็บไซต์หลัก แต่ในบทความนี้เราจะพาไปทำความรู้จักกับ WooCommerce ซึ่งเป็นปลั๊กอินชนิดหนึ่งใน WordPress ที่ช่วยเพิ่มประสิทธิภาพในการขายสินค้าทางออนไลน์ 1. การติดตั้งปลั๊กอิน WooComerce 1.1 คลิกที่หน้า ปลั๊กอิน > เลือกค้นหา > พิมพ์ที่ช่องค้น WooComerce รูปที่ 4.1 แสดงหน้า WooComerce 1.2 คลิกเลือก WooComerce เลือกการติดตั้งตอนนี้ รูปที่ 4.2 แสดงหน้า WooComerce พร้อมใช้งาน 76

2. การดาวน์โหลด WooComerce มาติดตั้ง 2.1 เปิด Browser พิมพ์ https://th.wordpress.org/plugins/woocommerce/ รูปที่ 4.3 แสดงหน้าดาวน์โหลด WooComerce 2.2 คลิกที่ Download รูปที่ 4.4 แสดงหน้า Download a. ปรากฏไฟล์ รูปที่ 4.4 แสดงไฟล์ WooComerce 77

b. แยกไฟล์และนำไปติดตั้ง > พิมพ์ รูปที่ 4.5 แสดงไฟล์การติดตั้ง WooComerce c. คลิกที่ Set up store > เลือกการติดตั้งประเภทของสินค้าว่าอยู่ในอุตสาหกรรมใด รูปที่ 4.6 แสดงไฟล์การติดตั้ง WooComerce 2.6 กรอกรายละเอียดร้านค้า รูปที่ 4.7 แสดงรายละเอียดร้านค้า 78

2.7 รายละเอียดเกี่ยวกับธุรกิจ รูปที่ 4.8 แสดงรายละเอียดเกี่ยวกับธุรกิจ 2.8 ปรากฏหน้าต่างการติดตั้ง รูปที่ 4.9 แสดงหน้าต่างการติดตั้ง 79

2.8 การติดตั้งเสร็จสิ้น รูปที่ 4.10 แสดงหน้าต่างการติดตั้ง WooCommerce 3. การเพิ่มไอคอนแชร์สินค้า การเพิ่มสินค้าเรียบร้อยผู้ใช้งานสามารถเพิ่มเติมสินค้าตามต้องการ แต่ยังขาดไอคอนสำหรับการแชร์สินค้าเพื่อ เพิ่มช่องทางการขายมากยิ่งขึ้น สามารถดำเนินการดังนี้ 3.1 คลิกที่ปลั๊กอิน > เพิ่มปลั๊กอิน > พิมพ์ช่องค้นหา Storefront Product Sharing รูปที่ 4.11 แสดงหน้าต่างการเพิ่มไอคอนแชร์สินค้า 80

3.2 การติดตั้งปลั๊กอิน 4. การเพิ่มไอคอนแชร์สินค้า รูปที่ 4.12 แสดงหน้าต่างการดำเนินการติดตั้ง 3.2 เมื่อดำเนินการติดตั้งเสร็จสิ้น เพิ่มสินค้าเลือกแชร์ไปยังที่ต้องการ ดังรูปที่ปรากฏ รูปที่ 4.13 แสดงหน้าต่างการแชร์สินค้า 81

5. การติดตั้งธีมร้านค้ารูปแบบอื่น 5.1 ค้นหา ธีมหน้าร้านที่ต้องการโดยการพิมพ์ ช่องค้นหา Shop รูปที่ 4.14 แสดงหน้าต่าง shop 6. การตั้งการใช้ภาษาไทยใน WooComerce 6.1 เลือกเมนูการตั้งค่า รูปที่ 4.15 แสดงหน้าต่างการตั้งค่าเมนูภาษาไทย 82

7. การตั้งค่าการชำระเงิน 7.1 เลือก Payment > ปรากฏหน้าต่างการเลือกรูปแบบการชำระเงินพร้อมกำหนดค่าเพิ่มเติม รูปที่ 4.16 แสดงหน้าต่างการตั้งค่าการชำระเงิน 83

ใบงานที่ 4.1 รายวิชา การพัฒนาเว็บไซต์ทางธุรกิจ รหัสวิชา 31910-2011 เรื่อง การสร้างร้านค้าด้วยธีม WooComerce เวลา 1 ชั่วโมง 30 นาที จุดประสงค์ 1. เพื่อให้ผู้เรียนได้เพิ่มพูนความรู้ความเข้าใจเกี่ยวกับการสร้างร้านค้าด้วยธีม WooComerce 2. เพื่อให้ผู้เรียนสามารถอภิปราย วิเคราะห์ สรุป และนำเสนอข้อมูล 3. เพื่อให้ผู้เรียนมีด้านการมีวินัย การตรงต่อเวลา ความรับผิดชอบ ความสนใจใฝ่รู้ และความซื่อสัตย์ สุจริต วัสดุและอุปกรณ์ 1. เครื่องไมโครคอมพิวเตอร์และอุปกรณ์ต่อพ่วง 2. เครื่องฉายภาพ ขั้นตอนการปฏิบัติ 1. ให้ผู้เรียนแบ่งกลุ่ม จำนวน 6 กลุ่ม กลุ่มละเท่า ๆ กัน ตามความพึงพอใจ แล้วศึกษา ใบมอบหมาย งานที่ครูผู้สอนแจกให้โดยจับฉลากเพื่อเลือกหัวข้อ กลุ่มละ 1 หัวข้อ ดังนี้ กลุ่มที่ 1 การติดตั้งปลั๊กอิน WooComerce กลุ่มที่ 2การดาวน์โหลด WooComerce มาติดตั้ง กลุ่มที่ 3การเพิ่มไอคอนแชร์สินค้า กลุ่มที่ 4การติดตั้งธีมร้านค้ารูปแบบอื่น กลุ่มที่ 5การตั้งการใช้ภาษาไทยใน WooComerce กลุ่มที่ 6 การตั้งค่าการชำระเงิน 3. ให้ผู้เรียนจับกลุ่มระดมความคิด นำข้อมูล ความรู้ที่ศึกษาได้มาร่วมกันอภิปราย วิเคราะห์ และสรุป และเรียบเรียงเนื้อหาให้เข้าใจ โดยเขียนเป็นข้อๆ 4. จัดพิมพ์และจัดทำรูปเล่มรายงานให้สมบูรณ์และถูกต้อง 5. นำเสนอหน้าชั้นเรียน โดยใช้สื่อ Powerpoint กลุ่มละ 5 นาที 84