Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
1
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
สำหรับมือใหม่ ไม่ต้องเสียเวลำลองผิดลองถูกเอง หนังสือสอนใช้งำน Wo...
2
บทที่ 1 WordPress คืออะไร
คุณรู้หรือไม่ 35 % ของเว็บทั้งโลกสร้ำงเว็บด้วย WordPress ทำไมคนถึง ใช้ WordPress ใน กำรสร้ำง
เ...
3
• อัพเดทเนื้อหำต่ำง ๆ ได้ง่ำย
เหตุผลที่คนทั่วโลกนิยมใช้ WordPress ก็เพรำะมีระบบจัดกำรเนื้อหำที่ใช้งำนง่ำย เป็นสำกล คุณ
ส...
4
• WordPress เหมำะกับเว็บที่เป็นร้ำนค้ำเดี่ยว เป็นสินค้ำของเรำเอง โพสขำยเอง เก็บเงินเอง อันนี้
เหมำะกับกำรสร้ำงด้วย WordP...
5
ดูรูปภำพกำรเปรียบเทียบเพิ่มเติมนะ
ที่มำของรูปภำพ wpexplorer.com
บทควำมนี้จะรวมควำมรู้พื้นฐำนในกำรใช้งำนเว็บไซต์สร้ำงด้วย...
6
องค์ประกอบของกำรสร้ำงเว็บด้วย WordPress
กำรสร้ำงเว็บด้วย WordPress เรำไม่ได้ใช่แค่ WordPress อย่ำงเดียวแล้วจะสำมำรถสร้ำง...
7
3. Theme คือ เครื่องมือที่ใช้สำหรับออกแบบ และจัดวำง layout หน้ำตำเว็บไซต์ WordPress ของเรำ
ให้สวยงำมในแบบที่เรำต้องกำร ห...
8
5. ค่ำจ้ำงทำกรำฟฟิค บำงครั้งอยำกให้เว็บออกมำสวย ดูเป็นมืออำชีพ เรำต้องจ้ำงคนทำกรำฟฟิครูป
ภำพประกอบเว็บให้เรำครับ รำคำโดย...
9
WordPress Mission
“WordPress is software designed for everyone, emphasizing accessibility, performance,
security, and ea...
10
ก็คือปรับสิ่งที่เรำต้องกำร ให้เหมำะกับสิ่งที่ WordPress มี แก้ไขโค้ดให้น้อยที่สุด หรือไม่ต้องแก้โค้ดเลย
นั้นเอง
แต่ให้จ...
11
บทที่ 2 กำรจดโดเมน (Domain)
โดเมน(Domain) คืออะไร
โดเมน คือ ชื่อของเว็บไซต์ ชื่อโดเมน ก็เปรียบเหมือนชื่อบริษัท หรือชื่อ...
12
จดโดเมนรำคำ เท่ำไหร่
กำรจดโดเมนนั้นมีค่ำใช้จ่ำย รำคำประมำณ 400-1000 บำท รำคำโดเมนจะถูกหรือแพงขึ้นอยู่กับ นำมสกุล
ของโดเ...
13
จดโดเมนที่ไหนดี?
มีบริษัทรับจดโดเมนอยู่มำกมำย แต่บริษัทรับจดโดเมนที่ผมแนะนำมีดังนี้ครับ (อัตรำค่ำบริกำรกำรจด
โดเมนของแต...
14
ขั้นตอนกำรจดโดเมน
1) ให้เรำไปที่เว็บ hostatom.com
2) ดูที่เมนู ให้คลิกตรงคำว่ำ จดโดเมนใหม่
3) คลิกตรงคำว่ำ คลิกที่นี่เพ...
15
ทำงแก้ไขหำกเรำอยำกได้ชื่อนี้จริง ๆ ให้เรำเปลี่ยนนำมสกุลดู แล้วลองค้นหำดูใหม่ หรือจะลองตั้งชื่อใหม่ลง
ไปก็ได้
หำกระบบแจ้...
16
จำกนั้นให้ คลิกชำระเงิน ครับ
17
ระบบก็จะพำมำยังหน้ำกรอกข้อมูลส่วนตัว
18
กรอกข้อมูลให้เรียบร้อย แต่ให้เรำกรอกเป็นภำษำอังกฤษนะ แล้วให้คลิก ยืนยันคำสั่งซื้อไปได้เลยครับ หลัก
จำกนั้นคุณจะได้รับใบ...
19
กรอกข้อมูล พร้อมส่งหลักฐำนกำรชำระเงินเข้ำไปให้เรียบร้อยครับผม จำกนั้นรอทำงโฮสจดทะเบียนโดเมน
ให้เรำอำจจะใช้เวลำ 1 – 2 ชั...
20
ระบบก็จะพำเรำสู่ระบบหลังบ้ำนของโฮสที่เรำเลือกใช้บริกำร ให้เรำคลิกที่เมนู โดเมนของฉัน
ก็จะปรำกฏรำยชื่อโดเมนที่เรำเคยจดไว...
21
บทที่ 3 เช่ำโฮสติ้ง (Hosting)
โฮสติ้ง ก็คือพื้นที่ ที่ใช้เก็บรูป ข้อมูล ไฟล์ต่ำงๆ เพื่อใช้แสดงเว็บของเรำ ก็จะเปรียบเหมื...
22
ขั้นตอนกำรเช่ำโฮสติ้ง
ให้ไปที่หน้ำเว็บของ >> Hostatom << กดผ่ำนลิงค์ตรงนี้ได้เลย ดูที่เมนูตรงเว็บโฮสติ้ง ให้เรำคลิกเลือ...
23
จำกนั้นให้คลิก สั่งซื้อ ระบบก็จะพำมำที่หน้ำ เลือกโดเมน ซึ่งเรำได้ซื้อโดเมนไว้แล้ว ดังนั้นให้คลิกที่ ใช้
โดเมนที่มีอยู่แ...
24
คลิกชำระเงิน
ระบบก็จะพำเข้ำสู่หน้ำกรอกข้อมูลเพื่อทำกำรชำระเงิน สำหรับคนที่จดโดเมนกับ Hostatom อยู่แล้ว เรำก็
ไม่จำเป็นต...
25
เมื่อคุณ คลิกยืนยันคำสั่งซื้อ เรียบร้อย คุณก็จะได้ใบแจ้งค่ำบริกำร เพื่อไปใช้ในกำรชำระเงินครับ และเลือก
บัญชีที่คุณสะดวก...
26
บทที 4 กำรตั้งค่ำ Nameserver
ก่อนที่จะถึงขั้นตอนกำรติดตั้ง WordPress ให้เรำเช็คค่ำต่ำงๆ ของโดเมน ว่ำเรียบร้อยแล้วรึยัง ...
27
ให้เรำเข้ำระบบหลังบ้ำนของ Hostatom จำกนั้นให้เลือกเมนู บริกำรของฉัน
เรำจะเห็นรำยชื่อโฮสที่เรำได้ซื้อไว้ จำกนั้นให้ดูตรง...
28
ระบบก็จะพำเข้ำมำหน้ำ กำรจัดกำรสินค้ำ ให้เรำมองดูล่ำงๆ จะเห็นชื่อของ nameserver ของโฮสที่เรำใช้
งำนอยู่ ให้ copy ชื่อ na...
29
วิธีกำรเพิ่มโดเมน
ดูบทเรียนผ่ำน YouTube: https://youtu.be/Z4tyAy1S7UU
หำกเรำจดโดเมน และเช่ำโฮสติ้งกับผู้บริกำรเจ้ำเดียว...
30
คลิก Add Domain
จำกนั้นให้พิมพ์ชื่อโดเมนที่ต้องกำรเพิ่มลงไป
ติ๊กเปิดใช้งำน Let’s Encrypt เพื่อทำเว็บให้เป็น HTTPS ด้วย ...
31
บทที่ 5 ทำ HTTPS (SSL ฟรี)
ทำเว็บให้เป็น HTTPS คือ กำรเข้ำรหัสข้อมูลบนเว็บไซต์ของเรำ เพื่อเพิ่มควำมปลอดภัยในกำรสื่อสำรห...
32
วิธีกำรทำเรำจะทำได้ 2 วิธี คือ
1. ติดตั้งเองบนโฮสติ้ง
2. แจ้งโฮสติ้งทำให้
วิธีกำรติดตั้ง SSL by Let’s Encryption บน Ple...
33
ไปที่ชื่อโดเมนที่ต้องกำร คลิกที่ SSL/TLS Certificates (บำงเวอรชั่นของ Plesk เขำก็อำจจะเขียนว่ำ Let’s
Encrypt ก็ให้คลิกท...
34
คลิกเลือก Secure the wildcard domain และ Assign the certificate to mail domain
จำกนั้นรอระบบอัพเดทสักครู่ประมำณ 4-24 ชั...
35
ถ้ำขึ้นรูปแบบนี้แสดงว่ำโดเมนและ SSL พร้อมใช้งำนแล้ว
แต่ถ้ำแสดงรูปแบบนี้แสดงว่ำโดเมนยังไม่พร้อมใช้งำนให้รอ 4-24 ชั่วโมงก...
36
บทที่ 6 กำรสร้ำง Subdomain
Subdomain คืออะไร
Subdomain คือ โดเมนย่อย สำหรับกำรแบ่งหมวดหมู่เว็บ เพื่อให้ผู้ใช้งำนเข้ำใจง...
37
กำรสร้ำงเว็บสำหรับฝึกซ้อมทำได้ 2 วิธี
1. จำลอง Server
2. ทำบน Subdomain
ตัวอย่ำงกำรใช้งำนเว็บสำหรับฝึกซ้อม
สมมุติ ผมรับ...
38
ถ้ำมีสัญลักษณ์ Secure สีเขียนขึ้นตำมรูปแสดงว่ำ ssl บนโดเมนหลักพร้อมใช้งำนแล้ว แต่ถ้ำยังไม่ขึ้นสี
เขียว ให้แจ้งโฮสทำ Wil...
39
**หมำยเหตุ ตัว subdomain ยังไม่สำมำรถใช้งำนได้ทันที คุณต้องรอให้ระบบมันอัพเดทสักครู่นึงก่อน
ประมำณ 4-24 ชั่วโมงครับ
เปิ...
40
เช็คควำมเรียบร้อยของ Subdomain
หลังจำกที่เรำเปิดใช้ SSL ที่ Subdomain ให้รอกำรอัพเดทของระบบประมำณ 5-10 นำที แล้วลองเอำช...
41
บทที่ 7 วิธีติดตั้ง WordPress
จำกบทเรียน WordPress คืออะไร ผมได้อธิบำยไว้แล้วว่ำ กำรสร้ำงเว็บด้วย WordPress จะมีองค์ประ...
42
ขั้นตอนกำรติดตั้ง WordPress
เข้ำไปสู่ระบบ Control panel บนโฮสก่อน จำกนั้นมองหำคำว่ำ WordPress ทุกโฮส่วนใหญ่จะมีตัวช่วย
...
43
สำหรับหน้ำตั้งค่ำ ให้เลือกกำรตั้งค่ำตำมรูปตัวอย่ำงได้เลยครับ
ระบบของ Plesk จะถำมเรำว่ำลงปลั๊กอินอะไรเลยมั้ย ตรงจุดนี้ให...
44
เรำก็ลองเช็คดูว่ำตัว WordPress ที่เรำลงไป แสดงผลหรือไม่ ให้คลิกที่ open website ได้เลยครับ
หำกขึ้นหน้ำที่มีคำว่ำ Hello ...
45
บทที่ 8 ตั้งค่ำเริ่มต้นใช้งำน WordPress
หำกคุณจะเริ่มต้นสร้ำงเว็บด้วย WordPress ได้ คุณต้องเตรียมสิ่งต่ำง ๆ ดังนี้ให้พร...
46
1) วิธีเข้ำสู่ระบบหลังบ้ำน WordPress (Dashboard)
เรำจะเข้ำไปแก้เนื้อหำได้เรำต้องเริ่มต้นจำกกำร login เข้ำสู่หลังบ้ำน มี...
47
วิธีกำรกลับสู่หน้ำบ้ำนเว็บ ให้เรำคลิกที่รูปสัญลักษณ์บ้ำนครับ
กำรออกจำกระบบ WordPress
ดูทีมุมขวำมือ เอำเมำส์ไปชี้แล้วจะเ...
48
เนื่องจำกบทควำมนี้เขียนไว้ก่อนที่จะมีตัว Gutenberg ดังนั้นหำกคุณกำลังจะลองฝึกใช้งำน WordPress
และให้สำมำรถใช้งำนตำมคู่ม...
49
3) เปลี่ยนมำใช้ธีม Twenty Seventeen
สำหรับธีมที่ติดมำกับ WordPress 5.5 คือธีม Twenty Twenty แต่สำหรับบทควำมนี้ผมขอใช้ธี...
50
General Setting
ดูที่เมนูด้ำนซ้ำย ไปที่ Settings > คลิก General
51
กำรตั้งค่ำ General Setting ที่สำคัญมีดังนี้
• Site Title: ใส่ชื่อเว็บ หรือชื่อ Brand ลงไป
• Tagline: เขียนคำอธิบำยสั้นๆ...
52
แต่หำกเรำต้องกำรใช้งำน WordPress ให้เป็นสำกล เรำควรทำให้แถบเมนูหลังบ้ำน (Dashboard) เป็น
ภำษำอังกฤษ แต่ให้เป็นภำษำไทยเฉ...
53
7) ปิดไม่ให้ Google เข้ำมำเก็บข้อมูล (บนเว็บฝึกซ้อม)
หำกเรำกำลังฝึกซ้อมเว็บบน Subdomain หรือกำลังทำบน Domain จริง หำกเว...
54
บทที่ 9 กำรเพิ่มเนื้อหำบนเว็บ (ใช้งำน Page/Post)
เว็บไซต์ 1 เว็บ เกิดจำกกำรประกอบกันของเนื้อหำ หลำยๆ หน้ำ หน้ำเว็บ 1หน้...
55
2) กำรสร้ำง Page
ลำดับต่อมำเรำต้องสร้ำงหน้ำที่เป็นเนื้อหำหลักของเว็บที่ทุกเว็บไซต์ต้องมี ได้แก่หน้ำ หน้ำ Home, About
แล...
56
ก่อนที่เรำจะเพิ่มข้อมูลลงไป หำกเรำพึ่งใช้งำนครั้งแรก แถบเมนูแสดง option กำรปรับแต่งข้อควำมมันยัง
เปิดไม่ครบ ให้คลิก ที่...
57
WordPress Tips
หำกคุณต้องกำรให้รูปภำพบนเว็บ ไปปรำกฏที่ผลกำรค้นหำหมวดรูปภำพบน Google ด้วย กำรใส่รูปภำพ
ยังมีรำยละเอียดที...
58
รอสักแป๊บ ระบบจะดึงคลิป YouTube มำโชว์โดยอัติโนมัติ
59
4) วิธีกำรแชร์ google map มำยังเว็บของเรำ
ให้เรำไปที่หน้ำ google map > เลือกสถำนที่เรำต้องกำร > คลิกคำว่ำแชร์> เลือกที่...
60
จำกนั้นให้เรำคลิกกลับมำที่ Visual เรำก็ได้ภำพแผนที่จำก google map มำแสดงบนเว็บของเรำแล้วนั้นเอง
5) กำรวำงลิงค์ (URL) ที...
61
ตรงส่วนของ Image detail > ให้ดูที่คำว่ำ Link to ให้เลือกเป็น Custom URL > วำง URL ปลำยทำง หรือ
หน้ำเว็บที่เรำต้องกำรลงไ...
62
ตัวอย่ำงเว็บที่ทำคอนเทนต์ (เขียนบทควำม) เกี่ยวกับรองเท้ำวิ่ง และขำยสินค้ำไปด้วย
sneakerfreaker.com
ตัวอย่ำงหมวดหมู่บทคว...
63
ตัวอย่ำงกำรสร้ำงหมวดหมู่
วิธีกำรสร้ำง Post
ไปที่ post > add new จำกนั้นให้ใส่เนื้อหำของบทควำมลงไป
64
ในทุก ๆ Post ต้องมี 4 สิ่งนี้ คือ
1. ชื่อเรื่อง
2. Categories (หมวดหมู่)
3. เนื้อหำ
4. Featured image (รูปภำพหน้ำปก)
แล...
65
บทที่ 10 ตั้งค่ำหน้ำ Home/Blog
หลังจำกที่เรำสร้ำงหน้ำ page และ post เตรียมไว้แล้ว หำกเรำลองกับไปดูที่หน้ำบ้ำน เรำจะเห็น...
66
วิธีกำรกำหนดหน้ำ Homepage มีดังนี้ครับ
ดูบทเรียนนี้บน YouTube: https://youtu.be/YRaGOVT62bs
กลับไปหลังบ้ำน > settings >...
67
ตั้งค่ำหน้ำ Blog (หน้ำเก็บบทควำมทั้งหมด)
หน้ำระบบของ WordPress จะมีอยู่ด้วยกัน 2 หน้ำ คือหน้ำ Homepage กับหน้ำ Blog ที่...
68
ซึ่งหน้ำระบบเก็บบทควำมยังแบ่งออกเป็น 2 ส่วน คือ เก็บบทควำมทั้งหมด กับเก็บบทควำมตำมหมวดหมู่
หรือบำงครั้งเรำจะเรียกหน้ำเห...
69
บทที่ 11 กำรสร้ำงเมนู (Menu)
เมื่อเรำมีหน้ำ Home เรียบร้อยแล้ว แต่เรำจะยังไม่สำมำรถคลิกเปิดไปเข้ำชมหน้ำเว็บอื่น ๆ ของเร...
70
นอกจำกเรำจะสำมำรถนำ page มำวำงเป็นเมนู เรำยังสำมำรถนำ Category หรือ Post มำวำงที่เมนูได้อีก
ด้วย
นอกจำกนี้เรำยังสำมำรถเ...
71
นอกจำกนี้เรำยังสำมำรถเปลี่ยน Navigation Label (ป้ำยชื่อเมนู) เป็นคำที่เรำต้องกำรก็ได้ โดยให้เรำคลิก
ตรงมุมขวำที่เป็นลูก...
72
เมื่อทำทุกอย่ำงเรียบร้อยแล้วลองกลับไปดูที่หน้ำเว็บของเรำ จะเห็นว่ำเว็บของเรำมีเมนูเรียบร้อยแล้วนั้นเอง
Menu Structure
73
บทที่ 12 ใช้งำน Sidebar Footer และ Widget
ทำควำมรู้จัก Sidebar
Sidebar คือ แถบด้ำนข้ำงที่มักจะแสดงร่วมกับหน้ำ Post หรือ...
74
ส่วนเว็บ WordPress ที่เรำกำลังจะสร้ำง ลองคลิกไปที่บทควำมดูครับ คุณจะเป็นกำรแสดง sidebar ที่เป็น
ค่ำ default ที่มำกับ Wo...
75
ครำวนี้หำกเรำต้องกำรจะแก้ไข Sidebar เรำจะไปแก้ไขที่ไหนดี? ลองดูรูปด้ำนล่ำงประกอบด้วยนะ
จำกรูปถ้ำเรำสังเกตดี จะเห็นได้ว่...
76
กำรเปลี่ยน widget ที่ sidebar
กลับไปหลังบ้ำน > ไปที่ Appearance > คลิก Widget เรำจะพบกำรแสดงผลหน้ำตำแบบนี้
Widget คือ ช...
77
จำกนั้นเรำก็ออกแบบว่ำตรง sidebar เรำอยำกให้มันแสดงอะไรบ้ำง สมมุตผมอยำกให้แสดงรูปภำพ
Promotion สินค้ำ กับ พวกบทควำมล่ำสุ...
78
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]
Próxima SlideShare
Cargando en…5
×

หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]

67 visualizaciones

Publicado el

สำหรับมือใหม่ ไม่ต้องเสียเวลาลองผิดลองถูกเอง หนังสือสอนใช้งาน WordPress [ฉบับ E-book PDF] ชุดนี้ จะเป็นการอธิบายวิธีการใช้งาน WordPress ที่ละขั้นตอนแบบละเอียด ทำตามได้ง่ายๆ
สารบัญเนื้อหา
บทที่ 1 WordPress คืออะไร
บทที่ 2 การจดโดเมน (Domain)
บทที่ 3 เช่าโฮสติ้ง (Hosting)
บทที 4 การตั้งค่า Nameserver
บทที่ 5 ทำ HTTPS (SSL ฟรี)
บทที่ 6 การสร้าง Subdomain
บทที่ 7 วิธีติดตั้ง WordPress
บทที่ 8 ตั้งค่าเริ่มต้นใช้งาน WordPress
บทที่ 9 การเพิ่มเนื้อหาบนเว็บ (ใช้งาน Page/Post)
บทที่ 10 ตั้งค่าหน้า Home/Blog
บทที่ 11 การสร้างเมนู (Menu)
บทที่ 12 ใช้งาน Sidebar Footer และ Widget
บทที่ 13 การเพิ่มปลั๊กอิน (Plugin)
บทที่ 14 การเปลี่ยนธีม (Theme)
บทที่ 15 การใช้งาน Woocommerce
บทที่ 16 การทำ SEO

