ปลั๊กอิน wordpress เจ๋ง ๆ | CodingDee.com
หน้าแรก WordPress ปลั๊กอิน WordPress

ปลั๊กอิน WordPress

หมวดหมู่นี้เราได้รวบรวมรายชื่อ ปลั๊กอิน WordPress เจ๋ง ๆ เทคนิคและประสบการณ์ การสร้างเว็บไซต์ด้วย WordPress สอน WordPress วิธีใช้งาน ปลั๊กอินตัวไหนดีเหมาะกับการใช้งานแบบไหน เรารวบรวมไว้ที่นี่

social share

5 ปลั๊กอิน Social Share ที่มีปุ่ม Line มาให้ในตัว

ใครที่กำลังมองหาปลั๊กอิน social share สำหรับทำปุ่มแชร์บทความที่มีไลน์มา เหมาะกับการใช้งานของคนไทย บทความนี้ผมได้รวบรวมมาให้แล้ว เลือกใช้กันได้ตามใจชอบ Social Share   WordPress Plugins1.Seed Social ปลั๊กอินฝีมือคนไทยจาก SeedThemes จุดเด่นของ seed social คือความเบา มีเท่าที่คนไทยนิยมใช้จริง ๆ ใครที่ชอบปลั๊กอินที่ไม่ต้องตั้งค่าอะไรเยอะ แนะนำตัวนี้ครับ ใช้ง่ายมาก ๆมี Shortcode ให้ใช้งาน copy ไปใช้งานได้เลย สะดวกมาก ๆ เลือกได้ว่าจะให้ปุ่มแชร์บริเวณไหนของบทความเช่น ส่วนบนของบทความ ส่วนท้ายของบทความ 2.Free Tools to Automate Your Site Growth สำหรับปลั๊กอิน Sumo นี้เป็นปลั๊กอินที่ค่อนข้างครบเครื่องทำได้หลายอย่างเช่นEmail newsletter Share Google Analytics Heat Mapsมีหลายเว็บที่ใช้ปลั๊กอินนี้อยู่รวมทั้ง CodingDee.com ก็ใช้เหมือนกันผมชอบตรงที่เวลาเปิดในมือถือปุ่มแชร์มันจะเลื่อนตามตลอดและอยู่ใกล้นิ้วหัวแม่มือ ทำให้กดแชร์ได้ง่าย 3.Share Buttons by AddThis ปลั๊กอินนี้คล้าย ๆ กันกับ Sumo ตัวบนแต่ผมไม่ชอบตรงที่เวลากดแชร์มันจะวิ่งไปที่เว็บ AddThis ก่อนแว๊บนึงแล้วค่อยวิ่งต่อไปที่ Social ที่เราแชร์ไป 4.AddToAny Share Buttons สำหรับตัวนี้ก็คล้าย ๆ กันกับ Sumo และ AddThis ครับ แต่ที่ผมไม่ค่อยชอบตัวนี้ก็ตรง หน้าตาของปุ่มแชร์ไม่ค่อยสวยเท่าไหร่ สู้ Sumo และ AddThis ไม่ได้ 5.WordPress Social Sharing Plugin – Sassy Social Share ปลั๊กอินนี้จุดเด่นอยู่ที่ตั้งค่าได้ค่อนข้างหลากหลายยืดหยุ่นเช่นปรับแต่ง custom css ได้ตามใจเรา ย้ายสคริปไปไว้ที่ footer ได้ Load Javascript files in footer ตั้งเวลา cache ได้ Refresh Share Count cache every 10 minutes มี Shortcode ให้ใช้งาน copy ไปใช้งานได้เลยจบแล้ว หากอ่านแล้วชอบบทความจาก CodingDee ก็ฝาก กดไลค์เพจ ด้วยนะครับ จะได้ไม่พลาดข่าวสารเทคนิคดี ๆ จากเรา หรือติดปัญหาตรงไหนก็คอมเมนต์ไว้ด้านล่างนี้ได้ ไว้พบกันบทความต่อไปครับ
Ninja Forms

5 เหตุผลว่าทำไมถึงต้องใช้ Ninja Forms แทน Contact Form 7

Ninja Forms ปลั๊กอินสร้างแบบฟอร์มที่โคตรเทพ ใช้งานง่าย ฟังก์ชั่นครบครัน ลงตัวนี้ตัวเดียวลืม CF7 ไปได้เลยNinja Forms ถ้าพูดถึงปลั๊กอินสำหรับใช้สร้างแบบฟอร์ม หลายคนคงจะนึกถึง  Contact Form 7 (CF7) ใช่ไหมครับ ไม่แปลกเพราะก่อนหน้านี้ผมเองก็ใช้ CF7 มาตลอดแต่ CF7 มันไม่มีฟีเจอร์ที่เก็บข้อมูลลงดาต้าเบส ถ้าอยากให้มันเก็บข้อมูลลงดาต้าเบสได้เราต้องลงปลั๊กอิน  Contact Form Submissions  หรือ  Contact Form 7 Database Addon – CFDB7  เพิ่ม ผมก็ลองค้น Google หาปลั๊กอินดูจนมาเจอปลั๊กอินนี้ พอลองใช้ดูแล้วก็ติดใจมาก ใช้ง่ายกว่า CF7 มากและเก็บข้อมูลลงดาต้าเบสได้ด้วย มาดูกันครับว่าทำไมผมถึงเปลี่ยนจากจาก CF7 มาใช้ปลั๊กอินนี้แทน 1.รองรับ Google reCaptcha ปลั๊กอินสามารถใส่ Google reCaptcha ได้ด้วยเพื่อป้องกัน Spam (ข้อนี้ CF7 เองก็มีเหมือนกัน)2.รองรับภาษาไทย ตัวปลั๊กอินรองรับภาษาไทยอยู่แล้วแทบไม่ต้องแปลเลย ประหยัดเวลาไปได้เยอะ 3.Drag & Drop หน้าตาการใช้งานเรียบง่ายมาก การสร้างฟอร์มทำได้สะดวก เราสามารถลากฟิลด์มาวางได้เลย มีฟิลด์ให้เลือกเพียบ วันที่, อีเมล, ที่อยู่ รหัสไปรษณีย์ และที่ผมชอบอีกอย่างคือ ฟิลด์ Text Area เราสามารถตั้งให้ใช้งาน Rich Text Editor ได้ด้วย4.เลือกได้ว่าจะให้เก็บข้อมูลลงดาต้าเบสหรือไม่ อีกจุดเด่นของปลั๊กอินนี้คือเราสามารถเลือกได้ว่าจะเก็บข้อมูลที่ลูกค้าส่งมาเก็บลงดาต้าเบสหรือไม่ โดยค่าเริ่มต้นที่ปลั๊กอินให้มาจะเก็บลงดาต้าเบสอัตโนมัติ แถมยัง export ออกมาเป็นไฟล์ excel ได้ด้วยนะ5.Import และ Export ฟอร์มที่เราสร้างไปใช้กับเว็บอื่นได้ ฟีเจอร์นี้เหมาะมากสำหรับใครที่มีหลายเว็บ เราสามารถ import หรือ export ฟอร์มที่เราสร้างเสร็จแล้วไปใช้กับเว็บอื่น ๆ ก็ได้ ช่วยประหยัดเวลาการสร้างฟอร์มไปได้เยอะมากข้อเสีย อ่านข้อดีมาเยอะแล้วมาดูข้อเสียกันบ้าง เรียกได้ว่ามีอยู่ข้อเดียวเลย ข้อเสียนั่นก็คือ ไม่สามารถแนบไฟล์ได้ (สำหรับเวอร์ชั่นฟรี) ถ้าอยากให้แนบไฟล์ได้ก็ต้องซื้อ extension เสริม  File Uploads ดาวน์โหลดปลั๊กอินได้ที่นี่ คลิก จบแล้ว หากอ่านแล้วชอบบทความจาก  CodingDee  ก็ฝาก กดไลค์เพจ ด้วยนะครับ จะได้ไม่พลาดข่าวสารเทคนิคดี ๆ จากเรา หรือติดปัญหาตรงไหนก็คอมเมนต์ไว้ด้านล่างนี้ได้ ไว้พบกันบทความต่อไปครับ
Google Rich Snippet

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้

