Deprecated: Elementor\Editor is deprecated since version 2.6.0! Use Elementor\Core\Editor\Editor instead. in /home/customer/www/thaiwpcentral.com/public_html/wp-includes/functions.php on line 4963
ติดตั้ง WordPress บน SiteGround (คู่มือ WordPress 2020)
SiteGround โฮสติ้ง WordPress 

บทความนี้จะอธิบายขั้นตอนต่างๆในการติดตั้ง WordPress บน SiteGround พร้อมการตั้งค่าปลั๊กอินต่างๆเพื่อให้เว็บเราโหลดเร็วขึ้น

SiteGround ซึ่งเป็นหนึ่งในสามโฮสติ้งที่เป็น Official Recommendation จาก WordPress.org ซึ่ง SiteGround เองนั้นถือว่าเป็นผู้ให้บริการเว็บโฮสติ้งที่คนทั่วโลกนิยมใช้เป็นอันดับต้นๆสำหรับสร้างเว็บไซต์ด้วย WordPress

สำหรับผู้ที่มีลูกค้าอยู่ทั้งใน และต่างประเทศ ต้องการโฮสติ้งนอกคุณภาพดีที่เน้นเทคโนโลยีเซิร์ฟเวอร์ และฟีเจอร์ที่ช่วยเพิ่มความเร็วให้เว็บไซต์ WordPress เยอะๆ มี Admin Panel ที่ใช้งานง่าย ราคาไม่แพงมาก รวมทั้งมีทีมงาน Technical Support ที่ได้ชื่อว่าดูแล และสามารถแนะนำการแก้ปัญหาต่างๆให้ลูกค้าได้เป็นอย่างดี SiteGround ถือเป็นทางเลือกที่แอดแนะนำอันดับแรก

สามารถอ่านรีวิว SIteGround เพิ่มเติมได้ที่บทความ: สร้างเว็บด้วย WordPress พร้อมแนะนำโฮสติ้ง

01

จดโดเมนเนม และเลือกโฮสติ้งแพคเกจ

1.1 เมื่อเราเข้ามาที่หน้าแรกของ SiteGround จะมีโฮสติ้งแพคเกจต่างๆให้เลือก โดยแพคเกจ Web Hosting, WordPress Hosting และ WooCommerce Hosting นั้นคือแพคเกจเดียวกันทั้งหมด (Managed WordPress Hosting) เราสามารถคลิกที่ Get Started ของแพคเกจไหนก็ได้ ส่วน CloudHosting นั้นจะเป็นแพคเกจสำหรับผู้ที่ต้องการโฮสติ้งแบบคลาวด์เซิร์ฟเวอร์

สำหรับคู่มือนี้จะเป็นตัวอย่างการสมัครแบบ Managed WordPress Hosting

จดโดเมนเนม และเลือกโฮสติ้งแพคเกจกับ SiteGround
หน้าแรกเว็บโฮสติ้ง SiteGround

1.2 Managed WordPress Hosting จะมีแพคเกจ 3 แบบให้เราเลือก คือ StartUp, GrowBig และ GoGeek โดยคลิกที่ Get Plan ในช่องโฮสติ้งแพคเกจที่เราต้องการ

แต่ละแพคเกจ นอกจากจะแตกต่างกันที่ขนาดพื้นที่ จำนวนทรัพยากรที่มีให้แล้วนั้น ฟีเจอร์สำคัญที่ควรพิจารณาด้วยคือเรื่องของเซิร์ฟเวอร์แคช และฟีเจอร์การ Backup เว็บไซต์ (คลิกที่ Compare WordPress Plan เพื่อดูรายละเอียดแต่ละแพคเกจ)

แอดแนะนำแพคเกจอย่างน้อย GrowBig เนื่องจากหลักๆคือมีเซิร์ฟเวอร์แคชให้ครบทั้ง Static, Dynamic และ Database ช่วยเพิ่มความเร็วให้เว็บไซต์ได้อย่างมาก โดยเฉพาะถ้าเราจะสรา้งเว็บขายของออนไลน์ หรือเว็บที่มีส่วน Login สำหรับสมาชิก ที่ต้องเรียกใช้งาน Dynamic Content และฐานข้อมูลบ่อยๆ

จดโดเมนเนม และเลือกโฮสติ้งแพคเกจกับ SiteGround
เลือกโฮสติ้งแพคเกจ

1.3 เลือกว่าจะจดโดเมนเนมใหม่ หรือใช้โดเมนเดิมที่มีอยู่แล้ว ใส่ชื่อโดเมนเนมที่ตองการ แล้วกด Proceed

จดโดเมนเนม และเลือกโฮสติ้งแพคเกจกับ SiteGround
เลือกชื่อโดเมนเนม

1.4 ในหน้านี้ ให้เราใส่ข้อมูลการสมัครต่างๆ เช่น ชื่อบัญชี อีเมล์ รายละเอียดบัตรเครดิตสำหรับชำระเงิน รวมถึงตรวจสอบรายละเอียดโฮติ้งแพคเกจที่เราเลือก

เราสามารถ เลือกที่ตั้งเซิร์ฟเวอร์ ของเราได้จากส่วนนี้ โดย SiteGround มีที่ตั้งเซิร์ฟเวอร์ (Data Center) ให้เลือก 4 ที่คือ USA, Europe, Singapore และ UK โดยให้เลือกที่ตั้งเซิร์ฟเวอร์ให้ใกล้ลูกค้าหลักของเรามากที่สุด สำหรับผู้ที่มีลูกค้าหลักอยู่ในประเทศไทย แอดแนะนำเลือกเซิร์ฟเวอร์ Singapore

