แชร์ประสบการณ์ทำปลั๊กอิน WordPress: WooCommerce Thai Address

aumkub

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

ปลั๊กอินตัวที่เราจะพูดถึงกันวันนี้ คือ WooCommerce Thai Address เป็นปลั๊กอินสำหรับช่วย Auto-Complete กรอกชื่อตำบล อำเภอ จังหวัด และรหัสไปรษณีย์อัตโนมัติครับ

ก่อนจะมาเป็นปลั๊กอิน WooCommerce Thai Address

ตลอดหลายปีที่ผ่านมา ทีมงาน Designil ได้ทำงานร่วมกับธุรกิจทั้งขนาดเล็ก-ใหญ่ ทั้งในและต่างประเทศ เพื่อพัฒนาเว็บไซต์ตามโจทย์ของธุรกิจนั้น ซึ่งหลายต่อหลายครั้งที่ทางทีมงานได้โจทย์ให้ทำเว็บไซต์ร้านค้าออนไลน์ หรือ eCommerce ที่ต้องรองรับการใช้งานของคนไทยด้วย

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

อย่างไรก็ตาม เราพบว่าการนำระบบ eCommerce ของต่างประเทศมาใช้กับคนไทย มีสิ่งที่ต้องปรับหลายจุดให้เหมาะสม เช่น:

  • เรื่องการแปลภาษา – ส่วนนี้สมาชิกในกลุ่ม WordPress Bangkok ได้ช่วยกันแปลไปเยอะมากแล้วตอนปีที่แล้ว ซึ่งพอปีนี้ WooCommerce ปรับเวอร์ชั่นใหม่ก็มีคำให้แปลเพิ่มขึ้นอีก คิดว่าน่าจะมีโอกาสได้ทำกันในงาน Global Translation Day ที่จะถึงนี้ครับ
  • เรื่อง UX ของฟอร์มกรอกที่อยู่ และชำระเงิน – ส่วนนี้เป็นส่วนที่ทีมงานต้องปรับแก้ในทุกโปรเจค เพราะหลักการใช้งานฟอร์มของระบบต่างประเทศไม่ตรงกับคนไทย ประกอบกับหลาย ๆ คนที่ใช้ WooCommerce ก็เคยบ่นให้ทีมงานฟัง ซึ่งเป็น Pain Point ที่ทำให้เราทำปลั๊กอินนี้ขึ้นมานั่นเอง
  • การกรอกที่อยู่ใช้เวลาเยอะ – ด้วยความที่ระบบไม่มีลิสต์ชื่อตำบล อำเภอ เขต แขวง จังหวัด มาให้เลือกง่าย ๆ เลยทำให้ลูกค้าต้องเสียเวลากรอกส่วนนี้เองทีละช่อง ซึ่งพอลูกค้าต้องกรอกนาน ก็มีโอกาสที่จะปิดหน้าต่างและตัดสินใจไม่ซื้อได้ง่าย ๆ

การกรอกที่อยู่ไทยแบบใหม่ ด้วย jQuery.Thailand.js

เมื่อเดือนที่ผ่านมา คุณ Earthchie ได้สร้าง Solution ใหม่ในการกรอกที่อยู่ไทยขึ้นมา นั่นก็คือ jQuery.Thailand.js ซึ่งถ้าใครสนใจอ่านความเป็นมาของ jQuery Plugin ตัวนี้ สามารถเข้าไปอ่าน บทความของคุณ Earthchie ได้เลยครับ เขียนเข้าใจง่ายมาก

ตัว jQuery.Thailand.js มีหน้าตาตามรูปด้านล่างเลยครับ

Woocommerce thai address
Woocommerce thai address

ทีมงานเห็นแล้วก็รู้สึกชอบ เพราะเป็น Solution ที่แก้ปัญหาการกรอกที่อยู่ไทยที่ได้ผลมาก แถมแก้ปัญหาคนพิมพ์ที่อยู่ผิดได้ด้วย เพราะระบบ Auto-Complete ช่องอื่น ๆ ให้อัตโนมัติ

พอมองกลับมาที่ระบบร้านค้า WooCommerce แล้วเราก็พบว่าระบบ WooCommerce ยังไม่มีใครทำให้การกรอกที่อยู่ง่ายขึ้น สะดวกขึ้นกับลูกค้าได้มากเท่าวิธีนี้ เลยตัดสินใจเขียนเป็นปลั๊กอินขึ้นมาครับ

เราเริ่มทำปลั๊กอิน WordPress อย่างไร