Google Rich Snippet คือ โค๊ดชุดหนึ่งที่ช่วยบอก search engine ให้เข้าใจว่า หน้านี้หรือบทความนี้ คืออะไร เกี่ยวข้องกับอะไร เช่น ถ้าบทความนี้เป็นบทความที่เกี่ยวกับสินค้า ก็ควรจะมีข้อมูลที่เกี่ยวกับ ชื่อสินค้าชื่ออะไร ราคาเท่าไหร่ ผู้ขายเป็นใคร เป็นต้น ถ้าเรามีข้อมูลพวกนี้ก็จะช่วยให้ search engine เข้าใจได้ง่ายขึ้นและนำไปแสดงผลให้ user ดูเวลาค้นหา keyword ที่เกี่ยวข้องกับบทความเราGoogle Rich Snippet นอกจากจะเป็นผลดีกับ search engine แล้วยังเป็นผลดีกับ user ด้วย เพราะช่วยให้ user เข้าใจรายละเอียดเบื้องต้นของหน้านั้นได้โดยที่ไม่ต้องคลิกเข้าดู ลองดูภาพประกอบต่อไปนี้จากภาพจะมีการแสดงจำนวนดาว และคะแนน ของบทความนี้ว่าได้เท่าไหร่ เป็นตัวช่วยในการตัดสินใจของ user ได้ในขั้นต้นว่าจะคลิกเข้าไปอ่านหรือไม่  การแสดงผลแบบนี้เรียกว่า  Google Rich Snippets  คราวนี้เราลองมาดูรูปด้านล่าง ที่ไม่มีดาว ดูแล้วก็รู้สึกธรรมดาไม่ได้โดดเด่นอะไร เทียบกันกับ รูปด้านบน รูปที่มีดาวดึงดูดให้อยากคลิกมากกว่าแน่นอนวิธีตรวจดูว่าบทความที่เราเขียนมี structure data หรือไม่ คลิก  แล้วกรอก url เว็บที่เราต้องการลงไปแล้วกด RUN TEST  หรือใครที่ลงปลั๊กอิน yoast seo ไว้แล้วก็เลือกตามภาพได้เลยรอสักครู่ระบบจะตรวจว่าบทความเรามีข้อมูลอะไรบ้างและนำมาแสดงผลบอกเราทางด้านขวามือตามภาพจากรูปคือบทความ  แจ้งเตือนเว็บล่มผ่าน Line บริการฟรี ที่คนทำเว็บห้ามพลาด  ซึ่งมีข้อมูลอยู่ 2 ก้อนคือ Article และ Breadcrumbลองคลิกเข้าไปดูจะเจอรายละเอียดของบทความต่าง ๆ เช่น ชื่อบทความ headline วันที่เขียน ฯ ตามรูปจากรูปจะสังเกตุเห็นว่าปุ่ม PREVIEW ด้วย ลองกดดูจะเป็นแบบนี้ถ้าของใครไม่มีแสดงว่าบทความยังไม่รองรับ AMP นะครับ วิธีทำอ่านได้ที่นี่  วิธีติดตั้ง AMP ใน WordPress อธิบายมาพอสมควรต่อไปมาดูวิธีทำกันครับ 1.ใช้ Structured Data Markup Helper Structured Data Markup Helper  เป็นเครื่องมือที่ทาง Google มีไว้ให้เราสามารถใช้งานได้ฟรี โดยเจ้าเครื่องมือนี้จะช่วยสร้าง schema ให้เรานำไปใช้ได้โดยที่เราไม่จำเป็นต้องมีความรู้ทางด้านนี้ก็ได้ สามารถเข้าไป Generate Schema ได้ที่ลิงก์นี้  คลิกขั้นตอนที่ 1 เข้ามาแล้วจะเจอตามภาพด้านบน สำหรับหน้านี้ให้เราเลือกประเภทของ schema ที่เราต้องการนะครับ จากตัวอย่างผมเลือกเป็น Articles หรือก็คือบทความนั่นเอง เสร็จแล้วให้เราใส่ url ของบทความที่เราจะทำ schema ลงไปที่ช่อง URL แล้วกด Start Taggingขั้นตอนที่ 2 สำหรับขั้นตอนนี้ ให้เราระบุข้อมูลที่ระบบต้องการสำหรับ Generate Schema ให้เราครับ จากภาพข้อมูลที่จำเป็นต้องมีคือ Name:ให้เรา Drag ที่ชื่อบทความด้านซ้ายมือแล้วเลือก Name แค่นี้ ชื่อบทความก็จะถูกนำไปกรอกใส่ช่อง Name: ทางด้านขวามือให้อัตโนมัติลองดูภาพประกอบภาพนี้เสร็จแล้วกด CREATE HTML เราก็จะได้ Code ที่พร้อมใช้งานตามภาพด้านล่าง copy เอาไปใส่ในบทความเราได้เลยจากที่ผมทดลองใช้งานดูก็สะดวกในระดับหนึ่ง ไม่ต้องมาเขียนโค๊ดเอง เหมาะสำหรับคนที่ไม่มีความรู้ด้านโปรแกรมก็ใช้งานได้ วิธีนี้สามารถนำไปใช้ได้กับทุกเว็บจะเขียนเองหรือเป็น cms ก็ใช้งานได้ WordPress มาทางนี้ ผมทดลองใช้หลาย ๆ ปลั๊กอิน จนได้ 2 ปลั๊กอินที่คิดว่าใช้งานง่ายเลยนำมาแนะนำให้ลองนำไปใช้กัน1.Schemaจากที่ทดลองใช้งานดู ปลั๊กอินนี้ทำออกมาได้ค่อนข้างยืดหยุ่น สามารถเพิ่ม Schema Type ที่เราต้องการได้ กำหนดได้ว่าต้องการให้ บทความไหนใช้ schema หรือไม่ ตั้งค่าโปรไฟล์ ข้อมูลพื้นฐานของเว็บไซต์เราที่จะแสดงใน schemaข้อเสียคือ ใส่เรทติ้ง (ดาว) เองไม่ได้2.WP SEO Structured Data Schemaจากที่ลองใช้ปลั๊กอินนี้ดูก็พบว่าใช้งานได้ค่อนข้างง่าย สามารถกำหนดประเภทของ schema ได้หลายประเภท ใส่เรทติ้ง (ดาว) เองก็ได้จะใส่กี่ดาวก็ตามใจเราเลย แต่ก็มีข้อเสียอยู่ข้อคือ ไม่ซัพพอร์ท Post Type ที่เป็นสินค้า ใครใช้ WooCommerce ก็อดนะครับ สรุปGoogle Rich Snippet ดีทั้งต่อ search engine และ user ดึงดูดให้...
Facebook Pixel with Google Tag Manager

