WordPress

บทความนี้ผมจะมาแชร์ประสบการณ์การเปลี่ยนธีมจาก The7 มาใช้ Newspaper 8 เนื่องจากเว็บ CodingDee.com ครบรอบ 1 ปี พอดีผมเลยอยากจะปรับเปลี่ยนธีมของเว็บให้มันอ่านง่ายกว่าเดิม เลยลองหาธีมที่เหมาะกับการอ่านบทความที่ อ่านง่าย โหลดเร็ว จนผมมาเจอ Newspaper นี่แหละ แชร์ประสบการณ์เปลี่ยนธีมจาก The7 มาใช้ Newspaper8 ก่อนหน้านี้ผมใช้ธีม The7 อยู่นะครับแต่ผมรู้สึกว่ามันยังไม่ค่อยเหมาะกับเว็บแนวเว็บ blog สักเท่าไหร่ เลยอยากเปลี่ยนอยู่แล้วแต่ยังไม่ค่อยมีเวลา โดยสิ่งที่ผมจะเขียนต่อไปนี้เป็นความคิดเห็นส่วนตัวผมล้วน ๆ นะครับ แค่อยากแชร์ให้ฟังเฉย ๆ ไม่จำเป็นต้องเปลี่ยนธีมตามผมนะ ขึ้นอยู่กับความต้องการส่วนตัวเราว่าต้องการธีมแบบไหน คุณสมบัติธีมที่ผมต้องการ โหลดเร็ว เหมาะแก่การติด ads เหมาะกับเว็บ Blog ใช้งานง่าย ติดตั้งไม่ยุ่งยาก จาก 4 ข้อที่ว่ามา The7 ยังไม่ตอบโจทย์สำหรับผมมี 3 ข้อคือ ความเร็วในการโหลดหน้าเว็บยังช้าอยู่ ไม่เหมาะกับการติด ads ไม่เหมาะกับเว็บ Blog ผมก็หาธีมไปเรื่อย ๆ ตามคุณสมบัติที่ผมต้องการจนมาเจอ Newspaper 8 ซึ่งตอบโจทย์ ข้อ 2,3,4 เหลือข้อ 1 ซึ่งยังไม่รู้ว่าจะประสิทธิภาพจะโหลดได้เร็วแค่ไหนต้องมาเสี่ยงเอา ผมชั่งใจอยู่พักนึง...

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 หน้าตาการใช้งานเรียบง่ายมาก การสร้างฟอร์มทำได้สะดวก เราสามารถลากฟิลด์มาวางได้เลย มีฟิลด์ให้เลือกเพียบ วันที่,...

WPScan เครื่องมือที่ชาวเวิร์ดเพรสจำเป็นต้องรู้ ผมใช้เวลาไตร่ตรองอยู่นานพอสมควรว่าจะเขียนบทความนี้ดีไหม เพราะมันเปรียบเสมือนดาบสองคม ถ้านำไปใช้ในทางที่ดีก็ดีไป แต่ถ้านำไปใช้ในทางที่ผิดก็อาจจะทำให้ตัวเองและคนอื่นเดือนร้อนได้เหมือนกัน WPScan เครื่องมือที่คนใช้เวิร์ดเพรสต้องรู้ wpscan คือเครื่องมือที่ใช้ในการตรวจสอบช่องโหว่เว็บที่ทำด้วยเวิร์ดเพรส เช่น หาช่องโหว่ของปลั๊กอิน หาช่องโหว่ของธีม หาช่องโหว่ของตัวเวิร์ดเพรสเอง Brute force บทความนี้ผมจะมาแนะนำทั้งวิธีใช้งานและวิธีป้องกันเลยนะครับ ถ้าพร้อมแล้วเรามาเริ่มกันเลย ติดตั้ง WPScan อันดับแรกเราก็ต้องติดตั้งเครื่องมือที่เราจะใช้กันซะก่อน ดาวน์โหลดและติดตั้งตามคู่มือจากเว็บหลักของเค้าได้ที่นี่เลย  wpscan.org Environment ที่ผมใช้ในการทดสอบครั้งนี้ WordPress 4.8.1 เวอร์ชั่นล่าสุด Theme Storefront 2.2.5 เวอร์ชั่นล่าสุด Plugins WooCommerce 3.1.2 เวอร์ชั่นล่าสุด ตัวอย่างวิธีใช้งาน Scan Username ก่อนจะ Brute force ได้เราต้องรู้ username ก่อนว่าเว็บนี้ใช้ username อะไร มี 2 วิธีที่เราจะได้มา หาในหน้าบทความส่วนท้ายของบทความมักจะมีรายละเอียด ชื่อผู้เขียนอยู่ อลงดูภาพข้างล่างนี้ครับ โดยค่าเริ่มต้นที่ wordpress ให้มามันใช้ชื่อเล่นและ username เป็นชื่อเดียวกันถ้าเราไม่ได้ไปเปลี่ยนมัน มันก็จะใช้ค่าเริ่มต้นที่ระบบกำหนดมา จากรูปผมตั้ง username ชื่อ admin และไม่ได้ไปเปลี่ยนชื่อเล่น ระบบมันก็จะใช้ชื่อ username เป็นชื่อเล่นและนำมาแสดงในรูปที่ผมให้ดู วิธีที่ 2 ใช้เครื่องมือสแกนดังนี้ ใช้เวลาแค่ 39 วินาทีเราก็จะได้ชื่อ username มาตามภาพ ตัวอย่างวิธีใช้งาน Brute...

