การเพิ่มเนื้อหาบนเว็บ (ใช้งาน Page/Post)

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

ซึ่งการที่เราจะเพิ่มข้อมูลได้ถูกต้อง ว่าหน้าไหนควรเป็น Page หรือ หน้าไหน ควรเป็น Post เราต้องเข้าใจความแตกต่างของ Page กับ Post ให้ได้ก่อน

1) Page กับ Post เพจต่างกันอย่างไร

Page (หน้า) คือ หน้าที่ไม่จำเป็นต้องแบ่งหมวดหมู่เนื้อหา ไม่ต้องเรียงลำดับของวันที่ว่าใครจะมาก่อนมาหลัง โดยมากเราจะใช้ Page กับหน้าเว็บที่เป็นข้อมูลนิ่งๆ เช่น หน้า Home, About, Contact เป็นต้น
Post (เรื่อง) คือ หน้าข้อมูลที่เราต้องการแบ่งเนื้อหาตาม category เช่น ตามชนิดสินค้า ตามประเภทความรู้ ตามภาค ตามจังหวัด ตามกลุ่ม ตามเวลา (ใหม่/เก่า) ฯลฯเมื่อเราเขียน Post หรือบทความเสร็จ (รวมถึงสินค้าที่เราจะขายด้วย) เราต้องสร้าง Category เพื่อทำเป็นหมวดหมู่ให้เขาอยู่นั้นเองเมื่อถึงเวลาก็แสดงผลเป็นหมวดหมู่ ตามสไตล์บล็อก คือ เรียงบทความตามหมวดหมู่ โดยดึง Post ล่าสุดขึ้นมาแสดงด้านบนเสมอ

page กับ 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 เผยแพร่ข้อมูลครับ

สร้าง page

สำหรับหน้าที่สร้างใหม่ การเผยแพร่ข้อมูลครั้งแรกเราจะเรียกว่า Publish แต่การกลับมาแก้ไขข้อมูลที่เคยเขียนแล้วเราจะเรียกว่าการ Update ครับ

ส่วนการใช้งาน Text editor (กระดานเพิ่มเนื้อหา และรูปภาพต่างๆ) จะอธิบายในหัวข้อถัดไปครับ

4) การใช้งาน Text editor

text-editor

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

กระดาน text editor ใส่อะไรลงไปได้บ้าง

ใส่ text ได้
ใส่รูปภาพได้
ใส่ไฟล์ Mp4 ได้
ใส่ PDF ไฟล์ได้
ใส่ url จาก YouTube ได้
Embed โค้ดที่เป็น iframe จากที่ต่าง ๆ มาวางได้ เช่น Google map, หน้า Facebook Fan page Box ได้

วิธีการใส่สื่อที่เป็น Media เช่น รูปภาพ วิดีโอ หรือ pdf ให้เราคลิกที่คำว่า Add media แล้วอัพโหลดไฟล์ของเราใส่เข้าไปได้เลย

add media

WordPress Tips

หากคุณต้องการให้รูปภาพบนเว็บ ไปปรากฏที่ผลการค้นหาหมวดรูปภาพบน Google ด้วย การใส่รูปภาพยังมีรายละเอียดที่คุณควรรู้อีกหลายจุด ผมแนะนำให้คุณอ่านบทความนี้ก่อนครับ : การทำ SEO รูปภาพให้ติดหน้าแรก Google

การนำคลิปวีดิโอจาก YouTube มาวางที่ text editor (คลิกอ่าน)

เข้าไปที่หน้าของ YouTube > เลือกคลิปวีดิโอที่คุณต้องการ > กดตรงคำว่า share

ใส่คลิป youtube

จากนั้นให้เราคัดลอก URL แล้วมาวางที่ text editor บนเว็บเราได้เลยครับ

ใส่ YouTube WordPress

รอสักแป๊บ ระบบจะดึงคลิป YouTube มาโชว์โดยอัติโนมัติ

5) วิธีการแชร์ google map มายังเว็บของเรา

ให้เราไปที่หน้า google map > เลือกสถานที่เราต้องการ > คลิกคำว่าแชร์ > เลือกที่ ฝังแผนที่ (embed map) > จากนั้นให้คลิก คัดลอก html

ใส่ google map

เราก็จะได้โค้ดจาก 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 ได้เลยครับ