Facebook Pixel with Google Tag Manager

Facebook Pixel สำหรับใครที่ทำงานด้าน Digital Marketing ผมมั่นใจว่าต้องได้ติดกันแน่นอน สำหรับออฟฟิศที่มี โปรแกรมเมอร์ก็อาจจะให้เค้าช่วยติดให้ได้ แต่ถ้าไม่มีล่ะ หรือโปรแกรมเมอร์งานยุ่งมาก ยังไม่ว่างติดให้หรอก เราจะทำยังไงดีFacebook Pixel with Google Tag Manager ถ้าใครเป็นคนที่ชอบอะไรที่ง่าย ๆ และรวดเร็ว CodingDee มีวิธีที่เหมาะกับคุณ ไม่ต้องรอโปรแกรมเมอร์ ไม่ต้องมีความรู้เรื่องการเขียนโปรแกรม ไม่กี่คลิกก็ติด Pixel ได้ มาดูวิธีกันเลย ใครยังไม่ได้ติด Google Tag Manager มาอ่านนี่ก่อนน่า  Google Tag Manager สำหรับ WordPress  ใครติดแล้วก็ไปต่อได้ วิธีสร้าง Pixelเข้าไปที่  Menu Pixels อยู่ใน Ads Manager คลิก  Create a Pixel ตั้งชื่อให้ Pixel ของเรา จะเป็นชื่อเว็บหรือชื่ออะไรก็ได้ตามใจชอบครับ คลิก ยอมรับเงื่อนไขการใช้งาน Click Create Pixel.อ่านวิธี Create Pixel เพิ่มเติมได้ ที่นี่หลังจากได้ Pixel มาแล้ว ขั้นตอนต่อไปเราจะนำ Pixel มาติดเข้ากับเว็บเราด้วย Google Tag Manager กันครับ วิธีติด Facebook Pixel ด้วย Google Tag Managerเข้าไปที่  Menu Pixels อยู่ใน Ads Manager คลิก Set Up Pixelคลิก Use an Integration or Tag Managerคลิก Google Tag Managerคลิก Quick Installหลังจากนั้นระบบจะให้เรา Login เข้า Account Google Tag Manager เสร็จแล้วเลือก Acccount ที่เราสร้างไว้ตามภาพเลือก Container ที่เราสร้างไว้คลิก Add New Tag Tag Name: ใส่ชื่อ Tag ตั้งว่า Facebook Pixel Event: เลือก PageView Firing Options: เลือก Once Per Page Firing Triggers: เลือก All Pages Parameters: ปล่อยว่างไว้ไม่ต้องใส่อะไร คลิก Add คลิก Next คลิก Publishถ้าได้ตามรูป แสดงว่าเราติด Pixel เสร้จเรียบร้อยแล้วกลับเข้าไปที่ Account Google Tag Manager ดูอีกครั้งก็จะเจอ Pixel Tag เพิ่มขึ้นมาขั้นตอนต่อไปเพื่อความชัวร์ว่า Pixel ทำงานได้จริงหรือเปล่า ให้เราเข้าไปที่เว็บของเราครับแล้วลองใช้ Chrome Extension  Facebook Pixel Helper  ตรวจดูครับว่า Pixel เราทำงานหรือไม่ (หลังจากติดตั้ง Extension แล้วให้สังเกตุมุมขวาบนของ Browser นะครับ) คลิกดูถ้าได้ตามภาพก็แสดงว่า Pixel เราทำงานได้ถูกต้องจบแล้ว หากอ่านแล้วชอบบทความจาก CodingDee ก็ฝาก กดไลค์เพจ ด้วยนะครับ จะได้ไม่พลาดข่าวสารเทคนิคดี ๆ จากเรา หรือติดปัญหาตรงไหนก็คอมเมนต์ไว้ด้านล่างนี้ได้ ไว้เจอกันบทความต่อไปครับ
Google Tag Manager สำหรับ WordPress

Google Tag Manager สำหรับ WordPress

