ตั้งค่าปลั๊กอิน WP Mail SMTP ด้วย Gmail อย่างละเอียด

feature image setup smtp gmail 2

หลายๆ คนที่สร้างเว็บด้วย WordPress คงเคยเจอปัญหาอีเมล์จากเว็บเราไปอยู่ในกล่องจดหมายขยะ ( Junk mail ) ของอีเมล์ลูกค้า ถึงแม้ว่าเว็บของเราจะใช้อีเมล์ของ Gmail ที่ผู้คนนิยมใช้กันอย่างแพร่หลายก็ตาม ซึ่งส่งผลให้ลูกค้าไม่เห็นอีเมล์จากเว็บของเรา และยังกลายเป็นการเพิ่มภาระให้ admin ต้องคอยแจ้งลูกค้าให้เช็คใน Junk mail ดังนั้นในบทความนี้ มลจะสอนการตั้งค่าปลั๊กอิน WP Mail SMTP ด้วย Gmail อย่างละเอียด เพื่อแก้ปัญหาดังกล่าวข้างต้นค่ะ

ติดตั้งปลั๊กอิน WP Mail SMTP

อันดับแรก เราจะต้องติดตั้งปลั๊กอิน WP Mail SMTP กันก่อนค่ะ
โดยไปที่ เมนูปลั๊กอิน > เพิ่มปลั๊กอินใหม่ ดังรูป

image 55

จากนั้นพิมพ์ชื่อปลั๊กอิน ดังรูป

image 56

ระบบจะดำเนินการค้นหาสักครู่ค่ะ แล้วเราจะเห็นปลั๊กอินดังรูปด้านล่าง ให้คลิกที่ปุ่ม Install Now ค่ะ

image 57

จากนั้น รอระบบทำการติดตั้งปลั๊กอินสักครู่ เมื่อระบบติดตั้งเสร็จ ให้คลิกที่ปุ่ม Activate ( เปิดการใช้งาน ) ดังรูป

image 59

ตั้งค่าปลั๊กอิน WP Mail SMTP ด้วย Gmail

หลังจากติดตั้งปลั๊กอินเสร็จเรียบร้อยแล้ว เราจะมาตั้งค่าการใช้งานของปลั๊กอินค่ะ
โดยไปที่ เมนู WP Mail SMTP > Settings ดังรูป

image 60

ที่ หัวข้อ From Email ให้เรากรอกอีเมล์ที่ต้องการให้ผู้รับเมล์หรือลูกค้าของเราเห็นว่าเมล์นี้ส่งมาจากใครค่ะ
ในที่นี้ มลจะกรอกอีเมล์ของทางเว็บเรา ดังรูปค่ะ

image 61

ที่ หัวข้อ From Name ให้เรากรอกชื่อของเราค่ะ โดยทั่วไปมักจะใช้ชื่อบริษัท, ชื่อร้านค้า หรืออาจจะใช้ชื่อเฉพาะที่ตั้งขึ้นมาใหม่ก็ได้ค่ะ ซึ่งชื่อที่เรากรอกในช่องนี้จะไปปรากฎที่ข้างหน้าของ Email Address หากนึกภาพไม่ออก ลองดูรูปตัวอย่างด้านล่างค่ะ ( ดูตามลูกศรสีน้ำเงินที่ชี้นะคะ )
จากรูปตัวอย่าง จะเห็นว่ามีข้อความที่ชื่อว่า “ทีมชุมชน Google” นำหน้า Email Address ซึ่งในที่นี้ มลจะกรอก “WebNoCode : แหล่งความรู้ WordPress” ดังรูป

image 62

ที่ หัวข้อ Mailer ให้คลิกที่ Gmail ดังรูปค่ะ

image 63

จากนั้นคลิกที่ลิงก์นี้ค่ะ ลงทะเบียนแอปพลิเคชันสำหรับ Gmail API เพื่อทำการเชื่อมโยงบัญชีอีเมล์ของเรากับ Google API ค่ะ

เมื่อคลิกที่ลิงก์แล้ว ระบบจะพาเราไปยังหน้าลงทะเบียนแอปพลิเคชันสำหรับ Gmail API ค่ะ ซึ่งหากเรายังไม่เคยใช้งาน Gmail API มาก่อน เราจะเห็นหน้าลงทะเบียนฯ ดังรูปด้านล่างค่ะ ให้เราติ๊กเครื่องหมายถูก ตรงหัวข้อ ข้อกำหนดในการให้บริการ ( Terms of Service ) และ หัวข้อ ฉันต้องการรับอีเมลข่าวสารฯ ( I would like to receive periodic emails on news… ) จากนั้น คลิกปุ่มยอมรับและดำเนินการต่อ

