บทนำ
แบบฝึกหัดบทเรียนนี้จะทำความรู้จักกับ WordPress และการตั้งค่าต่าง ๆ ที่จำเป็นเบื้องต้น เพื่อให้นักศึกษาเข้าใจและสามารถใช้งานได้ และรวมถึงการสร้างเว็บที่ประกอบไปด้วย posts, pages, และการทำเมนู
Pre-Lab
ให้นักศึกษาเปิดโปรแกรม Docker โดยโปรแกรมจะแสดงหน้าจอดังแสดงต่อไปนี้
การตั้งค่าที่จำเป็นสำหรับ WordPress
จัดการ Profile ของ Admin
การจัดการ Profile ของ Admin สามารถเข้าได้สองวิธีได้แก่
คลิกที่ icon มุมบนขวาจากนั้นเลือก Edit Profile
วิธีที่สองเลือกจากเมนู User จากนั้นกำหนดค่าต่าง ๆ ที่จำเป็น
ลบข้อมูลที่ไม่จำเป็น
ในขั้นตอนนี้ให้ลบข้อมูลตัวอย่างออกไปให้หมด โดยหากมีผู้ที่ต้องจู่โจมระบบเราผู้นั้นสามารถเข้าถึงลิงค์หรือ page ที่เป็นค่า default ได้ สามารถเข้าไปลบได้ที่ Page, Post คำสั่งลบใช้ Trash และถ้าต้องการลบถาวรเข้าไปยังถังขยะแล้วกด Delete Permanently
ตั้งค่าเริ่มต้นที่จำเป็นให้กับ WordPress ที่ Settings
เข้าไปที่เมนู Settings จากนั้นให้เลือก General ในกรณีที่ใช้ Docker
ในกรณีที่ติดตั้งด้วย XAMPP
การตั้งค่าเริ่มต้นที่จำเป็นให้กับ WordPress ที่ Settings เลือก Reading
ตั้งค่าการแสดงผลหน้าแรกจากเดิมระบบจะ default Front page displays เป็น Your latest posts เราสามารถคลิกเลือกกำหนดตามที่เราต้องการได้
ตั้งค่าเริ่มต้นที่จำเป็นให้กับ WordPress ที่ Settings เลือก Discussion Setting จะเป็นการกำหนดการสนทนา เราจะเลือกทำการปิดการสนทนาก่อนในกรณีเว็บไซต์ใหม่ๆ เนื่องจากเรายังไม่มีบทความอะไรใหม่มาก ป้องการการถูกรบกวนกรณีขึ้นโฮสต์ ซึ่งใครจะมา Comment ระบบเราได้ควรต้องเข้าสู่ระบบก่อน และก่อนที่จะ comment ได้เราควรจะสามารถ Approve อนุญาตก่อนได้ด้วย
ตั้งค่าเริ่มต้นที่จำเป็นให้กับ WordPress ที่ Settings เลือก Permalink Settings หรือการกำหนดลิงค์ถาวรแบบ Post name จะเป็นผลการตั้งค่าที่ดีที่สุดสำหรับการทำ SEO กำหนดเสร็จแล้วกด Save
การสร้างหน้าเว็บ
ในขั้นตอนนี้เราจะสร้างหน้าเว็บอย่างง่ายเพื่อให้เข้าใจ ส่วนประกอบต่าง ๆ ภายใน WordPress โดยประกอบไปด้วยสองส่วนหลักได้แก่ Pages และ Posts จากนั้นสร้างเมนูเพื่อเข้าถึงส่วนต่าง ๆ เหล่านี้
โครงสร้าง Pages ที่เราจะสร้างดังแสดงต่อไปนี้
- Home
- About
- Blog
- Contact
Themes จะประกอบไปด้วย
- Twenty Nineteen (default)
- Hemingway
การติดตั้ง Twenty Sixteen Theme
ให้เลือกเมนู
Appearance -> Themes
จากนั้นจะปรากฎหน้าจอการจัดการ Theme โดยเราสามารถจัดการ Theme ที่มีอยู่หรือทำการติดตั้ง Theme ใหม่ได้ ในขั้นตอนนี้เราจะติดตั้ง Theme ใหม่ชื่อ “Twenty Nineteen” ซึ่งจะใช้เป็น Theme เริ่มต้นในการสร้างเว็บด้วย WordPress
ให้เริ่มจากพิมพ์ชื่อ Theme ที่ต้องการในช่องค้นหา “Twenty Sixteen” จะปรากฎผลการค้นหาดังแสดงต่อไปนี้
ในตัวเลือก “Twenty Sixteen” คลิกที่ปุ่ม “Install”
เมื่อกดปุ่ม “Install” แล้วระบบจะทำการ download และติดตั้ง Theme ให้
หลังจากระบบติดตั้งเสร็จแล้วจะปรากฎปุ่ง “Activate” เพื่อเปลี่ยนให้ระบบปัจจุบันมาใช้ Theme
การสร้าง Posts
เราจะสร้าง 3 posts โดยข้อมูลในหน้า page เป็นอะไรก็ได้แล้วแต่นักศึกษาจะนำมาใส่ หรือเราจะใช้เว็บต่อไปนีในการสร้างข้อมูลจำลอง ได้แก่
คลิกที่ปุ่ม “Add New” เพื่อสร้าง Post ให้นักศึกษาตั้งชื่อหัวข้อและแทรกเนื้อหาจนครบ 3 Posts
ตัวอย่างผลลัพธ์การสร้าง Post
การสร้าง Pages
เราจะสร้าง 5 Page ซึ่งประกอบไปด้วย
- Home – หน้าแรก
- Blog
- About
- Gallery
- Contact
กดปุ่ม “Add New” เพื่อสร้าง Page จากนั้นแทรกข้อความจนครบ 5 pages
ตัวอย่างผลลัพธ์ดังแสดงต่อไปนี้
การสร้างเมนู
หน้า Pages ต่าง ๆ ที่เราสร้างขึ้นจำเป็นต้องมีเมนูเพื่อการเข้าถึงแต่ละ Page ดังนั้นในขั้นตอนนี้เราจะสร้างเมนูเพื่อลิงค์ Pages ต่าง ๆ เข้าด้วยกัน
เลือกเมนู Appearance -> Menus
หากเรายังไมเคยสร้างเมนู ให้เราตั้งชื่อเมนูเป็น “Main Menu” จากนั้นกดปุ่ม “Create Menu”
เลือกทุก Pages ที่ต้องการจากแถบด้านซ้ายไปยังด้านขวาดังแสดงในรูป
ใช้เมาส์ลากจัดลำดับเมนูตามต้องการและกดปุ่ม “Save Menu” ในขั้นตอนนี้หากเราต้องการให้เมนูเป็นเมนูหลักให้ check ในช่อง “Primary Menu”
การกำหนดค่าต่าง ๆ ของเว็บ
เพื่อให้หน้าเว็บแสดงข้อมูลครบถ้วนให้นักศึกษากรอกข้อมูลอื่น ๆ ที่จำเป็นให้เรียบร้อย
จากนั้นให้ทดสอบดูผลลัพธ์ โดยการกดที่ปุ่มดังแสดงในรูป
ติดตั้ง Hemingway Theme
ขั้นตอนนี้ให้นักศึกษาติดตั้ง Hemingway Theme พร้อมทั้งกำหนดค่าต่าง ๆ เพื่อตกแต่งให้สวยงาม