Google Tag Manager เครื่องมือสุดเจ๋งที่ช่วยให้การทำงานของเราสบายขึ้นชนิดหน้ามือเป็นหลังมือ ใครติด Google Analytics แบบเดิม ๆ อยู่ แนะนำให้เปลี่ยนมาใช้แล้วชีวิตจะมีเวลาว่างเพิ่มขึ้นอีกเยอะGoogle Tag Manager คืออะไร ? ก่อนอื่นผมขอใช้คำย่อ Google Tag Manager ว่า gtm นะครับ gtm ก็คือเครื่องมืออีกที่ google ออกมาไว้ให้เราใช้สำหรับจัดการกับ tracking code ต่าง ๆ ภายในเว็บเรา ตัวอย่างสมมุติว่าผมต้องการจะติด Google Analytics ผมก็ต้องส่ง code ชุดนี้ไปให้ programmer เค้าติดให้โดยเพิ่ม code เข้าไปที่ tag head วันต่อมาผมอยากจะติด Facebook Pixel ผมก็ต้องส่ง code ชุดนี้ไปให้ programmer เค้าติดให้โดยเพิ่ม code เข้าไปที่ tag head วันต่อมาอีกผมอยากติด Yengo ผมก็ต้องส่ง code ชุดนี้ไปให้ programmer เค้าติดให้โดยเพิ่ม code เข้าไปที่ footerวนอยู่แบบนี้ ถ้าวันไหน programmer ไม่อยู่หรือบริษัทเราไม่มี programmer เราก็ติดเองไม่ได้ต้องเสียเวลาเพิ่มขึ้นอีกแล้วถ้าเรามีเงื่อนไขว่าต้องการให้ tracking code รันเฉพาะหน้าที่ต้องการหรือรันเฉพาะเหตุการณ์บางเหตุการณ์เท่านั้นล่ะ ทำไง ก็ต้องพึ่ง programmer อีก เห็นไหมครับว่า เวลาจะทำอะไรพวกนี้ต้องคอยพึ่ง programmer ตลอด ยิ่งใครที่ทำงานสาย Digital Marketing ยิ่งหนีพวกนี้ไม่ได้เลย เจอแน่นอน กับการติด tracking code โน่นนี่นั่น เต็มไปหมด ใช้นาน ๆ ไปก็ลืมแล้วว่าเราเคยติด tracking code อะไรไปบ้าง ตัวไหนใช้อยู่ ตัวไหนไม่ได้ใช้แล้ว เมื่อไหร่ถึงควรเปลี่ยนมาใช้ GTMอยากสบายก็เปลี่ยน อยากลำบากก็ไม่ต้องเปลี่ยน ถ้ากำลังเจอปัญหาแบบที่ผมเล่ามาด้านบนก็สมควรเปลี่ยนมาใช้ gtm ได้แล้วครับ แต่ถึงเว็บคุณทั้งเว็บจะมีแค่ ga ตัวเดียวผมก็ยังแนะนำให้มาใช้ gtm อยู่ดี เมื่อถูกบังคับให้ต้องเปลี่ยนมาใช้ ( นับมั๊ยข้อนี้ 55 )ข้อเสียต้องเรียนรู้วิธีการใช้ gtm เพิ่ม แหล่งเรียนรู้ภาษาไทยยังไม่ค่อยมีสักเท่าไหร่ ( ได้ฝึกภาษาไปในตัวเป็นข้อดีด้วยซ้ำเนอะ )จะเรียกว่าข้อเสียไหมก็ไม่เชิงเป็นข้อเสียนะ ผมว่ามันเป็นการพัฒนาเพื่อเพิ่ม skill ของเรามากกว่า Marketing ที่ใช้ gtm เป็นนี่ผมว่าโคตรเท่เลย เชื่อผมเถอะใช้ gtm แล้วสบายแน่นอน ถ้าใครพร้อมจะไปต่อก็มาลุยกันเลยบทความนี้ผมจะสอนเฉพาะการติด google analytics ใน gtm ให้ก่อนนะครับส่วนวิธีการใช้งานอื่น ๆ จะทยอยตามมาทีหลัง เปิดใช้งาน GTM กันก่อน คลิก วิธีสมัครผมไม่บอกนะเพราะมันง่ายมว๊าก โหลดปลั๊กอิน DuracellTomi's Google Tag Manager for WordPress มาติดตั้งให้เรียบร้อย โหลด Extension Tag Assistant (by Google) เอาไว้เช็คว่า gtm เราทำงานได้ถูกต้องหรือเปล่า Activate ปลั๊กอินด้วยนะตั้งค่า GTMLogin เข้าไปที่ Account GTM ที่เราสมัครไว้ คลิก CREATE ACCOUNTตั้งชื่อ Account ของเราตามใจชอบ (ไม่ต้องตั้งตามผมนะ) คลิก CONTINUEชื่อ Container ตรงนี้ใส่ชื่อเว็บเราไปได้เลย Where to Use Container คลิกที่ Web คลิก CREATE Google จะให้ถามว่าเรายอมรับเงื่อนไขข้อตกลงในการใช้งานของเค้าไหม คลิก YES เสร็จแล้วเราจะได้ GTM ID มา หน้าตาของ ID จะเป็นแบบนี้ GTM-xxxxxxx Copy GTM ID มาใส่ในปลั๊กอินตามวิธีด้านล่างตั้งค่าปลั๊กอินเข้าไปที่เมนู Settings...
Add To Cart

WooCommerce “วิธีแก้ไขปุ่ม Add To Cart” ให้ลูกค้าใช้ง่ายขึ้น

