อัปเดต : 08/01/2021
โดย sakkarin

สอนวิธีทำเว็บไซต์ฟรี 2021

วิธีการสร้างเว็บไซต์

คู่มือฟรีสอนวิธีการสร้างเว็บไซต์แบบละเอียด เหมาะสำหรับมือใหม่

การสร้างเว็บไซต์

นี่คือขั้นตอนการสร้างเว็บไซต์ด้วยตัวเองแบบละเอียดทำตามได้ทันทัน

  • เหมาะสำหรับมือใหม่
  • ไม่ต้องเขียนโค้ด

หากคุณจะสร้างเว็บต่อไปนี้

  • ทำเว็บส่วนตัว (Blog)
  • ทำเว็บขายของออนไลน์
  • ทำเว็บสำหรับธุรกิจ

คู่มือนี้จะสอนคุณตั้งแต่ต้นจนจบ

สารบัญ

กดเลือกหัวข้อเพื่อข้ามไปอ่านได้ทันที

บทที่ 1

จดโดเมน (Domain)

จดโดเมน Domains 2

นี่คือขั้นตอนแรกในการสร้างเว็บไซต์ที่ต้องทำ 

เพราะชื่อโดเมนเปรียบเสมือนบ้านของเรา ที่ผู้ใช้อินเทอร์เน็ตจะค้นหาและเจอเว็บของเราได้

ตัวอย่างโดเมนที่คุณน่าจะรู้จักเช่น google.com facebook.com

โดเมนคืออะไร (Domain)

โดเมน (Domains) คือ ที่อยู่ของเว็บไซต์ของเราที่ผู้ใช้งานสามารถพิมพ์เพื่อค้นหาเว็บของเราได้ ประกอบด้วยชื่อโดเมนตามด้วยนามสกุลโดเมน

ตัวอย่างเช่น google.com ที่มีชื่อโดเมนคือ google นามสกุลโดเมนคือ .com ซึ่งคุณสามารถตั้งชื่อโดเมนว่าอะไรก็ได้หากยังไม่ซ้ำกับคนอื่น ส่วนนามสกุลโดเมนก็มีให้เลือกหลากหลาย เช่น .com .org .net

วิธีการจดโดเมน (Domain)

1. คิดชื่อโดเมน

อันดับแรกเราต้องทำก็คือการคิดชื่อ Domain Name ของเราว่าต้องการชื่อว่าอะไร

คำแนะนำในการตั้งชื่อโดเมนเนมที่ดี
  • สั้นและจดจำง่าย ทำให้ผู้คนค้นหาได้ง่ายในภายหลัง
  • เกี่ยวข้องกับสิ่งที่คุณทำ ทำให้คนรู้ว่าคุณทำอะไร
  • ไม่มีตัวเลขและขัดคั่นกลาง เพราะทำให้เกิดการสับสน
  • ไม่ใช้ภาษาไทย เพราะจะทำให้ชื่อโดเมนเป็นภาษาต่างดาวเวลาคัดลอกไปวางในที่อื่น
  • ใช้นามสกุลโดเมนที่นิยม ได้แก่ .com .org .net เพราะทำให้คนจดจำได้ง่ายไม่สับสน

2. ไปยังผู้ให้บริการจดโดเมน

มีผู้ให้บริการมากมายในการจดโดเมน ซึ่งราคาจะแตกต่างกันไป บางเจ้าถูกบางเจ้าแพง และให้ฟังก์ชันการใช้งานที่แตกต่างกัน

สำหรับผู้ให้บริการจดโดเมนที่ผมแนะนำที่สุดชื่อว่า Namecheap เพราะเป็นผู้ให้บริการโดเมนที่มีชื่อเสียง ราคาถูก และแถมบริการ WhoisGuard ให้ฟรี

(บริการ WhoisGuard เป็นบริการที่จะปกป้อง ข้อมูลโดเมนเนมของเรา เช่น ชื่อ ที่อยู่ อีเมล เบอร์โทร)

หากเราไปจดโดเมนกับเจ้าอื่น เราต้องซื้อบริการนี้เพิ่มในราคาประมาณ 300-400 บาท แต่หากเราจดโดเมนกับ Namecheap เราจะเสียเงินแค่ 9.06 usd (ประมาณ 282.30 บาทต่อปี) ก็ได้ทั้งโดเมนและ WhoisGuard ฟรี คุ้มที่สุดแล้วครับผมเลยแนะนำเจ้านี้ที่สุดนั่นเอง

จากนั้นกดที่ Domains

จดโดเมนกับ namecheap

3. ตรวจสอบชื่อโดเมน

พิมพ์ชื่อโดเมนที่ต้องการจากนั้นกด Search

ชื่อโดเมนที่ต้องการ

ถ้าขึ้นการถูกแบบนี้แสดงว่าใช้งานโดเมนนี้ได้

หรือหากคุณต้องการนามสกุลโดเมนอื่นที่ไม่ใช้ .com ก็ได้เช่นกันเลือกตามชอบเลย (แต่ผมแนะนำ .com มากที่สุด)

จากนั้นให้กด Add to Cart

โดเมนใช้งานได้

กด Checkout

checkout โดเมนกับ namecheap

4. ตั้งค่าการชำระเงิน

นี่คือการตั้งค่าการชำระเงินเพื่อเป็นการกำหนดว่าเราจะจ่ายเงินปีเดียวหรือล่วงหน้าหลายๆปีเลย

(การจดโดเมนต้องจ่ายเงินเป็นรายปีไม่ใช่ว่าเราจะใช้โดเมนถาวร)