เริ่มแรก ปลั๊กอินแรกที่ทำขึ้นมามีชื่อ Featured Image Generator ปลั๊กอินตัวนี้เกิดขึ้นจาก ทุกครั้งที่ผมเขียน Blog จะมีปัญหาเรื่องการหารูปสวยๆ ที่ไม่ติด License และไม่ติดลิขสิทธิ์นั้นยากมาก ๆ

ซึ่งการจะเอารูปสวย ๆ จากเว็บแจกรูปฟรีก็มีหลายขั้นตอน ต้องเอามาตัดต่อใน Photoshop หรือ Sketch กว่าจะมาเป็น Featured Image ได้ 1 รูป ถ้าไม่ได้เป็นดีไซเนอร์ที่ใช้โปรแกรมพวกนี้อยู่แล้วอาจจะใช้เวลานานมาก ๆ เลยเกิดไอเดียว่า “จะดีกว่าไหมถ้ามีปลั๊กอินที่ช่วยทำกระบวนการตรงนี้ขึ้นมาอยู่บนเว็บไซต์ทั้งหมดเลย” จึงกลายมาเป็นปลั๊กอิน ​FIG

เช่นเดียวกับ WooCommerce Thai Address ปลั๊กอินจาก Designil Code ล้วนเกิดจากปัญหาที่เราพบเจอจากการใช้งานจริงทั้งนั้นครับ เพราะเราจะนำปลั๊กอินตัวนี้มาแก้ปัญหาที่เจอ เพื่อปรับปรุงให้ได้ปลั๊กอินออกมาสมบูรณ์ที่สุดอีกด้วย

สำหรับวิธีการเริ่มศึกษาเขียนปลั๊กอิน ผมเริ่มจากการอ่าน Plugins Developer Handbook ซึ่งตัวนี้จะบอกหลักการเขียนวิธีที่ถูกหลัก วิธีการใช้งาน Hook, Shortcode, หรือเรียก Ajax และอีกมากมาย หรือถ้าใครมีพื้นฐานหน่อย สงสัยว่าปลั๊กอินตัวอื่นๆ ที่ทำงานคล้าย ๆ ปลั๊กอินที่เรากำลังจะเขียนนั้นทำงานได้อย่างไร โดยใช้วิธีดาวน์โหลดปลั๊กอินของคนอื่นมาครับ แล้วมานั่งแกะ Code สำหรับผมวิธีนี้คือวิธีที่ดีที่สุด นอกจากจะเข้าใจหลักการทำงาน เรายังได้เรียนรู้สไตล์การเขียน Structure ของปลั๊กอินในหลายๆ แบบ

หลายๆ คนคงไม่อยากเริ่มจากศูนย์ ผมก็มีอีกวิธีมาแนะนำกัน โดยใช้เว็บแอพตัวนี้ชื่อว่า  WordPress Plugin Boilerplate ซึ่งมันจะช่วย Generate Plugin ให้เรา โดยเพียงเราแค่กรอกข้อมูล เบื้องต้นของปลั๊กอิน เช่น ชื่อ, slug, author เป็นต้น และกด Build Plugin เท่านี้เราก็จะได้ปลั๊กอิน ที่มีชื่อของเรา ตัวแอพจะทำการนำเอา Plugin Slug ที่เราตั้งมาเป็น Prefix ในการตั้งชื่อ function ต่างๆ และยังสร้างโครงสร้างไฟล์อย่างเป็นระบบ เช่น มี function สำหรับการทำงานเมื่อปลั๊กอิน activate, มีการแบ่งโฟลเดอร์สำหรับการทำงาน หน้าบ้าน และหลังบ้านอย่างชัดเจน เป็นต้น  เท่านี้ เราก็เอาไฟล์ที่ได้จากแอพมาพัฒนาต่อได้เลย

สำหรับการพัฒนาปลั๊กอินนี้ สิ่งที่ยากที่สุดสำหรับการพัฒนา WooCommerce Thai Address ไม่ใช่การใช้ AutoComplete แต่เป็นการเรียงฟอร์แมต ที่อยู่สำหรับในใบเสร็จ และที่อยู่ในการจัดส่ง ซึ่งตัว WooCommerce เองมีการแบ่งฟอร์แมต ตามแต่ละประเทศไม่ซ้ำกัน ซึ่งฟิล์ดที่ผมเพิ่มขึ้นมาคือ “แขวง/ตำบล” ทำให้เมื่อเวลา ผู้ใช้ Checkout มันจะไม่ปรากฎในที่อยู่ต่างๆ หรือแม้กระทั่งหลังบ้าน นั้นคือเหตุผลในการ สร้างทำให้เราต้องสร้างฟอร์แมตใหม่สำหรับปลั๊กอินนี้โดยเฉพาะ และยากยิ่งกว่า โดยที่ข้อมูลใน Google มีน้อยมาก โดยต้องทำให้ผมเข้าไปแกะโค๊ด Core ของ WooCommerce เพื่อให้เข้าใจหลักการทำงานของมัน