ในส่วนของบริการเสริมสามารถเลือกเพิ่มได้ดังนี้

  • Domain Privacy: แสดงชื่อ-ที่อยู่ของบริษัทตัวแทน แทนชื่อ-ที่อยู่ของเราเวลาถูกเรียกดูรายละเอียดโดเมนจาก WHOIS
  • SG Site Scanner: ติดตั้งโปรแกรมสแกนไวรัสเพิ่มเติมบนโฮสติ้งของเรา

เมื่อตรวจสอบรายละเอียดทั้งหมดแล้ว คลิกที่ Pay Now เพื่อทำการชำระเงิน

จดโดเมนเนม และเลือกโฮสติ้งแพคเกจกับ SiteGround
เลือกบริการเสริม

1.5 จะมีอีเมล์ยืนยันการสมัคร พร้อมใบเสร็จรับเงิน และรายละเอียดสำหรับล็อกอินเข้า Admin Panel ที่ SiteGround ส่งมาให้

จดโดเมนเนม และเลือกโฮสติ้งแพคเกจกับ SiteGround
รายละเอียดการล็อกอินเข้า SiteGround
02

ติดตั้ง WordPress บน SiteGround

หลังจากเราทำการสมัครโฮสติ้งแล้ว ในส่วนที่สองนี้จะเข้าสู่ขั้นตอนการติดตั้ง WordPress บน SiteGround จากใน SiteGround Control Panel

2.1 เมื่อเราล็อกอินเข้ามาใน Control Panel แล้วให้ไปที่เมนู Websites จากนั้นคลิกที่ Site Tools

ติดตั้ง WordPress บน SiteGround
เมนู Site Tools สำหรับติดตั้ง WordPress บน SiteGround

2.2 ให้เข้ามาที่เมนู WordPress > Install & Manage จากนั้นเลือกว่าจะติดตั้ง WordPress อย่างเดียวหรือว่าติดตั้ง WordPress พร้อม WooCommerce (หากเลือกติดตั้ง WordPress อย่างเดียวเราสามารถติดตั้งปลั๊กอิน WooCommerce ในภายหลังจากหน้า WordPress Admin ได้เช่นกัน)

ในส่วนของ Admin Info ใส่รายละเอียดชื่อบัญชี และรหัสผ่านสำหรับล็อกอินเข้า WordPress Admin พร้อมทั้งใส่อีเมล์ของแอดมิน จากนั้นคลิกที่ Install เพื่อทำการติดตั้ง WordPress

ติดตั้ง WordPress บน SiteGround
เลือกเวอร์ชัน WordPress และสร้างแอ็กเคานต์ Admin

2.3 เมื่อเราติดตั้ง WordPress บน SiteGround เสร็จเรียบร้อย จะมีข้อความขึ้นว่า WordPress is installed. ให้เราคลิกที่ไอคอนด้านขวาล่างเพื่อล็อกอินเข้าสู่ WordPress Admin Panel

ติดตั้ง WordPress บน SiteGround
ติดตั้ง WordPress เสร็จเรียบร้อย

2.4 ก่อนที่จะเข้าสู่หน้า WordPress Admin จะมีหน้า WordPress Starter ให้คลิกที่ Start Now เพื่อเริ่มขั้นตอนการเลือกธีม และ ปลั๊กอินสำหรับการติดตั้ง WordPress ในครั้งแรก

ติดตั้ง WordPress บน SiteGround
หน้า WordPress Starter สำหรับการติดตั้ง WordPress ในครั้งแรก

2.5 ส่วนแรกจะให้เรา เลือกธีมของเว็บไซต์ เมื่อเราคลิกปุ่ม Select เพื่อเลือกธีม จะมีเมนูให้เราเลือกติดตั้งปลั๊กอินเพิ่มเติมสำหรับธีมนั้นๆ โดย Elementor จะเป็นปลั๊กอิน Page Builder ที่ช่วยให้เราปรับแต่งรูปแบบหน้าตาเว็บเพจได้อย่างง่ายดาย (แอดแนะนำให้ติดตั้งปลั๊กอินตัวนี้ เนื่องจากใช้งานได้ดีกว่า Page Builder ของ WordPress เอง) ส่วนธีมไหนที่รองรับการทำเป็นร้านขายของออนไลน์ ก็จะมีถามว่าเราต้องการติดตั้งปลั๊กอิน WooCommerce ด้วยหรือไม่

จากนั้นคลิกที่ปุ่ม Confirm เพื่อยืนยันการเลือกธีม และไปส่วนต่อไป

ติดตั้ง WordPress บน SiteGround (เลือกธีม WordPress)
เลือกธีมเว็บไซต์
ติดตั้ง WordPress บน SiteGround (เลือกปลั๊กอิน WordPress)
เลือกปลั๊กอินสำหรับธีม