โดยค่าใช้จ่ายจดโดเมนต่อปีอยู่ที่ $9.06/ปี หรือประมาณ 280บาท/ปี

ซึ่งนี่คือการตั้งค่าการชำระเงินที่เราแนะนำ

  • Domain Registration - กดเลือก 1 Years และเปิด AUTO-RENEW
  • WhoisGuard * - กด ENABLE และเปิด AUTO-RENEW

จากนั้นกด Confirm Order

ตั้งค่าการชำระเงินเว็บ namecheap

5. สร้าง Account

กรอกข้อมูลต่างเพื่อสร้างบัญชี จากนั้นกด Create Account and Continue

สร้าง account namecheap

กด Continue

กรอกรายละเอียดสมัครโดเมน

จากนั้นระบบก็จะแจ้งว่าให้กรอกข้อมูลในช่องที่เขียนว่า REQUIRED

ก็ให้เราไล่กรอกให้ครบทุกช่อง

กรอกรายละเอียดโดเมนต่อ

จากนั้นกด Continue

กรอกเบอร์โทร

ระบบก็จะสรุปข้อมูลที่เรากรอก จากนั้นกด Continue อีกที

กดปุ่ม continueอีกที

6. ชำระเงิน

กรอกข้อมูลบัตรเครดิต บัตรเดบิต หรือบัตรATM ที่เป็นบัตร VISA , MasterCard ได้หมด

  • Name on card กรอกชื่อภาษาอังกฤษของเราลงไป
  • Card เอาข้อมูลบัตร ได้แก่ รหัสบัตร วันหมดอายุ เลข cvv หลังบัตร มากรอก
  • จากนั้นกดปุ่ม Continue
12

จากนั้นกด Pay Now

จ่ายเงินค่าโดเมน

เรียบร้อยจดโดเมนเสร็จแล้ว ไปเช่าโฮสติ้งกันต่อ

บทที่ 2

เช่าโฮสติ้ง (Hosting) และติดตั้ง WordPress

เช่าโฮสติ้ง Hosting 1

โฮสติ้งคือสิ่งที่ทุกเว็บไซต์ต้องมีเพราะ hosting เป็นที่ที่ใช้ในการเก็บข้อมูลต่างๆของเว็บของเรา

เช่น รูปภาพ ตัวหนังสือ และอื่นๆ ให้แสดงผลแก่คนที่เข้ามายังเว็บของเราแบบออนไลน์ได้

ซึ่งในบทนี้เราจะสอนวิธีการเช่าโฮสติ้งรวมถึงการติดตั้ง WordPress เพื่อใช้ในการสร้างเว็บไซต์ของคุณ

โฮสติ้ง (Hosting) คืออะไร

โฮสติ้งเป็นบริการที่ช่วยเก็บเนื้อหาและข้อมูลต่างๆของเว็บไซต์ของเราบนคอมพิวเตอร์พิเศษที่เรียกว่าเซิร์ฟเวอร์ เมื่อผู้ใช้อินเทอร์เน็ตต้องการดูเว็บไซต์ของเราสิ่งที่ผู้ใช้ต้องทำคือพิมพ์ที่อยู่เว็บไซต์หรือโดเมนของเราลงในเว็บเบราว์เซอร์ (เช่น Google chome)

จากนั้นคอมพิวเตอร์ของผู้ใช้งานก็จะเชื่อมต่อกับเซิร์ฟเวอร์หรือ hosting ที่คุณเช่าไว้และหน้าเว็บของคุณจะถูกส่งไปยังพวกเขาผ่านเบราว์เซอร์

WordPress คืออะไร

WordPress (เวิร์ดเพรสส์) คือ ระบบการจัดการเนื้อหาเว็บไซต์ที่เรียกว่า Content Management System (หรือ CMS) ซึ่งเป็นซอฟต์แวร์แบบโอเพนซอร์ส เขียนด้วยภาษา PHP ใช้ฐานข้อมูล MySQL ซึ่งมีเว็บไซต์มากกว่า 36.2% บนโลกอินเทอร์เน็ตใช้ WordPress ในการสร้าง โดยทุกคนสามารถใช้หรือแก้ไขซอฟต์แวร์ WordPress ได้ฟรี โดยไม่จำเป็นต้องมีความรู้อะไรเกี่ยวกับโค้ดหรือการเขียนโปรแกรมเลย

อ่านเกี่ยวกับ WordPress เพิ่มเติมได้ที่

วิธีเช่าโฮสติ้ง (Hosting)

โฮสติ้งนั้นมีหลากหลายผู้ให้บริการเช่นเดียวกับการจดโดเมน ซึ่งเราควรจะเลือกโฮสติ้งจากประสิทธิภาพและความเร็วจะดีที่สุด เพราะโฮสติ้งที่แย่จะทำให้เว็บคุณล่มหรือช้ามากๆ ดังนั้นคิดให้ดีก่อนจะเลือกใช้โฮสติ้งกับผู้ให้บริการที่ราคาถูกมากๆแต่ไม่ได้คุณภาพ จะได้ไม่ต้องมาปวดหัวแก้ภายหลังจะยุ่งยากมากๆ

ซึ่ง hosting ที่ผมแนะนำ (ผมก็ใช้เจ้านี้อยู่) ก็คือ Cloudways ครับ คุณลองไปค้นหาข้อมูลดูได้มีผู้ใช้งานเจ้านี้เยอะมากๆเพราะราคาไม่แพงและทำประสิทธิภาพได้ดีมากๆ