Publicado en: Educación
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book]

  1. 1. 1 หนังสือสอนใช้ WordPress สำหรับผู้เริ่มต้น [ฉบับ E-book] สำหรับมือใหม่ ไม่ต้องเสียเวลำลองผิดลองถูกเอง หนังสือสอนใช้งำน WordPress [ฉบับ E-book PDF] ชุด นี้จะเป็นกำรอธิบำยวิธีกำรใช้งำน WordPress ที่ละขั้นตอนแบบละเอียด ทำตำมได้ง่ำยๆ สำรบัญเนื้อหำ บทที่ 1 WordPress คืออะไร บทที่ 2 กำรจดโดเมน (Domain) บทที่ 3 เช่ำโฮสติ้ง (Hosting) บทที 4 กำรตั้งค่ำ Nameserver บทที่ 5 ทำ HTTPS (SSL ฟรี) บทที่ 6 กำรสร้ำง Subdomain บทที่ 7 วิธีติดตั้ง WordPress บทที่ 8 ตั้งค่ำเริ่มต้นใช้งำน WordPress บทที่ 9 กำรเพิ่มเนื้อหำบนเว็บ (ใช้งำน Page/Post) บทที่ 10 ตั้งค่ำหน้ำ Home/Blog บทที่ 11 กำรสร้ำงเมนู (Menu) บทที่ 12 ใช้งำน Sidebar Footer และ Widget บทที่ 13 กำรเพิ่มปลั๊กอิน (Plugin) บทที่ 14 กำรเปลี่ยนธีม (Theme) บทที่ 15 กำรใช้งำน Woocommerce บทที่ 16 กำรทำ SEO
  2. 2. 2 บทที่ 1 WordPress คืออะไร คุณรู้หรือไม่ 35 % ของเว็บทั้งโลกสร้ำงเว็บด้วย WordPress ทำไมคนถึง ใช้ WordPress ใน กำรสร้ำง เว็บไซต์ มำกขนำดนี้ เหตุผลเดียวก็คือ WordPress สร้ำงโอกำสให้ทุกคนสำมำรถทำเว็บได้ โดยที่ไม่ จำเป็นต้องมีควำมรู้เรื่อง Code ไม่ต้องเขียนโปรแกรม ไม่ต้องเป็นโปรแกรมเมอร์เรียกได้ว่ำใคร ๆ ก็สำมำรถ ทำเว็บได้ รวมถึงผมด้วย ที่ไม่ใช่โปรแกรมเมอร์และไม่มีควำมรู้เรื่อง Coding อะไรเลย WordPress คืออะไร WordPress คือ เครื่องมือที่เป็นตัวช่วยในกำรสร้ำงเว็บไซต์ ที่มีระบบจัดกำรข้อมูล และสร้ำงเนื้อหำ (Content Management System: CMS ) ที่สำมำรถให้เรำเพิ่มเติมบทควำม รูปภำพ ได้เองแบบง่ำยๆ โดย ไม่ต้องมีควำมรู้เรื่อง Code หรือควำมรู้ด้ำนโปรแกรมมิ่ง นั้นเอง ทำไมควรใช้ WordPress • ประหยัดค่ำใช้จ่ำย ใคร ๆ ก็สำมำรถโหลด WordPress มำใช้ได้ฟรี เพรำะเป็น Opensource ดังนั้นเรำจึงประหยัด ค่ำใช้จ่ำยในกำรจ้ำงคนเขียนโปรแกรม เรำสำมำรถเรียนรู้และทำด้วยตนเองได้เลย • ไม่ต้องเขียนโค้ดให้ยุ่งยำก ลืมเรื่องกำรทำเว็บในอดีตไปได้เลย กำรทำเว็บด้วย WordPress คล้ำยกับตัวต่อเลโก้ เรำมีหน้ำที่ มองหำชิ้นส่วนต่ำงๆ และเอำมำประกอบกันเป็นรูปร่ำง ที่ต้องกำรได้ตำมใจชอบ ไม่ต้องเขียนโค้ด ให้ยุ่งยำกอีกต่อไป • มีฟังชั่นต่ำง ๆ มำกมำย คุณสำมำรถเพิ่มเติมฟังชั่นต่ำง ๆ ผ่ำนปลั๊กอินมำกมำย เพื่อสนองจินตนำกำรของคุณได้ไม่รู้จบ เชื่อมต่อกับ Social Media ต่ำง ๆได้อย่ำงรวดเร็ว รองรับกำรทำงำนกับไฟล์ภำพ ไฟล์เสียง คลิบ วีดีโอ ได้ทุกอย่ำง
  3. 3. 3 • อัพเดทเนื้อหำต่ำง ๆ ได้ง่ำย เหตุผลที่คนทั่วโลกนิยมใช้ WordPress ก็เพรำะมีระบบจัดกำรเนื้อหำที่ใช้งำนง่ำย เป็นสำกล คุณ สำมำรถเพิ่มข้อมูลหรืออัพเดทเนื้อหำได้ตลอด ทุกที่ ทุกเวลำ • มีธีมให้เลือกเยอะ ดีไซน์สวยงำม สำหรับคนที่เบื่อง่ำย อยำกจะเปลี่ยนหน้ำตำเว็บไซต์ใหม่ ข่ำวดีก็คือ WordPress มีธีมให้ดำวน์ โหลดมำกมำยมหำศำลเลย มีทั้งแบบฟรีและแบบเสียเงิน แถมยังดีไซน์สวยงำมสุดๆ • Google ชอบ Google ระบบ Search Engine ที่ทรงอิทธิพลที่สุดในโลกอินเตอร์เน็ต ให้ควำมสำคัญกับเว็บไซต์ที่ สร้ำงด้วย WordPress ทั้งยังแนะนำว่ำเว็บไซต์ธุรกิจควรสร้ำงด้วย WordPress จะช่วยให้ติดอับ ดับ Google ได้ง่ำยขึ้น ใช้ WordPress สร้ำงเว็บอะไรได้บ้ำง ถ้ำพูดตำมหลักกำร WordPress สำมำรถสร้ำงเว็บได้ทุกประเภทบนโลกใบนี้ เช่น สร้ำงเว็บบริษัทก็ได้ สร้ำง เว็บร้ำนค้ำปลีกก็ได้ สร้ำงเว็บเป็น Marketplace เหมือน Lazada ก็ได้ หรือจะสร้ำงเว็บเป็นคอร์สเรียน ออนไลน์ แบบ skilllane ก็ได้ แต่ตอนลงมือทำจริงอำจจะไม่เหมำะกับกำรทำเว็บบ้ำงประเภทนะ โดยเฉพำะเว็บที่มีระบบซับซ้อน เช่น Maket place หรือเว็บพวกประกำศขำยบ้ำน ด้วยเหตุผลประมำณนี้ครับ
  4. 4. 4 • WordPress เหมำะกับเว็บที่เป็นร้ำนค้ำเดี่ยว เป็นสินค้ำของเรำเอง โพสขำยเอง เก็บเงินเอง อันนี้ เหมำะกับกำรสร้ำงด้วย WordPress • เว็บที่เป็น Market place มีควำมซับซ้อนของระบบมำกกว่ำหลำยเท่ำ เพรำะผู้ขำยต้องมีสิทธิเอำ สินค้ำมำวำงขำย และแก้ไขรำยละเอียดของตัวเอง เช็คยอดเงิน / กำรส่งของต่ำงๆ (ซึ่งต้องกำหนด อีกมำกว่ำ ใครส่ง ด้วยเงื่อนไขไหน ใครรับประกัน • WordPress เป็น open source software โดยให้คนทั้งโลกรวมกันพัฒนำ โดยกำรเขียนธีม และ ปลั๊กอิน ให้มำทำงำนร่วมกับ WordPress แต่เมื่อต่ำงคนต่ำงๆ เขียน หลำยๆ เมื่อเรำต่อเติมเว็บให้ ซับซ้อนยิ่งขึ้น จะมีโอกำสที่ปลั๊กอิน กับธีม ตีกัน ทำให้ระบบพังได้นั้นเอง ดังนั้น WordPress เหมำะกับกำรสร้ำงเว็บบริษัท ที่มีลักษะเป็น Information และเหมำะสำหรับทำเว็บ ร้ำนค้ำเดี่ยว มำกกว่ำกำรทำเว็บที่มีระบบซับซ้อนโดยเฉพำะ WordPress ไม่เหมำะกับกำรสร้ำงเว็บ Market place ครับ ดูเพิ่มเติม: ตัวอย่ำงเว็บไซต์ประเภทต่ำงๆ ที่สร้ำงจำก WordPress “ตามหลักการ WordPress สร้างเว็บได้ทุกประเภทบนโลกใบนี้ แต่การลงมือ ทาจริง เว็บบางประเภทอาจจะไม่เหมาะกับการสร้างด้วย WordPress” ควำมแตกต่ำงระหว่ำง WordPress.com กับ .org • WordPress.com ให้บริกำรบล็อกฟรีเหมือน Blogger หรือ Tumblr มีพื้นที่โฮสติ้งฟรีแต่จะมี ข้อจำกัดบำงอย่ำง เช่น ปรับแต่งหน้ำตำเว็บไซต์ได้เพียงเล็กน้อย เหมำะสำหรับผู้ที่ต้องกำรเขียน บทควำมเพียงอย่ำงเดียว คุณสำมำรถสมัครเพื่อเริ่มต้นสร้ำงเว็บไซต์ได้เลย • WordPress.org สำมำรถดำวน์โหลด Source code และติดตั้งลงในโฮสติ้งส่วนตัว ปรับแต่งและ แก้ไขได้อิสระ มีควำมยืดหยุ่นมำกกว่ำ เหมำะสำหรับทำเว็บไซต์หลำกหลำยรูปแบบ สำมำรถดำวน์ โหลดเพื่อเริ่มต้นใช้งำน WordPress กับธุรกิจของคุณได้เลย (เว็บผมเองก็สร้ำงด้วย WordPress.org เช่นกัน) ที่มำของคำอธิบำยนี้ contentshifu.com
  5. 5. 5 ดูรูปภำพกำรเปรียบเทียบเพิ่มเติมนะ ที่มำของรูปภำพ wpexplorer.com บทควำมนี้จะรวมควำมรู้พื้นฐำนในกำรใช้งำนเว็บไซต์สร้ำงด้วย WordPress โดยโฟกัสที่ WordPress.org เป็นหลักครับผม เพรำะยืดหยุ่นกว่ำ และประหยัดกว่ำหำกเรำจะสร้ำงเว็บไซต์ หลำย ๆ เว็บ
  6. 6. 6 องค์ประกอบของกำรสร้ำงเว็บด้วย WordPress กำรสร้ำงเว็บด้วย WordPress เรำไม่ได้ใช่แค่ WordPress อย่ำงเดียวแล้วจะสำมำรถสร้ำงเว็บให้ใช้งำนจริง ได้ หำกคุณต้องกำรทำเว็บให้ใช้งำนจริงได้ จะมีองค์ประกอบอีกหลำยส่วน ในกำรทำงำนร่วมกับ WordPress ดังนี้ครับ 1. WordPress คือ แพลตฟอร์ม เปรียบเหมือนระบบปฏิบัติกำร (OS) บนคอมพิวเตอร์ที่เรำ จำเป็นต้องติดตั้งก่อน แต่ตัว WordPress เองยังไม่มีควำมสำมำรถในกำรออกแบบควำมสวยงำม หรือสร้ำงฟังชั่นที่ซับซ้อน เรำต้องทำงำนร่วมกับเครื่องมือหรือปลั๊กอินอื่นๆ ด้วย 2. Woocommerce คือ ปลั๊กอินที่ช่วยแปลงร่ำงเว็บ WordPress ธรรมดำๆ ของคุณให้กลำยเป็นเว็บ ร้ำนค้ำออนไลน์เต็มรูปแบบ เรำสำมำรถโหลดตัวปลั๊กอินนี้มำใช้ฟรีๆ ได้อีกด้วย และในปัจจุบันจำก สถิติเว็บร้ำนค้ำออนไลน์ของทั้งโลก 47% คือเว็บที่สร้ำงมำจำก Woocommerce
  7. 7. 7 3. Theme คือ เครื่องมือที่ใช้สำหรับออกแบบ และจัดวำง layout หน้ำตำเว็บไซต์ WordPress ของเรำ ให้สวยงำมในแบบที่เรำต้องกำร หำกเรำใช้งำนธีมได้เก่งๆ เรำจะสำมำรถออกแบบหน้ำเว็บของเรำ อย่ำงไรก็ได้ ทุกไอเดีย หรือออกแบบเว็บเลียนแบบหน้ำตำของเว็บที่เรำชอบก็ได้ 4. Plugin คือ เครื่องมือเพิ่มฟังชั่นกำรใช้งำนเว็บ WordPress ของคุณ ให้มีประสิทธิภำพมำกขึ้น ตอบ โจทย์ธุรกิจ หรือในสิ่งที่เรำต้องกำร เช่น สร้ำงฟอร์มเก็บข้อมูล ทำระบบ booking หรือระบบ live chat เป็นต้น แนะนำให้คุณดูคลิปนี้ประกอบครับ https://youtu.be/b93PHDZ-_hE ต้นทุนกำรสร้ำงเว็บ WordPress เว็บไซต์ ก็คือ ร้ำนค้ำบนโลกออนไลน์ ที่ไว้คอยเรียกลูกค้ำให้แวะมำชอปปิ้งที่ร้ำนของเรำ นั้นหมำยควำมว่ำ หำกคุณต้องกำรทำเว็บแล้วให้มันขำยของได้ คุณต้องลงทุนเงิน เวลำ กำรออกแบบ กำรตกแต่ง ให้ร้ำนค้ำ คุณน่ำสนใจพอที่จะดึงผู้คนให้แวะมำเยี่ยมชม สำหรับต้นทุน (เงิน/เวลำ) ในกำรสร้ำงเว็บไซต์ ให้มีคุณภำพ มีดังนี้ครับ 1. ค่ำจดโดเมน 400 – 1000 บำท รำคำจะแตกต่ำงกันตำมนำมสกุลที่เรำเลือกใช้ เช่น นำมสกุล .com, .net, .in.th จะรำคำประมำณ 400-500 บำท นำมสกุล .co.th จะรำคำประมำณ 1000 บำท 2. ค่ำเช่ำโฮสติ้ง (ที่ตั้งเว็บไซต์) รำคำ 1500 – 3000 บำท 3. ค่ำแพลตฟอร์ม (เครื่องมือสร้ำงเว็บ) เรำจะใช้ WordPress ในกำรทำ ซึ่งตัว WordPress นั้น ฟรี! 4. ค่ำธีม (สำหรับในกำรออกแบบเว็บ) รำคำ 2,000-2,500 บำท
  8. 8. 8 5. ค่ำจ้ำงทำกรำฟฟิค บำงครั้งอยำกให้เว็บออกมำสวย ดูเป็นมืออำชีพ เรำต้องจ้ำงคนทำกรำฟฟิครูป ภำพประกอบเว็บให้เรำครับ รำคำโดยเฉลี่ย 15,000 – 20,000 บำท (กรณีที่คุณไม่ได้ทำเองนะ) 6. ต้นทุนด้ำนเวลำกำรทำเว็บหำกเรำจ้ำงคนอื่นทำให้เรำ ใช้เวลำประมำณ 20-30 วัน 7. ต้นทุนด้ำนเวลำหำกคุณคิดจะทำเว็บไซต์เอง มีดังนี้ – เวลำที่ใช้สำหรับกำรเรียนรู้ 2-3 เดือน – เวลำที่ใช้สำหรับกำรทำเว็บให้ใช้งำนจริงๆ ได้ อีก 1-2 เดือน 8. ค่ำแรงของคนที่รับจ้ำงทำ แต่ละคนจะมีค่ำตัวไม่เท่ำกัน โดยเฉลี่ย 15,000 – 30,000 บำท (กรณีที่ เรำไม่ได้ทำเองนะ) ดังนั้นโดยสรุป ต้นทุนของกำรสร้ำงเว็บไซต์ ให้มีคุณภำพดี • หำกคุณจ้ำงคนอื่นทำรำคำจะประมำณ 30,000 – 50,000 บำท (เป็นรำคำขั้นต่ำนะ) • หำกคุณเรียนรู้ที่จะทำเองต้นทุนที่ใช้จะประมำณ 4,500 บำท (ไม่รวมค่ำกรำฟฟิค) 20,000 บำท (ทำเว็บเอง แต่จ้ำงกรำฟฟิคออกแบบรูป) • เวลำที่ใช้ 3-4 เดือน กรณีที่คุณสร้ำงเว็บด้วยตนเอง เริ่มตั้งแต่ขั้นตอนกำรเรียนรู้จนถึงกำรลงมือทำ เว็บให้สำเร็จ “หากคุณจ้างใครทาเว็บ แล้วราคาประเมิณถูกกว่าที่ผมแสดงข้างต้น คุณก็ ต้องยอมรับความเสี่ยงด้านคุณภาพของเว็บไซต์ และความเสี่ยงด้านถูกทิ้ง งาน หรือทาเว็บให้ใช้งานจริงไม่ได้นั้นเอง เพราะเป้าหมายของการเขียน บทความนี้ ผมต้องการพาคุณสร้างเว็บที่มีคุณภาพดีให้ได้เท่านั้น” แนวทำงใช้งำน WordPress ให้มีประสิทธิภำพ กำรจะใช้งำน WordPress ให้มีประสิทธิภำพ อันดับแรกเรำต้องเข้ำใจก่อนว่ำ WordPress เขำถูกพัฒนำมำ เพื่อทำสิ่งใด สิ่งที่เป็นหัวใจของ WordPress คือ ช่วยให้ผู้คนธรรมดำๆ ทั่วไป สร้ำงเว็บไซต์ด้วยตนเองได้ โดยไม่ต้อง code และไม่ต้องเป็นโปรแกรมเมอร์
  9. 9. 9 WordPress Mission “WordPress is software designed for everyone, emphasizing accessibility, performance, security, and ease of use.” เมื่อ WordPress แก้สิ่งที่เป็น Pain point ของวงกำรทำเว็บได้สำเร็จ คือ ทำให้กำรทำเว็บที่เป็นเรื่องยำกๆ กลำยเป็นเรื่องง่ำยๆ ได้ จึงส่งผลให้ WordPress กลำยเป็น เครื่องมือที่คนทั้งโลกเลือกใช้ในกำรทำเว็บมำก ที่สุด แต่แน่นอน WordPress นั้น ไม่ใช่เครื่องมือที่เพอร์เฟค แม้ว่ำเขำจะสร้ำงเว็บได้ทุกชนิดบนโลกใบนี้แต่ ก็อำจจะมีบำงฟังชั่นที่อำจจะไม่ตอบโจทย์ โมเดลของธุรกิจของคุณบ้ำง ในบ้ำงจุด เพรำะกำรทำเว็บว่ำซับซ้อนแล้ว แต่ควำมต้องกำรคนนั้นซับซ้อนยิ่งกว่ำ แนวทำงกำรใช้งำนที่ถูกต้อง สิ่งที่ผมอยำกจะสื่อสำรกับพวกเรำคือ โดยส่วนใหญ่ฟังชั่นที่เรำต้องกำรนั้น มันจะมีธีม และปลั๊กอินของ WordPress รองรับอยู่แล้ว แค่เรำอำจยังค้นหำไม่เจอเท่ำนั้น แต่หำกค้นหำแล้วไม่เจอฟังชั่นที่เรำต้องกำร สิ่งที่ กูรู WordPress อันดับ 1 คุณเม่น Chakkrisn Menn Talawat แนะนำพวกเรำคนทำเว็บก็คือ “ให้พยายามปรับโมเดลเรา ให้เข้ากับปลั๊กอิน จะจบงานได้ดีกว่า แต่ถ้าเขียน ใหม่ มันจะทั้งแพง ทั้งช้า และอาจทางานไม่จบ” กำรพยำยำมไป custom theme หรือเขียนปลั๊กอินขึ้นมำใหม่เองไม่ใช่เรื่องผิดถ้ำคุณเก่งจริงๆ แต่มันจะทำ ให้คุณเสียทั้งเงินและเวลำ ที่ไม่ได้เป็นเครื่องกำรันตีว่ำเมื่อทำทุกอย่ำงเสร็จ สินค้ำหรือบริกำรของคุณมันจะ ทำเงินได้ เพรำะอย่ำลืมว่ำแก่น ของ WordPress คือ กำรสร้ำงเว็บโดยไม่ต้อง Coding ดังนั้น หำกคุณต้องกำรใช้ WordPress ให้มีประสิทธิภำพ ใช้งำนได้จริง เว็บไม่พังในระยะยำว
  10. 10. 10 ก็คือปรับสิ่งที่เรำต้องกำร ให้เหมำะกับสิ่งที่ WordPress มี แก้ไขโค้ดให้น้อยที่สุด หรือไม่ต้องแก้โค้ดเลย นั้นเอง แต่ให้จงโฟกัสสิ่งที่ลูกค้ำเรำต้องกำร คือ กำรทำเว็บให้น่ำเชื่อถือ ด้วยคอนเทนต์คุณภำพ ทำให้ลูกค้ำมั่นใจ ว่ำหำกสั่งสินค้ำหรือใช้บริกำรจำกเรำเขำจะได้สินค้ำที่ดีมีคุณภำพ ส่งของตรงเวลำ แค่นั้น ขั้นตอนกำรเรียนรู้ WordPress กำรสร้ำงเว็บด้วย WordPress นั้นไม่ยำก แต่มันมีรำยละเอียดเยอะ เพื่อให้กำรเรียนรู้ได้อย่ำงมี ประสิทธิภำพ และไม่หลงทำง ผมแนะนำให้คุณเรียนรู้และลงมือทำทีละขั้นตอน ดังนี้ครับ 1. จดโดเมน เช่ำโฮส 2. ติดตั้ง WordPress 3. ฝึกใช้งำน WordPress พื้นฐำน 4. ออกแบบเว็บให้สวยงำมด้วยธีม 5. สร้ำงระบบร้ำนค้ำ Woocommerce 6. สร้ำงฟังชั่นเพิ่มเติมด้วย ปลั๊กอิน 7. เชื่อมต่อเว็บเข้ำกับ Google 8. ทำ SEO และทำกำรตลำดออนไลน์ สรุป กำรใช้งำน WordPress นั้นไม่ยำก ใคร ๆ ก็สำมำรถเรียนรู้ได้ แต่เขำก็มีรำยละเอียดค่อนข้ำงมำก สำหรับผู้ เริ่มต้นใช้งำน WordPress อำจจะยังรู้สึกว่ำมันยังไม่ง่ำย ตรงจุดนี้เรำต้องค่อยๆ ฝึกฝนทำซ้ำไปเรื่อย ๆ พื้นฐำนที่แน่นเท่ำนั้น ถึงจะช่วยให้เรำทำเว็บให้มีประสิทธิภำพได้ในอนำคต เพรำะแค่กำรทำเว็บได้ กับทำ เว็บให้ดี ยังมีรำยละเอียดที่แตกต่ำงกันอยู่มำกครับ
  11. 11. 11 บทที่ 2 กำรจดโดเมน (Domain) โดเมน(Domain) คืออะไร โดเมน คือ ชื่อของเว็บไซต์ ชื่อโดเมน ก็เปรียบเหมือนชื่อบริษัท หรือชื่อร้ำนค้ำของเรำ จะซ้ำกับคนอื่นไม่ได้ โดเมน จะมีองค์ประกอบอยู่ 2 ส่วน คือ ชื่อโดเมน กับนำมสกุล หลักกำรจดชื่อโดเมน • โดเมนเรำจดที่ไหนก็ได้ แต่เน้นจดจำกบริษัทที่ดูแล้วมีควำมน่ำเชื่อถือ • ควรตั้งชื่อโดเมนให้ สั้น กระชับ เพื่อให้คนจดจำง่ำย • ควรตั้งชื่อที่ออกเสียงแล้วฟังง่ำยๆ ด้วย บอกต่อง่ำย • ไม่ควรตั้งชื่อโดเมน ไปซ้ำกับเว็บใหญ่ๆ หรือ Brand สินค้ำที่มีชื่อเสียง • ไม่ควรจดโดเมนเป็นคำ keyword ตรงๆ • ควรตั้งชื่อโดเมนเป็นภำษำอังกฤษ • ตั้งชื่อให้สื่อควำมหมำยถึงสิ่งที่เรำทำ (ถ้ำทำได้) • อย่ำตั้งชื่อโดเมนที่สะกดคำยำก หรือพิมพ์ยำก • ไม่ควรมีเครื่องหมำยขีด( – ) เช่อน my-domain.com เพรำะอำจทำให้คนสับสน หรือพิมพ์ผิดได้ • เลือกใช้นำมสกุล .com เพรำะคนส่วนใหญ่คุ้นเคย แต่ถ้ำจดไม่ได้ก็ไม่เป็นไร (เพรำะมีคนจดชื่อนี้ไป แล้ว) ไปหำนำมสกุลอื่น ๆ ได้ไม่มีปัญหำ แต่อย่ำใช้นำมสกุลที่ดูแปลกตำจนเกินไป • ตั้งชื่อโดเมนเพื่อคำนึงถึงกำรทำ Brand SEO ในอนำคตด้วย
  12. 12. 12 จดโดเมนรำคำ เท่ำไหร่ กำรจดโดเมนนั้นมีค่ำใช้จ่ำย รำคำประมำณ 400-1000 บำท รำคำโดเมนจะถูกหรือแพงขึ้นอยู่กับ นำมสกุล ของโดเมนที่เรำเลือกใช้นั้นเอง
  13. 13. 13 จดโดเมนที่ไหนดี? มีบริษัทรับจดโดเมนอยู่มำกมำย แต่บริษัทรับจดโดเมนที่ผมแนะนำมีดังนี้ครับ (อัตรำค่ำบริกำรกำรจด โดเมนของแต่ละบริษัทอำจไม่เท่ำกันนะ) แต่สำหรับบทควำมนี้ผมจะแนะนำวิธีกำรจดโดเมนที่ Hostatom เป็นหลักครับ เพรำะโดเมนเว็บผมเองก็ใช้ บริกำรจดกับเขำนั้นเอง และเพื่อให้คุณสำมำรถทำตำมขั้นตอนที่ผมอธิบำยไว้ได้ ผมแนะนำให้มำจดบริกำร ที่เดียวกับผมได้เลยครับ
  14. 14. 14 ขั้นตอนกำรจดโดเมน 1) ให้เรำไปที่เว็บ hostatom.com 2) ดูที่เมนู ให้คลิกตรงคำว่ำ จดโดเมนใหม่ 3) คลิกตรงคำว่ำ คลิกที่นี่เพื่อจดทะเบียนโดเมนกับโฮสอะตอม (สำหรับใครที่จดโดเมนไว้ก่อนแล้ว ข้ำมขั้น ตอนนี้ไปได้เลยครับผม) 4) พิมพ์ชื่อโดเมนที่เรำต้องกำรจดลงไป และเพื่อเป็นกำรเช็คด้วยว่ำ ชื่อที่เรำต้องกำรนั้นมีคนจดไว้แล้วหรือ ยัง ถ้ำระบบแจ้งว่ำ ชื่อนี้จดไม่ได้ แสดงว่ำชื่อที่เรำต้องกำรนั้นมีคนจดไว้อยู่แล้ว
  15. 15. 15 ทำงแก้ไขหำกเรำอยำกได้ชื่อนี้จริง ๆ ให้เรำเปลี่ยนนำมสกุลดู แล้วลองค้นหำดูใหม่ หรือจะลองตั้งชื่อใหม่ลง ไปก็ได้ หำกระบบแจ้งว่ำชื่อนี้สำมมรถใช้ได้ เรำก็คลิก ใส่ลงตะกร้ำ ได้เลยครับ พร้อมกับให้คลิกคำว่ำชำระเงิน เรำก็จะมำเจอหน้ำนี้เขำจะถำมว่ำซื้อโฮสด้วยเลยมั้ย เรำอำจจะยังไม่ต้องซื้อตอนนี้ก็ได้ รอคำแนะนำเรื่อง กำรเลือกซื้อโฮสก่อนก็ได้ครับ คลิกดำเนินกำรต่อ ได้เลย
  16. 16. 16 จำกนั้นให้ คลิกชำระเงิน ครับ
  17. 17. 17 ระบบก็จะพำมำยังหน้ำกรอกข้อมูลส่วนตัว
  18. 18. 18 กรอกข้อมูลให้เรียบร้อย แต่ให้เรำกรอกเป็นภำษำอังกฤษนะ แล้วให้คลิก ยืนยันคำสั่งซื้อไปได้เลยครับ หลัก จำกนั้นคุณจะได้รับใบแจ้งค่ำบริกำร เพื่อไว้ใช้สำหรับกำรชำระเงิน เลือกบัญชีที่คุณสะดวกสำหรับกำรโอนเงิน ตำมนี้ครับผม หลักจำกโอนเงินเรียบร้อยแล้ว เรำต้องทำกำรแจ้งชำระเงินไปให้เขำครับ ให้เรำกลับไปที่หน้ำเว็บของ Hostatom ดูที่เมนู แจ้งยืนยันกำรชำระเงิน
  19. 19. 19 กรอกข้อมูล พร้อมส่งหลักฐำนกำรชำระเงินเข้ำไปให้เรียบร้อยครับผม จำกนั้นรอทำงโฮสจดทะเบียนโดเมน ให้เรำอำจจะใช้เวลำ 1 – 2 ชั่วโมงครับ ตรวจเช็คว่ำโดเมนเรำพร้อมใช้งำนเรียบร้อยหรือยัง ให้เรำทำกำร login เข้ำสู่ระบบหลังบ้ำนของโฮส โดย กำรคลิกที่ Client Login กรอก username (email) และ password ที่เรำใช้ตอนสมัครจดโดเมน
  20. 20. 20 ระบบก็จะพำเรำสู่ระบบหลังบ้ำนของโฮสที่เรำเลือกใช้บริกำร ให้เรำคลิกที่เมนู โดเมนของฉัน ก็จะปรำกฏรำยชื่อโดเมนที่เรำเคยจดไว้ทั้งหมด โดเมนที่พร้อมใช้งำน จะมีสถำนะเป็นสีเขียว (บริกำรที่เปิด ใช้งำนอยู่) เมื่อเรำมีโดเมนเรียบร้อยแล้ว อันดับต่อไป เรำต้องไปเช่ำโฮสกันต่อครับผม ดูบทเรียนนี้บน YouTube: https://youtu.be/VLdIoPZDFlw
  21. 21. 21 บทที่ 3 เช่ำโฮสติ้ง (Hosting) โฮสติ้ง ก็คือพื้นที่ ที่ใช้เก็บรูป ข้อมูล ไฟล์ต่ำงๆ เพื่อใช้แสดงเว็บของเรำ ก็จะเปรียบเหมือนที่ตั้งร้ำนค้ำ ที่เรำ ต้องไปเช่ำเขำนั่นเองครับ ดูบทเรียนนี้บน YouTube: https://youtu.be/RiWKf7VgZtw เว็บจะมีประสิทธิภำพดีหรือไม่ดี โฮสมีส่วนสำคัญอยู่ไม่น้อย ก่อนที่เรำจะเลือกใช้บริกำรโฮสติ้งกับเจ้ำไหนดี สิ่งที่เรำต้องรู้ก่อน ก็คือ ตัวโฮสติ้งที่ WordPress แนะนำมีเสปคอย่ำงไรบ้ำง แต่กำรอธิบำยเรื่องโฮสส่วน ใหญ่มีแต่คำศัพท์ทำงเทคนิค โดยสรุปย่อ ผมมีคำแนะนำสำหรับกำรเลือกโฮสดังนี้ครับ • หำกเป็นมือใหม่ควรใช้โฮสไทยครับ หำกติดขัดอะไรจะได้คุยกับโฮสได้รู้เรื่อง • ระบบจัดกำรหลังบ้ำนโฮส (control panel) ควรเป็น DirectAdmin หรือ plesk • เวอร์ชั่น PHP web server ควรใช้เวอร์ชั่น PHP 7.3 ขึ้นไป • ในตัว Control panel ควรมี Auto installer ช่วยติดตั้ง WordPress ด้วย ตัวที่โฮสควรมี ก็เช่น Softaculous คือ ถ้ำโฮสที่เรำใช้มีเจ้ำตัวนี้อยู่ เรำจะสำมำรถลง WordPress เองได้ง่ำยมำก เรำจะ ได้ไม่ต้องสร้ำง database เอง ไม่ต้อง FTP ไฟล์ต่ำงๆ ด้วย • โฮสควรมีบริกำร Let’s Encrypt – Free SSL/TLS Certificates เพื่อให้เรำสำมำรถทำเว็บเป็น HTTPS ได้ฟรี • แพคเกจของโฮสไม่ควรจำกัดโดเมนและซับโดเมน (เพรำะเรำต้องทำกันหลำยเว็บ) • ส่วนพื้นที่ของโฮสเรำไม่ต้องกลัวเต็มครับ เลือกมำสักแพคเกจได้เลย โดยเฉลี่ยเว็บที่ทำด้วย WordPress ที่ขนำดเล็กถึงกลำง หำกเรำทำเว็บได้ถูกต้องเว็บเรำจะใหญ่ไม่เกิน 500 MB ครับ • และอีกเรื่องคือเรื่อง bandwidth ส่งข้อมูลเน็ตออกไปต่ำงประเทศ ถ้ำโฮสไหนเน็ตออกต่ำงประเทศ ไม่ค่อยดีจะเกิดปัญหำที่พบเจอบ่อยที่สุด คือกำร แชร์ลิงค์เฟสบุ๊ค แล้วรูปไม่ขึ้นนั้นเอง ตรงจุดนี้ บำงครั้งเรำก็ไม่รู้ว่ำโฮสเจ้ำไหนเน็ตนอกดีหรือไม่ดี จนกว่ำจะได้เช่ำโฮสมำลองใช้ดูครับ • แต่แน่นอนเพื่อควำมง่ำย หำกคุณยังตัดสินใจไม่ได้ว่ำจะใช้โฮสเจ้ำไหนดี ผมแนะนำให้คุณใช้โฮส เจ้ำนี้ครับ Hostatom ซึ่งเป็นโฮสที่ผมใช้งำนอยู่ และจะได้ทำตำมขั้นตอนกำรใช้งำนจำกบทควำม ชุดนี้ได้นั้นเอง
  22. 22. 22 ขั้นตอนกำรเช่ำโฮสติ้ง ให้ไปที่หน้ำเว็บของ >> Hostatom << กดผ่ำนลิงค์ตรงนี้ได้เลย ดูที่เมนูตรงเว็บโฮสติ้ง ให้เรำคลิกเลือก WordPress Hosting ครับ จำกนั้นให้เลือกแพคเกจของโฮสที่เรำจะเลือกใช้ ผมแนะนำให้คุณเลือกแค่แพคเกจ WP-1 ก็พอครับ สิ่งที่ได้รับเมื่อสั่งซื้อแพคเกจ WP-1 นี้ • พื้นที่ในกำรเก็บข้อมูล 10 GB • ไม่จำกัดกำรรับส่งข้อมูล • ไม่จำกัดโดเมนที่ใช้งำน • รองรับผู้เข้ำชมเว็บ 1 แสนคนต่อเดือน • มีระบบช่วยติดตั้ง WordPress • ฟรี SSL เพื่อทำเว็บให้เป็น HTTPS
  23. 23. 23 จำกนั้นให้คลิก สั่งซื้อ ระบบก็จะพำมำที่หน้ำ เลือกโดเมน ซึ่งเรำได้ซื้อโดเมนไว้แล้ว ดังนั้นให้คลิกที่ ใช้ โดเมนที่มีอยู่แล้ว และอัพเดท nameserver พิมพ์ชื่อโดเมนที่เรำจดไว้ลงไป แล้วคลิกที่ ใช้โดเมนนี้ จำกนั้นคลิก ดำเนินกำรต่อ
  24. 24. 24 คลิกชำระเงิน ระบบก็จะพำเข้ำสู่หน้ำกรอกข้อมูลเพื่อทำกำรชำระเงิน สำหรับคนที่จดโดเมนกับ Hostatom อยู่แล้ว เรำก็ ไม่จำเป็นต้องกรอกข้อมูลใหม่ ให้เรำคลิก สมัครใช้งำนเรียบร้อยแล้ว ได้เลยครับ จำกนั้นให้เรำกรอก username ที่เป็นอีเมล และ password ให้เรียบร้อย
  25. 25. 25 เมื่อคุณ คลิกยืนยันคำสั่งซื้อ เรียบร้อย คุณก็จะได้ใบแจ้งค่ำบริกำร เพื่อไปใช้ในกำรชำระเงินครับ และเลือก บัญชีที่คุณสะดวกสำหรับกำรโอนเงิน ตำมนี้ครับผม หลักจำกโอนเงินเรียบร้อยแล้ว เรำต้องทำกำรแจ้งชำระเงินไปให้เขำครับ ให้เรำกลับไปที่หน้ำเว็บของ Hostatom ดูที่เมนู แจ้งยืนยันกำรชำระเงิน กรอกข้อมูล พร้อมส่งหลักฐำนกำรชำระเงินเข้ำไปให้เรียบร้อยครับผม จำกนั้นรอทำงโฮสเซ็ทค่ำโฮสติ้งให้ เรำ อำจจะใช้เวลำ 2 – 4 ชั่วโมงครับ เมื่อโดเมนพร้อม โฮสพร้อม ก็ถึงเวลำ สร้ำงเว็บไซต์ ขำยของออนไลน์ ของเรำจริงๆ กันแล้วครับผม
  26. 26. 26 บทที 4 กำรตั้งค่ำ Nameserver ก่อนที่จะถึงขั้นตอนกำรติดตั้ง WordPress ให้เรำเช็คค่ำต่ำงๆ ของโดเมน ว่ำเรียบร้อยแล้วรึยัง กำรตั้งค่ำใน ส่วนของโดเมนที่เรำควรเช็คก่อนเริ่มต้น WordPress มีดังนี้ Nameserver คืออะไร Nameserver (NS) คือ เป็น IP ของ Web Hosting ที่คุณใช้บริกำรอยู่ ซึ่งโดยทั่วไป Nameserver ต้องมี อย่ำงน้อย 2 ตัว เช่น ns1.sample.com, ns2.sample.com เพื่อให้ตัวที่ 2 นั้นเป็นตัวสำรองในกรณีที่ ns1 นั้นล่ม ดูบทเรียนนี้บน YouTube: https://youtu.be/YsWJk7csy3Y เช็คค่ำ nameserver nameserver ก็เหมือนบ้ำนเลขที่ ทุกโฮสติ้งจะมีเลขที่บ้ำน อยำกให้โดเมนที่เรำจดไว้มำแสดงที่โฮสไหน ต้อง ตั้งค่ำ nameserver (บ้ำนเลขที่) ก่อน เพรำะบำงครั้งเรำอำจจะจดโดเมนที่นึง แต่ใช้โฮสติ้ง อีกเจ้ำนึงนั้นเอง วิธีกำรเช็ค nameserver และตั้งค่ำ nameserver มีดังนี้ครับ จดโดเมนไว้ที่ไหน เข้ำระบบหลังบ้ำนของให้ ผู้ให้บริกำรนั้นได้เลย สำหรับคนที่ใช้ Hostatom ทำตำมนี้ได้เลยครับ
  27. 27. 27 ให้เรำเข้ำระบบหลังบ้ำนของ Hostatom จำกนั้นให้เลือกเมนู บริกำรของฉัน เรำจะเห็นรำยชื่อโฮสที่เรำได้ซื้อไว้ จำกนั้นให้ดูตรงที่เป็นสีเขียวๆ คลิกที่ สินค้ำ/บริกำรที่ใช้งำนอยู่
  28. 28. 28 ระบบก็จะพำเข้ำมำหน้ำ กำรจัดกำรสินค้ำ ให้เรำมองดูล่ำงๆ จะเห็นชื่อของ nameserver ของโฮสที่เรำใช้ งำนอยู่ ให้ copy ชื่อ nameserver เก็บไว้ก่อน เพื่อเตรียมจะเอำไปใส่ที่โดเมน จำกนั้นให้เลือกเมนู โดเมนของฉัน จำกนั้นไปที่ชื่อโดเมนของเรำ ให้คลิกที่เป็น dropdown และให้คลิก จัดกำร Nameservers ต่อมำให้เลือกที่ ใช้ nameservers ที่กำหนดเอง ให้เอำชื่อ nameserver ของโฮสเรำ วำงลงไปครับ คลิก เปลี่ยน nameservers ให้เรียบร้อย
  29. 29. 29 วิธีกำรเพิ่มโดเมน ดูบทเรียนผ่ำน YouTube: https://youtu.be/Z4tyAy1S7UU หำกเรำจดโดเมน และเช่ำโฮสติ้งกับผู้บริกำรเจ้ำเดียวกัน ในกำรจดโดเมนครั้งแรก ชื่อโดเมนจะถูกเพิ่มเข้ำ ไปในโฮสโดยอัตโนมัติ แต่หำกเรำจดโดเมนจำกที่อื่น หรือจดโดเมนเพิ่ม เรำต้องเป็นคนเพิ่มโดเมนเข้ำไปยัง โฮสติ้งเอง เพรำะทำงโฮสติ้ง เขำไม่มีทำงรู้ว่ำ โดเมนที่จดใหม่นี้จะไปรันที่โฮสไหนได้ครับ วิธีกำรเพิ่มโดเมนมีขั้นตอนดังนี้ เข้ำสู่ระบบ Plesk ด้วยกำรคลิกที่ open control panel
  30. 30. 30 คลิก Add Domain จำกนั้นให้พิมพ์ชื่อโดเมนที่ต้องกำรเพิ่มลงไป ติ๊กเปิดใช้งำน Let’s Encrypt เพื่อทำเว็บให้เป็น HTTPS ด้วย จำกนั้นคลิก ok ครับ
  31. 31. 31 บทที่ 5 ทำ HTTPS (SSL ฟรี) ทำเว็บให้เป็น HTTPS คือ กำรเข้ำรหัสข้อมูลบนเว็บไซต์ของเรำ เพื่อเพิ่มควำมปลอดภัยในกำรสื่อสำรหรือ ส่งข้อมูลบนเครือข่ำยอินเทอร์เน็ตครับ เรำจะสังเกตเห็นว่ำเว็บไหนที่เขำเข้ำรหัสไว้ มันจะมีกำรแสดงรูปแม่ กุญแจเอำไว้บน browser ลองดูจำกรูปตัวอย่ำงนะครับ วิธีกำรทำ HTTPS ดูบทเรียนบน YouTube: https://youtu.be/_EbIm8KuR7c ซึ่งเรำจะทำ HTTPS ผ่ำนสิ่งที่เรียกว่ำ Let’s Encrypt Free SSL ทำไมต้องทำ HTTPS กำรทำเว็บเรำให้เป็น https:// อำจช่วยให้ google มองว่ำเว็บเรำมีคุณภำพ ใส่ใจเรื่องควำมปลอดภัยของ ข้อมูลลูกค้ำ กำรจัดอันดับเว็บเรำก็จะดีขึ้นได้ครับ หำกเปรียบเทียบกับเว็บที่คล้ำยกัน แต่เขำไม่ได้เข้ำรหัส เว็บเอำไว้ โดยแนวโน้มผมเชื่อว่ำ google จะให้น้ำหนักเกี่ยวกับกำรทำเว็บให้ปลอดภัยเพิ่มมำกขึ้นด้วย
  32. 32. 32 วิธีกำรทำเรำจะทำได้ 2 วิธี คือ 1. ติดตั้งเองบนโฮสติ้ง 2. แจ้งโฮสติ้งทำให้ วิธีกำรติดตั้ง SSL by Let’s Encryption บน Plesk เพื่อทำเว็บให้เป็น HTTPS Login เข้ำสูระบบ Control panel ของ Hosting ตัวอย่ำงวิธีกำรทำในบทควำมนี้ โฮสที่ผมเลือกใช้คือ Hostatom ซึ่งระบบ Control panel ของเขำคือ plesk โฮสเจ้ำอื่นๆ ก็สำมำรถเปิดใช้งำน SSL by Let’s Encryption เพื่อทำ HTTPS ได้เช่นเดียวกัน แค่ว่ำหน้ำตำ กำรตั้งค่ำอำจจะไม่เหมือนกันเฉยๆ
  33. 33. 33 ไปที่ชื่อโดเมนที่ต้องกำร คลิกที่ SSL/TLS Certificates (บำงเวอรชั่นของ Plesk เขำก็อำจจะเขียนว่ำ Let’s Encrypt ก็ให้คลิกที่ตัวนี้แทน) คลิกเลือก Get it free
  34. 34. 34 คลิกเลือก Secure the wildcard domain และ Assign the certificate to mail domain จำกนั้นรอระบบอัพเดทสักครู่ประมำณ 4-24 ชั่วโมงครับ วิธีเช็คว่ำโดเมนของเรำพร้อมใช้งำนแล้วรึยัง ถ้ำขึ้นรูปแบบนี้แสดงว่ำโดเมนพร้อมใช้งำน แต่ SSL (HTTPS) ยังไม่อัพเดท ให้คุณรอระบบอัพเดทสักครู่
  35. 35. 35 ถ้ำขึ้นรูปแบบนี้แสดงว่ำโดเมนและ SSL พร้อมใช้งำนแล้ว แต่ถ้ำแสดงรูปแบบนี้แสดงว่ำโดเมนยังไม่พร้อมใช้งำนให้รอ 4-24 ชั่วโมงก่อน หำกทำ HTTPS ตำมขั้นตอนแล้วติดขัด สำมำรถแจ้งทำง Hostatom ทำให้ได้เลยครับ ทำงโฮสบริกำรจุดนี้ ให้ฟรีครับ
  36. 36. 36 บทที่ 6 กำรสร้ำง Subdomain Subdomain คืออะไร Subdomain คือ โดเมนย่อย สำหรับกำรแบ่งหมวดหมู่เว็บ เพื่อให้ผู้ใช้งำนเข้ำใจง่ำยๆ สำหรับเว็บที่มีเนื้อหำ คอนเทนต์ที่หลำกหลำย เช่น เว็บ kapook จะแบ่งหมวดหมู่เนื้อหำ เป็นเว็บใหม่แยกขำดจำกเว็บหลัก แต่ สร้ำงบน Subdomain แทน เช่น news.kapook.com, travel.kapook.com เป็นต้น ประโยชน์ของ Subdomain • แต่สำหรับบุคคลทั่วไป ที่ไม่ได้เป็นเว็บขนำดใหญ่ เรำไม่จำเป็นต้องแบ่งเนื้อหำ แยกออกมำเป็นอีก เว็บก็ได้ แต่เรำจะใช้ Subdomain ไว้เป็นเว็บสำหรับกำรฝึกฝนทำเว็บนั้นเอง • เป็นกำรใช้ Subdomain สร้ำงเว็บบนโฮสจริง แทนกำรจำลอง server บนเครื่องคอมพิวเตอร์ • ซึ่งผมมองว่ำ กำรสร้ำง Subdomain เพื่อเอำไว้ฝึกทำเว็บ สะดวกกว่ำกำรจำลอง Server บนเครื่อง คอมพิวเตอร์ครับ
  37. 37. 37 กำรสร้ำงเว็บสำหรับฝึกซ้อมทำได้ 2 วิธี 1. จำลอง Server 2. ทำบน Subdomain ตัวอย่ำงกำรใช้งำนเว็บสำหรับฝึกซ้อม สมมุติ ผมรับงำนทำเว็บมำ 1 งำน ผมจะสร้ำงเว็บบน Subdomain ก่อน เช่นทำแบบนี้ ecloudtec.padveewp.com หำกเรำทำเว็บบน Subdomain ข้อดีคือเรำสำมำรถส่งตัวอย่ำงเว็บที่เรำกำลัง ทำไปให้ลูกค้ำดูได้เลย หำกลูกค้ำพอใจ เรำก็ทำกำรย้ำยเว็บนั้นมำลงบนโดเมนจริง ที่เว็บนี้ได้เลย ecloudtec.com อ่ำนเพิ่มเติม: กำรย้ำยเว็บ WordPress ด้วยปลั๊กอิน All in one Migration เช็คควำมเรียบร้อยของ Let’s Encrypt SSL Login เข้ำสู่ระบบ Plesk control panel เลือกชื่อโดเมน คลิกที่ SSL/TLS Certificates
  38. 38. 38 ถ้ำมีสัญลักษณ์ Secure สีเขียนขึ้นตำมรูปแสดงว่ำ ssl บนโดเมนหลักพร้อมใช้งำนแล้ว แต่ถ้ำยังไม่ขึ้นสี เขียว ให้แจ้งโฮสทำ Wildcard SSL ให้ได้เลยครับ วิธีกำรสร้ำง Subdomain บน Plesk ดูวิธีทำบน YouTube: https://youtu.be/o_dig6KPIg0 หลักจำกเข้ำสู่ระบบ Plesk ให้คลิก Add Subdomain พิมพ์ชื่อ Subdomain ที่ต้องกำรลงไป และอย่ำลืมเลือกชื่อโดเมนหลักที่ต้องกำรด้วย (สำหรับคนที่มีหลำย โดเมน) คลิก OK เป็นอันเรียบร้อย สำหรับกำรสร้ำง Subdomain บน Plesk ครับ
  39. 39. 39 **หมำยเหตุ ตัว subdomain ยังไม่สำมำรถใช้งำนได้ทันที คุณต้องรอให้ระบบมันอัพเดทสักครู่นึงก่อน ประมำณ 4-24 ชั่วโมงครับ เปิดใช้งำน SSL บน Subdomain หลักจำกที่เรำเพิ่ม Subdomain เรียบร้อยแล้ว ที่ระบบ Plesk จะปรำกฏชื่อซับโดเมนนั้นขึ้นมำ ให้เรำเลือก ชื่อ Subdomain ที่เรำต้องกำรทำ SSL คลิกที่ Hosting & DNS และคลิกที่ Hosting Settings มองหำคำว่ำ Certificate เลือก Lets Encrypt ที่เป็นชื่อโดเมนหลัก และในวงเล็บเป็นชื่อ Subdomain ที่เรำ พึ่งสร้ำงไป คลิก ok ให้เรียบร้อยครับ
  40. 40. 40 เช็คควำมเรียบร้อยของ Subdomain หลังจำกที่เรำเปิดใช้ SSL ที่ Subdomain ให้รอกำรอัพเดทของระบบประมำณ 5-10 นำที แล้วลองเอำชื่อ Subdomain ที่คุณสร้ำงไว้ไปเปิดบน browser ดู ถ้ำขึ้นหน้ำตำดังรูป แสดงว่ำ Subdomain และ SSL พร้อมใช้งำนแล้ว หำกมีปัญหำในกำรสร้ำง Subdomain หรือเปิดใช้งำน SSL ผมแนะนำให้คุณไปติดต่อยังผู้ให้บริกำรโฮสติ้ง และให้เขำทำให้เลยก็ได้ครับ
  41. 41. 41 บทที่ 7 วิธีติดตั้ง WordPress จำกบทเรียน WordPress คืออะไร ผมได้อธิบำยไว้แล้วว่ำ กำรสร้ำงเว็บด้วย WordPress จะมีองค์ประกอบ อยู่ด้วยกัน 4 ส่วน คือ 1. ตัว WordPress ที่เอำไว้ใช้เป็น Platform 2. ตัวธีม ที่เอำไว้ใช้ในเรื่องกำรออกแบบด้ำนควำมสวยงำม 3. ตัว WooCommerce ที่เอำไว้ทำระบบตระกร้ำสินค้ำ 4. ตัวปลั๊กอิน เอำไว้สร้ำงระบบหรือฟังชั่นเพิ่มเติม ดังนั้น ขั้นตอนแรกเลย ก่อนที่เรำจะสร้ำงเว็บไซต์ หรือออกแบบเว็บให้มันสวยงำม เรำต้องติดตั้ง WordPress ลงที่โดเมน หรือ Subdomain ของเรำให้เรียบร้อยก่อน ถ้ำเปรียบเทียบให้เห็นภำพ เหมือนตอนที่เรำซื้อคอมพิวเตอร์มำใหม่ๆ ก่อนที่เรำจะติดตั้งพวกโปรแกรม Photoshop หรือโปรแกรมตัดต่อวีดิโอได้ เรำต้องลง Windows ก่อนนั้นเอง
  42. 42. 42 ขั้นตอนกำรติดตั้ง WordPress เข้ำไปสู่ระบบ Control panel บนโฮสก่อน จำกนั้นมองหำคำว่ำ WordPress ทุกโฮส่วนใหญ่จะมีตัวช่วย ติดตั้ง WordPress (WordPress Toolkit) มำให้อยู่แล้ว แค่ว่ำหน้ำตำอำจจะแตกต่ำงกันไปบ้ำง เมื่อเข้ำสู่หน้ำระบบ WordPress Toolkit ให้คลิกที่คำว่ำ Install
  43. 43. 43 สำหรับหน้ำตั้งค่ำ ให้เลือกกำรตั้งค่ำตำมรูปตัวอย่ำงได้เลยครับ ระบบของ Plesk จะถำมเรำว่ำลงปลั๊กอินอะไรเลยมั้ย ตรงจุดนี้ให้เรำคลิก No, thanks ไปก่อนครับผม
  44. 44. 44 เรำก็ลองเช็คดูว่ำตัว WordPress ที่เรำลงไป แสดงผลหรือไม่ ให้คลิกที่ open website ได้เลยครับ หำกขึ้นหน้ำที่มีคำว่ำ Hello world! แสดงว่ำเว็บของเรำได้ลง WordPress เรียบร้อยแล้ว ดูบทเรียนนี้ผ่ำน YouTube: https://youtu.be/MxXdwm_nDHA
  45. 45. 45 บทที่ 8 ตั้งค่ำเริ่มต้นใช้งำน WordPress หำกคุณจะเริ่มต้นสร้ำงเว็บด้วย WordPress ได้ คุณต้องเตรียมสิ่งต่ำง ๆ ดังนี้ให้พร้อมครับ • Domain (ชื่อเว็บไซต์) • Hosting (ที่ตั้งเว็บไซต์) • ติดตั้ง WordPress ลงบนโดเมน หำกยังไม่ได้ทำสำมสิ่งนี้ ให้กลับไปดูเนื้อหำที่บทเรียนนี้ก่อนครับ ใส่ปุ่มกลับไปหน้ำ สอน WordPress **หมำยเหตุ สำหรับนักเรียนทุกคนที่รอคิวเรียนรอบสอนสดกับผม หำกคุณอยำกลองฝึกทำเว็บด้วยตนเองไปก่อน เพื่อ ควำมง่ำยของกำรทำตำมบทเรียนต่ำงๆ ผมแนะนำให้คุณทำดังนี้ครับ • จดโดเมน จดที่ไหนก็ได้ แต่หำกใครยังไม่ได้จดโดเมนผมแนะนำให้มำจดที่ Hostatom • เช่ำโฮส จุดนี้บังคับเลย ถ้ำจะตำมสิ่งที่ผมสอนได้ ต้องมำเช่ำโฮสที่ Hosatom เท่ำนั้นครับ • กำรติดตั้ง WordPress ที่โดเมนหลัก หรือบน Subdomain รวมถึงกำรทำ HTTPS ฟรี ให้คุณแจ้ง ทำง Hostatom ทำแทนได้เลย (จุดนี้เขำบริกำรให้ฟรี) ทำงเข้ำสำหรับกำรจดโดเมนและเช่ำโฮส คลิกที่นี่ครับ : Hostatom เมื่อทุกอย่ำงพร้อมแล้ว เริ่มต้นเรียนรู้ตำม คู่มือสอนใช้ WordPress 2020 ชุดนี้กันได้เลยครับผม หัวข้อเกี่ยวกับกำรตั้งค่ำ WordPress • กำรเข้ำสู่ระบบ/ออกจำกระบบ • ติดตั้งปลั๊กอิน classic editor • เปลี่ยนมำใช้ธีมฝึกซ้อม Twenty Seventeen • ตั้งค่ำ General Settings • ตั้งค่ำภำษำหลังบ้ำน • ตั้งค่ำ Permalink • ปิดไม่ให้ Google เข้ำมำเก็บข้อมูล (บนเว็บฝึกซ้อม)
  46. 46. 46 1) วิธีเข้ำสู่ระบบหลังบ้ำน WordPress (Dashboard) เรำจะเข้ำไปแก้เนื้อหำได้เรำต้องเริ่มต้นจำกกำร login เข้ำสู่หลังบ้ำน มีวิธีกำรทำดังนี้ครับ กำรเข้ำหลังบ้ำน WordPress ให้พิมพ์ /wp-admin ต่อท้ำยชื่อโดเมน ตัวอย่ำง https://padveedigital.com/wp-admin ระบบก็จะพำเรำเข้ำสู่หลังบ้ำน WordPress ซึ่งมีหน้ำตำดังรูปนี้ครับ
  47. 47. 47 วิธีกำรกลับสู่หน้ำบ้ำนเว็บ ให้เรำคลิกที่รูปสัญลักษณ์บ้ำนครับ กำรออกจำกระบบ WordPress ดูทีมุมขวำมือ เอำเมำส์ไปชี้แล้วจะเจอคำสั่ง Logout 2) ติดตั้งปลั๊กอิน classic editor เนื่องจำกช่วงเดือนธันวำคมที่ผ่ำนมำ WordPress เวอร์ชั่น 5.0 มีกำรเปลี่ยนแปลงที่สำคัญ คือเปลี่ยน Editor (เครื่องมือสำหรับกำรเขียนข้อมูล) จำกเวอร์ชั่นเก่ำที่เป็น Classic Editor มำเป็น Gutenberg ซึ่งทำ ให้กำรใช้งำนเปลี่ยนไปทั้งหมด
  48. 48. 48 เนื่องจำกบทควำมนี้เขียนไว้ก่อนที่จะมีตัว Gutenberg ดังนั้นหำกคุณกำลังจะลองฝึกใช้งำน WordPress และให้สำมำรถใช้งำนตำมคู่มือในบทควำมนี้ได้ ผมแนะนำให้คุณลงปลั๊กอิน Classic editor ก่อนครับผม วิธีติดตั้งปลั๊กอิน Classic editor 1.ให้เข้ำหลังบ้ำนคลิก Plugin > Add New > ค้นหำปลั๊กอินชื่อ Classic Editor > คลิก Install และ Activate เปิดใช้งำนปลั๊กอินให้เรียบร้อยครับ
  49. 49. 49 3) เปลี่ยนมำใช้ธีม Twenty Seventeen สำหรับธีมที่ติดมำกับ WordPress 5.5 คือธีม Twenty Twenty แต่สำหรับบทควำมนี้ผมขอใช้ธีม Twenty Seventeen ในกำรเขียนเป็นคู่มือครับ เนื่องจำกผมคุ้นเคยกับธีมเวอร์ชั่นเก่ำมำกกว่ำธีมตัวใหม่ล่ำสุด นั้นเอง วิธีกำรเปลี่ยนธีม คลิก Appearance > Themes > คลิก Activate ธีม Twenty Seventeen หลังจำกทำตำม 2 ขั้นตอนนี้เสร็จแล้ว คุณก็จะสำมำรถเรียนรู้และทำตำม คู่มือสอนตั้งค่ำ WordPress ใน บทควำมนี้ได้แล้วครับผม 4) ตั้งค่ำ General Settings หำกมองว่ำ WordPress คือ โปรแกรม ดังนั้นก่อนที่คุณจะใช้งำนเขำให้มีประสิทธิภำพ เรำต้องมำเซ็ตค่ำ เริ่มต้นกันสักเล็กน้อยตำมนี้ครับ
  50. 50. 50 General Setting ดูที่เมนูด้ำนซ้ำย ไปที่ Settings > คลิก General
  51. 51. 51 กำรตั้งค่ำ General Setting ที่สำคัญมีดังนี้ • Site Title: ใส่ชื่อเว็บ หรือชื่อ Brand ลงไป • Tagline: เขียนคำอธิบำยสั้นๆ เกี่ยวกับธุรกิจหรือร้ำนค้ำของเรำ • Email Address: ใส่อีเมลที่ใช้งำนจริง • Site Language: เลือก ไทย (กำรแสดงภำษำที่หน้ำบ้ำน Frontpage) • Time zone: เลือกโซนเวลำ เมืองไทยให้เลือกเป็น UTC+7 • Date Format: เลือกแบบ วัน/เดือน/ปี • Week Starts On: วันเริ่มต้นสัปดำห์ ให้เลือกเป็น วันอำทิตย์ครับ ตั้งค่ำทุกอย่ำงเสร็จให้คลิก save change 5) ตั้งค่ำภำษำหลังบ้ำน หลังจำกเรำกด save change พวกแถบเมนูจะเปลี่ยนเป็นภำษำไทยตำมที่เรำเลือกไว้ที่ Site Language
  52. 52. 52 แต่หำกเรำต้องกำรใช้งำน WordPress ให้เป็นสำกล เรำควรทำให้แถบเมนูหลังบ้ำน (Dashboard) เป็น ภำษำอังกฤษ แต่ให้เป็นภำษำไทยเฉพำะหน้ำบ้ำนจะดีกว่ำ ชื่อเรียกฟังชั่นต่ำง ๆ มันจะได้เป็นสำกล ติดขัด อะไรไปเสริจหำบน google จะเจอคำตอบได้ง่ำยกว่ำครับ วิธีกำรเปลี่ยนภำษำเมนูบนหน้ำควบคุมให้เรำไปเปลี่ยนที่ส่วนของ ผู้ใช้ (User) แล้วคลิก แก้ไข ตรงชื่อ user ตรงภำษำ ให้เลือกเป็น English (ตรงจุดนี้คือกำรเปลี่ยนเฉพำะภำษำของแถบเมนูหลังบ้ำนเท่ำนั้น) คลิก อัปเดทข้อมูลส่วนตัว ให้เรียบร้อยด้วยครับ 6) Permalink Settings (ตั้งค่ำลิงค์ถำวร) Permalink Settings คือ กำรกำหนดกำรแสดงผลของ URL ว่ำต้องกำรแบบไหน เช่น เป็นตัวเลข, เป็นวันที่, หรือเป็นข้อควำม แนะนำให้ตั้งค่ำตำมนี้ครับ ไปที่ Settings > Permalink แล้วให้ติ๊กที่ช่อง Post name ตำมรูปเลยครับ
  53. 53. 53 7) ปิดไม่ให้ Google เข้ำมำเก็บข้อมูล (บนเว็บฝึกซ้อม) หำกเรำกำลังฝึกซ้อมเว็บบน Subdomain หรือกำลังทำบน Domain จริง หำกเว็บที่เรำกำลังทำอยู่นั้นยังไม่ เรียบร้อย เรำต้องเปิดคำสั่งไม่ให้ Google เข้ำมำเก็บข้อมูล เพรำะเว็บที่ยังทำไม่เสร็จ ยังต้องมีกำรแก้ไข เนื้อหำอีกหลำยอย่ำง เรำจะได้ไม่เสียคะแนนด้ำน SEO วิธีกำรทำ Noindex ทั้งเว็บ กำรปิดไม่ให้ Google เข้ำมำเก็บข้อมูล เรำเรียกกันว่ำกำรทำ Noindex นั้นเอง ไปที่ settings > reading > ติ๊กเลือก Discourage search engines from indexing this site สำหรับกำรตั้งค่ำเริ่มต้นใช้งำนพื้นฐำนก็มีเพียงเท่ำนี้ครับ ดูบทเรียนนี้บน YouTube: https://youtu.be/qPIt1tPxUpc
  54. 54. 54 บทที่ 9 กำรเพิ่มเนื้อหำบนเว็บ (ใช้งำน Page/Post) เว็บไซต์ 1 เว็บ เกิดจำกกำรประกอบกันของเนื้อหำ หลำยๆ หน้ำ หน้ำเว็บ 1หน้ำ ก็เหมือนกระดำษ 1 แผ่น ที่ เรำจะเขียนข้อมูลอะไรลงไปก็ได้ แต่หน้ำเว็บที่ใช้สำหรับกำรเพิ่มเนื้อหำนั้นมีอยู่ด้วยกัน 2 ประเภทหลัก คือ Page (หน้ำ) กับ Post (เรื่อง) ซึ่งกำรที่เรำจะเพิ่มข้อมูลได้ถูกต้อง ว่ำหน้ำไหนควรเป็น Page หรือ หน้ำไหน ควรเป็น Post เรำต้องเข้ำ ใจควำมแตกต่ำงของ Page กับ Post ให้ได้ก่อน ดูบทเรียนนี้บน YouTube: https://youtu.be/j8e8flPX7Fw 1) Page กับ Post เพจต่ำงกันอย่ำงไร • Page (หน้ำ) คือ หน้ำที่ไม่จำเป็นต้องแบ่งหมวดหมู่เนื้อหำ ไม่ต้องเรียงลำดับของวันที่ว่ำใครจะมำ ก่อนมำหลัง โดยมำกเรำจะใช้ Page กับหน้ำเว็บที่เป็นข้อมูลนิ่งๆ เช่น หน้ำ Home, About, Contact เป็นต้น • Post (เรื่อง) คือ หน้ำข้อมูลที่เรำต้องกำรแบ่งเนื้อหำตำม category เช่น ตำมชนิดสินค้ำ ตำม ประเภทควำมรู้ ตำมภำค ตำมจังหวัด ตำมกลุ่ม ตำมเวลำ (ใหม่/เก่ำ) ฯลฯเมื่อเรำเขียน Post หรือ บทควำมเสร็จ (รวมถึงสินค้ำที่เรำจะขำยด้วย) เรำต้องสร้ำง Category เพื่อทำเป็นหมวดหมู่ให้เขำ อยู่นั้นเองเมื่อถึงเวลำก็แสดงผลเป็นหมวดหมู่ ตำมสไตล์บล็อก คือ เรียงบทควำมตำมหมวดหมู่ โดยดึง Post ล่ำสุดขึ้นมำแสดงด้ำนบนเสมอ
  55. 55. 55 2) กำรสร้ำง Page ลำดับต่อมำเรำต้องสร้ำงหน้ำที่เป็นเนื้อหำหลักของเว็บที่ทุกเว็บไซต์ต้องมี ได้แก่หน้ำ หน้ำ Home, About และหน้ำ Contact ซึ่งหน้ำดังกล่ำว เรำต้องสร้ำงที่ Page ครับผม มีวิธีกำรใช้งำนดังนี้ ให้ไปที่ Page > add new > แล้วให้ใส่ชื่อหน้ำ กับเนื้อหำ ลงไป แล้วกด Publish เผยแพร่ข้อมูลครับ สำหรับหน้ำที่สร้ำงใหม่ กำรเผยแพร่ข้อมูลครั้งแรกเรำจะเรียกว่ำ Publish แต่กำรกลับมำแก้ไขข้อมูลที่เคย เขียนแล้วเรำจะเรียกว่ำกำร Update ครับ ส่วนกำรใช้งำน Text editor (กระดำนเพิ่มเนื้อหำ และรูปภำพต่ำงๆ) จะอธิบำยในหัวข้อถัดไปครับ 3) กำรใช้งำน Text editor
  56. 56. 56 ก่อนที่เรำจะเพิ่มข้อมูลลงไป หำกเรำพึ่งใช้งำนครั้งแรก แถบเมนูแสดง option กำรปรับแต่งข้อควำมมันยัง เปิดไม่ครบ ให้คลิก ที่สัญลักษณ์ตัวซ้ำยสุด ตำมรูปก่อนครับ พอคลิก เรำจะเห็น option กำรปรับตัวอักษร คล้ำยๆ กับโปรแกรม Word นั้นเอง กระดำน text editor ใส่อะไรลงไปได้บ้ำง • ใส่ text ได้ • ใส่รูปภำพได้ • ใส่ไฟล์Mp4 ได้ • ใส่ PDF ไฟล์ได้ • ใส่ url จำก YouTube ได้ • Embed โค้ดที่เป็น iframe จำกที่ต่ำง ๆ มำวำงได้ เช่น Google map, หน้ำ Facebook Fan page Box ได้ วิธีกำรใส่สื่อที่เป็น Media เช่น รูปภำพ วิดีโอ หรือ pdf ให้เรำคลิกที่คำว่ำ Add media แล้วอัพโหลดไฟล์ ของเรำใส่เข้ำไปได้เลย
  57. 57. 57 WordPress Tips หำกคุณต้องกำรให้รูปภำพบนเว็บ ไปปรำกฏที่ผลกำรค้นหำหมวดรูปภำพบน Google ด้วย กำรใส่รูปภำพ ยังมีรำยละเอียดที่คุณควรรู้อีกหลำยจุด ผมแนะนำให้คุณอ่ำนบทควำมนี้ก่อนครับ : กำรทำ SEO รูปภำพ ให้ติดหน้ำแรก Google กำรนำคลิปวีดิโอจำก YouTube มำวำงที่ text editor (คลิกอ่ำน) เข้ำไปที่หน้ำของ YouTube > เลือกคลิปวีดิโอที่คุณต้องกำร > กดตรงคำว่ำ share จำกนั้นให้เรำคัดลอก URL แล้วมำวำงที่ text editor บนเว็บเรำได้เลยครับ
  58. 58. 58 รอสักแป๊บ ระบบจะดึงคลิป YouTube มำโชว์โดยอัติโนมัติ
  59. 59. 59 4) วิธีกำรแชร์ google map มำยังเว็บของเรำ ให้เรำไปที่หน้ำ google map > เลือกสถำนที่เรำต้องกำร > คลิกคำว่ำแชร์> เลือกที่ ฝังแผนที่ (embed map) > จำกนั้นให้คลิก คัดลอก html เรำก็จะได้โค้ดจำก google map ที่มีลักษณะเป็น iframe ให้เรำเอำโค้ดนี้ไปวำงที่ text editor แต่กำรวำงสิ่ง ที่เป็นโค้ด HTML เช่น โค้ด iframe จำก google map เรำต้องวำงโค้ดลงในหมวด text ดูรูปภำพประกอบ
  60. 60. 60 จำกนั้นให้เรำคลิกกลับมำที่ Visual เรำก็ได้ภำพแผนที่จำก google map มำแสดงบนเว็บของเรำแล้วนั้นเอง 5) กำรวำงลิงค์ (URL) ที่หลังรูปภำพ บำงครั้งเรำต้องกำรให้รูปภำพของเรำ กดแล้วเปิดไปอีกหน้ำเว็บหนึ่ง เช่นกดที่รูป แล้วเด้งไป Line , ไป Facebook หรือเด้งไปหน้ำสินค้ำของเรำ เรำต้องเอำ URL ปลำยทำงมำใส่ไว้ที่หลังรูป มีวิธีกำรทำดังนี้ อัพโหลดรูปขึ้นไปที่ text editor จำกนั้นให้เรำคลิกที่รูปภำพ > คลิกที่ edit
  61. 61. 61 ตรงส่วนของ Image detail > ให้ดูที่คำว่ำ Link to ให้เลือกเป็น Custom URL > วำง URL ปลำยทำง หรือ หน้ำเว็บที่เรำต้องกำรลงไปครับ หำกใครต้องกำรให้ เมื่อมีกำรกดปุ่ม แล้วหน้ำเว็บเปิดแบบ open in new tab ให้เรำคลิกที่ Advance option > แล้วไปติ๊ก ที่ช่อง Open link in a new tab ได้เลยครับ 6) กำรสร้ำง post เรำอำจจะพอรู้แล้วว่ำ post คือ หน้ำข้อมูลที่เรำต้องกำรแบ่งเนื้อหำตำม category (หมวดหมู่) ซึ่งเป็นจุดที่ ทำให้ post มีควำมแตกต่ำงจำก page ดังนั้น ก่อนที่คุณจะเริ่มต้น เขียน post คุณต้องวำงแผนสร้ำง category ก่อน ว่ำเว็บเรำจะแบ่งหมวดหมู่ เป็นประเภทอะไรบ้ำง เช่น เว็บคุณขำยรองเท้ำกีฬำ คุณอ่ำนจะแบ่งประเภทหมวดหมู่ได้ดังนี้ • รีวิว • ข่ำวสำร • กำรออกกำลังกำย • เทคนิคกำรวิ่ง • แฟชั่น (กำรแต่งตัว) • ไลฟ์ สไตล์(กำรใช้ชีวิต) • ฯลฯ
  62. 62. 62 ตัวอย่ำงเว็บที่ทำคอนเทนต์ (เขียนบทควำม) เกี่ยวกับรองเท้ำวิ่ง และขำยสินค้ำไปด้วย sneakerfreaker.com ตัวอย่ำงหมวดหมู่บทควำมของเว็บ Central กำรสร้ำง Category ให้เรำไปที่ post > คลิก Categories Name: ใส่ชื่อหมวดหมู่ จะใช้ภำษำไทย หรือภำษำอังกฤษก็ได้ Slug: คือ URL ที่จะแสดงหน้ำเว็บ ตรงจุดนี้ผมแนะนำให้ เขียนเป็นภำษำอังกฤษ เท่ำนั้นครับ เมื่อใส่ข้อมูลเสร็จ คลิก Add New Category ให้เรียบร้อย ทำซ้ำจนกว่ำเรำจะได้ครบทุกหมวดหมู่ที่เรำต้องกำร
  63. 63. 63 ตัวอย่ำงกำรสร้ำงหมวดหมู่ วิธีกำรสร้ำง Post ไปที่ post > add new จำกนั้นให้ใส่เนื้อหำของบทควำมลงไป
  64. 64. 64 ในทุก ๆ Post ต้องมี 4 สิ่งนี้ คือ 1. ชื่อเรื่อง 2. Categories (หมวดหมู่) 3. เนื้อหำ 4. Featured image (รูปภำพหน้ำปก) และใน 1 Post สำมำรถอยู่ในหลำย Categories ได้
  65. 65. 65 บทที่ 10 ตั้งค่ำหน้ำ Home/Blog หลังจำกที่เรำสร้ำงหน้ำ page และ post เตรียมไว้แล้ว หำกเรำลองกับไปดูที่หน้ำบ้ำน เรำจะเห็นกำรเรียง กันของบทควำมไล่ลงมำเรื่อยๆ จำกบทควำมใหม่ไปหำบทควำมเก่ำ ซึ่งมันยังไม่ใช่กำรแสดงหน้ำ Home ที่ เรำต้องกำร เรำสร้ำงหน้ำ page ต่ำงๆ ไว้ก็จริง แต่ตัวระบบ WordPress ยังไม่รู้ว่ำหน้ำต่ำงๆ ที่เรำสร้ำงไว้แล้ว หน้ำไหน คือหน้ำแรก (Homepage Display) ดังนั้นเรำต้องมำตั้งค่ำจุดนี้ก่อน
  66. 66. 66 วิธีกำรกำหนดหน้ำ Homepage มีดังนี้ครับ ดูบทเรียนนี้บน YouTube: https://youtu.be/YRaGOVT62bs กลับไปหลังบ้ำน > settings > reading > ติ๊กที่ A static page > แล้วเลือกชื่อหน้ำที่เรำต้องกำรให้เป็น หน้ำ Homepage หลังจำกเลือกเสร็จเรียบร้อยแล้ว ลองกลับไปดูหน้ำบ้ำนใหม่อีกรอบครับ หน้ำเว็บจะแสดงเป็น page ที่เรำ ได้เลือกไว้นั้นเอง
  67. 67. 67 ตั้งค่ำหน้ำ Blog (หน้ำเก็บบทควำมทั้งหมด) หน้ำระบบของ WordPress จะมีอยู่ด้วยกัน 2 หน้ำ คือหน้ำ Homepage กับหน้ำ Blog ที่เอำไว้เก็บ บทควำมทั้งหมด หน้ำ Blog คืออะไร หน้ำ Blog คือหน้ำที่เอำไว้เก็บบทควำม (post) ทั้งหมดบนเว็บของเรำ กำรแสดงผลของหน้ำนี้จะเป็นกำร เรียงบทควำมต่อกันลงมำเรื่อยๆ จำกใหม่ลงไปหำบทควำมเก่ำ โดยบทควำมล่ำสุดจะแสดงไว้ด้ำนบนสุด
  68. 68. 68 ซึ่งหน้ำระบบเก็บบทควำมยังแบ่งออกเป็น 2 ส่วน คือ เก็บบทควำมทั้งหมด กับเก็บบทควำมตำมหมวดหมู่ หรือบำงครั้งเรำจะเรียกหน้ำเหล่ำนี้ว่ำ หน้ำ Archive (คลังเก็บข้อมูล) ขั้นตอนกำรสร้ำงหน้ำ Blog อันดับแรกให้กลับไปที่หลังบ้ำนเว็บ เข้ำไปที่ page > add new > เรำต้องสร้ำงหน้ำ page ขึ้นมำก่อน 1 หน้ำ และให้ตั้งชื่อหน้ำนี้ว่ำ Blog ครับ จำกนั้นมำตั้งค่ำหน้ำ Blog ให้เป็นหน้ำระบบเก็บบทควำม ให้ไปที่ Setting > reading > ที่ Post page ให้ เลือกเป็นหน้ำ Blog หลังจำกตั้งค่ำเรียบร้อยแล้ว ลองไปเปิดหน้ำ Blog ดู คุณจะเห็นบทควำมวำงเรียงต่อกันจำกใหม่ลงไปหำ บทควำมเก่ำ
  69. 69. 69 บทที่ 11 กำรสร้ำงเมนู (Menu) เมื่อเรำมีหน้ำ Home เรียบร้อยแล้ว แต่เรำจะยังไม่สำมำรถคลิกเปิดไปเข้ำชมหน้ำเว็บอื่น ๆ ของเรำได้ เพรำะมันยังไม่มีเมนู ที่จะเชื่อมโยงพำเรำไปยังหน้ำอื่น ๆ ดังนั้น สิ่งที่เรำต้องทำเป็นลำดับต่อมำคือกำรสร้ำงเมนู นั้นเอง ซึ่งมีขั้นตอนกำรสร้ำงเมนู ดังนี้ ดูบทเรียนนี้บน YouTube: https://youtu.be/3AW2yTCUfcU กลับไปหลังบ้ำน > ไปที่ Appearance > menu > ตั้งชื่อเรียกชุดเมนู > คลิก Create Menu ให้เรำเลือกหน้ำ Page ที่เรำต้องกำรให้แสดงบนเมนู คลิก add to menu ให้เรียบร้อย
  70. 70. 70 นอกจำกเรำจะสำมำรถนำ page มำวำงเป็นเมนู เรำยังสำมำรถนำ Category หรือ Post มำวำงที่เมนูได้อีก ด้วย นอกจำกนี้เรำยังสำมำรถเลื่อนลำดับกำรแสดงเมนูว่ำต้องกำรให้ใครมำก่อน มำหลัง ด้วยกำร Drag & Drop ได้เลย รวมถึงหำกเรำต้องกำรให้เมนูไหน เป็น sub menu ของใคร เรำก็ลำกเมนูนั้นให้อยู่ใต้ของตัว เมนูที่เรำต้องกำรได้เลยครับ
  71. 71. 71 นอกจำกนี้เรำยังสำมำรถเปลี่ยน Navigation Label (ป้ำยชื่อเมนู) เป็นคำที่เรำต้องกำรก็ได้ โดยให้เรำคลิก ตรงมุมขวำที่เป็นลูกศรเล็ก บนแถบเมนู แล้วเข้ำไปเปลี่ยนป้ำยชื่อเมนูได้เลย เนื่องจำกใน 1 เว็บไซต์ในควำมเป็นจริงแล้ว เรำสำมำรถสร้ำงชุดเมนูกี่อันก็ได้ ดังนั้นเมื่อเรำสร้ำงเมนูเสร็จ เรำต้องเป็นคนกำหนด location (ที่ตั้งของเมนู) ว่ำจะให้เมนูนี้อยู่ตำแหน่งไหนบนเว็บของเรำ ตำมตัวอย่ำง ให้เรำติ๊กเลือกที่ Top Menu ครับ
  72. 72. 72 เมื่อทำทุกอย่ำงเรียบร้อยแล้วลองกลับไปดูที่หน้ำเว็บของเรำ จะเห็นว่ำเว็บของเรำมีเมนูเรียบร้อยแล้วนั้นเอง Menu Structure
  73. 73. 73 บทที่ 12 ใช้งำน Sidebar Footer และ Widget ทำควำมรู้จัก Sidebar Sidebar คือ แถบด้ำนข้ำงที่มักจะแสดงร่วมกับหน้ำ Post หรือหน้ำ Product เพื่อใช้เป็นช่องทำงในกำรทำ กำรตลำด โดยมำกมักนิยมจะติดโฆษณำ, หมวดหมู่, หรือว่ำงพวกสินค้ำขำยดี เพื่อพำคนที่เข้ำมำบทควำม ของเรำ เห็นโฆษณำหรือโปรโมชั่นพิเศษ และช่วยพำพวกเขำไปหน้ำอื่น ๆ หรือสิ่งที่เขำต้องกำรได้ง่ำยขึ้น นั้นเอง ลองดูตัวอย่ำง sidebar ของเว็บต่ำง ๆ เหล่ำนี้ครับ ลองเข้ำไปดู sidebar ตัวอย่ำงจำกเว็บจริง ๆ ด้ำนบนได้ที่ miraclas.com
  74. 74. 74 ส่วนเว็บ WordPress ที่เรำกำลังจะสร้ำง ลองคลิกไปที่บทควำมดูครับ คุณจะเป็นกำรแสดง sidebar ที่เป็น ค่ำ default ที่มำกับ WordPress แบบนี้
  75. 75. 75 ครำวนี้หำกเรำต้องกำรจะแก้ไข Sidebar เรำจะไปแก้ไขที่ไหนดี? ลองดูรูปด้ำนล่ำงประกอบด้วยนะ จำกรูปถ้ำเรำสังเกตดี จะเห็นได้ว่ำ sidebar และ footer จะมีบำงสิ่งที่เป็นองค์ประกอบเหมือนกัน นั้นก็คือ Widget นั้นหมำยควำมว่ำ หำกเรำต้องกำรแก้ไขเนื้อหำที่อยู่บน sidebar กับ footer เรำต้องไปแก้ไขที่ widget นั้นเอง ดูวิธีกำรใช้งำน Widget ที่หัวข้อถัดไปได้เลยครับ กำรใช้งำน widget Widget คือ ชิ้นส่วนรูปแบบต่ำงๆ เช่น text widget (แสดงข้อควำม), image widget (แสดงรูปภำพ), product widget (แสดงสินค้ำ), recent post widget (แสดงบทควำมล่ำสุด) ฯลฯ ที่จะไปแสดงผลในส่วน ของ Sidebar กับ footer นั้นเอง
  76. 76. 76 กำรเปลี่ยน widget ที่ sidebar กลับไปหลังบ้ำน > ไปที่ Appearance > คลิก Widget เรำจะพบกำรแสดงผลหน้ำตำแบบนี้ Widget คือ ชิ้นส่วนต่ำงๆ ที่แสดงอยู่ใน 2 แถว ด้ำนซ้ำยมือ ส่วน 2 แถวด้ำนขวำมือ เรำเรียกว่ำช่องที่เก็บ widget เพื่อให้แสดงผลที่หน้ำเว็บ ขั้นตอนกำรใช้งำน ให้เรำลบ widget ที่อยู่ในช่อง Blog sidebar ออกให้หมดก่อน ให้คลิกที่ลูกศร dropdown > ให้คลิก delete เพื่อลบ widget ให้เรำไล่ลบ widget ออกไปให้หมดเลยครับ
  77. 77. 77 จำกนั้นเรำก็ออกแบบว่ำตรง sidebar เรำอยำกให้มันแสดงอะไรบ้ำง สมมุตผมอยำกให้แสดงรูปภำพ Promotion สินค้ำ กับ พวกบทควำมล่ำสุด วิธีกำรใช้งำน Widget ก็คือให้เรำลำก ชิ้นส่วน widget ที่อยู่ฝั่งซ้ำยมือ ลำกมำวำงที่ช่อง blog sidebar ใน ที่นี้ผมขอลำก image widget กับ recent post ไปใส่ครับ ที่ image widget ใส่รูปภำพเข้ำไปให้เรียบร้อย ด้วยนะครับ จำกนั้นลองกลับไปดูที่ post หน้ำบ้ำนเว็บของเรำครับ เรำจะเห็นว่ำที่ sidebar มีกำรแสดง widget ที่เรำ เรียกใช้งำน มำเรียบร้อยแล้ว
  78. 78. 78

×