Google Rich Snippet คือ โค๊ดชุดหนึ่งที่ช่วยบอก search engine ให้เข้าใจว่า หน้านี้หรือบทความนี้ คืออะไร เกี่ยวข้องกับอะไร เช่น ถ้าบทความนี้เป็นบทความที่เกี่ยวกับสินค้า ก็ควรจะมีข้อมูลที่เกี่ยวกับ ชื่อสินค้าชื่ออะไร ราคาเท่าไหร่ ผู้ขายเป็นใคร เป็นต้น ถ้าเรามีข้อมูลพวกนี้ก็จะช่วยให้ search engine เข้าใจได้ง่ายขึ้นและนำไปแสดงผลให้ user ดูเวลาค้นหา keyword ที่เกี่ยวข้องกับบทความเรา Google Rich Snippet นอกจากจะเป็นผลดีกับ search engine แล้วยังเป็นผลดีกับ user ด้วย เพราะช่วยให้ user เข้าใจรายละเอียดเบื้องต้นของหน้านั้นได้โดยที่ไม่ต้องคลิกเข้าดู ลองดูภาพประกอบต่อไปนี้ จากภาพจะมีการแสดงจำนวนดาว และคะแนน ของบทความนี้ว่าได้เท่าไหร่ เป็นตัวช่วยในการตัดสินใจของ user ได้ในขั้นต้นว่าจะคลิกเข้าไปอ่านหรือไม่  การแสดงผลแบบนี้เรียกว่า  Google Rich Snippets   คราวนี้เราลองมาดูรูปด้านล่าง ที่ไม่มีดาว ดูแล้วก็รู้สึกธรรมดาไม่ได้โดดเด่นอะไร เทียบกันกับ รูปด้านบน รูปที่มีดาวดึงดูดให้อยากคลิกมากกว่าแน่นอน วิธีตรวจดูว่าบทความที่เราเขียนมี structure data หรือไม่ คลิก  แล้วกรอก url เว็บที่เราต้องการลงไปแล้วกด RUN...

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 เพิ่มเติมได้ ที่นี่ หลังจากได้...

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...

บทความนี้ 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...