2.6 ส่วนที่สอง และสาม จะเป็นการเลือกปลั๊กอินต่างๆที่จะติดตั้งเพิ่มเติม (ปลั๊กอินทั้งหมดเราสามารถหาติดตั้งได้ภายหลัง)

  • Contact Form (WP Forms): สำหรับสร้างฟอร์มที่ให้ผู้เยี่ยมชมส่งข้อความ หรือติดต่อเราผ่านเว็บไซต์
  • JetPack: ปลั๊กอินที่มีสารพัดฟีเจอร์เสริมข้างในอีกที (ไม่แนะนำ มีฟีเจอร์หลายอย่างที่กินทรัพยากรเซิร์ฟเวอร์)
  • Shop: ติดตั้ง WooCommerce ปลั๊กอิน
  • Calendar: ติดตั้งปลั๊กอินปฎิทินอีเว้นท์ต่างๆ
  • Google Analytics: สำหรับติดตั้งใช้งาน Google Analytics ดูจำนวน และรายละเอียดเกี่ยวกับผู้เยี่ยมชมเว็บไซต์ (แนะนำปลั๊กอินตัวอื่น)
  • Optimize for SEO (Yoast): ปลั๊กอินสำหรับช่วยให้เว็บเราติดอันดับในเสิร์ชเอนจิ้นได้ดีขึ้น (แนะนำให้ติดตั้งด้วย เป็น SEO ปลั๊กอินที่ดีที่สุดสำหรับ WordPress)
  • Grow Subscribers List: ปลั๊กอินสำหรับสร้างฟอร์มให้ผู้เยี่ยมชมสมัครอีเมล์ข่าวสารบนเว็บเรา

เมื่อเลือกปลั๊กอินที่จะติดตั้งแล้ว ให้คลิกที่ Complete เราจะเข้าสู่หน้า Dashboard เป็นอันเสร็จการติดตั้ง WordPress บน SiteGround

ติดตั้ง WordPress บน SiteGround (เลือกปลั๊กอิน WordPress)
เลือกปลั๊กอินเสริม
ติดตั้ง WordPress บน SiteGround (เลือกปลั๊กอิน WordPress)
เลือกปลั๊กอินเสริม
หน้า Dashboard เมื่อเราล็อกอินเข้า WordPress
หน้า Dashboard เมื่อเราล็อกอินเข้า WordPress
03

ตั้งค่าปลั๊กอิน SG Optimizer

SG Optimizer เป็นปลั๊กอินแคชที่พัฒนาโดย SiteGround เอง ออกมามาเพื่อให้การแคชข้อมูลต่างๆใน WordPress เชื่อมต่อกับเซิร์ฟเวอร์ของ SiteGround โดยตรง

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

การตั้งค่าที่แนะนำนั้น สามารถตั้งค่าตามรูปแต่ละขั้นตอนได้เลย

3.1 ให้เข้ามาที่ Control Panel ของ SiteGround ไปที่เมนู Speed > Caching จากนั้นคลิกที่เมนู Static Cache และ Memcached ว่าถูกเปิดการใช้งานอยู่ (ส่วน Dynamic Cache เราจะเปิดใช้งานผ่านปลั๊กอินใน WordPress)

  • Static Cache: แคชไฟล์เว็บเพจต่างๆตั้งแต่ HTML, Java, CSS และ รูปภาพ โดยไฟล์เหล่านี้จะถูกแคชอยู่บนแรมของเซิร์ฟเวอร์ ซึ่งสามารถเรียกไฟล์ได้อย่างรวดเร็วกว่าการแคชไฟล์บนฮาร์ดดิสก์ โดย Static Cache จะถูกอัพเดททุก 3 ชั่วโมง ซึ่งถ้าเรามีการแก้ไขไฟล์ต่างๆ และต้องการให้อัพเดททันดี เราสามารถล้างไฟล์แคชได้โดยกดที่รูปไม้กวาดด้านขวา (สามารถสั่งงานจากใน WordPress ได้เช่นกัน)
  • Dynamic Cache: นั้นออกแบบมาเพื่อใช้งานกับเว็บไซต์ CMS อย่าง WordPress โดยเฉพาะ ซึ่งการโหลดคอนเทนต์ หรือโพสต์ต่างๆบน WordPress นั้นเป็น Dynamic File ทั้งสิ้น โดยไฟล์หน้าเว็บเพจของ WordPress จะถูกแคชอยู่บนแรมของเซิร์ฟเวอร์เช่นเดียวกัน
  • Memcached: ทำงานคล้ายกับ Dynamic Cache คือการแคชคอนเทนต์ที่ต้องมีการเรียกใช้งานจาก MySQL Database หรือแคชคอนเทนต์ที่มีการเรียกใช้ผ่าน API ต่างๆ
ตั้งค่าปลั๊กอิน SG Optimizer ใน SiteGround Admin Panel
ตั้งค่า Static Cache
ตั้งค่าปลั๊กอิน SG Optimizer ใน SiteGround Admin Panel
ตั้งค่า Memacahed

3.2 กลับเข้ามาที่ WordPress Admin Panel เลือกเมนู SG Optimizer จากเมนูบาร์ด้านซ้าย คลิกที่เมนู Super Cacher Setting ด้านบน จากนั้นเปิดการใช้งาน Dynamic Cache และ Memcached (ต้องเปิด Memcached ใน SiteGround จากขั้นตอนที่ 3.1 ก่อน)

calendar-icon

การตั้งค่าแคชปลั๊กอิน SG Optimizer:
Supercacher ใน WordPress

  • Dynamic Caching: (On) เปิดใช้งานแคชสำหรับ Dynamic คอนเทนต์ต่างๆที่เป็นโค้ดที่เปลี่ยนแปลงตามผู้ใช้ได้ เช่น PHP
  • Manual Cache Purge: ล้างแคชทั้งหมดใน SG Optimizer เวลาเรามีการอัพเดทธีม ปลั๊กอิน หรือเนื้อหาต่างๆในเว็บ ใช้ในกรณีที่เราเปิด Automatic Cache Purge แล้วแต่พบว่าเนื้อหาเรายังไม่อัพเดท
  • Automatic Cache Purge: (On) ล้างแคชโดยอัตโนมัติทุกครั้งที่เรามีการอัพเดทหน้าเพจ โพสท์ ธีม และปลั๊กอินต่างๆ
  • Browser Specific Caching: (Off) สร้างไฟล์แคชโดยแยกตามประเภทของเบราว์เซอร์ แนะนำให้เปิดเฉพาะกรณีที่พบปัญหาเบราว์เซอร์ (เช่น Chrome, Safari, Edge) มีการอัพเดทแคชที่ไม่เหมือนกัน
  • Excluding URLs: ใช้สำหรับใส่ URL หน้าเว็บที่เราไม่ต้องการให้แคช Dynamic Content
  • Test URLs for Cache Status: ใส่ URL ของหน้าที่ต้องการทดสอบการโหลด Dynamic Content