เพิ่มฟีเจอร์ปลั๊กอิน นอกจากเรื่องกรอกที่อยู่

ฟีเจอร์อื่นๆ นอกจาก AutoComplete สำหรับปลั๊กอินนี้ คือ การเรียงฟอร์แมตของ ที่อยู่ในใบเสร็จ, ที่อยู่ในการจัดส่ง, ที่อยู่ในอีเมล์ หรือรวมกระทั่งหลังบ้าน ที่ต้องจัดให้เป็นฟอร์แมตเดียวกัน และการเรียง UX ให้ตรงตามความคุ้นเคยของคนไทยโดยเฉพาะ

ซึ่งถ้าใครเคยใช้ WooCommerce มาก่อน ก็จะรู้ว่าการเรียงที่อยู่ในระบบจะไม่เหมาะกับที่อยู่ของคนไทยเท่าไหร่ครับ ซึ่งปลั๊กอินตัวนี้ก็จะมาช่วยในส่วนนี้ครับ

มือใหม่ที่อยากทำ WordPress Plugin เริ่มต้นอย่างไรดี

ถ้าใครที่คิดอยากเริ่มเขียนแต่ไม่มีพื้นฐาน อย่าเพิ่งท้อไปครับ ปัจจุบันมีเว็บสอนวิธีทำปลั๊กอินให้เรียนรู้เยอะมาก

ลองเริ่มจากปลั๊กอินง่ายๆ ที่มีการ hook, filter แก้ไขข้อมูลง่ายๆ ก่อน แล้วหลังจากนั้น ค่อยลอง WordPress Plugin Boilerplate ที่จะช่วยให้การเขียนของคุณเป็นระบบมากขึ้น พอเริ่มเป็นรูปเป็นร่าง

จากนั้นพอเราสร้างปลั๊กอินที่ใช้งานได้มา 1 ตัว ลองเอาปลั๊กอินของคุณ นำไปแจกฟรี โดยผ่าน WordPress.org Plugin ซึ่งก่อนที่จะไปลิสต์อยู่บนเว็บให้คนโหลดได้ คุณจะต้องถูกรีวิวโดยอาสาสมัครใน WordPress.org ก่อน (จะเป็น Plugin Developer ด้วยกันนี่แหละครับ) ระหว่างรีวิวเราก็จะได้เรียนรู้ไปด้วยว่ามีอะไรผิดพลาด อะไรที่ควรปรับปรุง และเมื่อคุณผ่านการรีวิวเรียบร้อย คุณก็จะมีหน้า Plugin เป็นของตัวเอง

ผลงานที่เราทำ เช่น ตัวปลั๊กอินสำหรับสร้าง Featured Image ง่าย ๆ FIG แจกฟรี ก็ใช้วิธีเดียวกันนี้ครับ เราจะได้รับ Feedback จากคนที่เข้ามาใช้งานของปลั๊กอินคุณ ลองเอา Feedback ที่ได้มาปรับปรุง หรือจะแปลงเป็นตัวโปรเพื่อสร้างรายได้ให้กับคุณก็ได้

สุดท้ายนี้ สำหรับท่านใดที่สนใจปลั๊กอิน WooCommerce Thai Address สามารถดูรายละเอียดได้ที่ เว็บไซต์ DesignilCode เลยครับ หรือท่านใดที่กำลังหาทีมพัฒนา WordPress Plugin ของตัวเอง ก็สามารถติดต่อเราได้เช่นกันครับ :)

ปัจจุบันทาง Designil มีจำหน่าย Plugin ดังต่อไปนี้ครับ

  1. Woocommerce Promptpay QR Code
  2. Woocommerce Thai Address
  3. Designil PDPA ทำเว็บไซต์ WordPress ของคุณให้รองรับ PDPA ใน 3 นาที

ขอบคุณทุกท่านที่ติดตามบทความของเรา แล้วเจอกันใหม่ในบทความหน้านะครับ

aumkub

aumkub

WordPress Developer & Lead - WordPress Bangkok Organizer
บทความทั้งหมด