WP Fastest Cache ปลั๊กอินจัดการแคชที่ตั้งค่าได้ง่ายมาก ๆ เหมาะสำหรับใครที่ใช้ WordPress แล้วเว็บอืด เว็บช้า ลองปลั๊กอินนี้ดู เว็บ รับรองว่าเว็บโหลดได้เร็วปรี๊ด ลื่นหัวแตกแน่นอน WP Fastest Cache ตั้งค่ายังไงให้เว็บลื่นหัวแตก ปลั๊กอินนี้เป็นปลั๊กอินที่ CodingDee มักจะแนะนำให้ลูกค้าใช้งานอยู่เสมอเพราะมันใช้งานง่าย คลิกไม่กี่คลิกก็เสร็จ เว็บเร็วขึ้น โดยที่เราไม่จำเป็นต้องมีความรู้ด้านนี้ก็สามารถใช้งานได้ ไปดูวิธีตั้งค่ากันเลยครับ ก่อนอื่น โหลดปลั๊กอิน มาติดตั้งก่อน ใครลงปลั๊กอิน Cache ตัวอื่นอยู่ปิดก่อนนะครับเดี๋ยวมันตีกัน โหลดเสร็จแล้วก็เข้าไปตั้งค่าตามนี้เลย เข้าไปหลังบ้านแล้วตั้งค่าตามนี้ได้เลย https://www.youtube.com/watch?v=bXgMXK_2JfA Settings เมนูนี้ให้ติ๊กทุกช่องที่เราสามารถเลือกได้แล้วกด Save Cache Timeout กด Add New Rule แล้วตั้งค่าตามภาพ ตั้งไว้ให้ Clear Cache วันละ 1 ครั้งเวลา ตี 3.00 น. แล้วกด Save Image Optimization เมนูนี้เราจะใช้ปลั๊กอินนี้จัดการให้แทนครับ เว็บเร็วขึ้นด้วย Imagify สุดยอดปลั๊กอินลดขนาดรูป CDN Settings คลิกที่ CDN by Photon ตามภาพ เลือก...

แจกปลั๊กอิน เปลี่ยนปุ่ม 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 ก็เป็นอันจบ ใช้งานได้เลย จบแล้ว อย่าลืมลงปลั๊กอิน...

วิธีซ่อนเวอร์ชั่น WordPress ไม่ให้ใครรู้ เป็นอีกวิธีที่ช่วยเพิ่มความปลอดภัยให้กับเว็บเรา ลองอ่านและนำไปปรับใช้กันดูครับ วิธีซ่อนเวอร์ชั่น WordPress บทความนี้ทีมงาน CodingDee จะมาแนะนำวิธีซ่อนเวอร์ชั่น WordPress ไม่ให้ใครรู้กันครับ ผลกระทบที่อาจจะเกิดขึ้น ถ้าเราไม่ซ่อนเวอร์ชั่น WordPress จะส่งผลกระทบอะไรบ้างมาดูเหตุการณ์จำลองกัน สมมุติว่าผมเป็นผู้ไม่หวังดีอยากจะโจมตีเว็บ ๆ นึง สิ่งแรกที่ผมจะทำคือหาข้อมูลของเป้าหมายก่อนว่าเค้าใช้ Server อะไร  เวอร์ชั่นอะไร ใช้ CMS ค่ายไหน เวอร์ชั่นอะไร ฯลฯ ยิ่งเราได้ข้อมูลพวกนี้มากเท่าไหร่ เราก็สามารถนำมาวิเคราะห์หาช่องโหว่และวิธีการโจมตีได้มากขึ้นเท่านั้น ถ้าไปเจอ WordPress Version ตำ่ กว่า 4.7.0 เสร็จเลยครับ ช่องโหว่เพียบเลย ผมเคยเจอบางเว็บยังใช้ WordPress เวอร์ชั่น 3.8.x อยู่ก็มี ถ้าใครเคยดู The Fast and the Furious ภาคที่ลากตู้เซฟอ่ะ ผมจำภาคไม่ได้ว่าภาคไหน จะมีอยู่ช่วงหนึ่งที่ฝ่ายของตัวเอกแบ่งทีมกันออกไปเก็บข้อมูลของเป้าหมาย ว่าใช้ตู้เซฟยี่ห้ออะไร รุ่นอะไร เก็บไว้ที่ไหน แล้วนำข้อมูลที่ได้มาวิเคราะห์ หาวิธีการโจมตีต่อไป เห็นไหมครับว่าข้อมูลพวกนี้ถ้าเราไม่ปิดไว้ มันไม่เป็นผลดีกับเราเลย วิธีซ่อนก็ไม่ยากอะไรมากมาย มาดูวิธีทำกันเลยครับ อัพเดทเวอร์ชั่นใหม่เสมอ วิธีนี้เป็นวิธีที่ดีครับ คือ Update WordPress ให้เป็นเวอร์ชั่นล่าสุดอยู่เสมอ แต่ก็อาจจะมีบางสาเหตุที่เรายังไม่สามารถ Update...