Yes, something went wrong. We’re fixing it.
ตั้งค่า Pipelines ใน BitBucket สำหรับดีพลอยโค้ดขึ้น Cloudways อัตโนมัติ
เราเคยพูดถึงบริการ Managed Cloud Server อย่าง Cloudways ไปรอบหนึ่งแล้ว ซึ่งฟีเจอร์เด่นของมันอย่างหนึ่งคือรองรับการดีพลอยผ่าน Git โดยใช้ Git pull จาก repo ของเราโดยตรง วิธีเปิดใช้งาน พร้อมย้ายเว็บจากโฮสต์เดิมเข้าสู่ Cloudways แต่ในความเป็นจริงการใช้ Git pull มาใส่เซิร์ฟเวอร์แบบดื้อๆ เลยนั้นอาจจะไม่สะดวกเท่าไหร่นัก โดยเฉพาะอย่างยิ่งโปรเจ็กท์ที่จำเป็นต้องมีการเซ็ตอัพต่างๆ เพิ่มเติมเสียก่อน (เช่นธีม Sage 9 ที่อย่างน้อยต้องไปสั่ง composer install และ yarn เพื่อคอมไพล์ assets ต่างๆ ก่อน) ใน BitBucket จะมีฟีเจอร์ Pipelines ที่ช่วยให้เราสามารถสั่งทำงานต่างๆ ได้ทันทีหลังจากมีโค้ดใหม่ถูกส่งเข้า repo ซึ่งโดยปกติแล้ว Pipelines นี้จะถูกใช้ในการทำงานแบบ CI/CD (Continous Integration/Continous Delivery) เช่นใช้สำหรับการรันเทสโค้ดอัตโนมัติเมื่อโค้ดต่างๆ ถูก merge เข้ามาใน branch หลัก […]
เขียนธีม WordPress ด้วย Sage 9 – ตอนที่ 2 ระบบจัดการแพ็คเกจ
Sage 9 มีการนำเอาระบบจัดการแพ็คเพจมาใช้อยู่สองตัว คือ yarn สำหรับจัดการแพ็คเกจฟรอนต์เอ็นด์ต่างๆ (ใช้แทน npm) และ composer สำหรับจัดการแพ็คเกจ PHP ดังนั้นตรงนี้จะขอเริ่มสั้นๆ เกี่ยวกับการติดตั้งแพ็คเกจต่างๆ กันก่อน (หากใครที่คุ้นเคยกับการใช้ Composer หรือการเขียน ES6 อยู่แล้ว ก็สามารถข้ามตอนนี้ไปได้เลย) ติดตั้งแพ็คเกจ PHP แพ็คเกจ PHP นั้นค่อนข้างเข้าใจง่ายอยู่แล้ว โดยแพ็คเกจต่างๆ ที่ถูกติดตั้งผ่านคำสั่ง composer require <ชื่อแพ็คเกจ> จะถูกโหลดอัตโนมัติผ่านไฟล์ autoload.php และสามารถเรียกใช้ได้ทันที ทั้งนี้มีข้อควรระวังอยู่อย่างหนึ่งคือใน Sage 9 นั้นจะมีการใช้ namespace เข้ามาช่วยในการจัดการคลาสต่างๆ ด้วย ซึ่งถ้าหากว่าแพ็คเกจที่ติดตั้งเข้ามา (หรือคลาสใดๆ ก็ตาม) ที่ไม่มีการกำหนด namespace เอาไว้ เวลาเรียกใช้จะต้องใส่ \ นำหน้าไปด้วย เช่น ติดตั้งแพ็คเกจ Front-end (JS และ CSS) ในด้านแพ็คเกจฟรอนต์เอ็นด์นั้นอาจจะค่อนข้างเป็นเรื่องใหม่สำหรับคนทำเวิร์ดเพรสอยู่ในเล็กน้อย […]
ปิด 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 ของ […]
วิธีเปิดใช้งาน พร้อมย้ายเว็บจากโฮสต์เดิมเข้าสู่ Cloudways
Cloudways เป็นบริการที่ครอบเซิร์ฟเวอร์คลาวด์อย่าง DigitalOcean หรือ Amazon AWS เอาไว้อีกต่อหนึ่ง โดยตัวบริการนั้นจะช่วยเปิดเซิร์ฟเวอร์บนผู้ให้บริการคลาวด์ที่ผู้เลือก (รองรับ Linode, Vultr, Amazon AWS, Google Cloud Platform, และ Kyup) พร้อมกับตั้งค่าต่างๆ รวมถึงคอยดูแลอัพเดทซอฟต์แวร์ให้อัตโนมัติ โดยที่ผู้ใช้ไม่จำเป็นต้องเข้าไปยุ่งเกี่ยวในส่วนนี้เลย ฟีเจอร์เด่นๆ ของ Cloudways มีดังนี้ รองรับระบบแคชต่างๆ ทั้ง Memcached, Varnish, Redis ช่วยเพิ่มประสิทธิภาพทั้งการประมวลผลและฐานข้อมูล มีปลั๊กอิน Breeze ซึ่งเป็นปลั๊กอินแคชสำหรับเวิร์ดเพรสมาให้ ซึ่งทำงานร่วมกับระบบแคชจากข้อแรกได้ทันที มีปลั๊กอิน Migrator สำหรับย้ายเว็บเวิร์ดเพรสมายัง Cloudways ให้อัตโนมัติ รองรับ HTTP/2 ช่วยเพิ่มความเร็วเชื่อมต่อระหว่างเซิร์ฟเวอร์และผู้ใช้ รองรับ PHP7 และ PHP-FPM ช่วยให้เว็บ PHP สามารถประมวลผลได้เร็วขึ้น รองรับ Let’s Encrypt ติดตั้ง SSL ฟรีได้ในคลิกเดียว […]
ตั้งค่า Xdebug ร่วมกับ Visual Studio Code เพื่อใช้ดีบั๊กโค้ด PHP
ใครที่เขียนเคยจาวาหรือดอทเน็ตมาก่อนน่าจะคุ้นเคยกับการดีบั๊กโค้ดผ่าน IDE กันเป็นอย่างดี ที่เราสามารถตั้งเบรคพอยต์ให้โค้ดมาหยุดที่ตรงนั้นเพื่อดูค่าตัวแปรและอื่นๆ ได้ ซึ่งค่อนข้างน่าเสียดายว่าภาษา PHP นั้นไม่มีอะไรแบบนี้มาให้ในตัว จริงๆ แล้ว PHP ก็สามารถดีบั๊กในลักษณะเดียวกันนี้ได้เช่นกัน อย่างเช่นใครที่ใช้ Zend Studio หรือ PHPed นั้นจะมีระบบดีบั๊กมาให้ในตัว แต่สำหรับใครที่ไม่ได้ใช้ IDE ทั้งสองตัวดังกล่าวก็สามารถเซ็ตอัพระบบดีบั๊กด้วย Xdebug ได้ด้วยเช่นกัน (ส่วนใครใช้ PHPStorm จะพบว่ามันรองรับ Xdebug มาให้ในตัวตั้งแต่แรกอยู่แล้ว) อะไรคือ Xdebug Xdebug เป็นส่วนเสริมของ PHP ที่ช่วยเพิ่มความสามารถในการดีบั๊กแบบ Single-step ให้กับภาษา PHP เหมือนอย่างในภาษาอื่นๆ (ที่ตั้งเบรคพอยต์แล้วกด next เอาได้เรื่อยๆ นั่นแหละ เรียกว่า Single-step debuging) นอกจากนี้ยังช่วยปรับปรุงการแสดงผลให้กับ var_dump, รองรับ Stack trace สำหรับ error และ warning ต่างๆ […]
การแคชข้อมูลลง Transient Cache และ WP Option
การแคชข้อมูลนั้นเป็นหนึ่งในวิธีช่วยลดโหลดของเว็บได้อย่างมีประสิทธิภาพ เวิร์ดเพรสเองแม้จะมีปลั๊กอินสำหรับจัดการแคชอยู่มากมายหลายตัว เช่น WP Super Cache หรือ WP Fastest Cache แต่การแคชข้อมูลต่างๆ ด้วยตัวเองก็ยังคงเป็นหนึ่งในวิธีการปรับปรุงประสิทธิภาพที่ได้ผลอยู่ดี จริงๆ เวิร์ดเพรสมีวิธีการแคชข้อมูลอยู่หลายวิธีมาก และแต่ละวิธีก็เหมาะกับต่างสถานการณ์กันไป ซึ่งวันนี้เราจะมาพูดถึงเรื่องการแคชระดับ Global (เรียกใช้จากที่ไหนก็ได้) ผ่าน Transient Cache และ WP Option ซึ่งทั้งสองแบบจะเป็นการแคชข้อมูลเอาไว้ในฐานข้อมูล อ้าว อย่างนี้มันก็ไม่ได้ช่วยลดจำนวนคิวรี่สิ? ถูกต้องครับ แคชเหล่านี้ยังคงต้องคิวรี่ออกมาอยู่ดี แต่การดึงแคชเหล่านี้ออกมาจะสามารถทำได้เร็วมากเพราะเป็นแค่การ SELECT ข้อมูลออกมาตรงๆ ไม่มีการ JOIN ตารางใดๆ ให้เปลืองเม็มโมรี่ทั้งสิ้น ทั้งนี้แคชทั้งสองแบบนั้นจะมีจุดต่างให้เลือกใช้ตามสถานการณ์กันอยู่ครับ
ตั้งค่า SSL สำหรับเว็บที่รันอยู่บน VVV
บทความเขียนขึ้นตอนที่ยังใช้ VVV 2.1.0 ที่ยังต้องตั้งค่าเพิ่มเติมเพื่อเปิดใช้ SSL แต่ใน VVV 2.5.1 ตัวล่าสุด ณ ตอนนี้รองรับการเปิดใช้ SSL ในตัวแล้ว สามารถเปิดเว็บด้วย https ได้ทันที ต่อจากบทความที่แล้วที่เราพาไปรู้จักกับการติดตั้งและใช้งานเวิร์ดเพรสบน VVV อีกเรื่องหนึ่งที่เรายังติดค้างกันเอาไว้นั่นคือการตั้งค่า SSL เพื่อให้เว็บทดสอบของเราสามารถใช้งาน HTTPS ได้ ติดตั้ง VVV สำหรับพัฒนา WordPress บน Isolated Development Environment ปัจจุบันบริการหลายๆ อย่าง รวมถึงฟีเจอร์หลายตัวใน HTML5/ES8 นั้นจำเป็นต้องใช้งานผ่าน HTTPS เท่านั้น อย่างเช่น Geolocation API ทำให้หาเราไม่มีการตั้งค่า HTTPS จะทำให้ไม่สามารถทดสอบฟีเจอร์เหล่านี้บน localhost ได้ ขั้นแรกให้เริ่มการทำงานของ VVV ก่อน โดยเปิด Command Prompt/Terminal แล้ว cd เข้าไปยังโฟลเดอร์ VVV […]
ติดตั้ง VVV สำหรับพัฒนา WordPress บน Isolated Development Environment
อัปเดต 25 กุมภาพันธ์ 2019 – รองรับ VVV 2.5.1 VVV (Varying Vagrant Vagrants) เป็นคอนฟิกของ Vagrant ที่ใช้สำหรับการพัฒนาเว็บด้วยเวิร์ดเพรสโดยเฉพาะ (คล้ายๆ กับ Homestead ของ Laravel) โดย VVV นั้นจะมีซอฟต์แวร์ต่างๆ ที่รองรับโฟลวการพัฒนาแบบสมัยใหม่มาให้อย่างครบครัน เช่น เว็บเซิร์ฟเวอร์ nginx PHP-FPM 7.2 ส่วนเสริม memcached, opcache, xdebug, มี PHPUnit สำหรับเขียนเทส มี Git ในตัว มี Composer และ WP CLI มี Node.js พร้อม Grunt สำหรับงาน Front-end ต่างๆ MailHog จำลองเมลเซิร์ฟเวอร์พร้อมเปิดดูได้ว่าส่งอะไรออกไปบ้าง Vagrant นั้นเป็นเครื่องมือยอดนิยมตัวหนึ่งในการสร้าง […]
Got any book recommendations?