หรือหากคุณจะหาโฮสติ้งด้วยต้องเองแนะนำให้ดูสิ่งต่อไปนี้

  • ฟรี SSL (ช่วยรักษาความปลอดภัย)
  • ติดตั้ง WordPress แบบ Auto (ซอฟต์แวร์ในการสร้างเว็บ)
  • Bandwidth 100 GB ขึ้นไป (จำนวนที่รองรับผู้เข้าชมเว็บต่อเดือน)
  • Storage 10 GB ขึ้นไป (พื้นที่ในการเก็บข้อมูลเว็บของเรา)

อ่านการเลือกโฮสติ้งเพิ่มเติมได้ที่ : วิธีเลือกโฮสติ้ง WordPress

1. ไปยังเว็บผู้ให้บริการเช่า Hosting

จากนั้นกด START FREE

hosting ฟรี

2. สมัครสมาชิก

กรอกข้อมูลเพื่อสมัครสมาชิก

กรอกรายละเอียดเพื่อเช่า hosting
  • Fist name : กรอกชื่อจริง
  • Last Name : กรอกนามสกุล
  • Email : กรอกอีเมล
  • Password : ตั้งรหัสผ่าน
  • I would best describe myself as : กดเลือกว่าท่านเช่าโฮสติ้งเพื่อทำอะไร
  • My monthy hosting spending is : กดเลือกว่าเรามีค่าใช้จ่ายในการเช่า hosting เดือนละกี่ดอลลาร์ (ไม่มีผลกับค่าใช้จ่ายเลือกอะไรก็ได้)
  • Got a promo Code ? : ใส่รหัสส่วนลด

พิเศษแจกคูปองส่วนลดใช้ฟรี 3 เดือน !! (มูลค่ากว่า 900บาท)ในช่อง Got a promo Code กรอก : HA 30

3 1

ถ้าขึ้นเครื่องหมายกาถูกแบบนี้แสดงว่าโค้ดใช้งานได้

ข้อมูลการใช้ฟรี

  • ท่านจะได้เครดิตฟรี 30 ดอลลาร์จากการกรอกโค้ดนี้ โดยเงินจะเพิ่มเข้าสู่บัญชี hosting ของท่านหลังจากกดปุ่มอัพเกรดและกรอกรายละเอียดบัตรเครดิต (มีสอนต่อในหัวข้อต่อไป)
  • หลังจากใช้งานเครดิตฟรีครบ 3 เดือน ท่านจะถูกตัดเงินผ่านทางบัตรเคดิตที่ท่านกรอกไว้จำนวน 10 ดอลลาร์ต่อเดือน เพื่อเป็นค่า hosting (ประมาณ 310 บาท/เดือน)
  • I agree to the Cloudways : กดติ้งตกลง ในช่องสี่เหลี่ยม
  • สุดท้ายกด START FREE

3. ยืนยันอีเมล

กด START NOW ระบบจะแจ้งให้เรายืนยันอีเมล

ยืนยันอีเมล

 ก็ให้เราเขาไปยังอีเมลที่กรอกตอนสมัครจะเจอเมลแบบนี้ให้กด Activate Account

5อีกเมล

4. เลือกแพ็คเกจและติดตั้งเว็บ

เราต้องทำการเลือกแพ็คเกจและผู้ให้บริการ Hosting ของเรา

แนะนำให้เลือกตามภาพนี้ คือ

5 hosting ตั้งค่า
  • WordPress : ไม่ต้องเปลี่ยนอะไรให้เป็นค่าตามเดิม (เพราะ Versions จะอัปเดตใหม่เรื่อยๆตอนคุณอ่านอยู่นี้อาจไม่เป็นตามภาพแล้ว)
  • Name Your Managed App : ตั้งชื่อ แอพ แนะนำตั้งตามชื่อโอเมนของเว็บท่าน เช่น mustketing.com
  • Name Your Managed server : ตั้งชื่อ เซิร์ฟเวอร์ตั้งอะไรไปก็ได้ผมไม่ตั้ง
  • Name Your Managed Project : ตั้งชื่อ โปรเจกต์ ตั้งอะไรไปก็ได้ผมไม่ตั้ง
  • เลือก DigitalOcean
  • Server Size : 10 GB
  • Location : Singapore

สุดท้ายกด LAUNCH NOW
5 hosting ตั้งค่า

จากนั้นระบบจะติดตั้ง Server โฮสติ้งให้เรา รอประมาณ 7 นาที

6 รอติดตั้ง โฮสติ้ง

หลังจากติดตั้ง hosting เสร็จเราก็ไปทำขั้นตอนต่อไปก็คือการเชื่อมโดเมนของเราเข้ากับ Hosting กันครับ

บทที่ 3

เชื่อม Domain กับ Hosting

เชื่อม Domain กับ Hosting 1

หลังจากที่เราจดโดเมนและเช่า hosting เสร็จแล้ว เราก็ต้องนำทั้งสองมาเชื่อมด้วยกัน จึงจะทำให้เว็บไซต์ของเราทำงานได้

 ซึ่งก็ทำง่ายๆด้วยวิธีการต่อไปนี้

1. ไปยังผู้ให้บริการจดโดเมน

ผู้ให้บริการจดโดมเมนที่เราสอนคือ NameCheap ก็เข้าไปยังเว็บให้เรียบร้อย

จากนั้นกดไปที่ Account

เว็บจดโดเมน

2. ยืนยันอีเมล

กดไปที่ Domain List 

จากนั้นกด VERIFY CONTACTS

12 1