บทความนี้ CodingDee จะมาแชร์ประสบการณ์ที่เราได้ทดลองปรับปรุงปุ่ม Add To Cart สำหรับร้านค้า WooCommerce ว่าทำยังให้ลูกค้าสามารถใช้งานใน Mobile ได้ดีขึ้น กดได้ง่ายขึ้น มาดูวิธีทำกันเลยครับ  "วิธีแก้ไขปุ่ม Add To Cart" ให้ลูกค้าใช้ง่ายขึ้นปุ่มแบบเดิม ปุ่ม Add To Cart แบบเดิมที่ WooCommerce ให้มาเวลาลูกค้าเลื่อนดูรายละเอียดสินค้า ปุ่มมันจะไม่ตามไปเวลาเรา scoll ซึ่งใช้งานในโมบายได้ค่อนข้างยาก จะกดปุ่มแต่ละครั้งลูกค้าต้อง scoll กลับขึ้นมาด้านบนของเพื่อกด Add To Cartเรื่อง UI ยังไม่เป็นปัญหาเท่าไหร่แต่ UX นี้ไม่ดีเลย ผมเลยลองหาดูตัวอย่างจากเว็บ E-Commerce อื่น ๆ ว่าเค้าทำยังไง ผมเข้าไปดูที่ Lazada ว่าเค้าจัดการวางปุ่มพวกนี้ยังไงโดยเฉพาะเมื่อเข้าผ่านโทรศัพท์ปรากฏว่าเค้าใช้วิธีให้ปุ่มแสดงอยู่ที่ด้านล่างของจอใกล้ ๆ นิ้วหัวแม่มือเราเพื่อให้ง่ายแก่การกดปุ่ม Add To Cart และเวลา scoll อ่านรายละเอียดสินค้า ปุ่มนี้ก็ยังคงเลื่อนตามเราตลอด ทำให้ไม่ต้องเสียเวลาเลื่อนไปเลื่อนมา กดได้สะดวกขึ้น ลองดูภาพถัดไปเมื่อผมลองย้ายปุ่มมาไว้ด้านล่างปุ่ม Add To Cart โฉมใหม่ จากปัญหาที่ผมเจอมา ผมเลยไม่รอช้าจัดการย้ายปุ่มมาไว้ที่ด้านล่างของจอตามภาพเลย ส่วนวิธีทำก็ไม่ได้ยุ่งยากอะไร ( สำหรับ Dev ) แต่ยุ่งยากสำหรับคนที่ไม่ใช่ Dev ไหนจะต้องเขียน hook ไหนจะ เขียน html เขียน css อีก ต้องกำหนดให้แสดงปุ่มเฉพาะเข้าผ่านโทรศัพท์เท่านั้น แค่คิดก็มึนแล้ว ผมเลยเขียนเป็น Plugin ไว้ให้จัดการผ่าน Plugin ได้เลยยอมเหนื่อยครั้งเดียว ใครอยากลองใช้ดูก็โหลดได้ที่นี่ คลิก ปลั๊กอินนี้ทำอะไรได้บ้างปรับปุ่ม Add to cart ให้ใช้งานได้ง่ายขึ้นตามที่บอกไป เลือกสีปุ่มได้ เลือกข้อความที่แสดงบนปุ่มได้ เลือกได้ว่าต้องการให้แสดงเฉพาะ Mobile หรือแสดงทั้ง PC และ Mobileเมนูตั้งค่า หลังจากติดตั้งปลั๊กอินเสร็จให้สังเกตุที่เมนูด้านซ้ายคลิกเข้าไปที่เมนู Cart Settings ตามภาพเข้ามาจะเจอหน้าสำหรับตั้งค่าตามภาพEnable On Mobile Only ถ้าติ๊ก ปุ่มจะแสดงเฉพาะ Mobile ถ้าไม่ก็จะแสดงทั้ง PC และ Mobile Text on Button ใส่หรือไม่ใส่ก็ได้ถ้าไม่ใส่ ปลั๊กอินจะดึงข้อความ default ของ WooCommerce มาแทน Background Color Button สีของปุ่ม ถ้าสีไม่ถูกใจ ก็เปลี่ยนได้ตามใจชอบเลย ผมทำเป็น Color Picker ไว้ให้ใช้ได้ตามสะดวก สรุป เรื่อง UX & UI สำหรับผมแล้ว ผมเองก็ไม่ค่อยเก่งเรื่องนี้เท่าไหร่ ผมใช้วิธีหาดูตัวอย่างจากเว็บดัง ๆ ที่เข้าผ่านการปรับปรุงเรื่องพวกนี้มาแล้วว่ามันเหมาะกับ User แล้วก็เลียนแบบเค้ามาเลย เพราะ UX&UI พวกนี้กว่าจะได้ออกมาก็ต้องผ่านการทำ A/B Testing ทดลอง วิเคราะห์ และสรุปผล ออกมาแล้วว่าแบบไหนได้ผลดีที่สุดแต่ทั้งนี้ทั้งนั้นถึงเราจะเอามาใช้ในเว็บเราแล้วก็ต้องทำ A/B Testing ดูอีกครั้งเพื่อให้แน่ใจว่ามันเหมาะกับลูกค้าของเราจริง ๆ หรือไม่ บางทีมันอาจจะไม่ใช่อย่างที่เราคิดไว้ก็เป็นได้ จบแล้ว หากอ่านแล้วชอบบทความจาก CodingDee ก็ฝาก กดไลค์เพจ ด้วยนะครับ จะได้ไม่พลาดข่าวสารเทคนิคดี ๆ จากเรา หรือติดปัญหาตรงไหนก็คอมเมนต์ไว้ด้านล่างนี้ได้ ไว้เจอกันบทความต่อไปครับ
WP Fastest Cache

WP Fastest Cache ตั้งค่ายังไงให้เว็บลื่นหัวแตก

