Category: WordPress Development
กำหนด URL structure ได้ตามใจด้วย AltoRouter
อธิบายก่อนว่าเมื่อประมาณต้นปีที่ผ่านมา ผมได้ทำเว็บไซต์เว็บหนึ่งที่ภายในเว็บไซต์จะมี whitepaper ให้ดาวน์โหลด ซึ่งก่อนโหลดจะต้องมีการกรอกฟอร์มก่อน แล้วค่อย redirect ไปที่อีก URL หนึ่ง ซึ่งมันก็เป็น permalink เดิมแหละ แค่ต้องมีพารามิเตอร์เพิ่มเข้ามา ปกติแล้วเราก็ใช้วิธีเพิ่ม query string เข้าไป เช่น URL เดิมเป็นแบบนี้ เราก็เติม query string เข้าไปเป็นแบบนี้ แล้วในเท็มเพลตเราก็เช็คค่าจาก $_GET[‘download’] เอาตามปกติ แต่ว่าการใส่ query string นั้นมันดูขัดหูขัดตาเหลือเกิน เราเลยจะแก้ไขให้มันเป็น pretty permalink แบบนี้
Regular และ Extended license บน Envato Market
ใครที่เคยซื้อธีมและปลั๊กอินจากบน Envato Market ไม่ว่าจะเป็น Themeforest หรือ Codecanyon (และอื่นๆ อีกมากมาย) จะต้องเจอกับตัวเลือกว่าจะซื้อธีมหรือปลั๊กอินนั้นๆ ด้วยไลเซนส์แบบไหน และที่เราเจอกันบ่อยที่สุดก็คือ Regular และ Extended license เวลาเราถามว่าไลเซนส์ทั้งสองแบบนั้นต่างกันอย่างไร เราจะได้ข้อสรุปสั้นๆ ว่าแบบ Regular ไม่สามารถเอาไปขายต่อได้ ส่วน Extended สามารถเอาไปขายต่อได้ ซึ่งแน่นอนว่างง ขายต่อได้ ขายยังไง ทำงานขายลูกค้าต้องใช้ extended มั้ย เดี๋ยวจะมาอธิบายให้ฟังกัน
การส่งค่าจาก PHP ไปหา JavaScript ใน WordPress
เวลาเราทำเว็บด้วย WordPress และมีการต้องมาเกี่ยวข้องกับการเขียน JavaScript ในหลายครั้งจะต้องมีการเรียกใช้ค่าจากฝั่ง PHP เนื่องด้วย PHP และ JavaScript นั้นทำงานคนละที่กัน (PHP ทำงานบนเซิร์ฟเวอร์ และ JavaScript ทำงานฝั่งเบราเซอร์) ทำให้เราจะส่งค่าจาก PHP ไปให้ JavaScript โดยตรงไม่ได้ ทางออกที่เจอกันบ่อยๆ คือให้ PHP ทำการ echo ค่านั้นๆ ออกมาแล้ว JavaScript จึงนำเอาไปใช้ ทีนี้ปัญหาอยู่ที่ในไฟล์ .js นั้นเราไม่สามารถแทรกคำสั่ง PHP ลงไปได้ ดังนั้นท่าที่เราเจอบ่อยที่สุดท่าหนึ่งก็คือการเขียน JS แทรกลงไปในไฟล์เท็มเพลต และ echo ค่าจาก PHP ลงไปตรงนั้น วิธีนี้แม้จะทำให้ได้ผลลัพธ์ที่ต้องการได้ แต่ก็ทำให้โค้ดรก และต้องเอาโค้ด JS มาปะปนอยู่ในไฟล์เท็มเพลตด้วย
สร้างบล็อค Gutenberg แบบง่ายๆ ด้วย Advanced Custom Fields
หลังจากที่เวิร์ดเพรส 5.0 ได้นำเสนอ Gutenberg ซึ่งเป็นตัวแก้ไขเนื้อหาตัวใหม่ที่เขียนด้วยจาวาสคริปท์ออกมา ก็ได้มีเครื่องมือหลายตัวถูกปล่อยออกมาเพื่อช่วยให้เราสามารถสร้างบล็อค Gutenberg เพิ่มเติมได้ง่ายขึ้นเช่น create-guten-block ที่เราเคยพูดถึงไปบ้างแล้ว สำหรับใครที่ทำเว็บใหญ่ๆ ด้วยเวิร์ดเพรสมาก่อน คงคุ้นเคยกับปลั๊กอินคู่บุญชาวเวิร์ดเพรสอย่าง Advanced Custom Fields เป็นอย่างดี ซึ่งตัวมันนั้นครอบคลุมสากเบือยันเรือรบ เช่นทำ Custom field ให้กับ Post, Page, Category, User, ไปจนถึงฟิลด์ของ Widget, และหน้า Option ของธีม และแน่นอนว่า Advanced Custom Fields ก็ไม่พลาดที่จะโดดมาร่วมวงกับ Gutenberg ด้วย และได้เพิ่มฟีเจอร์รองรับการสร้างบล็อค Gutenberg เข้ามาใน ACF Pro 5.8
เขียนธีม WordPress ด้วย Sage 9 – ตอนที่ 4 ควบคุมข้อมูลด้วย Controller
จากตอนที่ผ่านๆ มา เราได้กล่าวถึง Controller กันไปบ้างแล้ว โดยในแนวคิดการเขียนโปรแกรมแบบ MVC นั้น ส่วนของการแสดงผลและการประมวลผลจะแยกออกจากกันอย่างชัดเจน และจะช่วยให้เราสามารถนำเอาส่วนการแสดงผล (หรือ View) กลับมาใช้งานใหม่ได้สะดวกขึ้น ให้ลองนึกตามว่าเรากำลังทำเว็บอยู่เว็บหนึ่ง โดยในเว็บจะมีอยู่ส่วนหนึ่งที่เป็นการดึงข้อมูลจาก 3 แหล่งข้อมูลมาแสดง (สมมุติว่าเป็น Post, ข้อมูลจาก API, และข้อมูลจาก Database ที่เราเพิ่มเอง) แต่ว่าในส่วนการแสดงผลนั้นจะใช้โครง HTML เหมือนกันทั้งหมด ท่ามาตรฐานที่เราทำกันบ่อยๆ นั่นคือสร้างไฟล์ Partial Template ขึ้นมาไฟล์หนึ่ง จากนั้นเขียนโค้ดตรวจสอบว่าเท็มเพลตนี้ถูกเรียกจากตรงไหน แล้วค่อยดึงข้อมูลตามที่ต้องการออกมา หรือบางคนเถื่อนหน่อยก็อาจจะสร้างเท็มเพลตขึ้นมา 3 ไฟล์สำหรับแต่ละส่วนเลย แล้ว include เข้ามาเป็นส่วนๆ ไป ซึ่งแต่ละวิธีนั้นก็จะมีความยุ่งยากต่างกันออกไป Controller พระเอกที่จะมาแก้ปัญหานี้ ตามหลักการของ MVC แล้ว View และ Controller จะแยกออกจากกันอย่างอิสระ View ไม่จำเป็นต้องรับรู้ว่ามันอยู่ตรงไหน ต้องไปดึงข้อมูลจากอะไร โดย […]
เขียนธีม WordPress ด้วย Sage 9 – ตอนที่ 3 Blade Template Engine
ในสองตอนที่ผ่านมาเราได้แนะนำเกี่ยวกับ Sage 9 ไปคร่าวๆ แล้ว ซึ่งรวมไปถึงสร้างโปรเจ็กท์และการใช้จัดการแพ็คเกจต่างๆ ในขั้นต้นด้วย ปละในตอนที่ 3 นี้เราจะมาพูดถึงหัวใจสำคัญส่วนหนึ่งของ Sage 9 นั่นคือ Blade Template Engine ครับ Blade Template Engine แต่เดิมนั้นเป็นระบบเท็มเพลตของเฟรมเวิร์ก Laravel ซึ่งตามคอนเส็ปท์ของมันนั้นจะช่วยให้นักพัฒนาสามารถเขียนเท็มเพลตเพิ่มเติมได้โดยไม่จำเป็นต้องเขียนโค้ดซ้ำในส่วนเดิม ทำไมต้องใช้ Blade? แม้ว่าเวิร์ดเพรสจะมีระบบเท็มเพลตของตัวเองอยู่แล้ว แต่จริงๆ แล้วระบบเท็มเพลตของเวิร์ดเพรสนั่นเป็นแค่การเอาฟังก์ชัน PHP ธรรมดาๆ ไปโยนใส่ไว้ในไฟล์เท็มเพลตที่เป็นไฟล์ PHP ธรรมดาเท่านั้น ซึ่งในระยะยาวแล้วหากเว็บเราทำงานซับซ้อนยิ่งขึ้น โค้ดเหล่านี้ก็จะพันกันยุ่งเหยิงจนอ่านได้ลำบาก อีกทั้งในหลายๆ ครั้งเรายังจำเป็นต้องเขียนโค้ดการทำงานซ้ำในหลายๆ หน้าด้วย (ตัวอย่างชัดๆ คือการสั่ง include header และ footer เข้ามา ที่จำเป็นต้องทำในทุกๆ หน้า) แต่ด้วยคอนเส็ปท์ของ Blade นั้นที่อาศัยการเขียนโครงหลักและขยายออกไปเรื่อยๆ ทำให้เราสามารถเลี่ยงการเขียนโค้ดซ้ำในจุดนี้ลงไปได้ อีกทั้ง Blade ยังทำหน้าที่เป็น Views […]
ปิด auto update ให้ปลั๊กอินเป็นรายตัว
จากงานล่าสุดของผมเอง ได้เจอปัญหาหนึ่งกับปลั๊กอิน GD Star Rating ว่าเกิดปัญหา Allowed Memory Size Exhausted หลังจากอัพเกรดไปเป็นรุ่น 2.4 โดยปัญหาเกิดจากการเรียกใช้ฟังก์ชัน gdrts_render_rating() โดยตรงในไฟล์เท็มเพลตเท่านั้น ซึ่งทางแก้คือดาวน์เกรดกลับไปใช้รุ่น 2.3.2 ชั่วคราว ปัญหาคือระบบอัพเดทของเวิร์ดเพรสยังคงแจ้งเตือนว่ามีอัพเดทอยู่ ซึ่งหากจะปิดระบบแจ้งเตือนอัพเดทไปทั้งหมด ก็จจะทำให้พลาดการแจ้งเตือนอัพเดทอื่นๆ ไปด้วย ดังนั้นเลยเลือกที่จะปิดแจ้งเตือนเป็นรายตัวดีกว่า หลักการคือเราจะฮุคเข้าไปในฟิลเตอร์ pre_set_site_transient_update_plugins ซึ่งเป็นฟิลเตอร์ของข้อมูลที่ใช้ตรวจสอบรุ่นของปลั๊กอิน และเราจะทำการ unset ตัวแปรที่เก็บข้อมูลอัพเดทปลั๊กอินที่เราต้องการปิดออกไป โดยชื่อปลั๊กอินและรุ่นที่ต้องการล็อคเอาไว้จะส่งเข้ามาผ่านฟิลเตอร์ wp63_lock_plugin_version อีกทีหนึ่ง โค้ดคร่าวๆ จะเป็นอย่างนี้ (ก็อปไปวางใน functions.php ได้เลย) function wp63_lock_plugin_version($data){ $lock = apply_filters( “wp63_lock_plugin_version”, array() ); if(isset( $data->response )){ foreach( $data->response as $key => $value ){ if( isset($lock[$value->slug]) && $value->new_version […]
วิธีเพิ่ม oEmbed Handler สำหรับการ Embed เนื้อหาจากเว็บที่ไม่รองรับ oEmbed
ในเวิร์ดเพรสจะมีฟีเจอร์ที่เรียกว่า oEmbed ซึ่งทำหน้าที่แปลง URL ของเว็บต่างๆ ให้อยู่ในรูปแบบโค้ด Embed โดยอัตโนมัติ เช่นเวลาเราวาง URL ของวิดีโอสักชิ้นในยูทูบลงใน editor มันก็จะ embed วิดีโอตัวนั้นลงมาให้โดยอัตโนมัติ โดยปกติแล้ว oEmbed รองรับเว็บเป็นจำนวนมากอยู่แล้ว เช่นวิดีโอจาก YouTube และ Vimeo, โพสต์จาก Twitter และ Facebook, หรือเพลงจาก Spotify (ดูเว็บที่รองรับทั้งหมดที่นี่) ทีนี้แม้ว่าตัวเวิร์ดเพรสเองจะรองรับ oEmbed กับบริการเป็นจำนวนมากอยู่แล้ว แต่ก็ยังมีอีกหลายบริการที่ยังไม่รองรับ อย่างเช่นงานล่าสุดที่ผมทำ ที่จะต้องรองรับการ embed วิดีโอจากเว็บไซต์ Subsplash.com ด้วย หากแต่ว่าตัวเวิร์ดเพรสเองนั้นกลับไม่รองรับเว็บไซต์นี้ ทางของเราก็คือเพิ่มเว็บที่ต้องการเข้าไปเองเลย
เขียนธีม WordPress บนเทคโนโลยีสมัยใหม่ด้วย Sage 9 – ตอนที่ 1 แนะนำ Sage 9
Sage (ปัจจุบันเป็นเวอร์ชัน 9 ชื่อเดิมคือ Roots) เป็น Starter theme หรือธีมต้นแบบที่พัฒนาโดย Roots.io สำหรับใช้ต่อยอดสร้างเป็นธีมของเว็บขึ้นมาอีกต่อหนึ่ง (แบบเดียวกับ Underscores) และจุดเด่นของ Sage นั้นคือนำเอา Workflow และเทคโนโลยีใหม่ๆ มาช่วยในการพัฒนาธีมด้วย เว็บไซต์หลัก GitHub ว่ากันตามจริงนั้น Sage เป็นเพียงธีมเปล่าๆ ที่แทบไม่มีฟีเจอร์อะไรเกี่ยวกับธีมมาให้เลย แต่จะเน้นไปที่เรื่องของ Workflow ที่ทันสมัยเป็นหลัก (จะได้ถูกเลิกค่อนขอดว่าใช้ Workflow โบราณเสียที 5555) โดยสิ่งที่ Sage นำมาใช้นั้นมีดังนี้ ใช้ Composer ในการจัดการแพ็คเกจ PHP ใช้ Yarn ในการจัดการแพ็คเกจสำหรับ Front-end ใช้ SASS ในการเขียนสไตล์ชีท แยก Views และ Controller ออกจากกัน ใช้ Blade Template ของ […]
การแคชข้อมูลลง Transient Cache และ WP Option
การแคชข้อมูลนั้นเป็นหนึ่งในวิธีช่วยลดโหลดของเว็บได้อย่างมีประสิทธิภาพ เวิร์ดเพรสเองแม้จะมีปลั๊กอินสำหรับจัดการแคชอยู่มากมายหลายตัว เช่น WP Super Cache หรือ WP Fastest Cache แต่การแคชข้อมูลต่างๆ ด้วยตัวเองก็ยังคงเป็นหนึ่งในวิธีการปรับปรุงประสิทธิภาพที่ได้ผลอยู่ดี จริงๆ เวิร์ดเพรสมีวิธีการแคชข้อมูลอยู่หลายวิธีมาก และแต่ละวิธีก็เหมาะกับต่างสถานการณ์กันไป ซึ่งวันนี้เราจะมาพูดถึงเรื่องการแคชระดับ Global (เรียกใช้จากที่ไหนก็ได้) ผ่าน Transient Cache และ WP Option ซึ่งทั้งสองแบบจะเป็นการแคชข้อมูลเอาไว้ในฐานข้อมูล อ้าว อย่างนี้มันก็ไม่ได้ช่วยลดจำนวนคิวรี่สิ? ถูกต้องครับ แคชเหล่านี้ยังคงต้องคิวรี่ออกมาอยู่ดี แต่การดึงแคชเหล่านี้ออกมาจะสามารถทำได้เร็วมากเพราะเป็นแค่การ SELECT ข้อมูลออกมาตรงๆ ไม่มีการ JOIN ตารางใดๆ ให้เปลืองเม็มโมรี่ทั้งสิ้น ทั้งนี้แคชทั้งสองแบบนั้นจะมีจุดต่างให้เลือกใช้ตามสถานการณ์กันอยู่ครับ