เข้าไปที่อีเมลของเราที่กรอกไว้ตอนสมัคร จากนั้นจะเจออีเมลแบบนี้

ให้กด Click here to verify your email address

13 1

3. ตั้งค่าโดเมน

หลังจากยืนยันอีเมลแล้วยังขึ้น ALERT อยู่ก็ไม่ต้องตกใจรอให้ระบบยืนยันให้ภายหลัง

กดไปที่ปุ่มตามลูกศรสีแดงด้านล่าง จากนั้นกด Manage

manage domain

กด Advance DNS

advanc dns

กดรูปถึงขยะเพื่อลบทุกอย่างทิ้งให้หมด

ลบ dns

กด ADD NEW RECORD และเลือก A Record

17

ในช่อง host ใส่ @ ช่อง TTL เลือก Automatic

a record ตั้งค่า

ส่วนช่อง Value เอาค่ามาจาก hosting

4. นำ public ip มากรอกในช่อง Value

ให้ท่านไปที่เว็บ Cloudways.com แล้วทำการ Login เข้าสู่ระบบให้เรียบร้อย

จากนั้นกดไปที่ www ตามรูปด้านล่าง

www

กดเลือก applications โดยชื่อจะเป็นตามที่ท่านเคยตั้งไว้ตอนสมัคร cloudways

application cloudways

ก็จะเจอหน้าตาแบบนี้ ให้กดคัดลอก Public IP: ไว้

public ip address

จากนั้นนำกลับไปที่เว็บ Namecheap

นำ Public IP วางในช่อง Value

a record ตั้งค่า

5. เพิ่ม Cname record

กดปุ่ม ADD NEW RECORD แล้วเลือก CNAME Record

cname record ตั้งค่า
  • ในช่อง Host กรอก : www
  • ในช่อง Value กรอก : ชื่อโดนเมนของคุณ เช่น Google.com
  • ในช่อง TTL เลือก : Automatic

จากนั้นกดปุ่มกาถูกสีเขียว

cname record การใช้

6. เปลี่ยน primary domain

  • ไปที่เว็บ cloudways.com
  • ไปที่เมนู Domain Manegement
  • ในช่อง PRIMARY DOMAIN : กรอกชื่อโดเมนของเราที่จดไว้ลงไป เช่น reviewnine.com
  • จากนั้นกด SAVE CHANGES
เปลี่ยน primary domain

หลังจากนั้นกด F5 หรือรีเฟรช หน้าเว็บระบบก็จะแจ้งให้เรารออัปเดตโดเมน

25

หลังจอรอสักพักเสร็จแล้วก็จะเจอแบบนี้ ก็ให้เรากดไปที่ www ที่มีวงกลมส้มๆ

www

แล้วกดเลือก โดเมนของเรา

application cloudways

7. เชื่อมต่อสำเร็จ

เรียบร้อยติดตั้งเว็บสำเร็จ ตอนนี้เราได้เว็บแล้ว

ตรง ADMIN PANEL กดไปที่ URL

admin panel

เราก็จะเจอหน้า login เพื่อไปแก้ไขเว็บของเรา ก็ให้ไปคัดลอก Username และ Password เพื่อเข้าไปแก้ไขเว็บได้เลย

27

นี้คือหน้าตาตอนเรา login เพื่อเข้ามาแก้ไขเว็บ

หน้าตา dashboard wordpress

บทที่ 4

อัพเกรด Hosting

upgrade hosting

เราต้องกดอัพเกรดและกรอกข้อมูลบัตรเครดิตเพื่อใช้ในการตัดเงินค่าบริการ hosting หากไม่ทำภายใน 3 วันเว็บของเราจะถูกลบ

เมื่อเรากรอกข้อมูลบัตรเครดิตเรียบร้อยจะได้รับโบนัสเครดิตฟรี 30 ดอลลาร์ (ซึ่งมีมูลค่าเท่ากับใช้ฟรี 3เดือน)

ทำไมต้องอัพเกรด Hosting

เราสามารถใช้งานทดลองใช้งาน Hosting กับเว็บ Cloudways ได้ฟรีเพียง 3 วัน หลังจากนั้นหากเราไม่กดอัพเกรดเว็บที่เราสร้างจะถูกลบที่ออกจากเซิร์ฟเวอร์ทำให้เราและผู้อื่นไม่สามารถเข้าเว็บได้อีก

หากเรากดอัพเกรดเราก็จะได้โบนัสเครดิตจำนวน 30 ดอลลาร์ซึ่งจะทำให้เราใช้งานฟรีได้ 3เดือน (ต้องกรอกโค้ดส่วนลดตอนสมัครสมาชิกตามที่ผมสอนไว้ด้านบน) หลังจากนั้นเราก็เสียเงินค่าเช่าโฮสติ้งเดือนละ 10 ดอลลาร์ (ประมาณ 300 บาท) ซึ่งไม่ได้แพงมากเมื่อเทียบกับไปจ้างคนอื่นสร้างเว็บไซต์ให้

วิธีการอัพเกรด Hosting

1. กดอัพเกรด hosting

เราต้องทำการกดอัพเกรดและกรอกข้อมูลบัตรเครดิตเพื่อจะได้รับเครดิตฟรี 30 ดอลลาร์ (ซึ่งมูลค่าเท่ากับใช้ฟรี 3เดือน)

กดไปที่ UPGRADE MY ACCOUNT

21 1