WP Fastest Cache ปลั๊กอินจัดการแคชที่ตั้งค่าได้ง่ายมาก ๆ เหมาะสำหรับใครที่ใช้ WordPress แล้วเว็บอืด เว็บช้า ลองปลั๊กอินนี้ดู เว็บ รับรองว่าเว็บโหลดได้เร็วปรี๊ด ลื่นหัวแตกแน่นอนWP Fastest Cache ตั้งค่ายังไงให้เว็บลื่นหัวแตก ปลั๊กอินนี้เป็นปลั๊กอินที่ CodingDee มักจะแนะนำให้ลูกค้าใช้งานอยู่เสมอเพราะมันใช้งานง่าย คลิกไม่กี่คลิกก็เสร็จ เว็บเร็วขึ้น โดยที่เราไม่จำเป็นต้องมีความรู้ด้านนี้ก็สามารถใช้งานได้ ไปดูวิธีตั้งค่ากันเลยครับก่อนอื่น โหลดปลั๊กอิน มาติดตั้งก่อน ใครลงปลั๊กอิน Cache ตัวอื่นอยู่ปิดก่อนนะครับเดี๋ยวมันตีกัน โหลดเสร็จแล้วก็เข้าไปตั้งค่าตามนี้เลย เข้าไปหลังบ้านแล้วตั้งค่าตามนี้ได้เลย Settingsเมนูนี้ให้ติ๊กทุกช่องที่เราสามารถเลือกได้แล้วกด SaveCache Timeoutกด Add New Rule แล้วตั้งค่าตามภาพ กด SaveImage Optimizationเมนูนี้เราจะใช้ปลั๊กอินนี้จัดการให้แทนครับ เว็บเร็วขึ้นด้วย Imagify สุดยอดปลั๊กอินลดขนาดรูปCDN Settingsคลิกที่ CDN by Photon ตามภาพเลือก CDN Url ตรงนี้เลือกตามใจชอบว่าจะเลือก Url ไหนนะครับ แล้วกด Nextเลือกประเภทของไฟล์รูปที่ต้องการใช้ CDN เลือกทุกช่องไปเลยแล้วกด Nextกด Next อีกครั้ง กด Finish เป็นอันเรียบร้อยจบแล้ว คราวนี้ลองเข้าเว็บของเราดูจะพบว่าพวก Url รูปภาพในเว็บเราจะถูกเรียกผ่าน CDN แล้ว ส่วนตัวผมคิดว่า ปลั๊กอินนี้เหมาะกับ User มาก ๆ เพราะใช้งานง่าย ตั้งค่าง่าย ไว้บทความต่อไปผมจะมาแนะนำวิธีตั้งค่า W3C Total Cache ปัจจุบันผมก็ใช้ปลั๊กอินนี้อยู่ รออ่านกันนะหากอ่านแล้วชอบบทความจาก CodingDee ก็ฝาก กดไลค์เพจ ด้วยนะครับ จะได้ไม่พลาดข่าวสารเทคนิคดี ๆ จากเรา หรือติดปัญหาตรงไหนก็คอมเมนต์ไว้ด้านล่างนี้ได้ ไว้พบกันบทความต่อไปครับ
ปลั๊กอิน

แจกปลั๊กอิน เปลี่ยนปุ่ม Add to Cart เป็นปุ่มแชทกับร้านค้า

แจกปลั๊กอิน เปลี่ยนปุ่ม Add to Cart ใน WooCommerce เป็นปุ่ม Facebook Messenger เพื่อให้ลูกค้า Chat สอบถามรายละเอียดก่อนสั่งซื้อแจกปลั๊กอิน เปลี่ยนปุ่ม Add to Cart เป็นปุ่มแชทกับร้านค้า สืบเนื่องจาก SeedThemes ได้แนะนำ วิธี เปลี่ยนปุ่ม Add to Cart เป็นปุ่มที่กดแล้วแชทกับร้านค้าได้ ใน WooCommerceผมก็เห็นว่าเป็นวิธีที่เจ๋งดีเลยแชร์มาที่เพจ CodingDee ให้ลูกเพจบ้างเผื่อใครยังไม่รู้ หลังจากแชร์ไปก็มี Request เข้ามาเยอะมาก ทำเป็นปลั๊กอินให้หน่อยสิแอดทำปลั๊กอินได้ไหม สุดท้ายผมเลยทำเป็น Plugin ไว้ให้ใช้ได้ง่ายขึ้นติดตั้งเสร็จแล้วคลิกที่  การตั้งค่า ตามภาพปลั๊กอินนี้ทำอะไรได้บ้าง จริง ๆ ก็ไม่มีอะไรพิเศษเพียงแต่ผมทำให้มันตั้งค่าได้สะดวกขึ้นอีกหน่อยเปิดปิด Plugin ได้ กำหนดความ กว้าง ความสูงของกล่อง Chat ในหน้าตั้งค่าปลั๊กอินได้เลย กำหนด ข้อความที่แสดงตรงปุ่ม Chat ได้เองวิธีใช้ก็กรอก App ID และ Facebook Page URL ก็เป็นอันจบ ใช้งานได้เลยจบแล้ว อย่าลืมลงปลั๊กอิน WP Featherlight – A Simple jQuery Lightbox ด้วย ไม่งั้น Popup ไม่ขึ้นนะ หากอ่านแล้วชอบบทความจาก CodingDee ก็ฝาก กดไลค์เพจ ด้วยนะครับ จะได้ไม่พลาดข่าวสารเทคนิคดี ๆ จากเรา หรือติดปัญหาตรงไหนก็คอมเมนต์ไว้ด้านล่างนี้ได้ ไว้พบกันบทความต่อไปครับ
วิธีติดตั้ง AMP

วิธีติดตั้ง AMP ใน WordPress

