การเพิ่มเนื้อหาบนเว็บ (ใช้งาน 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

วิธีติดตั้งปลั๊กอิน 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 ได้เลยครับ

7) การสร้าง post

เราอาจจะพอรู้แล้วว่า post คือ หน้าข้อมูลที่เราต้องการแบ่งเนื้อหาตาม category (หมวดหมู่) ซึ่งเป็นจุดที่ทำให้ post มีความแตกต่างจาก page

ดังนั้น ก่อนที่คุณจะเริ่มต้น เขียน post คุณต้องวางแผนสร้าง category ก่อน ว่าเว็บเราจะแบ่งหมวดหมู่เป็นประเภทอะไรบ้าง

เช่น เว็บคุณขายรองเท้ากีฬา คุณอ่านจะแบ่งประเภทหมวดหมู่ได้ดังนี้

  • รีวิว
  • ข่าวสาร
  • การออกกำลังกาย
  • เทคนิคการวิ่ง
  • แฟชั่น (การแต่งตัว)
  • ไลฟ์สไตล์ (การใช้ชีวิต)
  • ฯลฯ

ตัวอย่างเว็บที่ทำคอนเทนต์ (เขียนบทความ) เกี่ยวกับรองเท้าวิ่ง และขายสินค้าไปด้วย sneakerfreaker.com

ตัวอย่างหมวดหมู่บทความของเว็บ Central

หมวดหมู่บทความ

การสร้าง Category

ให้เราไปที่ post > คลิก Categories

สร้าง category

Name: ใส่ชื่อหมวดหมู่ จะใช้ภาษาไทย หรือภาษาอังกฤษก็ได้

Slug: คือ URL ที่จะแสดงหน้าเว็บ ตรงจุดนี้ผมแนะนำให้ เขียนเป็นภาษาอังกฤษ เท่านั้นครับ

เมื่อใส่ข้อมูลเสร็จ คลิก Add New Category ให้เรียบร้อย

ทำซ้ำจนกว่าเราจะได้ครบทุกหมวดหมู่ที่เราต้องการ

ตัวอย่างการสร้างหมวดหมู่

วิธีการสร้าง Post

ไปที่ post > add new จากนั้นให้ใส่เนื้อหาของบทความลงไป

สร้าง post

ในทุก ๆ Post ต้องมี 4 สิ่งนี้ คือ

  1. ชื่อเรื่อง
  2. Categories (หมวดหมู่)
  3. เนื้อหา
  4. 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 บาท

คอร์สเรียน SEO ออนไลน์

ค่าเรียน 4,500 บาท

สำหรับผู้ที่สนใจ
สามารถซื้อคอร์สเรียนในราคาพิเศษเพียง 3,500 บาท