2. กรอกข้อมูลบัตรเครดิต

  • เป็นบัตรเครดิต Visa หรือ Mastercard ก็ได้
  • บัตร ATM ที่มีเครื่องหมาย Visa หรือ Mastercard  ก็ใช้ได้
  • หากไม่มีบัตรสามารถสมัคร Truemoney wallet และ เปิดใช้งานบัตรผ่านแอพได้ (ลองหาวิธีดูใน Google)

Billing Details

  • กรอกที่อยู่เป็นภาษาไทยก็ได้
  • ตรง phone : ใส่ +66 ตามด้วยเบอร์มือถือของเราที่ตัดเลข0ด้านหน้าออก

จากนั้นกด AUTHORIZE

22 1

3. ได้โฮสติ้งฟรีเรียบร้อย

เรียบร้อยกรอกข้อมูลถูกต้องจะเจอหน้าแบบนี้

  • หากท่านใช้บัตรที่ไม่ใช่บัตรเครดิตท่านต้องมีเงินในบัตรอย่างน้อย 1 ดอลลาร์ (31บาท) เพราะระบบจะลองตัดเงินว่าบัตรของท่านใช้งานได้หรือไม่
23 1

ไปที่เมนู Funds ท่านก็จะพบว่าเราได้รับเงินมาใช้งาน hosting ฟรีจำนวน 30 ดอลลาร์เรียบร้อยแล้ว

free hosting 30 dollar

4. หลังจากใช้ฟรีครบ 3 เดือนจะเป็นยังไง

  • หลังจากครบ 3 เดือนท่านจะหมดโปรใช้ฟรีซึ่ งต้องเสียค่าโฮสติ้งเงินจำนวน 10 ดอลลาร์ต่อเดือน (310 บาทต่อเดือน) 
  • หากไม่มีเงินให้ระบบตัดเว็บไซต์ของท่านจะถูกลบทิ้งและข้อมูลเว็บไซต์ต่างๆของท่านจะถูกลบทิ้งทำให้ไม่สมารถใช้งานได้อีกต่อไป

บทที่ 5

ติดตั้ง SSL

ติดตั้ง ssl

SSL เป็นเทคโนโลยีในการรักษาการเชื่อมต่ออินเทอร์เน็ตให้ปลอดภัยและปกป้องข้อมูลสำคัญต่างๆ เช่น หมายเลขบัตรเครดิต ข้อมูลทางการเงิน ชื่อ ที่อยู่ และอื่น ๆ

ช่วยให้เว็บของเรามีความน่าเชื่อถือและมีความปลอดภัยแก่ผู้ใช้งานมากขึ้น

ssl คืออะไร

SSL ย่อมาจาก Secure Sockets Layer ซึ่งเป็นเทคโนโลยีมาตรฐานในการรักษาการเชื่อมต่ออินเทอร์เน็ตให้ปลอดภัยและปกป้องข้อมูลสำคัญต่างๆที่ถูกส่งระหว่างสองระบบจากการอ่านและแก้ไขข้อมูล  เช่น หมายเลขบัตรเครดิต ข้อมูลทางการเงิน ชื่อ ที่อยู่ และอื่น ๆ

โดยเป็นการการเข้ารหัสระหว่างเว็บเซิร์ฟเวอร์และเบราว์เซอร์ ช่วยให้มั่นใจได้ว่าข้อมูลทั้งหมดที่ส่งผ่านระหว่างเว็บเซิร์ฟเวอร์และเบราว์เซอร์ยังคงเป็นส่วนตัว

ทำไมต้องมี ssl certificate

  1. เพิ่มความปลอดภัยของข้อมูลต่างๆของเว็บไซต์เรา
  2. เพิ่มความน่าเชื่อถือ ให้กับเว็บของเรา
  3. มีผลต่อการจัดอันดับการค้นหาบน Google (อ้างอิงจากของมูลของ Google → กดเพื่อดู)

วิธีติดตั้ง ssl certificate ฟรี

นี่คือการติดตั้ง SSL กับ hosting cloudways.com เท่านั้นครับ หากท่านใช้ hosting กับเจ้าอื่นอาจต้องเสียเงินเพิ่มค่า SSL ตั้งแต่ 300-10,000 บาทต่อปีครับ

1. login เข้าสู่ระบบ cloudways.com

จากนั้นกด Login และกรอกชื่อผู้ใช้ รหัสผ่าน และกดเข้าสู่ระบบให้เรียบร้อย (หากยังไม่เคยสมัครเลื่อนขึ้นด้านบน แล้วกดดูบทความก่อนหน้าไปเรื่อยๆจะเจอบทความที่ผมเคยสอนไว้แล้ว)

cloudways hosting login

2. ไปยังเมนูติดตั้ง SSL

กดไปที่ www ตามภาพ

www

กดเลือก APPLICATIONS ตามชื่อที่ท่านตั้งไว้

application cloudways

3. กรอกข้อมูลเพื่อติดตั้ง SSL

  • กดไปที่เมนู SSL Certificate
  • Email Address : ใส่อีเมลลงไป
  • Domain Name : ใส่ โดเมนของเราลงไป เช่น reviewnine.com
  • สุดท้ายกด INSTALL CERTIFICATE
กรอกข้อมูล ติดตั้ง ssl

จากนั้นรอสักพักให้ SSL ติดตั้ง

จากนั้นจะขึ้น ENABLE HTTPS REDIRECTION : กด NOT NOW (หากไม่ขึ้นข้ามไปทำขั้นตอนต่อไปเลย)

not enable https redirection

กด CLOSE

ยกเลิก https redirection

4. ไปที่ Application Settings

ที่หัวข้อ HTTPS REDIRECTION กดติ้ก Enable ไว้

application settings cloudways