วิธีติดตั้ง AMP ใน WordPress ที่ทำให้บทความเราโหลดได้เร็วขึ้นมากกกกกกกก คิดเป็น 1/4 วิ ชนิดที่ว่า ดอมทอเร็ตโต้ยังต้องซูฮกให้วิธีติดตั้ง AMP ใน WordPress จากบทความที่แล้วที่ผมเขียนไว้คือ วิธีติดตั้ง Facebook Instant Articles สำหรับ WordPress หลังจากลองทำดูแล้วก็ร้องโหหหหห โหลดไวจังวะ แต่มันยังอีกวิธีที่สามารถทำให้หน้าบทความเราโหลดได้ไวไม่แพ้ Facebook Instant Articles เลยนั่นก็คือ AMP นั่นเอง เราไปดูกันเลยว่ามีขั้นตอนการทำอะไรบ้าง1. AMP โหลด แล้ว Activate ปลั๊กอินให้เรียบร้อย แค่นี้แหละ เสร็จแล้วเสร็จแล้วจริง ๆ นะก็ปลั๊กอินตัวนี้มันมีแค่นี้แหละติดตั้งแล้วก็จบ ลองเข้าหน้าบทความไหนดูสักหน้าก็ได้ แล้วเติม /amp ต่อท้าย url เราก็จะเจอกับบทความที่ปลั๊กอินมันแปลงให้ หน้าตาก็จะโล้น ๆ หน่อย ตัดโน่นตัดนี่หมด แทบไม่เหลืออะไรเลย เหลือแต่บทความเพียว ๆ ก็ไม่แปลกที่มันจะโหลดไว ตัดออกซะขนาดนั้นตอนผมทำแรก ๆ ก็เฮ้ยแล้วยังงี้ใครมันจะบ้ามาเติม /amp ท้ายบทความทุกครั้งที่จะเปิดเว็บล่ะ จริงมั๊ย ตอนแรกผมก็คิดวิธีว่าจะทำยังไงให้ user ไม่ต้องมาเติม /amp อารมณ์ประมาณว่าเปิดแล้วให้วิ่งไปหน้าเว็บเวอร์ชั่น AMP เลย รู้ไหมผมทำยังไง แก้โค๊ดครับ หลังจากทำเสร็จมันก็ได้ตามที่ต้องการอ่ะนะ แต่ถ้าคนอ่านบทความนี้ไม่ใช่ โปรแกรมเมอร์ล่ะ เค้าจะทำยังไง นั่นสิ ตูแก้โค๊ดไม่เป็นเหมือนเอ็งนะเฟ้ย ผมก็เลยคิด ๆๆ หาวิธีว่าทำยังไงจนสุดท้ายไปเจอพระเอกของเราครับ  ทำเสียงเปิดตัวแบบอลังการหน่อย แทด แท แด แทด ๆ แทด แทแด 2. AMP for WP – Accelerated Mobile Pagesอัพเดท 14/08/2017 ถ้าลงปลั๊กอิน AMP for WP – Accelerated Mobile Pages แล้วไม่ต้องลง AMP ในข้อหนึ่งนะครับใช้แทนกันได้เลย ผมแนะนำให้ใช้ลง ข้อ 2 ตัวเดียวพอแล้ว โหลด  เจ้าปลั๊กอินตัวนี้มันจะเป็นตัวที่ช่วยเราในเรื่องของการปรับแต่งหน้าตา Design บทความเรา เช่น Logo สี font อะไรแบบนี้ สามารถใส่ Ads ได้ด้วยนะ เจ๋งโคตร ผมทำวิธีตั้งค่าต่าง ๆ ไว้ให้แล้วดูกันต่อเลยให้เราเข้าไปที่เมนู AMP สังเกตดูมันจะอยู่เมนูล่าง ๆ รูปเฟือง เข้าไปเราก็จะเจอเมนูการตั้งค่าเพียบ เรียงจากบนลงล่างนะ Menu Generalเมนูนี้จะให้เราใส่โลโก้ที่จะแสดงบริเวณ Header ของหน้าบทความเรา ไม่มีไรมากก็อัพโลโก้ใส่เข้าไป จบ Menu Homepage ไม่ต้องทำอะไร ตั้งเป็น OFF ให้หมดเพราะเราจะให้มันเป็น AMP เฉพาะหน้าบทความเท่านั้น Menu Analytics เมนนูนี้สำหรับใครที่ติด Google Analytics หรือ Google Tagmanager ต้องดูให้ดี ๆ นะครับไม่งั้น Anylytics พังนะ อิอิ ตั้งตามภาพได้เลยครับ สำหรับใครที่ใช้เฉพาะ Google Analytics ทำตามภาพนี้ได้เลยใครใช้ Google Tagmanager ทำตามนี้Menu Design เมนูนี้เราสามารถตั้งค่าต่าง ๆ เช่น สี Background ใครอยากใส่ custom css ก็ใส่ได้ที่เมนูนี้ครับ Menu SEO ผมตั้งเป็น OFF ทั้งหมด เพราะไม่ต้องการให้ bot มา Index หน้าพวกนี้ เดี๋ยวจะกลายเป็น Duplicate เราต้องการแค่ให้ user เค้าเปิดอ่านบทความได้เร็วขึ้นเท่านั้น ส่วนพวก meta description ต่าง ๆ ก็ให้ bot ไปเก็บจาก url ต้นฉบับแทน Menu Advertisement ตามชื่อเลยครับ เมนูนี้ก็ไว้สำหรับใส่ Ads นั่นเอง Menu Single เมนูนี้จะเป็นการตั้งค่าหน้าบทความว่าจะให้แสดงอะไรบ้าง เช่น บทความที่เกี่ยวข้องให้ดึงมาจาก Category หรือ ดึงจาก Tag ให้แสดงกี่บทความ ให้แสดง Social Icons...
ระบบลางานออนไลน์

ระบบลางานออนไลน์ ด้วย WordPress

