เว็บไซต์ 1 เว็บ เกิดจากการประกอบกันของเนื้อหา หลายๆ หน้า หน้าเว็บ 1หน้า ก็เหมือนกระดาษ 1 แผ่น ที่เราจะเขียนข้อมูลอะไรลงไปก็ได้ แต่หน้าเว็บที่ใช้สำหรับการเพิ่มเนื้อหานั้นมีอยู่ด้วยกัน 2 ประเภทหลัก คือ Page (หน้า) กับ Post (เรื่อง)
ซึ่งการที่เราจะเพิ่มข้อมูลได้ถูกต้อง ว่าหน้าไหนควรเป็น Page หรือ หน้าไหน ควรเป็น Post เราต้องเข้าใจความแตกต่างของ Page กับ Post ให้ได้ก่อน
1) Page กับ Post เพจต่างกันอย่างไร
- Page (หน้า) คือ หน้าที่ไม่จำเป็นต้องแบ่งหมวดหมู่เนื้อหา ไม่ต้องเรียงลำดับของวันที่ว่าใครจะมาก่อนมาหลัง โดยมากเราจะใช้ Page กับหน้าเว็บที่เป็นข้อมูลนิ่งๆ เช่น หน้า Home, About, Contact เป็นต้น
- Post (เรื่อง) คือ หน้าข้อมูลที่เราต้องการแบ่งเนื้อหาตาม category เช่น ตามชนิดสินค้า ตามประเภทความรู้ ตามภาค ตามจังหวัด ตามกลุ่ม ตามเวลา (ใหม่/เก่า) ฯลฯเมื่อเราเขียน Post หรือบทความเสร็จ (รวมถึงสินค้าที่เราจะขายด้วย) เราต้องสร้าง Category เพื่อทำเป็นหมวดหมู่ให้เขาอยู่นั้นเองเมื่อถึงเวลาก็แสดงผลเป็นหมวดหมู่ ตามสไตล์บล็อก คือ เรียงบทความตามหมวดหมู่ โดยดึง Post ล่าสุดขึ้นมาแสดงด้านบนเสมอ
2) ติดตั้งปลั๊กอิน Classic Editor ก่อน
เนื่องจาก WordPress เวอร์ชั่น 5.0 เป็นต้นมา มีการเปลี่ยนแปลงที่สำคัญ คือเปลี่ยน Editor (เครื่องมือสำหรับการเขียนข้อมูล) จากเวอร์ชั่นเก่าที่เป็น Classic Editor มาเป็น Gutenberg ซึ่งทำให้การใช้งานเปลี่ยนไปทั้งหมด
แต่สำหรับผู้เริ่มต้นผมแนะนำให้คุณใช้ Classic Editor จะสะดวกกว่า ดังนั้นหากคุณกำลังจะลองฝึกใช้งาน WordPress และให้สามารถใช้งานตามคู่มือในบทความนี้ได้ คุณต้องติดตั้งปลั๊กอิน Classic editor ก่อนครับผม
วิธีติดตั้งปลั๊กอิน Classic editor
ให้เข้าหลังบ้านคลิก Plugin > Add New > ค้นหาปลั๊กอินชื่อ Classic Editor > คลิก Install และ Activate เปิดใช้งานปลั๊กอินให้เรียบร้อยครับ
3) การสร้าง Page
ลำดับต่อมาเราต้องสร้างหน้าที่เป็นเนื้อหาหลักของเว็บที่ทุกเว็บไซต์ต้องมี ได้แก่หน้า หน้า Home, About และหน้า Contact ซึ่งหน้าดังกล่าว เราต้องสร้างที่ Page ครับผม มีวิธีการใช้งานดังนี้
ให้ไปที่ Page > add new > แล้วให้ใส่ชื่อหน้า กับเนื้อหา ลงไป แล้วกด Publish เผยแพร่ข้อมูลครับ
สำหรับหน้าที่สร้างใหม่ การเผยแพร่ข้อมูลครั้งแรกเราจะเรียกว่า Publish แต่การกลับมาแก้ไขข้อมูลที่เคยเขียนแล้วเราจะเรียกว่าการ Update ครับ
ส่วนการใช้งาน Text editor (กระดานเพิ่มเนื้อหา และรูปภาพต่างๆ) จะอธิบายในหัวข้อถัดไปครับ
4) การใช้งาน Text editor
ก่อนที่เราจะเพิ่มข้อมูลลงไป หากเราพึ่งใช้งานครั้งแรก แถบเมนูแสดง option การปรับแต่งข้อความมันยังเปิดไม่ครบ ให้คลิก ที่สัญลักษณ์ตัวซ้ายสุด ตามรูปก่อนครับ พอคลิก เราจะเห็น option การปรับตัวอักษรคล้ายๆ กับโปรแกรม Word นั้นเอง
กระดาน text editor ใส่อะไรลงไปได้บ้าง
- ใส่ text ได้
- ใส่รูปภาพได้
- ใส่ไฟล์ Mp4 ได้
- ใส่ PDF ไฟล์ได้
- ใส่ url จาก YouTube ได้
- Embed โค้ดที่เป็น iframe จากที่ต่าง ๆ มาวางได้ เช่น Google map, หน้า Facebook Fan page Box ได้
วิธีการใส่สื่อที่เป็น Media เช่น รูปภาพ วิดีโอ หรือ pdf ให้เราคลิกที่คำว่า Add media แล้วอัพโหลดไฟล์ของเราใส่เข้าไปได้เลย
WordPress Tips
หากคุณต้องการให้รูปภาพบนเว็บ ไปปรากฏที่ผลการค้นหาหมวดรูปภาพบน Google ด้วย การใส่รูปภาพยังมีรายละเอียดที่คุณควรรู้อีกหลายจุด ผมแนะนำให้คุณอ่านบทความนี้ก่อนครับ : การทำ SEO รูปภาพให้ติดหน้าแรก Google
การนำคลิปวีดิโอจาก YouTube มาวางที่ text editor (คลิกอ่าน)
เข้าไปที่หน้าของ YouTube > เลือกคลิปวีดิโอที่คุณต้องการ > กดตรงคำว่า share
จากนั้นให้เราคัดลอก URL แล้วมาวางที่ text editor บนเว็บเราได้เลยครับ
รอสักแป๊บ ระบบจะดึงคลิป YouTube มาโชว์โดยอัติโนมัติ
5) วิธีการแชร์ google map มายังเว็บของเรา
ให้เราไปที่หน้า google map > เลือกสถานที่เราต้องการ > คลิกคำว่าแชร์ > เลือกที่ ฝังแผนที่ (embed map) > จากนั้นให้คลิก คัดลอก html
เราก็จะได้โค้ดจาก google map ที่มีลักษณะเป็น iframe ให้เราเอาโค้ดนี้ไปวางที่ text editor แต่การวางสิ่งที่เป็นโค้ด HTML เช่น โค้ด iframe จาก google map เราต้องวางโค้ดลงในหมวด text ดูรูปภาพประกอบ
จากนั้นให้เราคลิกกลับมาที่ Visual เราก็ได้ภาพแผนที่จาก google map มาแสดงบนเว็บของเราแล้วนั้นเอง
6) การวางลิงค์ (URL) ที่หลังรูปภาพ
บางครั้งเราต้องการให้รูปภาพของเรา กดแล้วเปิดไปอีกหน้าเว็บหนึ่ง เช่นกดที่รูป แล้วเด้งไป Line , ไป Facebook หรือเด้งไปหน้าสินค้าของเรา เราต้องเอา URL ปลายทางมาใส่ไว้ที่หลังรูป มีวิธีการทำดังนี้
อัพโหลดรูปขึ้นไปที่ text editor จากนั้นให้เราคลิกที่รูปภาพ > คลิกที่ edit
ตรงส่วนของ Image detail > ให้ดูที่คำว่า Link to ให้เลือกเป็น Custom URL > วาง URL ปลายทาง หรือหน้าเว็บที่เราต้องการลงไปครับ
หากใครต้องการให้ เมื่อมีการกดปุ่ม แล้วหน้าเว็บเปิดแบบ open in new tab ให้เราคลิกที่ Advance option > แล้วไปติ๊ก ที่ช่อง Open link in a new tab ได้เลยครับ
7) การสร้าง post
เราอาจจะพอรู้แล้วว่า post คือ หน้าข้อมูลที่เราต้องการแบ่งเนื้อหาตาม category (หมวดหมู่) ซึ่งเป็นจุดที่ทำให้ post มีความแตกต่างจาก page
ดังนั้น ก่อนที่คุณจะเริ่มต้น เขียน post คุณต้องวางแผนสร้าง category ก่อน ว่าเว็บเราจะแบ่งหมวดหมู่เป็นประเภทอะไรบ้าง
เช่น เว็บคุณขายรองเท้ากีฬา คุณอ่านจะแบ่งประเภทหมวดหมู่ได้ดังนี้
- รีวิว
- ข่าวสาร
- การออกกำลังกาย
- เทคนิคการวิ่ง
- แฟชั่น (การแต่งตัว)
- ไลฟ์สไตล์ (การใช้ชีวิต)
- ฯลฯ
ตัวอย่างเว็บที่ทำคอนเทนต์ (เขียนบทความ) เกี่ยวกับรองเท้าวิ่ง และขายสินค้าไปด้วย sneakerfreaker.com
ตัวอย่างหมวดหมู่บทความของเว็บ Central
การสร้าง Category
ให้เราไปที่ post > คลิก Categories
Name: ใส่ชื่อหมวดหมู่ จะใช้ภาษาไทย หรือภาษาอังกฤษก็ได้
Slug: คือ URL ที่จะแสดงหน้าเว็บ ตรงจุดนี้ผมแนะนำให้ เขียนเป็นภาษาอังกฤษ เท่านั้นครับ
เมื่อใส่ข้อมูลเสร็จ คลิก Add New Category ให้เรียบร้อย
ทำซ้ำจนกว่าเราจะได้ครบทุกหมวดหมู่ที่เราต้องการ
ตัวอย่างการสร้างหมวดหมู่
วิธีการสร้าง Post
ไปที่ post > add new จากนั้นให้ใส่เนื้อหาของบทความลงไป
ในทุก ๆ Post ต้องมี 4 สิ่งนี้ คือ
- ชื่อเรื่อง
- Categories (หมวดหมู่)
- เนื้อหา
- Featured image (รูปภาพหน้าปก)
และใน 1 Post สามารถอยู่ในหลาย Categories ได้
บทเรียนถัดไป: ตั้งค่าหน้า Home/Blog
บทเรียนทั้งหมด
เรียนออนไลน์ฟรี คอร์สเรียนสร้างเว็บ WordPress+Woocommerce
คลิกเข้าเรียนที่นี่- การจดโดเมนและเช่าโฮส
- การทำ HTTPS
- การติดตั้ง Wordpress
- การใช้ WordPress พื้นฐาน
- การติดตั้งและตั้งค่าพื้นฐาน Woocommerce
- การลงสินค้าประเภทต่างๆ
- การตั้งค่าจัดส่งประเภทต่างๆ
- การตั้งค่าชำระเงิน 3 แบบ
โอนเงิน paypal และบัตรเครดิต - การสร้างหน้าฟอร์มแจ้งชำระเงิน
- การสร้าง Contact Form
- การย้ายเว็บและการ backup เว็บ
- การติดตั้ง Google Analytic
และ Google Search Console
บทเรียนทั้งหมดนี้ ทุกคนสามารถเข้าเรียนได้ฟรี โดยไม่ต้องสมัครเรียน
ความแตกต่างระหว่าง แค่ทำเว็บได้ กับทำเว็บให้ดี ขึ้นอยู่กับความรู้พื้นฐานนั้นเอง
พื้นฐานต้องแน่นก่อน ถึงจะสามารถต่อยอดทำเว็บให้ดีในอนาคตได้ครับ
คอร์สเรียน SEO ออนไลน์
ค่าเรียน 4,500 บาท
สำหรับผู้ที่สนใจ
สามารถซื้อคอร์สเรียนในราคาพิเศษเพียง 3,500 บาท