จะมีข้อความ CONFIRMATION ก็ให้กด YES

36

5. ติดตั้ง ssl certificate เสร็จเรียบร้อย

ก่อนหลังติดตั้ง ssl

บทที่ 6

ตั้งค่าเว็บไซต์

ตั้งค่าเว็บไซต์

หลังจากที่เราติดตั้ง SSL เสร็จแล้วก่อนที่เราจะไปลงมือสร้างเว็บไซต์ของเราผมแนะนำให้ทำการตั้งค่าต่างๆต่อไปนี้ก่อน

ซึ่งเป็นการตั้งค่าพื้นฐานที่ทุกเว็บไซต์ต้องทำเสมอหลังจากที่ติดตั้ง WordPress ใหม่

วิธีการตั้งค่า WordPress หลังจากติดตั้งใหม่

นี่คือการตั้งค่าทั้งหมดที่คุณควรทำหลังจากที่สร้างเว็บไซต์ขึ้นมาใหม่โดยใช้ WordPress กดไปดูแต่ละหัวข้อได้เลย

  1. เปลี่ยน password ให้เว็บไซต์ wordpress
  2. อัปเดตเวอร์ชันธีม ปลั๊กอิน version เว็บไซต์ wordpress
  3. เปลี่ยน Site Title และ Tagline
  4. เปลี่ยนภาษา Timezone รูปแบบวันที่และเวลา
  5. ตั้งค่าขนาดรูปภาพ
  6. ตั้งค่า Permalink (ลิงค์ถาวร)

บทที่ 7

สร้างหน้าเว็บไซต์

วิธีสร้างหน้าเว็บไซต์

หลังจากทำทุกอย่างด้านบนสำเร็จเราก็ไปเริ่มขั้นตอนการสร้างหน้าเว็บและการปรับแต่งหน้าเว็บต่างๆของเรากันได้เลย

ซึ่งนี่คือหัวข้อทั้งหมดที่คุณจะได้เรียนรู้

  • การสร้างหน้าเว็บไซต์
  • วิธีแก้ไขหน้าเว็บไซต์
  • วิธีแก้ไขเมนูและเพิ่มโลโก้ให้เว็บ
  • วิธีแก้ไข Footer
  • วิธีเพิ่มหรือสร้างหน้าเว็บไซต์

ติดตั้งธีมให้เว็บไซต์

WordPress จะมีเครื่องมือที่เรียกว่าธีมที่ใช้เพื่อกำหนดลักษณะและการแสดงผลของเว็บไซต์ว่าอยากให้มีหน้าตาเป็นแบบไหน เช่น กำหนดรูปแบบตัวอักษรทั้งไซต์ (Font) กำหนดโทนสีให้เว็บไซต์ กำหนดรูปแบบสำหรับหน้าบทความในบล็อก และอื่นๆอีกมากมาย

ธีมที่เราจะนำมาสอนในวันนี้มีชื่อว่า Astra ซึ่งสามารถใช้งานได้ฟรีปรับแต่งได้เยอะเพียงพอต่อการใช้งานแน่นอน

วิธีติดตั้งธีมให้เว็บไซต์ WordPress

  1. กดที่ Appearance
  2. กดที่ Theme
  3. กด Add New
  4. พิมพ์ ASTRA ในช่องค้นหา
  5. กด Install รอสักครู่แล้วกด Activate
  6. กด Get Started
  7. เลือก Elementor
1-เพิ่มธีมเพื่อสร้างหน้าเว็บ
2 ค้นหา theme wordpress astra

หลังจากกด Install ให้รอสักครู่จากนั้นกด Activate

3 getstarted astra starter template

จะเจอข้อความแจ้งเตือนแบบนี้ ให้เรากด Get Started

4-กดเลือก-elementor

จะขึ้นให้เรา Select Page Buider ให้เรากดเลือกเมนู Elementor

ติดตั้ง Template ให้เว็บไซต์

Template คือรูปแบบของหน้าเว็บที่ออกแบบไว้ให้แล้ว ที่เราสามารถนำมันมาปรับแก้เป็นหน้าเว็บตามที่เราต้องการได้ ช่วยให้เราประหยัดเวลาในการออกแบบหน้าเว็บ ช่วยให้มือใหม่สร้างหน้าเว็บได้ง่ายขึ้น อีกทั้งอาจจะยังสวยงามกว่าเราออกแบบเองใหม่ทั้งหมด

วิธีติดตั้ง Template ให้เว็บไซต์

  1. กดเมนู All
  2. เลือก Free
  3. กดเลือก Template ที่คุณชอบ
  4. กด Import Complte Site
  5. กดติ้กถูกช่อง Delete Previously Imported Site
  6. กด Import
  7. สำเร็จกด View Site
1 template wordpress free

Template เว็บไซต์จะมีทั้งแบบฟรีและเสียเงิน แนะนำให้ใช้ของฟรีก็เพียงพอแล้ว

2 เลือกเทมเพลต wordpress

จะมี Template ให้เราใช้งานได้ฟรีมากมายให้กดเข้าไปดูด้านในเพื่อดูตัวอย่างได้

3 import template wordpress

หลังจากเลือกเทมเพลตที่ชอบได้แล้วให้กด Import Complete Site และกดต่อตามภาพด้านบนนี้เลย

4 view site wordpress

หลังจากรอสักครู่ก็จะติดตั้งเสร็จ ให้เรากด View Site เพื่อชมหน้าเว็บของเราได้เลย

การแก้ไขหน้าเว็บ

