คำนำ ชุดฝึกทักษะ รายวิชาการพัฒนาเว็บไซต์ทางธุรกิจ เรื่อง การใช้โปรแกรพัฒนาเว็บไซต์ Wordpress เรียบ เรียงเนื้อหาตรงตามจุดประสงค์รายวิชา สรรถนะรายวิชา และคำฮอธิบายรายวิชา ตามหลักสูตรประกาศนียบัตร วิชาชีพชั้นสูง พุทธศักราช 2567 สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ของสำนักงานคณะกรรมการการอาชีวศึกษา กระทรวงศึกษาธิการ ชุดฝึกทักษะเล่มนี้ แบ่งออกหน่วยออกเป็น 5 หน่วย การเรียนรู้ ประกอบด้วย การติดตั้งโปรแกรม WordPress การบอกวิธีการตกแต่งเนื้อหาและเมนู WordPress การตกแต่ง Media ใน WordPressการสร้าง ร้านค้าด้วยธีม WooComerce การใช้งาน php ร่วมกับ WordPress เอกสารเล่มนี้เรียงเรียงเพื่อต้องการให้ นักศึกษาสามารถนำความรู้ที่ได้รับไปประยุกต์ใช้ในการสร้างเว็บทางธุรกิจ เพื่อเพิ่มช่องการการให้บริการกลุ่ม ธุรกิจกระยาสาท ต่อไป ขอขอบคุณ ผู้อำนวยการวิทยาลัยการอาชีพพิชัย และผู้เชี่ยวชาญอีก 5 ท่าน ครู อาจารย์ และบุคลากร ทางการศึกษาของวิทยาลัยการอาชีพพิชัย ที่ได้ให้คำแนะนำ ช่วยเหลือและสนับสนุน ในการจัดทำชุดฝึกทักษะ จนสำเร็จลุล่วงด้วยดี ผู้จัดทำหวังชุดฝึกทักษะเล่มนี้จะเป็นประโยชน์ต่อครูผู้สอน นักศึกษาที่สนใจ หากมี ข้อเสนอแนะ ผู้จัดทำขอน้อมรับด้วยความยินดียิ่งเพือการปรับปรุงต่อไป
สารบัญ หน้า คำนำ สารบัญ ก สารบัญรูปภาพ ข ลักษณะรายวิชา ค หน่วยการเรียน ง วิเคราะห์จุดประสงค์การเรียนรู้ จ วิเคราะห์หน่วยการเรียนนรู้และเวลที่ใช้ในการจัดการเรียนรู้ ฉ หน่วยที่ 1 การติดตั้งโปรแกรม WordPress 1 หน่วยที่ 2 การตกแต่งเนื้อหาและเมนู WordPress 23 หน่วยที่ 3 การตกแต่ง Media ใน WordPress 47 หน่วยที่ 4 การสร้างร้านค้าด้วยธีม WooComerce 70 หน่วยที่ 5 การใช้งาน php ร่วมกับ WordPress 93 ก
สารบัญรูปภาพ หน้า คำนำ รูปที่ 1.1 การแตกไฟล์ Download 4 รูปที่ 1.2 โฟลเดอร์ไปวางไว้ที่ xampp/htdocs/ 5 รูปที่ 1.3 การติดตั้ง โปรแกรม XAMPP 5 รูปที่ 1.4 หน้าต่าง ระบบติ ดต้ งั XAMPP 5 รูปที่ 1.5 เลือกโปรแกรมที่ต้องการติดตั้ง 6 รูปที่ 1.6 เลือกไดร์หรือโฟลเดอร์ 6 รูปที่1.7 เลือกภาษาที่ต้องการติดตั้ง 7 รูปที่ 1.8 แสดงหน้าต่าง Bitnami 7 รูปที่ 1.9 แสดงข้อความว่าโปรแกรมพร้อมที่จะติดตั้ง 8 รูปที่ 1.10 ระบบจะติดตั้งโปรแกรม 8 รูปที่ 1. 11 ติดตั้งเสร็จ 9 รูปที่ 1.12 Control Panel ของ XAMPP จะแสดงขึ้นมา 9 รูปที่ 1.13 หน้าเว็บไซต์ (หน้าบ้าน) 10 รูปที่ 1.14 แสดงหน้าแรกของเว็บไซต์ 10 รูปที่1.15 แสดงหน้า wp-login.php 10 รูปที่ 1.16 แสดงหน้า login เข้าหลังบ้าน 11 รูปที่ 1.17 ส่วนการจัดการ Dashboard 12 รูปที่1.18 การตั้งค่าการทำงานเมนู 12 รูปที่ 2.1 แสดงการปรับเปลี่ยนสีพื้นหลังในหน้าเว็บเพจ รูปที่ 2.2 แสดงการปรับเปลี่ยนสีพื้นหลัง 27 27 ข
สารบัญรูปภาพ (ต่อ) หน้า คำนำ รูปที่ 2.3 แสดงการปรับเปลี่ยนสีพื้นหลังเป็นรูปภาพ 28 รูปที่ 2.4 แสดงโปรไฟล์ 28 รูปที่ 2.5 แสดงการแก้หน้าโปรไฟล์ 29 รูปที่ 2.6 แสดงเครื่องมือรูปลักษณ์ 29 รูปที่ 2.7 แสดงเครื่องมือรูปลักษณ์ Lightning Home page slide show 30 รูปที่ 2.8 แสดงการกำหนดขนาดกว้างยาว 30 รูปที่ 2.9 แสดงการเลือกรูปภาพที่ต้องการแสดง 31 รูปที่ 2.10 แสดงผลลัพธ์ 31 รูปที่ 2.11 แสดงปักหมุดไว้บนสุดของบล็อก 32 รูปที่ 2.12 แสดงการใส่สีข้อความ 32 รูปที่ 2.13 แสดงรูปลักษณ์เลือกเมนู 33 รูปที่ 2.14 แสดงเมนู 33 รูปที่ 2.15 แสด create a new menu 34 รูปที่ 2.16 การสร้างชื่อเมนู 34 รูปที่ 2.17 การสร้างเมนู 35 รูปที่ 2.18 หน้าเพิ่มเมนูไอเทม 35 รูปที่ 2.19 หน้าลบเมนูไอเทม 36 รูปที่ 2.20 ตัวอย่างเมนูด้านบนหน้าเพจ 36 รูปที่ 2.21 สร้างเมนูเพิ่มเมนู 36 รูปที่ 2.22 ปรากฏเมนูย่อย 37
สารบัญรูปภาพ (ต่อ) หน้า คำนำ รูปที่ 2.23 ปรับแต่งลิ้งก์ ใส่ลิ้งก์ที่ต้องการเชื่อมโยง 37 รูปที่ 3.1. หน้าเรื่องที่ต้องการลงไฟล์ Youtube 53 รูปที่ 3.2 เลือกไฟล์วีดีโอYoutube 54 รูปที่ 3.3 เรื่องใหม่ (Post) 54 รูปที่ 3.4 เครื่องหมายบวก 54 รูปที่ 3.5 คลิกไฟล์ PDF 55 รูปที่ 3.6 ผลลัพธ์ไฟล์ PDF 55 รูปที่ 3.7 ผลลัพธ์หน้าปลั๊กอิน 56 รูปที่ 3.8 ผลลัพธ์หน้าค้นหา 56 รูปที่ 3.9 ผลลัพธ์หน้าFacebook for WooCommerce 56 รูปที่ 3.10 ผลลัพธ์หน้าการแทรกเสียงในหน้าโพสต์ 57 รูปภาพที่ 3.11 ผลลัพธ์การฝั่งคลิปประเภท VDO 57 รูปภาพที่ 3.12 ผลลัพธ์การฝั่งคลิปประเภท Tiktok 58 รูปภาพที่ 3.13 ผลลัพธ์หน้าปลั๊กอิน 58 รูปภาพที่ 3.14 ผลลัพธ์หน้า Short Code 59 รูปภาพที่ 3.15 ผลลัพธ์หน้าการแทรก Animation Gif 59 รูปที่ 4.1 แสดงหน้า WooComerce 76 รูปที่ 4.2 แสดงหน้า WooComerce พร้อมใช้งาน 76 รูปที่ 4.3 แสดงหน้าดาวน์โหลด WooComerce 77 รูปที่ 4.4 แสดงหน้า Download 77
สารบัญรูปภาพ (ต่อ) หน้า คำนำ รูปที่ 4.5 แสดงไฟล์การติดตั้ง WooComerce 78 รูปที่ 4.6 แสดงไฟล์การติดตั้ง WooComerce 78 รูปที่ 4.7 แสดงรายละเอียดร้านค้า 78 รูปที่ 4.8 แสดงรายละเอียดเกี่ยวกับธุรกิจ 79 รูปที่ 4.9 แสดงหน้าต่างการติดตั้ง 79 รูปที่ 4.10 แสดงหน้าต่างการติดตั้ง WooCommerce 80 รูปที่ 4.11 แสดงหน้าต่างการเพิ่มไอคอนแชร์สินค้า 80 รูปที่ 4.12 แสดงหน้าต่างการดำเนินการติดตั้ง 81 รูปที่ 4.13 แสดงหน้าต่างการแชร์สินค้า 81 รูปที่ 4.14 แสดงหน้าต่าง shop 82 รูปที่ 4.15 แสดงหน้าต่างการตั้งค่าเมนูภาษาไทย 82 รูปที่ 4.16 แสดงหน้าต่างการตั้งค่าการชำระเงิน 83 รูปที่ 5.1 แสดงการติดตั้ง Insert PHP Code Snippet 97 รูปที่ 5.2 แสดงการ Activate Elementor 97 รูปที่ 5.3 แสดงหน้าต่าง XYZ PHP Code 98 รูปที่ 5.4 แสดงหน้าต่าง พิมพ์ Code php 98 รูปที่ 5.5 แสดงโค๊ดการอัปโหลดไฟล์นามสกุล SVG ที่มา: หนังสือ สูตรลับการสร้างร้านค้า 99 รูปที่ 5.4 แสดงการเปลี่ยนสีพื้นหลังแบบสุ่ม ที่มk: หนังสือ สูตรลับการสร้างร้านค้า 99 รูปที่ 5.5 แสดงลงชื่อเข้าใช้งาน Google 100 รูปที่ 5.5 แสดงการรายงานข้อมูลเชิงลึก 100
สารบัญรูปภาพ (ต่อ) หน้า คำนำ รูปที่ 5.6 แสดงค้นหา SEO 101 รูปที่ 5.7 แสดง Yoast SEO 101
ลักษณะรายวิชา หลักสูตร ประกาศนียบัตรวิชาชีพชั้นสูง พุทธศักราช 2567 ประเภทวิชา ช่างอุตสาหกรรมดิจิทัลและเทคโนโลยีสารสนเทศ สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ชื่อวิชา การพัฒนาเว็บไซต์ทางธุรกิจ รหัสวิชา 31910-2011 จำนวนชั่วโมง รวม 72 ชั่วโมง จำนวน 3 หน่วยกิต ......................................................................................................................................................... ผลลัพธ์การเรียนรู้ระดับรายวิชา พัฒนาเว็บไซต์ทางธุรกิจ ด้วยความละเอียด รอบคอบ จุดประสงค์รายวิชา เพื่อให้ 1. เข้าใจเกี่ยวกับหลักการพัฒนาเว็บไซต์ทางธุรกิจ 2. มีทักษะการใช้โปรแกรมสร้างเว็บไซต์ทางธุรกิจ 3. มีเจตคติและกิจนิสัยที่ดีในการปฏิบัติงานด้วยความละเอียด รอบคอบ 4. มีความสามารถประยุกต์ใช้โปรแกรมเว็บไซต์ทางธุรกิจ สมรรถนะรายวิชา 1. ประมวลความรู้เกี่ยวกับการพัฒนาเว็บไซต์ทางธุรกิจตามหลักการ 2. สร้างเว็บไซต์ทางธุรกิจตามหลักการและกระบวนการ 3. ประยุกต์ใช้โปรแกรมพัฒนาเว็บไซต์ทางธุรกิจ คำอธิบายรายวิชา ศึกษาและปฏิบัติเกี่ยวกับหลักการพัฒนาเว็บไซต์ทางธุรกิจ องค์ประกอบ เทคโนโลยีพื้นฐานของเว็บไซต์ การจัดการเนื้อหา การออกแบบและการพัฒนาเว็บไซต์ ส่วนติดต่อกับผู้ใช้ การใช้โปรแกรมพัฒนาเว็บไซต์ เครื่องมือ ในการพัฒนาเว็บไซต์ ภาษา PHP HTML, CSS,MySQL การเชื่อมต่อฐานข้อมูล (Database) ประยุกต์ใช้โปรแกรม พัฒนาเว็บไซต์ทางธุรกิจ ค
หน่วยการเรียนรู้ รหัสวิชา 31910-2011 ชื่อวิชา การพัฒนาเว็บไซต์ทางธุรกิจ ระดับชั้น ประกาศนียบัตรวิชาชีพชั้นสูง พุทธศักราช 2567 สาขาวิชา เทคโนโลยีธุรกิจดิจิทัล เวลาเรียน 4 ชั่วโมง/สัปดาห์ จำนวน 3 หน่วยกิต หน่วย ที่ ชื่อหน่วยการเรียน สาระการเรียนรู้ จำนวน ชั่วโมง 1 หลักการพัฒนาเว็บไซต์ทาง ธุรกิจ 1. ความรู้พื้นฐานเกี่ยวกับอินเทอร์เน็ต 2. บริการต่าง ๆ ที่มีบนอินเทอร์เน็ต 3. บริการเวิลด์ไวด์เว็บ (World Wide Web) 4. ระบบโดเมน 5. การค้นหาผ่านเว็บ (Web Search) 6. เว็บ 1.0 เว็บ 2.0 และ 3.0 4 2 องค์ประกอบของเทคโนโลยี พื้นฐานของเว็บไซต์ 1. การออกแบบโครงสร้างเว็บไซต์ 2. ลักษณะโครงสร้างเว็บไซต์ 3. กระบวนการเตรียมข้อมูล 4. กระบวนการออกแบบและสร้างเว็บไซต์ 5. การเลือกสีที่เหมาะสมกับเว็บไซต์ 6. ความละเอียดในการแสดงผลและการแสดงสี 7. การออกแบบ User Interface 8. การออกแบบระบบเนวิเกชั่น 4 3 การจัดการเนื้อหา 1. การสร้างฟอร์มสำหรับส่งข้อมูล 2. การรับข้อมูลจากฟอร์ม 3. การแทรกโค๊ด JavaScrip 4. การใช้งาน Session 5. การพัฒนาเว็บด้วย Framework 8 4 ก า ร อ อ ก แ บ บ แ ล ะ ก า ร พัฒนาเว็บไซต์ ส่วนติดต่อ กับผู้ใช้ 1. ความหมายของส่วนติดต่อกับผู้ใช้ 2. องค์ประกอบของส่วนติดต่อกับผู้ใช้ 3. ระบบจัดการส่วนติดต่อกับผู้ใช้ 4. การออกแบบส่วนติดต่อกับผู้ใช้ 5. รูปแบบของส่วนติดต่อกับผู้ใช้ 6. การออกแบบการจัดการวางและการแสดงผล 8 ง
หน่วย ที่ ชื่อหน่วยการเรียน สาระการเรียนรู้ จำนวน ชั่วโมง 5 เครื่องมือในการพัฒนา เว็บไซต์ ภาษา PHP HTML, CSS, 1. ความหมายของภาษาพีเอชพี HTML 2. ความหมายของภาษาพีเอชพี (PHP) 3. รูปแบบภาษา HTML 4. รูปแบบภาษาพีเอชพี (PHP) 5. การกำหนดชนิดภาษาพีเอชพี (PHP) 6. การกำหนดตัวแปรและฟังก์ชั่น 7. การจัดการด้วยสไตล์ CSS 8 6 การเชื่อมต่อฐานข้อมูล (Database) 1. การติดตั้งโปรแกรมเว็บเซิร์ฟเวอร์ XAMPP 2. การสร้างฐานข้อมูล 3. การจัดการตาราง 4. การ Import ไฟล์เข้าสู่ฐานข้อมูล 5. การติดตั้งเว็บเซิร์ฟเวอร์ XAMPP 6. การ Export Database 7. การติดตั้งเว็บไซต์แบบออฟไลน์ 12 7 การใช้โปรแกรมพัฒนา เว็บไซต์ WordPress 1. การติดตั้งโปรแกรม WordPress 2. การบอกวิธีการตกแต่งเนื้อหาและเมนู WordPress 3. การตกแต่ง Media ใน WordPress 4. การสร้างร้านค้าด้วยธีม WooComerce 5. การใช้งาน php ร่วมกับ WordPress 12 8 ประยุกต์ใช้โปรแกรมพัฒนา เว็บไซต์ทางธุรกิจ (กรณีศึกษาการจัดทำเว็บ แอปพลิเคชั่นกลุ่มวิสาหกิจ ชุมชน กระยาสาท) 1. ความหมายและความสำคัญของระบบสมาชิก 2. การเขียนคำสั่งระบบสมาชิก 3. ระบบการสั่งซื้อผ่านเว็บแอปพลิเคชั่น 4. ระบบการสั่งซื้อผ่านช่องทางยูทูป 5. ระบบการสั่งซื้อผ่าน Tiktok 6. ระบบการสั่งซื้อผ่าน Line 12 สอบปลายภาค 4 รวม 72
วิเคราะห์จุดประสงค์การเรียนรู้ รหัสวิชา 31910-2011 ชื่อวิชา การพัฒนาเว็บไซต์ทางธุรกิจ ระดับชั้น ประกาศนียบัตรวิชาชีพชั้นสูง พุทธศักราช 2563 สาขาวิชา เทคโนโลยีธุรกิจดิจิทัล เวลาเรียน 4 ชั่วโมง/สัปดาห์ จำนวน 3 หน่วยกิต หน่วยที่ ชื่อหน่วยการเรียนรู้ จุดประสงค์การเรียนรู้ 1 หลักการพัฒนาเว็บไซต์ทางธุรกิจ 1. อธิบายความรู้พื้นฐานเกี่ยวกับอินเทอร์เน็ต 2. บอกบริการต่าง ๆ ที่มีบนอินเทอร์เน็ต 3. บอกบริการเวิลด์ไวด์เว็บ (World Wide Web) 4. อธิบายระบบโดเมน 5. บอกการค้นหาผ่านเว็บ (Web Search) 6. อธิบายเว็บ 1.0 เว็บ 2.0 และ 3.0 2 องค์ประกอบของเทคโนโลยีพื้นฐาน ของเว็บไซต์ 1. อธิบายการออกแบบโครงสร้างเว็บไซต์ 2. บอกลักษณะโครงสร้างเว็บไซต์ 3. อธิบายกระบวนการเตรียมข้อมูล 4. อธิบายกระบวนการออกแบบและสร้างเว็บไซต์ 5. อธิบายการเลือกสีที่เหมาะสมกับเว็บไซต์ 6. อธิบายความละเอียดในการแสดงผลและการ แสดงสี 7. อธิบายการออกแบบ User Interface 8. อธิบายการออกแบบระบบเนวิเกชั่น 3 การจัดการเนื้อหา 1. อธิบายการสร้างฟอร์มสำหรับส่งข้อมูล 2. บอกการรับข้อมูลจากฟอร์ม 3. บอกการแทรกโค๊ด JavaScrip 4. อธิบายการใช้งาน Session 5. บอกการพัฒนาเว็บด้วย Framework 4 การออกแบบและการพัฒนาเว็บไซต์ ส่วนติดต่อกับผู้ใช้ 1. บอกความหมายของส่วนติดต่อกับผู้ใช้ 2. บอกองค์ประกอบของส่วนติดต่อกับผู้ใช้ 3. อธิบายระบบจัดการส่วนติดต่อกับผู้ใช้ 4. อธิบายการออกแบบส่วนติดต่อกับผู้ใช้ 5. บอกรูปแบบของส่วนติดต่อกับผู้ใช้ 6. บอกการออกแบบการจัดการวางและการ แสดงผล จ
หน่วยที่ ชื่อหน่วยการเรียนรู้ 7. จุดประสงค์การเรียนรู้ 5 เครื่องมือในการพัฒนาเว็บไซต์ ภาษา PHP HTML, CSS, 1. บอกความหมายของภาษาพีเอชพี HTML 2. บอกความหมายของภาษาพีเอชพี (PHP) 3. อธิบายรูปแบบภาษา HTML 4. อธิบายรูปแบบภาษาพีเอชพี (PHP) 5. อธิบายการกำหนดชนิดภาษาพีเอชพี (PHP) 6. อธิบายการกำหนดตัวแปรและฟังก์ชั่น 7. อธิบายการจัดการด้วยสไตล์ CSS 6 การเชื่อมต่อฐานข้อมูล (Database) 1. บอกการติดตั้งโปรแกรมเว็บเซิร์ฟเวอร์ XAMPP 2. อธิบายการสร้างฐานข้อมูล 3. อธิบายการจัดการตาราง 4. อธิบายการ Import ไฟล์เข้าสู่ฐานข้อมูล 5. อธิบายการติดตั้งเว็บเซิร์ฟเวอร์ XAMPP 6. อธิบายการ Export Database 7. อธิบายการติดตั้งเว็บไซต์แบบออฟไลน์ 7 การใช้โปรแกรมพัฒนาเว็บไซต์ WordPress 1. อธิบายการติดตั้งโปรแกรม WordPress 2. บอกวิธีการตกแต่งเนื้อหาและเมนูWordPress 3. อธิบายการแตกแต่ง Media ใน WordPress 4. บอกการสร้างร้านค้าด้วยธีม WooComerce 8. อธิบายวิธีการใช้งาน php ร่วมกับ WordPress 8 ประยุกต์ใช้โปรแกรมพัฒนาเว็บไซต์ ทางธุรกิจ(กรณีศึกษาการจัดทำเว็บ แอปพลิเคชั่นกลุ่มวิสาหกิจชุมชน กระยาสาท) 1. บอกความหมายและความสำคัญของระบบ สมาชิก 2. อธิบายการเขียนคำสั่งระบบสมาชิก 3. บอกระบบการสั่งซื้อผ่านเว็บแอปพลิเคชั่น 4. บอกระบบการสั่งซื้อผ่านช่องทางยูทูป 5. บอกระบบการสั่งซื้อผ่าน Tiktok 6. บอกระบบการสั่งซื้อผ่าน Line
วิเคราะห์หน่วยการเรียนนรู้และเวลที่ใช้ในการจัดการเรียนรู้ รหัสวิชา 31910-2011 ชื่อวิชา การพัฒนาเว็บไซต์ทางธุรกิจ ระดับชั้น ประกาศนียบัตรวิชาชีพชั้นสูง พุทธศักราช 2567 สาขาวิชา เทคโนโลยีธุรกิจดิจิทัล เวลาเรียน 4 ชั่วโมง/สัปดาห์ จำนวน 3 หน่วยกิต หน่วย ที่ ชื่อหน่วยการเรียนรู้ สัปดาห์ที่ ชั่วโมง 1 หลักการพัฒนาเว็บไซต์ทางธุรกิจ 1 1-4 2 องค์ประกอบของเทคโนโลยีพื้นฐานของเว็บไซต์ 2 5-8 3 การจัดการเนื้อหา 3-4 9-16 4 การออกแบบและการพัฒนาเว็บไซต์ ส่วนติดต่อกับผู้ใช้ 5-6 17-24 5 เครื่องมือในการพัฒนาเว็บไซต์ ภาษา PHP HTML, CSS, 7-8 25-32 6 การเชื่อมต่อฐานข้อมูล (Database) 9-11 33-44 7 การใช้โปรแกรมพัฒนาเว็บไซต์WordPress 12-14 45-56 8 ประยุกต์ใช้โปรแกรมพัฒนาเว็บไซต์ทางธุรกิจ(กรณีศึกษาการจัดทำเว็บ แอปพลิเคชั่นกลุ่มวิสาหกิจชุมชน กระยาสาท) 15-17 57-69 สอบปลายภาค 18 69-72 รวม 18 72 ฉ
วิเคราะห์หน่วยการเรียนนรู้และเวลที่ใช้ในการจัดการเรียนรู้ รหัสวิชา 31910-2011 ชื่อวิชา การพัฒนาเว็บไซต์ทางธุรกิจ ระดับชั้น ประกาศนียบัตรวิชาชีพชั้นสูง พุทธศักราช 2567 สาขาวิชา เทคโนโลยีธุรกิจดิจิทัล เวลาเรียน 4 ชั่วโมง/สัปดาห์ จำนวน 3 หน่วยกิต หน่วย ที่ ชื่อหน่วยการเรียนรู้ เวลาสอน (ชั่วโมง) ทฤษฏี ปฏิบัติ รวม 1 หลักการพัฒนาเว็บไซต์ทางธุรกิจ 4 0 4 2 องค์ประกอบของเทคโนโลยีพื้นฐานของเว็บไซต์ 4 0 4 3 การจัดการเนื้อหา 2 6 8 4 การออกแบบและการพัฒนาเว็บไซต์ ส่วนติดต่อกับผู้ใช้ 2 6 8 5 เครื่องมือในการพัฒนาเว็บไซต์ ภาษา PHP HTML, CSS, 2 6 8 6 การเชื่อมต่อฐานข้อมูล (Database) 2 10 12 7 การใช้โปรแกรมพัฒนาเว็บไซต์WordPress 2 10 12 8 ประยุกต์ใช้โปรแกรมพัฒนาเว็บไซต์ทางธุรกิจ(กรณีศึกษาการ จัดทำเว็บแอปพลิเคชั่นกลุ่มวิสาหกิจชุมชน กระยาสาท) 2 10 12 สอบปลายภาค 4 4 รวม 72 ช
วิเคราะห์หลักสูตรรายวิชาและระดับพฤติกรรมที่พึงประสงค์ รหัสวิชา 31910-2011 ชื่อวิชา การพัฒนาเว็บไซต์ทางธุรกิจ ระดับชั้น ประกาศนียบัตรวิชาชีพชั้นสูง พุทธศักราช 2567 สาขาวิชา เทคโนโลยีธุรกิจดิจิทัล เวลาเรียน 4 ชั่วโมง/สัปดาห์ จำนวน 3 หน่วยกิต หน่วย ที่ ชื่อหน่วยการเรียนรู้ ระดับพฤติกรรมที่พึงประสงค์ เวลา พุทธพิสัย ทักษะ (ชม.) พิสัย จิต 1 2 3 4 5 6 พิสัย 1 หลักการพัฒนาเว็บไซต์ทางธุรกิจ ✓ ✓ ✓ ✓ 4 2 องค์ประกอบของเทคโนโลยีพื้นฐานของ เว็บไซต์ ✓ ✓ ✓ ✓ 4 3 การจัดการเนื้อหา ✓ ✓ ✓ ✓ ✓ 8 4 การออกแบบและการพัฒนาเว็บไซต์ ส่วน ติดต่อกับผู้ใช้ ✓ ✓ ✓ ✓ ✓ ✓ 8 5 เครื่องมือในการพัฒนาเว็บไซต์ ภาษา PHP HTML, CSS, ✓ ✓ ✓ ✓ ✓ ✓ 8 6 การเชื่อมต่อฐานข้อมูล (Database) ✓ ✓ ✓ ✓ 12 7 การใช้โปรแกรมพัฒนาเว็บไซต์ WordPress ✓ ✓ ✓ ✓ ✓ 12 8 ประยุกต์ใช้โปรแกรมพัฒนาเว็บไซต์ทาง ธุรกิจ(กรณีศึกษาการจัดทำเว็บ แอปพลิเคชั่นกลุ่มวิสาหกิจชุมชน กระยา สาท) ✓ ✓ ✓ ✓ ✓ 12 สอบปลายภาค ✓ ✓ ✓ ✓ 4 คะแนน 5 10 10 5 50 20 72 ความสำคัญ/สัดส่วนคะแนน (ร้อยละ) 30 50 20 100 หมายเหตุ ระดับพุทธิพิสัย 1= ความจำ 2 = ความเข้าใจ 3 = การนำไปใช้ 4 = วิเคราะห์ 5 = สังเคราะห์ 6 = ประเมินค่า ซ
วิธีการวัดผลประเมินผล รหัสวิชา 31910-2011 ชื่อวิชา การพัฒนาเว็บไซต์ทางธุรกิจ ระดับชั้น ประกาศนียบัตรวิชาชีพชั้นสูง พุทธศักราช 2567 สาขาวิชา เทคโนโลยีธุรกิจดิจิทัล เวลาเรียน 4 ชั่วโมง/สัปดาห์ จำนวน 3 หน่วยกิต ..................................................................................................................................................................... การวัดผล คะแนนเต็ม 100 คะแนน แบ่งการวัดและประเมินผล ดังนี้ 1. พุทธพิสัย (ความรู้) 1.1 แบบฝึกหัด (หน่วยที่ 1-8) 10 คะแนน 1.2 แบบทดสอบหลังเรียน (หน่วยที่ 1-8) 10 คะแนน 1.3 แบบทดสอบวัดผลสัมฤทธิ์ทางการเรียน 10 คะแนน 2. ทักษะพิสัย 2.1 ใบงานการทดลอง (หน่วยที่ 1-8) 50 คะแนน 3. จิตพิสัย (หน่วยที่ 1-8) 20 คะแนน 4. พฤติกรรมที่คาดหวัง การนำปรัชญาของเศรษฐกิจพอเพียงมาใช้ ผ่าน ไม่ผ่าน รวม 100 คะแนน การประเมินผล ระดับคะแนน 80 ขึ้นไป หมายถึง 4.0 ระดับคะแนน 75-79 หมายถึง 3.5 ระดับคะแนน 70-74 หมายถึง 2.5 ระดับคะแนน 65-69 หมายถึง 2.0 ระดับคะแนน 55-59 หมายถึง 1.5 ระดับคะแนน 50-54 หมายถึง 1.0 ระดับคะแนน ต่ำกว่า 50 หมายถึง 0 ฌ
หน่วยที่ 1 การติดตั้งโปรแกรม WordPress 1. สาระสำคัญ WordPress คือ โปรแกรมสำเร็จรูปที่ใช้สำหรับจัดการหน้าเว็บไซต์ โดยการทำงานไม่ซับซ้อนเหมาะสม กับผู้ที่ไม่มีพื้นฐานเกี่ยวกับเว็บไซต์ หรือผู้ที่มีความเชี่ยวชาญ ซึ่งจัดเป็นโปแกรมที่อยู่ในหมวดหมู่ เดียวกับ Contents Management System (CMS) ซึ่งถูกพัฒนาด้วยภาษา PHP สามารถทำงานบนฐานข้อมูล MySQL 2. สมรรถนะประจำหน่วย ผู้เรียนสามารถการติดตั้งโปรแกรม WordPress ได้ 3. จุดประสงค์การเรียนรู้ จุดประสงค์ทั่วไป 1. เพื่อให้มีความรู้ความเข้าใจการติดตั้งโปรแกรม WordPress 2. เพื่อให้มีคุณธรรม จริยธรรมในงานอาชีพและตระหนักถึงคุณค่าของปรัชญาของเศรษฐกิจพอเพียง จุดประสงค์เชิงพฤติกรรม ด้านความรู้(ทฤษฏี) 1. บอกส่วนประกอบ Dashboard ได้ 2. อธิบายการตั้งค่าต่างๆใน WordPressได้ ด้านทักษะ (ปฏิบัติ) 1. สามารถติดตั้งโปรแกรม WordPressได้ 2. สามารถปรับแต่งค่าพื้นฐานของ WordPressได้ ด้านจิตพิสัย 1. ความมีวินัย 2. ความมุ่งมั้นในการทำงาน 3. ความซื่อสัตย์ 4. ความสนใจใฝ่รู้ 5. ความมีมนุษย์สัมพันธ์ 4. เนื้อหาสาระ 1. การติดตั้งโปรแกรม WordPress 2. ส่วนประกอบ Dashboard 3. การปรับแต่งค่าพื้นฐานของ WordPress 4. การตั้งค่าต่างๆใน WordPress 1
แบบทดสอบก่อนเรียน คำชี้แจง ให้นักเรียนเลือกคำตอบที่ถูกที่สุดเพียงคำตอบเดียวและทำเครื่องหมาย () ลงในกระดาษคำตอบ (10 คะแนน) 1. CMS ย่อมาจากอะไร ก. Content Management System ข. Content Management Stem ค. Color Management Support ง. Contact Management System 2. CMS เป็นโปรแกรมที่ถูกสร้างขึ้นมาเพื่อใช้ในวัตถุประสงค์ใด ก. การจัดการเนื้อหา ข. การจัดไฟล์เอกสารมัลติมีเดีย ค. การจัดการเกี่ยวกับเสียง ง. การจัดการเกี่ยวกับภพเคลื่อนไหว 3. ข้อใดต่อไปนี้ไม่ได้ข้อดีของ CMS ก. ผู้ใช้งานไม่จำเป็นต้องมีความรู้เรื่องการทำเว็บไซต์ ข. ขั้นตอนการติดตั้งยุ่งยากซับซ้อน ค. ง่ายต่อการดูแล เพราะมีระบบการจัดการทุกอย่างให้เราหมด ง. ไม่ง่ายต่อการดูแล เพราะมีระบบจัดการที่ยุ่งยาก 4. CMS ที่นำมาใช้ในกเนื้อหาหน่วยนี้ชื่อว่าอะไร ก. Wordpress ข. Membo ค. Joomla ง. Dupal 5. ข้อใดต่อไปนี้ไม่ใช่ลักษณะของ WordPress ก. เครื่องมือไว้สำหรับสร้างเว็บไซต์ ประเภท Web CMS ข. เครื่องมือไว้สำหรับสร้าง Blog ค. เครื่องมือไว้สำหรับสร้างเว็บไซต์ ประเภท Web Editor ง. Open Source web software 6. WordPress.com กับ wordpress.org ต่างกันอย่างไร ก. WordPress.com เหมาะสำหรับสร้างเว็บไซต์ ประเภท Web Editor ส่วน WordPress.org เหมาะ สำหรับสร้างเว็บไซต์ ประเภท web CMS ข. WordPress.com เหมาะสำหรับสร้าง Blog ส่วน WordPress.org เหมาะสำหรับสร้างเว็บไซต์ ประเภท Web Editor ค. WordPress.com ใช้งานได้ฟรี ส่วน WordPress.org ต้องเสียค่าเช่าโฮส 2
ง. WordPress.com กับ WordPress.org ไม่แตกต่างกัน 7. เหตุผลใดจึงต้องเลือกการสร้างบล็อกด้วย WordPress.com ก. ติดตั้ง Plugin ได้ตามที่ต้องการ ข. ปรับแต่ง theme ได้สะดวก และสามารถ Download theme มาติดตั้งเองได้ ค. อิสระในการใช้งาน เนื่องจากการโหลดมาติดตั้งที่ server ง. ใช้งานได้ฟรีๆ ไม่ต้องเสียค่า hosting 8. เมื่อทำการลงทะเบียนการใช้งาน WordPress เรียบร้อยขั้นตอนสำคัญที่จะต้องปฏิบัติก่อนเริ่มสร้างบล็อก คืออะไร ก. การยืนยัน Active Blog ข. การยืนยันการใช้ Domain ค. การยืนยันรหัสอีเมล์และรหัสผู้ใช้งาน ง. การยืนยัน Password 9. การ Active Blog ต้องเปิดจากที่ใด ก. เปิดเว็บไซต์ WordPress.com ข. เปิดเว็บไซต์ WordPress.org ค. เปิด E-mail ที่ google.com ส่งมาให้ ง. เปิด e-mail ที่ WordPress.com ส่งมาให้ 10. ข้อใดไม่ใช่ส่วนประกอบหลักของเว็บเพจ ก. ตัวอักษร ข. รูปภาพ ค. ภาพเคลื่อนไหว ง. ซอฟแวร์ สแกน QRCODE เพื่อทำแบบทดสอบออนไลน์ 3
หน่วยที่ 1 การติดตั้งโปรแกรม WordPress เวิร์ดเพรส (WordPress) คือ โปรแกรมสำเร็จรูปที่ใช้สำหรับการจัดการหน้า Wesite ประเภทContents Management System หรือเรียกย่อๆ ว่า “CMS” ซึ่งเขียนด้วยภาษา PHP และใช้ระบบจัดการ ฐานข้อมูล MySQL โดยมีส่วนประกอบหลักๆ คือ 1. WordPress Core เป็นซอฟแวร์หลัก ใช้จัดการเว็บไซต์ เนื้อหาและบทความต่างๆ 2. Theme เป็นส่วนที่กำหนดดีไซน์หรือรูปแบบการแสดงผล 3. Plugin เป็นส่วนที่ช่วยเพิ่มความสามารถให้กับ WordPress เช่น ระบบสร้างหน้าเว็บไซต์ ระบบจัดการ สินค้า ข้อดีของ CMS 1. การใช้งานฟรีและเรียกใช้งานง่าย 2. มี plugin ดีๆ ให้ใช้งาน 3. การตกแต่งสวยงามและ มีระบบ Plugin 4. มีความเป็นสากล สะดวกต่อการใช้งาน และมีการอัปเดตได้ตลดอดเวลา 5. มีการพัฒนาต่อเนื่อง ข้อเสียของ CMS 1. ผู้ใช้จะต้องมีความรู้ในการบริหารจัดการระบบ CMS 2. ผู้ใช้ออกแบบธีม จะต้องมีความรู้เนื่องจาก CMS มีหลายๆระบบมารวมกันทำให้เกิดความยุ่งยาก สำหรับผู้ ไม่มีความรู้เท่าทีควร การติดตั้งโปรแกรม WordPress 1.Download ไฟล์ WordPress 2. การทำแตกไฟล์ออกมาดังภาพ รูปที่ 1.1 การแตกไฟล์ Download 4
3. คัดลอกโฟลเดอร์ไปวางไว้ที่ xampp/htdocs/ รูปที่ 1.2 โฟลเดอร์ไปวางไว้ที่ xampp/htdocs/ 4 การติดตั้ง โปรแกรม XAMPP รูปที่ 1.3 การติดตั้ง โปรแกรม XAMPP 4.1 ดับเบิ้ลคลิกที่ XAMPP จะปรากฏหน้าต่าง ระบบติดต้งั XAMPP จะเริ่มทำ งำนให้คลิกที่ปุ่ม Next รูปที่ 1.4 หน้าต่าง ระบบติดต้งั XAMPP 5
4.2 เลือกโปรแกรมที่ต้องการติดตั้ง ในตัวอย่างนี้เลือกทั้งหมด จากนั้นให้คลิกที่ปุ่ม Next รูปที่ 1.5 เลือกโปรแกรมที่ต้องการติดตั้ง 4.3 เลือกไดร์หรือโฟลเดอร์ที่ต้องการติดตั้งจากนั้นคลิกที่ปุ่ม Next รูปที่ 1.6 เลือกไดร์หรือโฟลเดอร์ 6
4.4 เลือกภาษาที่ต้องการติดตั้ง จากตัวอย่างเลือก English จากนั้นคลิกที่ปุ่ม Next รูปที่1.7 เลือกภาษาที่ต้องการติดตั้ง 4.5 แสดงหน้าต่าง Bitnami ขึ้นมา หากไม่ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Bitnami ใน XAMPP ให้เอา เครื่องหมายถูกหน้าข้อความ “Learn more about Bitnami for XAMPP” ออก จากนั้นคลิกที่ปุ่ม Next รูปที่ 1.8 แสดงหน้าต่าง Bitnami 7
4.6 แสดงข้อความว่าโปรแกรมพร้อมที่จะติดตั้งแล้ว ให้คลิกที่ปุ่ม Next รูปที่ 1.9 แสดงข้อความว่าโปรแกรมพร้อมที่จะติดตั้ง 4.7 ให้รอจนกว่าระบบจะติดตั้งโปรแกรมเสร็จ รูปที่ 1.10 ระบบจะติดตั้งโปรแกรม 8
4.8 เมื่อติดตั้งเสร็จแล้ว หากต้องการเริ่มใช้งาน XAMPP เลย ให้ติ๊กถูกหน้าข้อความ “Do you want to start the control Panel now” จากนั้นคลิกที่ปุ่ม Finish รูปที่ 1. 11 ติดตั้งเสร็จ 4.9 Control Panel ของ XAMPP จะแสดงขึ้นมา ดังภาพ รูปที่ 1.12 Control Panel ของ XAMPP จะแสดงขึ้นมา 9
2. ส่วนประกอบ Dashboard หน้าเว็บไซต์ (หน้าบ้าน) คือ หน้าเพจที่ใช้ใยการแสดงเนื้อหา เช่น รูปภาพ คลิปวีดีโอ หรือโปรแกรม เสริมการทำงานต่าง โดยสามารถเรียกหน้าเว็บไซต์ “WordPress” โดยพิมพ์ URL ผ่าน Brower ดังนี้ รูปที่ 1.13 หน้าเว็บไซต์ (หน้าบ้าน) 3. การปรับแต่งค่าพื้นฐานของ WordPress 4. การตั้งค่าต่างๆใน WordPress รูปที่ 1.14 แสดงหน้าแรกของเว็บไซต์ หน้าผู้ดูแลระบบ (หลังบ้าน) คือ หน้าเพจที่ใช้สำหรับจัดการข้อมูลทั้งหมดบนเว็บไซต์ เช่น การจัดการหมวดหมู่ บทความ เมนู ฯลฯ โดยผู้มราสามารถเขาถึงหน้าหลังบ้านได้หรือผู้ดูแลระบบ หรือ Admin เท่านั้น โดยสามารถ พิมพ์คำว่า /wp-login.php ต่อท้ายที่อยู่ของเว็บไซต์ ดังภาพ รูปที่1.15 แสดงหน้า wp-login.php 10
รูปที่ 1.16 แสดงหน้า login เข้าหลังบ้าน ให้กรอกชื่อผู้ใช้งานและรหัสผ่าน ในช่อง User Name , Password และคลิกปุ่ม Login (เข้าสู่ระบบ) จะแสดง หน้าเว็บส่วนของผู้ดูแลระบบ หรือ Dasboard ซึ่งใช้สำหรับจัดการและควบคุมการทำงานของเว็บไซต์ ดังภาพ 11
ฃฃฃฃฃฃฃฃฃฃฃฃฃฃ รูปที่ 1.17 ส่วนการจัดการ Dashboard ส่วนประกอบ Dashboard ประกอบด้วย 3 ส่วน 1. Toolbar แถบเครื่องมือดู่ด้านบนสุด 2. Main Navigation Menu เมนูหลักด้านซ้าย 3. Main Work Area พื้นที่ทำงานหลักจัดการเนื้อหาเว็บไซต์ การตั้งค่าการทำงานเมนู ตั้งค่า (Setting) เมนูหลัก แถบเครื่องมือ ส่วนพื้นที่ทำงานหลัก รูปที่1.18 การตั้งค่าการทำงานเมนู 12
การเขียน (Writing Settings) ประกอบด้วย การกำหนดหมวดหมู่มาตรฐานสำหรับการเขียนโพสต์ (Default Post Category) 1. Default Post Category กำหนดหมวดหมู่มาตรฐานสำหรับการเขียนโพสต์ 2. Default Post Format เลือก Formate มาตรฐานสำหรับ Post 3. Post via email การตั้งค่าการเขียน Post ผ่านอีเมล์ 4. Mail Server เซิร์ฟเวอร์รับ-ส่ง เมล 5. Login Name ชื่อล็อคอิน 6. Password รหัสผ่าน 7. Defauit Mail Category ประเภทจดหมายเริ่มต้น 8. Update Services บริการอัปเดต แจ้งเตือนเว็บไซต์ การอ่าน Reading Settings 1. เลือกหน้าแรกที่จะแสดงเป็น Post ล่าสุด หรือ Page เฉพาะที่ต้องการ (Your homepage displays 2. แสดงจำนวน Post ในหน้าแรกหรือหน้าแสดง Post ( Blog pages show at most ) 3. การแสดงจำนวน Post ล่าสุดเท่าใดใน sysdication feeds 4. การแสดง Post ใน feed แบบแสดงข้อความเต็มหรือย่อ (For each article in a feed show) 5. การมองเห็นของเครื่องมือค้นหา (Search Engine Visibility) การสนทนา Discussion Settings 1. Attempt to notify any blogs linked to from the article (การแจ้งเตือนว่ามีบล็อกใดๆที่ ลิงก์มา หาบทความในเว็บไซต์) 2. Allow link notifications from other blogs (pingbacks and trackbacks) on new articles (อนุญาติให้เตือนว่ามีลิงก์มาจากบล็อกอื่นๆ) 3. Allow people to post comments on new articles (การอนุญาตให้ผู้เยี่ยมชมแสดง ความ คิดเห็นในบทความ) Other comment settings 1. Comment author must fill out name and email ผู้แสดงความเห็นต้องเขียนชื่อ และอีเมล 2. Users must be registered and logged in to comment ผู้ใช้ต้องลงทะเบียนและ เข้าสู่ระบบ ก่อน จะแสดงความคิดเห็น 3. Automatically close comments on articles older than 14 days ปิดการแสดง ความเห็น ของ บทความที่เก่ากว่า 14 วัน โดยอัตโนมัติ 4. Enable threaded (nested) comments levels deep เปิดใช้ threaded (nested) ระดับความลึก ของความเห็น 13
5. Break comments into pages with 50 top level comments per page and the last/first page displayed by default การแสดงความคิดเห็น 50 ความคิดเห็นในแต่ละ หน้าและให้แสดงหน้า แรก หรือหน้าสุดท้าย ไฟล์สื่อ (Media Settings) 1. Image sizes ตั้งค่าขนาดมาตรฐานของรูปภาพ 2. Thumbnail size ภาพขนาดย่อ 3. Medium size ภาพขนาดปำนกลาง 4. Large size ภาพขนาดใหญ่ 5. Uploading Files การอัพโหลดไฟล์ (เลือกให้เรียงไฟล์ตามลำดับวัน เวลา ลิงก์ URL Permalink Settings 1. Plain ปกติ 2. Day and name วันและชื่อ 3. Month and name เดือนและชื่อ 4. Numeric – จำนวนเลข 5. Post name ชื่อ Post 6. Custom Structure แบบที่ต้องการ 14
ใบงานที่ 1.1 รายวิชา การพัฒนาเว็บไซต์ทางธุรกิจ รหัสวิชา 31910-2011 เรื่อง การติดตั้งโปรแกรม WordPress เวลา 1 ชั่วโมง 30 นาที จุดประสงค์ ด้านทักษะ (ปฏิบัติ) 1. เพื่อให้ผู้เรียนสามารถติดตั้งโปรแกรม WordPressได้ 2. เพื่อให้ผู้เรียนสามารถปรับแต่งค่าพื้นฐานของ WordPressได้ 3. เพื่อให้ผู้เรียนมีด้านการมีวินัย การตรงต่อเวลา ความรับผิดชอบ ความสนใจใฝ่รู้ และความซื่อสัตย์ สุจริต วัสดุและอุปกรณ์ 1. เครื่องไมโครคอมพิวเตอร์และอุปกรณ์ต่อพ่วง 2. โปรแกรม WordPress 3. โปรแกรม XAMPP ขั้นตอนการปฏิบัติ 1. ให้ผู้เรียนเปิดเว็บบราวเซอร์ Google Chrome แล้วพิมพ์ 192.168.1.20/web/ เพื่อ Download โปรแกรม WordPress ,โปรแกรม XAMPP 2. ให้ผู้เรียนแบ่งกลุ่ม จำนวนกลุ่มละเท่า ๆ กัน ตามความพึงพอใจ แล้วฝึกการติดตั้งโปรแกรม WordPress ,โปรแกรม XAMPP จากเนื้อหาความรู้ที่ครูให้ และจดบันทึกขั้นตอนการปฏิบัติงาน 3. ให้ผู้เรียนดำเนินการเข้าสู่โปรแกรม WordPress และจดบันทึกขั้นตอนการเข้าสู่โปรแกรม WordPress 15
แบบบันทึกลำดับขั้นตอนการปฏิบัติ รายวิชา การพัฒนาเว็บไซต์ทางธุรกิจ รหัสวิชา 31910-2011 เรื่อง การติดตั้งโปรแกรม WordPress ใบงานที่ 1 ชื่อ – นามสกุล ………………………………………………………………ชั้น……………………..เลขที่……………. คำชี้แจง ให้ผู้เรียนบันทึกลำดับขั้นตอนและผลการปฏิบัติงานดังนี้ 1. บันทึกหน้าจอการติดตั้งโปรแกรม WordPressและขั้นตอนการปฏิบัติงาน ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………............................................................... ……………………………………………………………………………………………………………………………………………...................... ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………............................................................... ……………………………………………………………………………………………………………………………………………...................... 2. บันทึกหน้าจอดำเนินการเข้าสู่โปรแกรม WordPressและจดบันทึกขั้นตอนการเข้าสู่โปรแกรม WordPress ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………............................................................... ……………………………………………………………………………………………………………………………………………...................... ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………............................................................... ……………………………………………………………………………………………………………………………………………...................... 16
แบบประเมินผลการปฏิบัติตามใบงาน ชื่องาน ฝึกปฏิบัติการติดตั้งโปรแกรม 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 ข้อมูลที่ศึกษา (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 17
แบบประเมินผลการปฏิบัติกิจกรรมกลุ่ม (ต่อ) เกณฑ์การประเมิน คะแนน เต็ม ได้ 2.3 ความชัดเจน เหมาะสม และสมบูรณ์ของภาพประกอบ (2 คะแนน) 2.3.1 ภาพประกอบมีความชัดเจน เหมาะสม และสมบูรณ์ 2 2.3.2 ภาพประกอบมีความชัดเจน เหมาะสม แต่ไม่สมบูรณ์ 1 2.4 การใช้ภาษาเรียบเรียงข้อมูล (2 คะแนน) 2.4.1 ใช้ภาษาเรียบเรียงข้อมูลอย่างถูกต้อง เหมาะสม 2 2.4.2 ใช้ภาษาเรียบเรียงข้อมูลยังขาดความถูกต้อง เหมาะสม 1 การนำเสนอ (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 18
แบบประเมินด้านคุณธรรมจริยธรรม คุณลักษณะที่พึงประสงค์ หน่วยที่ 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 คะแนน 19
แบบทดสอบหลังเรียน คำชี้แจง ให้นักเรียนเลือกคำตอบที่ถูกที่สุดเพียงคำตอบเดียวและทำเครื่องหมาย () ลงในกระดาษคำตอบ (10 คะแนน) 1. CMS ย่อมาจากอะไร ก. Content Management System ข. Content Management Stem ค. Color Management Support ง. Contact Management System 2. CMS เป็นโปรแกรมที่ถูกสร้างขึ้นมาเพื่อใช้ในวัตถุประสงค์ใด ก. การจัดการเนื้อหา ข. การจัดไฟล์เอกสารมัลติมีเดีย ค. การจัดการเกี่ยวกับเสียง ง. การจัดการเกี่ยวกับภพเคลื่อนไหว 3. ข้อใดต่อไปนี้ไม่ได้ข้อดีของ CMS ก. ผู้ใช้งานไม่จำเป็นต้องมีความรู้เรื่องการทำเว็บไซต์ ข. ขั้นตอนการติดตั้งยุ่งยากซับซ้อน ค. ง่ายต่อการดูแล เพราะมีระบบการจัดการทุกอย่างให้เราหมด ง. ไม่ง่ายต่อการดูแล เพราะมีระบบจัดการที่ยุ่งยาก 4. CMS ที่นำมาใช้ในกเนื้อหาหน่วยนี้ชื่อว่าอะไร ก. Wordpress ข. Membo ค. Joomla ง. Dupal 5. ข้อใดต่อไปนี้ไม่ใช่ลักษณะของ WordPress ก. เครื่องมือไว้สำหรับสร้างเว็บไซต์ ประเภท Web CMS ข. เครื่องมือไว้สำหรับสร้าง Blog ค. เครื่องมือไว้สำหรับสร้างเว็บไซต์ ประเภท Web Editor จ. Open Source web software 6. WordPress.com กับ wordpress.org ต่างกันอย่างไร ก. WordPress.com เหมาะสำหรับสร้างเว็บไซต์ ประเภท Web Editor ส่วน WordPress.org เหมาะ สำหรับสร้างเว็บไซต์ ประเภท web CMS ข. WordPress.com เหมาะสำหรับสร้าง Blog ส่วน WordPress.org เหมาะสำหรับสร้างเว็บไซต์ ประเภท Web Editor ค. WordPress.com ใช้งานได้ฟรี ส่วน WordPress.org ต้องเสียค่าเช่าโฮส ง. WordPress.com กับ WordPress.org ไม่แตกต่างกัน 20
7. เหตุผลใดจึงต้องเลือกการสร้างบล็อกด้วย WordPress.com ก. ติดตั้ง Plugin ได้ตามที่ต้องการ ข. ปรับแต่ง theme ได้สะดวก และสามารถ Download theme มาติดตั้งเองได้ ค. อิสระในการใช้งาน เนื่องจากการโหลดมาติดตั้งที่ server ง. ใช้งานได้ฟรีๆ ไม่ต้องเสียค่า hosting 8. เมื่อทำการลงทะเบียนการใช้งาน WordPress เรียบร้อยขั้นตอนสำคัญที่จะต้องปฏิบัติก่อนเริ่มสร้างบล็อก คืออะไร ก. การยืนยัน Active Blog ข. การยืนยันการใช้ Domain ค. การยืนยันรหัสอีเมล์และรหัสผู้ใช้งาน ง. การยืนยัน Password 9. การ Active Blog ต้องเปิดจากที่ใด ก. เปิดเว็บไซต์ WordPress.com ข. เปิดเว็บไซต์ WordPress.org ค. เปิด E-mail ที่ google.com ส่งมาให้ ง. เปิด e-mail ที่ WordPress.com ส่งมาให้ 10. ข้อใดไม่ใช่ส่วนประกอบหลักของเว็บเพจ ก. ตัวอักษร ข. รูปภาพ ค. ภาพเคลื่อนไหว ง. ซอฟแวร์ สแกน QRCODE เพื่อทำแบบทดสอบออนไลน์ 21
เฉลย ข้อ คำตอบ ข้อ คำตอบ 1 ก 6 ข 2 ก 7 ข 3 ข 8 ก 4 ก 9 ก 5 ง 10 ค 22
หน่วยที่ 2 การตกแต่งเนื้อหาและเมนู WordPress 1. สาระสำคัญ การศึกษาการตกแต่งเนื้อหาและเมนู WordPress นั้นเป็นการออกแบบส่วนประกอบทั้งหมดของเว็บไซต์ที่ ต้องการแสดงให้ผู้เข้าชมทราบว่าเว็บไซต์นั้นมีทั้งหมดกี่หน้า ในแต่ละหน้าเป็นส่วนการแสดงของรายละเอียดอะไร และมีการเชื่อมโยงกันอย่างไร 2. สมรรถนะประจำหน่วย ผู้เรียนสามารถตกแต่งเนื้อหาและเมนู WordPress ได้ 3. จุดประสงค์การเรียนรู้ จุดประสงค์ทั่วไป (จุดประสงค์ปลายทาง) 1. เพื่อให้ผู้เรียนอธิบายการปรับเปลี่ยนสีพื้นหลังในหน้าเว็บเพจ ได้ 2. เพื่อให้ผู้เรียนอธิบาการปรับเปลี่ยนภาพโปรไฟล์ใน WordPress ได้ 3. เพื่อให้ผู้เรียนบอกการแสดงภาพส่วนหัวเว็บของ WordPress ได้ 4. เพื่อให้ผู้เรียนสามารถสร้างโพสต์ปักหมุดใน WordPress ได้ 5. เพื่อให้ผู้เรียนสามารถเปลี่ยนสีเนื้อหาและฟอนต์ ได้ 6. เพื่อให้ผู้เรียนสามารถสร้างเมนูบนหน้า WordPress ได้ 7. เพื่อให้ผู้เรียนสามารถเพิ่มและการลบเมนู ได้ 8. เพื่อให้ผู้เรียนสามารถเพิ่มเมนูย่อยภายในเมนูหลัก ได้ 9. เพื่อให้ผู้เรียนสามารถสร้างเมนูหน้าหลักพร้อมแสดงลิ้งค์ ได้ จุดประสงค์เชิงพฤติกรรม ด้านความรู้(ทฤษฏี) 3. บอกส่วนประกอบ Dashboard ได้ 4. อธิบายการตั้งค่าต่างๆใน WordPressได้ ด้านทักษะ (ปฏิบัติ) 3. สามารถติดตั้งโปรแกรม WordPressได้ 4. สามารถปรับแต่งค่าพื้นฐานของ WordPressได้ ด้านจิตพิสัย 6. ความมีวินัย 7. ความมุ่งมั้นในการทำงาน 8. ความซื่อสัตย์ 23
9. ความสนใจใฝ่รู้ 10. ความมีมนุษย์สัมพันธ์ 4. เนื้อหาสาระ 1. การปรับเปลี่ยนสีพื้นหลังในหน้าเว็บเพจ 2. การปรับเปลี่ยนภาพโปรไฟล์ใน WordPress 3. การแสดงภาพส่วนหัวเว็บของ WordPress 4. การสร้างโพสต์ปักหมุดใน WordPress 5. การเปลี่ยนสีเนื้อหาและฟอนต์ 6. การสร้างเมนูบนหน้า WordPress 7. การเพิ่มและการลบเมนู 8. การเพิ่มเมนูย่อยภายในเมนูหลัก 9. การสร้างเมนูหน้าหลักพร้อมแสดงลิ้งค์ 24
แบบทดสอบก่อนเรียน คำชี้แจง ให้นักเรียนเลือกคำตอบที่ถูกที่สุดเพียงคำตอบเดียวและทำเครื่องหมาย () ลงในกระดาษคำตอบ (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 ง. คลิกที่การเปลี่ยนสีเนื้อหาและฟอนต์ 25
6. ข้อใดเป็นการเปลี่ยนสีเนื้อหาและฟอนต์ได้อย่างถูกต้อง ก. คลิกที่พื้นที่และเลือกสีที่ต้องการ ข. คลิกที่ข้อความที่ต้องการเปลี่ยนเลือก สีที่ต้องการ ค. คลิกที่การสร้างเมนูบนหน้า WordPress ง. คลิกที่การเปลี่ยนสีเนื้อหาและฟอนต์ 7. ข้อใดเป็นการสร้างเมนูบนหน้า WordPressได้อย่างถูกต้อง ก. คลิกที่หน้าเลือกเมนูบนหน้า WordPress ข. คลิกที่รูปลักษณ์เลือกเมนูและสร้าง ค. คลิกที่การสร้างเมนูบนหน้า WordPress ง. คลิกที่รูปลักษณ์เลือกธีมและสร้าง 8. ข้อใดเป็นการลบเมนูได้อย่างถูกต้อง ก. คลิกที่หน้าเลือกเมนูบนหน้า WordPress ลบตามที่ต้องการ ข. คลิกที่รูปลักษณ์เลือกเมนูที่ต้องการลบ ค. คลิกที่การสร้างเมนูบนหน้า WordPress ง. คลิกที่รูปลักษณ์เลือกธีมและสร้างและลบเมนู 9. ข้อใดเป็นการเพิ่มเมนูย่อยภายในเมนูหลักได้อย่างถูกต้อง ก. คลิกที่หน้าเลือกหัวข้อหรือ Menu เลือกส่วนด้านบน ข. คลิกที่รูปลักษณ์เลือกเมนูย่อย ค. คลิกที่การสร้างเมนูบนหน้า WordPress เมนูย่อย ง. คลิกที่รูปลักษณ์เลือกธีมและสร้างเมนูย่อย 10.ข้อใดเป็นการสร้างเมนูหน้าหลักพร้อมแสดงลิ้งค์ได้อย่างถูกต้อง ก. คลิกที่รูปลักษณ์ เลือก เมนู (Menu ) พิมพ์ URL ข. คลิกที่หน้า HOME >เมนู (Menu ) พิมพ์ URL ค. คลิกที่การสร้างเมนูบนหน้า WordPress เมนูย่อย พิมพ์ URL ง. คลิกที่รูปลักษณ์เลือกธีมและสร้างเมนูย่อย พิมพ์ URL สแกน QRCODE เพื่อทำแบบทดสอบออนไลน์ 26
หน่วยที่ 2การตกแต่งเนื้อหาและเมนู WordPress 1. การปรับเปลี่ยนสีพื้นหลังในหน้าเว็บเพจ การแสดงสีของพื้นหลังเนื้อหาเป็นสีครีม ส่วนทางด้านหัวและ ด้านล่างของพื้นหลังจะเป็นสีขาว ซึ่งสีที่ปรากฏนี้ถ้า เราต้องการปรับเปลี่ยนให้เป็นเฉดสีที่ ต้องการ โดยไปกำหนดสีพื้นหลังในหน้าเพจดังนี้ 1.1 คลิกที่ Fonts Plugin > Customize Fonts รูปที่ 2.1 แสดงการปรับเปลี่ยนสีพื้นหลังในหน้าเว็บเพจ 1.2 คลิกที่ สี เลือกสีพื้นหลังที่ต้องการเปลี่ยนแปลง รูปที่ 2.2 แสดงการปรับเปลี่ยนสีพื้นหลัง 27
1.3 การเปลี่ยนพื้นหลังเป็นรูปภาพ > เลือกรูปภาพที่ต้องการจากในเครื่องคอมพิวเตอร์ รูปที่ 2.3 แสดงการปรับเปลี่ยนสีพื้นหลังเป็นรูปภาพ 2. การปรับเปลี่ยนภาพโปรไฟล์ใน WordPress 2.1 คลิกมุมขวาบนหน้าเว็บเพจ รูปที่ 2.4 แสดงโปรไฟล์ 28
2.2 คลิกที่เมนูแก้ไข ปรากฏดังรูป รูปที่ 2.5 แสดงการแก้หน้าโปรไฟล์ 3. การแสดงภาพส่วนหัวเว็บของ WordPress 3.1 คลิก รูปลักษณ์ ปรากฏตามรูปนี้ รูปที่ 2.6 แสดงเครื่องมือรูปลักษณ์ 29
3.2 คลิกเลือกรายการหัวข้อที่ต้องการให้แสดงตามรูป รูปที่ 2.7 แสดงเครื่องมือรูปลักษณ์ Lightning Home page slide show 3.3 กำหนดขนาดหัวเว็บไซต์ที่ต้องการให้แสดงผล รูปที่ 2.8 แสดงการกำหนดขนาดกว้างยาว 30
3.4 เลือกไฟล์รูปสภาพที่จัดเตรียมไว้ในเครื่องคอมพิวเตอร์ รูปที่ 2.9 แสดงการเลือกรูปภาพที่ต้องการแสดง 3.5 ปรากฏผลลัพธ์ ดังนี้ รูปที่ 2.10 แสดงผลลัพธ์ 31
4. การสร้างโพสต์ปักหมุดใน WordPress การสร้างโพสต์ที่มีเนื้อหาสำคัญในบล็อก ต้องการให้ฟังก์ชั่นไปปรากฏข้อความไปยังหน้าแรกหรือหน้าบล็อกใน WprdPress สามารถทำได้ดังนี้ 4.1 คลิกเครื่องหมาย ✓ หน้า ปักหมุดไว้บนสุดของบล็อก รูปที่ 2.11 แสดงปักหมุดไว้บนสุดของบล็อก 5. การเปลี่ยนสีเนื้อหาและฟอนต์ การพิมพ์ข้อความในโพสต์ ถ้าต้องการเน้นเนื้อหาสาระสำคัญด้วยสีที่ต้องการเพื่อให้สวยงามหรือเกิดความ แตกต่าง สามารถดำเนินการได้ดังนี้ 5.1 คลิกบล็อก > เลือกข้อความ > เลือกสีที่ต้องการ รูปที่ 2.12 แสดงการใส่สีข้อความ 32
6. การสร้างเมนูบนหน้า WordPress การสร้างเมนูของ WordPress โดยการใช้งานแต่ละธีมมีรูปแบบเมนูที่ไม่เหมือกันดังนั้นขอยกตัวอย่างดังนี้ 6.1 คลิกที่ รูปลักษณ์เลือกเมนู รูปที่ 2.13 แสดงรูปลักษณ์เลือกเมนู 6.2 จะปรากฏหน้าต่างเมนูดังรูปภาพ รูปที่ 2.14 แสดงเมนู 33