ตั้งค่าปลั๊กอิน SG Optimizer ใน WordPress
ตั้งค่า Dynamic Cache ใน Supercacher Settings

3.3 ในเมนูที่สอง Environment Optimization ให้เราเปิดใช้งาน HTTPS และ Browser Caching ส่วน PHP Version เราสามารถเลือกว่าจะเลือกเวอร์ชั่นเอง หรือให้ SiteGround เลือกให้เหมาะสมกับเซิร์ฟเวอร์ที่สุด (แนะนำให้เลือกเป็น Managed PHP)

calendar-icon

การตั้งค่าแคชปลั๊กอิน SG Optimizer:
Environment Optimization ใน WordPress

  • Enable HTTPS: (On) เปิดฟังก์ชั่นนี้เพื่อให้ WordPress และ SG Optimizer ทำงานกับ https ได้อย่างสมบูรณ์ รวมถึงทำให้ผู้เยี่ยมชมเว็บไซต์ของเราใช้งานผ่านโปรโตคอล https เสมอ
  • Fix Insecure Content: (Onให้เนื้อหา http โหลดผ่านโปรโตคอล https โดยอัตโนมัติ (ทำ https Rewrite) ใช้ในกรณีเราพบ Error เกี่ยวกับการใช้งาน https เช่นมีข้อความขึ้นเตือนว่า “Your connection to this site is not fully secure” แสดงว่ายังมีเนื่อหาบางส่วนที่ยังถูกโหลดผ่าน http ธรรมดา
  • Set your PHP Version: (Managed PHP) ใช้เลือกเวอร์ชันของ PHP ว่าเราจะเลือกเวอร์ชันเอง (Set Manual PHP Version) หรือให้ SiteGround เลือกเวอร์ชันที่เสถียรที่สุดให้ (Managed PHP) 
  • Browser Caching: (On) เปิดใช้งานเบราว์เซอร์แคช เพื่อให้หน้าเว็บของเราสามารถเก็บไฟล์แคชบางส่วนไว้บนเบราว์เซอร์ของผู้ใช้งาน ช่วยให้หน้าเว็บเพจของเราโหลดได้เร็วขึ้น
ตั้งค่าปลั๊กอิน SG Optimizer ใน WordPress
ตั้งค่า HTTPS และ เบราว์เซอร์แคชในเมนู Environment Optimization

3.4 เมนูที่สาม Frontend Optimization จะเป็นการตั้งค่าเกี่ยวกับการจัดการไฟล์ต่างๆเพื่อให้เว็บเราโหลดเร็วขึ้น

calendar-icon

การตั้งค่าแคชปลั๊กอิน SG Optimizer:
Frontend Optimization ใน WordPress

  • Minify HTML, JavaScript, CSS: (On) ย่อขนาดไฟล์โดยการตัดโค้ดบางส่วนที่ไม่จำเป็นออก
  • Defer Render-blocking-JS: (On) ทำให้เว็บเพจเราโหลดเร็วขึ้น โดยย้ายคิวการโหลดไฟล์ JavaScript บางตัวไปโหลดหลังจากที่โหลดไฟล์ที่จำเป็นต่อการสามารถแสดงผลหน้าเว็บเพจเสร็จหมดแล้ว
  • Combine CSS File: (Off) ถ้าธีมเราใช้ CSS หลายไฟล์ เปิดตัวเลือกนี้จะรวม CSS เป็นไฟล์เดียว แต่สำหรับเว็บไซต์ที่เปิดใช้งาน HTTP/2 การรวม CSS จะไม่ค่อยเห็นผลเรื่องความเร็วเท่าไหร่ เนื่องจาก HTTP/2 สามารถโหลดไฟล์ได้พร้อมกันทีละหลายๆไฟล์อยู่แล้ว
  • Optimize Loading Google Fonts: (On) ถ้าธีมเราใช้ Google Fonts เปิดตัวเลือกนี้เพื่อรวมไฟล์ Google Fonts เพื่อให้โหลดได้เร็วขึ้น แนะนำให้เปิดไว้ต่อให้เราใช้ HTTP/2 เนื่องจากเป็นการโหลดไฟล์จากเว็บไซต์ของ Google มาอีกต่อหนึ่ง
  • Remove Query Strings From Static Resources: (On) ตัดไฟล์เวอร์ชั่น เช่น domain.com/style.css?ver=4.6 ออกจากชื่อไฟล์เพื่อเพิ่มประสิทธิภาพการแคช Static File
  • Disable Emojis: (On) ปิดการใช้งาน Emoji ใน WordPress ถ้าไม่ได้ใช้ Emoji ก็แนะนำให้เปิดฟังก์ชั่นนี้เพื่อเพิ่มความเร็วในการโหลดหน้าเว็บ
ตั้งค่าปลั๊กอิน SG Optimizer ใน WordPress
ตั้งค่า Frontend Optimization เพื่อให้หน้าเว็บโหลดเร็วขึ้น

3.5 เมนูสุดท้ายคือ Image Optimization สำหรับย่อขนาดรูปต่างๆในเว็บไซต์ของเราให้มีขนาดไฟล์เล็กลงส่วน Lazy Load คือการโหลดรูปเฉพาะส่วนที่ผู้เข้าชมเลื่อนหน้าจอมาถึง แทนที่จะโหลดรูปที่อยู่ในหน้าเว็บเพจทั้งหมด ช่วยให้หน้าเว็บเพจเราแสดงผลได้เร็วขึ้น เหมาะกับเว็บเพจที่มีรูปเยอะๆ

calendar-icon

การตั้งค่าแคชปลั๊กอิน SG Optimizer:
Image Optimization ใน WordPress

  • New Images Optimization: (On) ย่อขนาดไฟล์รูปให้โดยอัตโนมัติทุกครั้งที่เราอัพโหลดรูปลง WordPress
  • Existing Image Optimization: ใช้ย่อขนาดไฟล์รูปใน WordPress ในส่วนที่ยังไม่ได้ถูกย่อโดย SG Optimizaer เช่น รูปที่มีอยู่ก่อนติดตั้งปลั๊กอิน SG Optimizer
  • Generate WebP Copies of New Images: (On) ปรับรูปที่อัพโหลดเป็น WebP เพื่อให้โหลดเร็วขึ้น
  • Lazy Load Images: (On) แสดงผลหน้าเว็บเพจให้เร็วขึ้น โดยโหลดรูปเฉพาะส่วนที่กำลังแสดงอยู่บนหน้าจอของผู้ใช้ก่อน แทนที่จะโหลดรูปทั้งหมดให้ครบแล้วค่อยแสดงผลหน้าเว็บเพจ แนะนำให้เปิดใช้งานหากหน้าเว็บเพจเรามีจำนวนรูปเยอะๆ
การตั้งค่า SG Optimizer Image Optimization
ตั้งค่า Image Optimization ช่วยลดขนาดรูป
04

สมัคร และติดตั้ง CloudFlare CDN

ข้อดีอีกอย่างของการติดตั้ง WordPress บน SiteGround ที่แอดชอบคือ SiteGround มีฟีเจอร์เชื่อมต่อกับ CloudFlare CDN มาให้ในแพคเกจเลย โดยที่เราตั้งค่าก็สะดวก เพียงไม่กี่คลิกก็สามารถใช้งาน CloudFlare CDN ได้แล้ว

การตั้งค่าที่แนะนำนั้น สามารถตั้งค่าตามรูปแต่ละขั้นตอนได้เลย

4.1 ให้เข้ามาที่ Control Panel ของ SiteGround จากนั้นไปที่เมนูด้านซ้าย คลิกเลือก Speed > CloudFlare จะเข้ามาสู่หน้าเริ่มการติดตั้ง CloudFlare ให้คลิกที่ Set Up เพื่อเริ่มการติดตั้ง

สมัคร และติดตั้ง CloudFlare CDN
ติดตั้ง CloudFlare ใน SiteGround Admin Panel

4.2 หากเรายังไม่มี CloudFlare ให้เลือก Create New แต่หากมีแล้วให้เลือก Connect Existing จากนั้นใส่อีเมล์ (ใช้เป็นชื่อแอ็กเคานต์ของ CloudFlare) และตั้งรหัสผ่าน จากนั้นคลิกที่ Create

สมัคร และติดตั้ง CloudFlare CDN
สร้างแอ็กเคานต์ CloudFlare

4.3 ขั้นต่อไปคือการเลือกแพคเกจ CloudFlare ที่เราต้องการ โดยมีสองแบบคือ ฟรี (Activate Free) และ พรีเมี่ยม (Activate Premium) โดย พรีเมี่ยมนั้นจะราคา $14.95 ต่อเดือน ซึ่งจะมีฟีเจอร์เพิ่มขึ้นมาจากฟรี เช่น Web Application Firewall (WAF), ฟีเจอร์ที่ช่วยให้โหลดเว็บเพจในมือถือได้เร็วขึ้น (Mirage) และฟีเจอร์โหลดรูปผ่าน CloudFlare ให้เร็วขึ้น (Polish) เป็นต้น

การใช้งาน CloudFlare นั้นเราจะต้องใช้ www. นำหน้าชื่อเว็บไซต์ของเราเสมอ ให้เราเลือกออปชั่น I want to automatically re-configure my website to work through WWW ด้วย

สมัคร และติดตั้ง CloudFlare CDN
เลือกแพคเกจ CloudFlare

4.4 เราจะเข้าสู่หน้าการตั้งค่า CloudFlare โดยมีตัวเลือกดังนี้

calendar-icon

การตั้งค่า CloudFlare
ใน SiteGround Control Panel

  • CloudFlare Caching Level: ให้ CloudFlare เลือกว่าจะแคช Static File พวก HTML, CSS, JavaScript ที่มี Query String อย่างไร เช่น domain.com/style.css?ver=4.6
    • Basic: แคชเฉพาะไฟล์ที่ไม่มี Query String
    • Simple: แคชทุกไฟล์ รวมไฟล์ที่มี Query String โดยตัด Query String ออก ซึ่งจะทำให้ไฟล์แสดงผลเหมือนไม่มี Query String เช่น domain.com/style.css
    • Aggressive(แนะนำเลือกอันนี้แคชทุกไฟล์ รวมไฟล์ที่มี Query String โดยแยกแคชไฟล์เวอร์ชั่นตาม Query String
  • Cache Purge: ล้างแคชใน CloudFlare
  • Development Mode: (Off) ปิดการใช้งานแคช โดยจะโหลดไฟล์จากเซิร์ฟเวอร์ต้นทางโดยตรง เหมาะสำหรับตอนกำลังแก้ไขเว็บเพจเพื่อดูการเปลี่ยนแปลงต่างๆ โดยไม่ต้องคอยมาล้างแคชใน CloudFlare
  • CloudFlare Security Settings: ระดับความปลอดภัยที่ผู้เข้าชมเว็บไซต์เชื่อมต่อกับ CloudFlare โดยสามารถเลือกได้ตั้งแต่ Off, Low, Medium, High ยิ่งตั้งไว้สูง CloudFlare จะมีโอกาสบล็อกผู้ใช้งานที่มีพฤติกรรมไม่ประสงค์ดีกับเว็บไซต์ของเราได้มากขึ้น (ปกติแอดตั้งไว้ที่ Medium) ส่วน I’m Under Attack ใช้สำหรับตอนที่กำลังโดนโจมตีจาก DDoS
  • Always Online: (On) แสดงผลเว็บเพจโดยโหลดไฟล์แคชจาก CloudFlare ระหว่างที่เซิร์ฟเวอร์เราล่ม
  • Email Obfuscation Parameters: (On) ป้องกันบอทต่างๆมาคัดลอกที่อยู่อีเมล์ที่แสดงผลอยู่ในหน้าเว็บเพจของเรา
  • JavaScript, HTML, CSS Auto Minify: (On) ลดขนาดไฟล์ JavaScript, HTML และ CSS เหมือนกับ SG Optimizer ในขั้นตอนที่ 3. (ปกติแอดเปิดใช้งานทั้ง SG Optimizer และ CloudFlare)
  • Railgun: (On) ช่วยให้คอนเทนต์ที่ไม่ได้ถูกแคชแสดงผลได้เร็วขึ้น
  • SSL Support: (Full Strict) เลือกการตั้งค่าความปลอดภัยเวลา CloudFlare เชื่อมต่อกับ SSL ซึ่งถ้าเราใช้ Let’s Encrypt Certificate ให้ตั้งไว้ที่ Full Strict โดยจะเป็นการตรวจสอบ SSL ให้ถูกต้องทั้งทางฝั่ง CloudFlare และ SiteGround
อ่านเพิ่มเติมเกี่ยวกับ ประเภทของ SSL บน CloudFlare
สมัคร และติดตั้ง CloudFlare CDN
ตั้งค่า CloudFlare (คลิกที่รูปเพื่อขยาย)

สำหรับใครที่เจอปัญหาข้อความขึ้นเตือนว่า DNS Check Failed หากเพราเพิ่งเปลี่ยน Nameserver ให้รอ DNS อัพเดทให้ครบ ปกติต้องรออย่างน้อย 24 ชั่วโมง ข้อความนี้จะหายไป

ส่วนถ้าขึ้นข้อความเตือน WWW Redirect Check Failed ให้ลองรีเฟรชหน้าเพจใน SiteGround ดูก่อน หากยังไม่หายให้ลองคลิกที่ Deactivate (ถึงจะ Deactivate การตั้งค่าต่างๆใน CloudFlare เราจะยังอยู่) จากนั้น คลิก Activate Free อีกครั้ง โดยเช็คให้แน่ใจก่อนคลิก Activate ว่าตัวเลือก I want to automatically re-configure my website to work through WWW ได้ถูกเลือกแล้ว

siteground-wordpress-setup-25
05

ตั้งค่าความปลอดภัย SSL และ HTTPS

หลังจากตั้งค่า CloudFlare เสร็จเราจะมาตั้งค่า SSL และ HTTPS กันต่อ

5.1 ในหน้า Control Panel ของ SiteGround ให้เราไปที่ Security > SSL Manager ในเมนูด้านซ้ายเพื่อเข้าสู่หน้าจัดการ SSL โดยปกติ SSL จะถูกติดตั้งให้อัตโนมัติพร้อมกับตอนที่เราติดตั้ง WordPress โดยถ้าช่อง Manage SSL ในตารางด้านล่างมีชื่อโดเมนเราอยู่ และ Let’s Encrypt Authority X3 ขึ้น Active ถือว่า SSL เปิดใช้งานแล้ว

แต่หากไม่มีให้คลิกที่ Get เพื่อทำการติดตั้ง SSL ใหม่

ตั้งค่าความปลอดภัย SSL และ HTTPS
เปิดใช้งาน SSL

5.2 ต่อไปให้เรามาที่ Security > HTTPS Enforce เพื่อเปิดการใช้งาน ทำให้ผู้เข้าชมเว็บไซต์ของเราเชื่อมต่อผ่านโปรโตคอล HTTPS เสมอ

ตั้งค่าความปลอดภัย SSL และ HTTPS
เปิดใช้งาน HTTPS

5.3 หลังจากนั้นให้เรากลับไปที่ Admin Panel ใน WordPress เลือก Settings > General จากเมนูด้านซ้าย ในช่อง WordPress Address (URL) และ Site Address (URL) ให้เราใส่ชื่อ URL แบบเต็มของเว็บเรา (มี https และ www.) เช่น https://www.thaiwpcentral.com/ จากนั้นคลิกที่ Save Changes

Site Address (URL) นั้นใช้ในกรณีที่เราไม่ได้ติดตั้ง WordPress ใน root directory (ไม่ได้ใช้ Installation Path ในขั้นตอน 2.2 เป็นค่าเริ่มต้น /)

ตั้งค่าความปลอดภัย SSL และ HTTPS
ตั้งค่า HTTPS ใน WordPress
06

การใช้งาน Elementor Page Builder

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

6.1 เมื่อเราเข้ามาที่หน้า Pages หรือ Posts แล้วเลือกเพจ หรือโพสท์ ที่เราต้องการแก้ไข ให้เราคลิกที่เมนู Edit With Elementor ด้านบน เพื่อจัดหน้าเพจ/โพสท์ ผ่าน Elementor

การใช้งาน Elementor Page Builder
การใช้งาน Elementor Page Builder
ใช้งาน Elementor จากหน้าโพสท์

6.2 การจัดหน้าเพจโดยใช้ Elementor ร่วมกับธีมเทมเพลตนั้น เราสามารถแก้ไขในส่วนที่เป็นเนื้อหา (Body) ได้ แต่จะมีบางส่วนที่เรายังต้องแก้ไขผ่านตัวเมนูของธีมเอง เช่น Header, Footer และพวก Menu Widget ต่างๆ

การใช้งาน Elementor Page Builder
หน้าตา Elementor Page Builder
07

การตั้งค่าอีเมล์เซิร์ฟเวอร์

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

7.1 ให้เรามาที่ Email > Accounts ในเมนูซ้ายมือ จะเข้าสู่หน้าสร้างแอ็กเคานต์อีเมล์ในส่วน Create New Email Account ให้เราใส่ชื่ออีเมล์ และตั้งรหัสผ่าน จากนั้นคลิกที่ Create

การตั้งค่าอีเมล์เซิร์ฟเวอร์บน SiteGround
หน้าจัดการอีเมล์แอ็กเคานต์

7.2 หลังจากที่เราสร้างอีเมล์แล้ว เราสามารถใช้รายละเอียดในช่องขวามือในการตั้งค่ากับผู้ให้บริการอีเมล์ภายนอก

  • Incoming Server: รายละเอียดตั้งค่าสำหรับการรับอีเมลผ่านโปรโตคอล IMAP หรือ POP3
  • Outgoing Server: รายละเอียดการตั้งค่าสำหรับการส่งอีเมล์ผ่านโปรโตคอล SMTP

หากเราต้องการล็อกอินเข้า Webmail ที่เป็นอีเมล์เซิร์ฟเวอร์ของเรา สามารถคลิกที่เมนูด้านขวาแล้วเลือก Login to Webmail

อ่านเพิ่มเติมเกี่ยวกับอีเมล์โปรโตคอลต่างๆ (IMAP, SMTP, POP)

การตั้งค่าอีเมล์เซิร์ฟเวอร์บน SiteGround
รายละเอียดการตั้งค่าอีเมล์เซิร์ฟเวอร์
การตั้งค่าอีเมล์เซิร์ฟเวอร์บน SiteGround
เมนูการตั้งค่าอีเมล์

นอกจากนี้ เรายังสามารถเลือก Preset ในการตั้งค่าเมล์ต่างๆเช่น IOS Mail, Mac Mail App หรือ Windows Mail ได้ โดยไปที่เมนู Mail Configuration

siteground-wordpress-setup-34

7.3 หากเราต้องการใช้ Gmail ของเราในการรับ-ส่งเมล์แทน Webmail (แต่ชื่ออีเมล์ยังเป็น [email protected] ของเราอยู่) ให้เราไปตั้งค่าที่ Gmail โดยไปที่เมนูรูปเฟืองด้านขวา แล้วเลือก Settings

เมนูการตั้งค่าอีเมล์เซิร์ฟเวอร์ใน Gmail
เมนู่ตั้งค่าใน Gmail

7.4 เลือก Accounts and Import จากเมนูด้านบน Send Mail As: คือการตั้งค่าให้ใช้ Gmail ในการส่งอีเมล์แทน Webmail ของเรา โดยชื่ออีเมล์ที่ส่งสามารถใช้ชื่อแอ็กเคานต์ที่เราสร้างเป็นชื่อโดเมนเนมของเราได้ ([email protected]) ในส่วนของ Check email from another account: จะเป็นการดึงเมล์ที่ส่งเข้า Webmail ในเมล์เซิร์ฟเวอร์ของเราเข้ามายัง Gmail

การตั้งค่าอีเมล์เซิร์ฟเวอร์ใน Gmail
การตั้งค่าเมล์เซิร์ฟเวอร์ใน Gmail

7.5 การตั้งค่าใน Send Mail As: ให้เราใส่ที่อยู่อีเมล์ที่เราสร้างใน SiteGround ในช่อง Email address จากนั้นคลิก Next

การตั้งค่า Send mail as ใน Gmail
ตั้งค่าสำหรับส่งอีเมล์ด้วย Gmail

7.6 ต่อไปเราจะต้องตั้งค่าเพื่อเชื่อมต่อ Gmail เข้ากับเมล์เซิร์ฟเวอร์ของเรา โดยสามารถใช้ค่าจากในขั้นตอนที่ 7.2 ได้ โดยเอาชื่อโดเมนจาก Outgoing Server มาใส่ในช่อง SMTP Server ของ Gmail ตั้งเลข Port เป็น 465 ส่วน username และ password ให้ใช้ของ Webmail เราที่เราสร้างในขั้นตอนที่ 7.1

SMTP (หรือ Simple Mail Transfer Protocol) นั้นเป็นโปรโตคอลสำหรับการส่งอีเมล์ผ่านเมล์เซิร์ฟเวอร์ ในที่นี้คือเราส่งเมล์จาก Gmail ผ่าน Webmail เซิร์ฟเวอร์ที่อยู่บน SiteGround เพื่อใช้ชื่ออีเมล์ตามชื่อโดเมนเนมของเรา แทนที่จะเป็น @gmail.com โดย SMTP นั้นเราสามารถเลือกพอร์ดการเชื่อมต่อได้ 3 แบบ

  • Port 25: พอร์ดการเชื่อมต่อแบบปกติ ไม่มีการเข้ารหัสอีเมล์
  • Port 2525: พอร์ตสำรองของ Port 25 ไม่มีการเข้ารหัสอีเมล์
  • Port 465: พอร์ตเชื่อมต่อแบบมีการเข้ารหัสอีเมล์ (แนะนำให้ใช้พอร์ตนี้)
การตั้งค่าอีเมล์เซิร์ฟเวอร์บน SiteGround
ตั้งค่าสำหรับส่งอีเมล์ด้วย Gmail

7.7 จากนั้น Gmail จะส่ง Verification Code เข้าไปที่ Webmail ของเรา ให้เราล็อกอินเข้า Webmail บน SiteGround จากนั้นเอาเลข Confirmation Code มาใส่ในช่อง Enter and verify the confirmation code แล้วกด Verify เป็นอันเสร็จสิ้นในส่วนของการตั้งค่าการส่งเมล์ออก

สำหรับคนที่เพิ่งเปลี่ยน Nameserver อาจต้องรอให้ DNS อัพเดทให้เรียบร้อยก่อนซัก 24 ชั่วโมง เราถึงจะได้รับเมล์จาก Gmail

ใส่โค้ดเพื่อยืนยันการส่งเมล์ด้วย SMTP ผ่าน Gmail
ใส่โค้ดยืนยันการเป็นเจ้าของอีเมล์

7.8 เข้าสู่การตั้งค่าใน Check email from another accounts ให้ใส่อีเมล์จาก Webmail ของเรา จากนั้นคลิก Next เลือก POP3 และคลิก Next อีกที

การตั้งค่าอีเมล์เซิร์ฟเวอร์ใน Gmail
การตั้งค่า POP3 สำหรับส่งอีเมล์ด้วย Gmail
การตั้งค่า POP3 สำหรับส่งอีเมล์ด้วย Gmail
ตั้งค่าสำหรับรับอีเมล์ด้วย Gmail

7.9 นำค่าจาก Incoming Server ในหน้า Email ของ SiteGround มาใส่ในช่อง Server และใช้เลข Port เป็น 995 จากนั้นใส่ username และ password อันเดียวกับตอนที่เราสร้าง Webmail ในขั้นตอนที่ 7.1

  • Leave a copy of retrieved message: คลิกเลือกเพื่อเก็บเมล์ต้นฉบับของเราไว้ใน Webmail หลังจากที่ Gmail ดึงเมล์ออกมาแล้ว หากไม่เลือก เมื่อเมล์ส่งเข้ามาที่ Gmail เมล์ต้นฉบับในเว็บเมล์จะถูกลบทิ้ง
  • Always use a secure connection: เป็นการเข้ารหัสอีเมล์ระกว่างส่งจาก Webmail มาที่ Gmail (แนะนำให้เลือก)

หลังจากนั้นคลิกที่ Add Account เป็นอันเสร็จการตั้งค่าใน Gmail

POP (หรือ Post Office Protocol) นั้นเป็นโปรโตคอลสำหรับการรับอีเมล์ผ่านเมล์เซิร์ฟเวอร์ ในที่นี้คือเรารับอีเมล์ตามชื่อโดเมนเนมของเราผ่าน Webmail จากนั้นค่อยส่งต่อไปยัง Gmail ของเรา โดยสามารถเลือกพอร์ดการเชื่อมต่อได้ 2 แบบ

  • Port 110: พอร์ดการเชื่อมต่อแบบปกติ ไม่มีการเข้ารหัสอีเมล์
  • Port 995: พอร์ตเชื่อมต่อแบบมีการเข้ารหัสอีเมล์ (แนะนำให้ใช้พอร์ตนี้)
การตั้งค่าอีเมล์เซิร์ฟเวอร์บน SiteGround
ตั้งค่าสำหรับรับอีเมล์ด้วย Gmail (คลิกเพื่อขยายรูป)

อ่านจบแล้ว ไงต่อ...?

บทความนี้มีประโยชน์กับคุณแค่ไหน ?

โหวตเลย! เรายินดีรับฟังทุกความคิดเห็น เพื่อปรับปรุงบทความให้มีประโยชน์กับคุณมากที่สุด

คุณคาดหวังอะไรในบทความนี้ หรือมีอะไรที่อยากให้เราเพิ่มเติม?

เข้าร่วมกลุ่มต่อ…

มาเข้าร่วมกลุ่ม Thai WordPress Community พื้นที่รวมตัวชาว WordPress / WooCommerce มาร่วมกันเรียนรู้ แบ่งปัน การทำเว็บไซต์-สร้างร้านค้าออนไลน์ เทคนิคเพิ่มยอดขาย เติบโตธุรกิจ

แชร์ต่อ…

อ่านจบแล้วก็แชร์ความรู้นี้ต่อ ให้เพื่อนๆที่สนใจการทำเว็บ หรือทำร้านขายของออนไลน์ด้วยไงล่ะ คลิกเพื่อแชร์จากลิงก์โซเชียลมีเดียขาประจำด้านล่างได้เลย! (แอดขอขอบคุณที่ช่วยแบ่งปันความรู้ให้เพื่อนๆนะ =/\=)

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Table of Contents

Share
Tweet
Share
Pin