ต่อมาหลังจากติดตั้งเทมเพลตให้กับเว็บแล้วต่อไปเราก็ต้องทำการแก้ไขหน้าเว็บต่างๆไม่ว่าจะเป็นหน้า Home หน้า About หรืออื่นๆตามที่เทมเพลตมีให้

วิธีการแก้ไขหน้าเว็บ

  1. กดไปยังหน้าเว็บที่ต้องการแก้ไข
  2. กด Edit with Elementor
  3. คลิกไปยังข้อความที่ต้องการแก้ไขแล้วพิมพ์ข้อความใหม่ลงไปแทนได้เลย
  4. ปรับแต่งรูปแบบตัวอักษรได้กดที่ Style
  5. แก้ไขปุ่มกดได้ เพียงกดไปที่ปุ่มกดก็สามารถแก้ไจได้เลยทางเมนูด้านซ้าย
  6. แก้ไขรูปภาพได้ เพียงกดไปที่รูปภาพ ก็สามารถเปลี่ยนรูปภาพได้ที่เมนูด้านซ้าย
  7. เปลี่ยนภาพพื้นหลังได้ โดยการกดที่จุดหกจุด จากนั้นกด Style แล้วเลือกภาพได้ตามชอบ
  8. หลังจากแก้ไขเสร็จกด Update
1 กดกลับไปที่หน้า home

กดเลือกหน้าเว็บที่ต้องการแก้ไข เช่น หน้า Home

2 edit with elementor 1

กด Edit With Elementor

3 แก้ไขข้อความบนหน้าเว็บ Wordpress

กดเลือกที่ข้อความที่ต้องการแก้ไข แล้วพิมพ์ข้อความที่ต้องการลงไปแทนได้เลย

4 แก้ไขรูปแบบตัวหนังสือ wordpreess

ไปที่เมนู Style เพื่อเปลี่ยนรูปแบบตัวอักษร เช่น ขนาด สี ความหนา ตามที่เราต้องการได้

5 แก้ไขปุ่มกด wordpress

สามารถแก้ไขปุ่มกดได้โดยการคลิกไปที่ปุ่มที่ต้องการแก้ไข จากนั้นตรงเมนูด้านซ้ายเราสามารถแก้ไข ข้อความ ลิงก์ของปุ่มกด ขนาด (ไปที่เมนู Style เพื่อแก้ไขรูปแบบได้อีก)

6 เปลี่ยนรูปภาพบน wordpress

เราสามารถเปลี่ยนรูปภาพได้โดยการคลิกที่รูปภาพที่เราต้องการแก้เปลี่ยนจากนั้นกดที่ Choose Image แล้วอัปโหลดภาพที่ต้องการมาแทนที่ได้เลย

7 เปลี่ยนภาพพื้นหลัง wordpress

เราสามารถเปลี่ยนภาพพื้นหลังของหน้าเว็บได้โดยการกดไปที่จุดหกจุด (เอาเมาส์ไปชี้ตรงขอบๆมันจะแสดงขึ้นมาให้กด) จากนั้นกดไปที่ Style ตรงเมนู Image ให้เรากด Choose เพื่อเลือกรูปภาพที่เราต้องการมาแทนที่ได้ตามชอบ

8 กดอัพเดทหน้าเว็บ

หลังจากที่เราแก้ไขหน้าเว็บตามที่เราต้องการแล้วก็ให้กด Update เพื่อนำหน้าเว็บที่แก้ไขไปใช้งานจริง

การเพิ่มสิ่งอื่นๆลงในหน้าเว็บตามต้องการ

เราสามารถเพิ่มสิ่งอื่นๆลงในหน้าเว็บได้ตามต้องการเลย เช่น

  • หัวข้อ
  • รูปภาพ
  • ข้อความ
  • วิดีโอ
  • ปุ่มกด
  • และอื่นๆอีกมากมาย

โดยการไปที่เมนูด้านซ้าย จากนั้นลากไปวางยังตำแหน่งที่ต้องการ แล้วแก้ไขให้เป็นรูปแบบตามที่เราชอบได้เลยง่ายๆ

ส่วนอันที่มีเครื่องหมายกุญแจต้องทำการอัพเกรดเป็นเวอร์ชัน Pro จึงจะใช้ได้

8 การเพิ่มสิ่งอื่นๆลงในหน้าเว็บไซต์

การแก้ไขหน้าเว็บอื่นๆ

เราสามารถแก้ไขหน้าเว็บอื่นๆได้โดยการกดไปที่หน้าเว็บที่ต้องการแก้ไข จากนั้นกด Edit With Elementor

9 หากต้องการแก้ไขหน้าเว็บอื่นๆ

วิธีการเปลี่ยนโลโก้เว็บไซต์

เราสามารถเปลี่ยน LOGO ให้กับเว็บไซต์ตามที่เราต้องการได้ง่ายๆโดยการทำตามนี้

  1. กด Customize
  2. เอาเมาส์ไปชี้ที่รูปโลโก้จากนั้นกดที่รูปดินสอ
  3. กด Change Image เพื่ออัปโหลดรูปโลโก้ตามชอบได้เลย
  4. หลังจากปรับแต่งเสร็จกด Publish
1 กดที่ customize

ให้เราไปที่หน้าเว็บไหนก็ได้ของเว็บเรา จากนั้นกดที่ Customize

2 เปลี่ยนรูปโลโก้ wordpress ตามต้องการ

เอาเมาส์ไปชี้ที่รูปโลโก้ในปัจจุบัน จากนั้นกดที่รูปดินสอ แล้วกด Change Image เพื่อเปลี่ยนภาพโลโก้เว็บตามที่เราชอบได้เลย