image 67

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

image 68

ระบบจะทำการสร้างโปรเจ็กต์ประมาณ 10-15 วินาที จากนั้นจะปรากฎหน้าเปิดใช้ API แล้ว ( The API is enabled ) ให้คลิกที่ปุ่ม Go to credentials ดังรูป

image 70

ระบบจะพามายังหน้าเพิ่มข้อมูลรับรอง โดยเราจะต้องกรอกข้อมูลในหน้านี้ 3 ข้อ
( ดังรูปด้านล่าง ) ได้แก่

  1. Which API are you using? ( คุณกำลังใช้ API ตัวใด )
    คลิกเลือก Gmail API
  2. Where will you be calling the API from? ( คุณจะเรียกใช้ API ได้จากที่ใด )
    คลิกเลือก Web server ( เว็บเซิร์ฟเวอร์ )
  3. What data will you be accessing? ( คุณต้องการเข้าถึงข้อมูลใด )
    คลิกที่ User data ( ข้อมูลผู้ใช้ )

เมื่อกรอกข้อมูลเสร็จแล้ว คลิกปุ่ม What credentials do I need? ( ฉันต้องใช้ข้อมูลรับรองใด ) ดังรูปด้านล่าง

image 73

จากนั้นระบบจะแสดงป๊อบอัพดังรูป ให้เราคลิกที่ Set up consent screen ( ตั้งค่าหน้าจอคำยินยอม )

image 74

ระบบจะทำการเปิดหน้าต่างใหม่ คือ หน้า OAuth consent screen ( หน้าจอคำยินยอม OAuth ) ซึ่งจะมีส่วนที่เราต้องกรอกข้อมูล 3 ส่วน ได้แก่

  1. หัวข้อ Application name ( ชื่อแอปพลิเคชัน ) เป็นช่องสำหรับตั้งชื่อแอป เราสามารถใส่ชื่อโดเมน หรือ ชื่ออื่นที่เราต้องการก็ได้ค่ะ
    ในที่นี้ มลจะกรอกเป็น SMTP webnocode ดังรูปด้านล่าง
  2. หัวข้อ Authorized domains ( โดเมนที่ได้รับอนุญาต ) ช่องนี้ให้เราใส่ชื่อโดเมนของเรา เมื่อกรอกเสร็จแล้วให้กดปุ่ม Enter ค่ะ
    ในที่นี้ มลจะกรอกเป็น webnocode.com ดังรูปด้านล่าง
  3. กรอก URL ของเว็บเรา ( ที่จะใช้ทำ SMTP ) ในหัวข้อ 3 หัวข้อดังต่อไปนี้ค่ะ
    • หัวข้อ Application Homepage link ( ลิงก์หน้าแรกของแอปพลิเคชัน )
    • หัวข้อ Application Privacy Policy link ( ลิงก์นโยบายความเป็นส่วนตัวของแอปพลิเคชัน )
    • หัวข้อ Application Terms of Service link ( ลิงก์ข้อกำหนดในการให้บริการของแอปพลิเคชัน )

เมื่อกรอกข้อมูลครบแล้ว คลิกปุ่ม Save ดังรูป

image 79

จากนั้นให้เรากลับไปที่หน้าการตั้งค่า SMTP ในเว็บของเราดังรูป

image 76

เลื่อนหน้าจอลงมาจนเจอหัวข้อ Authorized redirect URI แล้วคลิกปุ่ม copy ดังรูปค่ะ

image 77

จากนั้นคลิกที่แท็บหน้าต่างที่ชื่อ Credentials wizard ( วิซาร์ดข้อมูลรับรอง ) ดังรูปค่ะ

image 78

เราจะเห็นหน้า Credentials ( ข้อมูลรับรอง ) ดังรูปด้านล่างค่ะ
ในหน้านี้ จะมีส่วนที่เราต้องกรอกข้อมูล 3 หัวข้อ ได้แก่

  1. หัวข้อ Authorized redirect URIs ( URI การเปลี่ยนเส้นทางที่ได้รับอนุญาต ) จะอยู่ด้านล่างสุดของหน้า ให้เราวางลิงก์ที่ copy มาจากหน้าตั้งค่า SMTP ในเว็บของเรา แล้วกดปุ่ม Enter ดังรูปด้านล่าง
  2. หัวข้อ Authorized JavaScript origins ( JavaScript เริ่มต้นที่ได้รับอนุญาต ) ให้เรากรอก URL ของเว็บเรา แล้วกดปุ่ม Enter ดังรูปด้านล่าง
  3. หัวข้อ Name ( ชื่อ ) เป็นช่องสำหรับตั้งชื่อ client ( คล้ายๆ กับการตั้งชื่อแอป ในขั้นตอนก่อนหน้านี้อ่ะค่ะ ) เราสามารถใส่ชื่อโดเมน หรือ ชื่ออื่นที่เราต้องการก็ได้ค่ะ
    ในที่นี้ มลจะกรอกเป็น SMTP webnocode ดังรูปด้านล่าง