ใครที่กำลังหาแนวทางหรือมีแผนว่าจะทำระบบลาให้พนักงานใช้แนะนำให้อ่านบทความนี้ครับ เพราะ ระบบลางานออนไลน์ ใน WordPress ก็มีให้ใช้และที่สำคัญคือมันฟรี ไม่เสียตังค์ เพียงแค่โหลดปลั๊กอินนี้มาติดตั้งและตั้งค่าโปรแกรมอีกสักเล็กน้อยก็พร้อมใช้งานแล้วครับระบบลางานออนไลน์ ด้วย WordPress ผมขอเกริ่นให้ฟังก่อน แรกเริ่มเลยบริษัทที่ผมทำงานอยู่เช่าใช้ระบบลางานออนไลน์แห่งหนึ่งอยู่ คิดเป็นรายเดือนก็ เดือนละประมาณ 9 พันกว่าบาท ฟีเจอร์หลัก ๆ ที่  User ใช้งานก็มีตามนี้พนักงานลางาน ส่งเมลแจ้งหัวหน้างาน หัวหน้างาน อนุมัติ/ไม่อนุมัติ ส่งเมลแจ้งผลกลับไปยังพนักงานที่ขอลาฟีเจอร์สำหรับ HR ใช้งานก็มีตามนี้เพิ่มข้อมูลพนักงาน แผนก กำหนดประเภทการลา ลากิจ ลาป่วย ลาบวช ลาคลอด ลาอะไรก็ว่าไปขึ้นอยู่กับความต้องการ Assign ประเภทการลาที่สร้างจากข้อ 1 ให้กับพนักงานโดยแต่ละประเภทการลากับพนักงานแต่ละคนก็ไม่เหมือนกัน เช่น พนักงานหญิงก็จะมีสิทธ์ลาคลอด พนักงานชายก็มีสิทธ์ลาบวช อะไรประมาณนี้ สามารถ Approve หรือ Reject ลาที่พนักงาน Request เข้ามาได้ ในกรณีที่หัวงานไม่ได้อนุมัติให้หรือเหตุผลอื่น ๆ ตั้งได้ว่าพนักงานแผนกนี้ Request ลาแล้วให้ส่งไปหาใคร ส่วนใหญ่ก็จะเป็น Manager ของแผนกนั้น ๆ เป็นต้น ดู Log การลาได้ ว่าใครลาอะไรไปบ้างปัญหาที่พบเจอไม่รองรับอุปกรณ์ Mobile ไม่ Responsive นั่นเอง เมลแจ้งเตือนไม่เข้า หรือเข้า Junk ระบบลาทำงานช้าสุดท้ายเลยมาเจอ Plugin ระบบลางานออนไลน์ใน WordPress Plugin ตัวนี้ทำงานได้ทุกข้อตามที่เขียนมาข้างบน และแก้ปัญหา 3 ข้อข้างบนนี้ได้ทุกข้อด้วยResponsive ก็มัน WordPress เนอะมันก็มีของมันอยู่แล้ว เมลไม่เข้าอันนี้ SMTP ช่วยได้ อันนี้ระบบเราเองมีแต่พนักงานเราใช้ เรา Optimize ระบบได้ถ้ามันช้า มันฟรี เหอ ๆ ลดค่าใช้จ่ายไปได้เป็นแสนต่อปีเลยนะพอเห็นแบบนี้แล้วก็ช้าอยู่ทำไมลองเอามาใช้กันเลยสร้าง subdomain ขึ้นมาไว้สำหรับระบบลาโดยเฉพาะ คือ leave.domain.com ลง WordPress ให้เรียบร้อย โหลดปลั๊กอินระบบลางานออนไลน์มาลง คลิก เพิ่มข้อมูลพนักงาน ข้อมูลการลา ข้อนี้จะใช้เวลาสักหน่อยถ้ามีจำนวนพนักงานเยอะทดลองใช้งาน จากที่ทดลองใช้งานระบบลานี้ดูแล้วก็เจอปัญหาอยู่นิดหน่อยคือมันลาครึ่งวันไม่ได้ ต้องลาเต็มวัน แต่มีหมายเหตุให้ใส่นะ ผมแก้ปัญหาโดยใส่หมายเหตุว่าลาครึ่งวัน ไม่มีให้แนบไฟล์ ในกรณีที่เราจะแนบเอกสารประกอบการลาเช่น ใบรับรองแพทย์ ข้อนี้ไม่เท่าไหร่ เพราะยังไงสุดท้ายแล้วก็ต้องเอาเอกสารมาให้ HR อยู่ดี Manager ต้อง login เข้ามาดูในระบบ ถึงจะสามารถ Approve / Reject ลาที่ลูกน้อง Request มาได้แต่ผมอยากให้สามารถทำได้ผ่านเมลที่ส่งไปเลยจะได้สะดวกไม่ต้อง Login ข้อนี้ผมก็ปรับโค๊ดเอา แรก ๆ ก็ลำบากอยู่เหมือนกันกว่าจะปรับโค๊ดแล้วทำให้ได้ตามที่เราต้องการสรุป ผมติดอยู่นิดหน่อยตรงที่ลาครึ่งวันไม่ได้เนี่ยแหละ ก็มันของฟรีนี่น่า ไม่เป็นไรข้อนี้หยวน ๆ ใครอยากลองเอาไปใช้ก็ลองดูครับ ปัจจุบันผมก็ใช้ให้บริษัทอยู่ พนักงานประมาณ 30 กว่าคนไม่มีปัญหาอะไรครับ ไม่แน่ว่าเวอร์ชั่นใหม่ ๆ ทางผู้พัฒนาเค้าอาจจะปรับแก้ให้ลาครึ่งวันและแนบไฟล์ได้ก็ได้ หากอ่านแล้วชอบบทความจาก CodingDee ก็ฝาก กดไลค์เพจ ด้วยนะครับ จะได้ไม่พลาดข่าวสารเทคนิคดี ๆ จากเรา หรือติดปัญหาตรงไหนก็คอมเมนต์ไว้ด้านล่างนี้ได้ ไว้เจอกันบทความต่อไปครับ

Google Tag Manager

Facebook Pixel with Google Tag Manager

Facebook Pixel สำหรับใครที่ทำงานด้าน Digital Marketing ผมมั่นใจว่าต้องได้ติดกันแน่นอน สำหรับออฟฟิศที่มี โปรแกรมเมอร์ก็อาจจะให้เค้าช่วยติดให้ได้ แต่ถ้าไม่มีล่ะ หรือโปรแกรมเมอร์งานยุ่งมาก ยังไม่ว่างติดให้หรอก เราจะทำยังไงดีFacebook Pixel with Google Tag Manager ถ้าใครเป็นคนที่ชอบอะไรที่ง่าย ๆ และรวดเร็ว CodingDee มีวิธีที่เหมาะกับคุณ ไม่ต้องรอโปรแกรมเมอร์ ไม่ต้องมีความรู้เรื่องการเขียนโปรแกรม ไม่กี่คลิกก็ติด Pixel ได้ มาดูวิธีกันเลย ใครยังไม่ได้ติด Google Tag Manager มาอ่านนี่ก่อนน่า  Google Tag Manager สำหรับ WordPress  ใครติดแล้วก็ไปต่อได้ วิธีสร้าง Pixelเข้าไปที่  Menu Pixels อยู่ใน Ads Manager คลิก  Create a Pixel ตั้งชื่อให้ Pixel ของเรา จะเป็นชื่อเว็บหรือชื่ออะไรก็ได้ตามใจชอบครับ คลิก ยอมรับเงื่อนไขการใช้งาน Click Create Pixel.อ่านวิธี Create Pixel เพิ่มเติมได้ ที่นี่หลังจากได้ Pixel มาแล้ว ขั้นตอนต่อไปเราจะนำ Pixel มาติดเข้ากับเว็บเราด้วย Google Tag Manager กันครับ วิธีติด Facebook Pixel ด้วย Google Tag Managerเข้าไปที่  Menu Pixels อยู่ใน Ads Manager คลิก Set Up Pixelคลิก Use an Integration or Tag Managerคลิก Google Tag Managerคลิก Quick Installหลังจากนั้นระบบจะให้เรา Login เข้า Account Google Tag Manager เสร็จแล้วเลือก Acccount ที่เราสร้างไว้ตามภาพเลือก Container ที่เราสร้างไว้คลิก Add New Tag Tag Name: ใส่ชื่อ Tag ตั้งว่า Facebook Pixel Event: เลือก PageView Firing Options: เลือก Once Per Page Firing Triggers: เลือก All Pages Parameters: ปล่อยว่างไว้ไม่ต้องใส่อะไร คลิก Add คลิก Next คลิก Publishถ้าได้ตามรูป แสดงว่าเราติด Pixel เสร้จเรียบร้อยแล้วกลับเข้าไปที่ Account...