วิธีการเปลี่ยนรูปแบบเมนูของเว็บ

หลังจากเปลี่ยนโลโก้เสร็จต่อไปเราสามารถเปลี่ยนรูปแบบการแสดงผลเมนูของเว็บไซต์ของเราได้โดยการทำตามนี้

  1. เอาเมาส์ไปชี้ที่เมนูของเว็บ
  2. ตรงเมนูด้านซ้ายเราสามารถปรับแต่งรูปแบบได้ตามต้องการ
  3. หลังจากปรับแต่งเสร็จกด Publish
1 เปลี่ยนรูปแบบเมนูเว็บไซต์

เอาเมาส์ไปชี้ที่เมนูของเว็บไซต์ จากนั้นกดที่รูปดินสอ ทีนี้เราก็จะเจอเมนูในการแก้ไขลักษณะการแสดงผลต่างๆของเมนูเว็บไซต์ของเรา

2 กด publish

หลังจากแก้ไขโลโก้และรูปแบบเมนูของเว็บเสร็จให้กดปุ่ม Publish และกดรูปกากบาท เพื่อออกไปชมเว็บของเรา

วิธีการแก้ไข Footer ของเว็บไซต์

Footer คือตำแหน่งล่างสุดของเว็บไซต์ของเรามีไว้เพื่อใส่ข้อมูลต่างๆเช่น รายละเอียด หมวดหมู่ เบอร์โทร และอื่นๆตามต้องการ ซึ่งมันจะอยู่ตำแหน่งล่างสุดของเว็บไซต์ของเราในทุกๆหน้าเว็บที่เราสร้าง

  1. เอาเมาส์ไปชี้ที่รูปเข็มไมล์รถตามภาพ
  2. กดเลือก Dashboard
  3. กด Appearance
  4. กดที่ Header Footer & Blocks
  5. กด Edit With Elementor
  6. กดเลือกตำแหน่งที่เราต้องการแก้ไข และทำการแก้ไขตามชอบเลย
  7. หลังแก้ไขเสร็จให้กด Update
1 ไปที่ dashboard wordpress

ไปที่หน้าเว็บไหนก็ได้ของเรา จากนั้นเอาเมาส์ไปชี้ที่รูปเข็มไมล์แล้วกดที่ Dashboard

2 ไปที่ header footer blocks astra

กดเลือกเมนูต่างๆตามภาพ

3 แก้ไข footer ตามต้องการบน wordpress

กดเลือกตำแหน่งที่ต้องการแก้ไขแล้วแก้ไขตามชอบ หลังจากแก้ไขเสร็จกดที่ UPDATE เพื่อนำผลการแก้ไขไปใช้

วิธีเพิ่มหน้าเว็บไซต์

หากคุณต้องการที่จะสร้างหน้าเว็บอื่นๆเพิ่มก็สามารถทำได้ด้วยวิธีการนี้

  1. ไปที่หน้าเว็บไหนก็ได้ของคุณแล้วเอาเมาส์ไปชี้ที่ New
  2. กดเลือก Page
  3. กรอกชื่อหน้าเว็บที่จะสร้างลงในช่อง Add title
  4. กด Edit With Elementor
  5. เลือกสิ่งที่ท่านต้องการใส่ลงในหน้าเว็บตามชอบโดยการลางไปวางและแก้ไขตามต้องการ
  6. หลังจากใส่ทุกอย่างตามต้องการแล้วกด Publish เพื่อแสดงผลหน้าเว็บให้ผู้อื่นได้เห็น
1 กด New และ กด page

ไปที่หน้าเว็บไหนก็ได้ของคุณ แล้วไปที่เมนู New จากนั้นกดที่ Page

2 ตั้งชื่อหน้าเว็บที่ต้องการสร้าง

ตั้งชื่อหน้าเว็บที่ต้องการในหัวข้อ Add Title จากนั้นกด Edit With Elementor

3 ใส่สิ่งต่างๆลงในหน้าเว็บตามชอบ

ทางด้านซ้ายคือเครื่องมือต่างๆในการสร้างหน้าเว็บเช่น รูปภาพ หัวข้อ ไอคอน ปุ่มกด ให้เราลากแล้วไปวางยังตำแหน่งด้านขวา จากนั้นทำการแก้ไขได้เลยตามที่เราชอบ หลังจากสร้างหน้าเว็บใหม่ตามที่เราต้องการแล้วให้กดที่ PUBLISH

รับคอร์สสอนสร้างเว็บไซต์ฟรี

ผมได้สอนวิธีการสร้างเว็บไซต์แบบเดียวกับในบทความนี้แบบเป็นคลิปวิดีโอไว้แล้ว ซึ่งจะสอนละเอียดกว่าและเข้าใจง่ายกว่า หากต้องการสามารถลงทะเบียนเพื่อเรียนฟรีได้เลยไม่มีค่าใช้จ่ายใดๆ

คอร์สสอนสร้างเว็บไซต์ฟรี cover 768x432 1

คำถามที่พบบ่อยเกี่ยวกับการสร้างเว็บไซต์

อยากอ่านบทความแบบนี้อีกไหม ? เพิ่มเพื่อน LINE เราเลย

เพื่อรับบทความใหม่ๆก่อนใคร หรือถามคำถามที่สงสัย
แชร์
หากชอบบทความนี้ฝากกดแชร์ต่อให้เพื่อนๆได้อ่านด้วยนะครับ
โพสที่เกี่ยวข้อง

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

© 2020 Mustketing All Rights Reserved.