เมื่อกรอกข้อมูลครบแล้ว คลิกปุ่ม Refresh ( รีเฟรช ) ดังรูป

image 1

หลังจากที่เราคลิกปุ่ม Refresh แล้วสักพักเราจะเห็นปุ่ม Create OAuth client ID ( สร้างรหัสไคลเอ็นต์ OAuth ) ดังรูป ให้เราคลิกที่ปุ่มนี้ได้เลยค่ะ

image 2

ระบบจะทำการสร้างรหัส client จนเสร็จ จากนั้นจะมีปุ่ม I’ll do this later ( ฉันจะดำเนินการภายหลัง ) ดังรูป ให้เราคลิกที่ปุ่มนี้เลยค่ะ

image

ระบบจะพาไปยังหน้า Credentials ( ข้อมูลรับรอง ) ที่มีรหัส client ดังรูป
ให้เราคลิกที่รูปดินสอค่ะ

image 4

ทำการ copy “Client ID” และ “Client secret” ดังรูป

image 6

นำ “Client ID” และ “Client secret” ไปกรอกในเว็บของเรา แล้วคลิกปุ่ม Save Settings ดังรูป

image 8

หลังจากคลิกปุ่ม Save Settings แล้ว ให้เลื่อนหน้าจอลงมาด้านล่างจนเจอหัวข้อ Authorization แล้วคลิกปุ่ม Allow plugin to send emails using your Google account ดังรูป

image 3

ระบบจะพาไปยังหน้า Sign in with Google ให้เราคลิกที่ account ของเรา ดังรูป

image 5

จากนั้น บางคนอาจจะเจอหน้าการแสดงผลดังรูปด้านล่าง ไม่ต้องตกใจนะคะ ให้เราคลิกที่ Advanced ( ขั้นสูง ) ดังรูป

image 9

เมื่อคลิกที่ Advanced ( ขั้นสูง ) แล้วจะปรากฎชื่อโดเมนของเว็บเรา ดังรูป ให้คลิกที่โดเมนเราได้เลยค่ะ

image 10

จากนั้นเราจะเห็นป๊อบอัพการให้สิทธิ์ ดังรูป ให้คลิกที่ Allow ( อนุญาต )

image 11

จากนั้น คลิกที่ Allow ( อนุญาต ) อีกครั้ง ดังรูป

image 12

หลังจากเราทำการคลิกอนุญาตและยืนยันการมีตัวตนของเรากับ Google APIS เรียบร้อยแล้ว ระบบจะพาเรากลับมายังหน้า SMTP Settings ของเว็บเราค่ะ
ให้เราเลื่อนหน้าจอลงไปยังด้านล่างสุด จะพบข้อความ Connected as … ดังรูป แสดงว่า เราทำการเชื่อมต่อเรียบร้อยแล้ว ซึ่งถือว่าเป็นอันเสร็จสิ้นการตั้งค่า ปลั๊กอิน WP Mail SMTP ค่ะ

image 13

ทดสอบ Email Test

หลังจากตั้งค่าปลั๊กอิน WP Mail SMTP เรียบร้อยแล้ว เราควรทดสอบด้วย Email Test เพื่อเช็คว่าหากมีลูกค้ามาติดต่อเว็บเรา ลูกค้าจะได้รับเมล์จากทางเว็บหรือไม่ และ อีเมล์ของเว็บเราจะไปอยู่ที่กล่องขาเข้า ( inbox ) ของเมล์ลูกค้าไหม โดยทำตามดังนี้ค่ะ

ไปที่ เมนู WP Mail SMTP > Settings แล้วคลิกที่แถบ Email Test ดังรูป

image 14

ระบบจะพามายังหน้า Send a Test Email ดังรูป
โดยในช่อง Send To เราสามารถแก้ไขเป็นอีเมล์อื่นที่เราต้องการให้ส่งตัว test email ได้ค่ะ จากนั้นคลิกปุ่ม Send Email ดังรูป

image 15

หลังจากนั้น ให้เข้าไปเช็คที่อีเมล์ดูค่ะ ว่าได้รับเมล์หรือไม่
หากเราได้รับอีเมล์จากการทำ Email Test จะถือว่าเราทำการตั้งค่าปลั๊กอิน WP Mail SMTP อย่างเสร็จสมบูรณ์ค่ะ โดยหน้าตาในอีเมล์จะแสดงผลดังรูปค่ะ

image 17