การทำ WordPress Live Reload สำหรับคนขี้เกียจรีเฟรชเพจ

ในการเขียนโค้ด เวลาจะดูผลลัพธ์ จะต้องเปลี่ยนจากหน้าต่าง Editor ที่ใช้เขียนโค้ด มาเป็น Browser แล้วกด Refresh อีกที ทำให้เสียเวลาอยู่นิดนึง

 

ก็เลยมีคนคิดค้น Live reload ขึ้นมา เพื่อใช้สำหรับการ Reload หน้าเว็บแบบอัตโนมัติ เมื่อมีการเซฟไฟล์ เอาล่ะ มันทำให้ชีวิตดูง่ายขึ้น แล้วมันก็เหมาะสำหรับการใช้งานสองจอเป็นอย่างมาก

 

วันนี้ผมก็จะมาแนะนำการทำ Live reload สำหรับ WordPress

 

*** บอกไว้ก่อนนะครับ ว่าบทความนี้เหมาะสำหรับผู้ที่ใช้งาน Linux หรือ  MacOS ไม่แน่ใจว่าจะสามารถใช้ใน Windows หรือไม่ ***

 

มาเริ่มกันเลย อันดับแรก ติดตั้ง Live reload plugin สำหรับ Chrome

 

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en

 

chrome-live-reload-plugin

 

 

ต่อมาก็ใส่โค้ดสำหรับ WordPress

 

นำโค้ดไปใส่ไว้ในไฟล์ functions.php จะอยู่ใน Folder themes

 

 

โค้ดนี้จะไป Hook กับ  ฟังก์ชั่น wp_footer จะทำให้โค้ดนี้ไปอยู่ทุกหน้า

 

ต่อไปจะเป็นการติดตั้ง Livereload ท่านี้ต้องใช้ Command Line นะครับ

 

** ถ้ายังไม่มี npm  ต้องไปดาวน์โหลด NodeJS มาติดตั้งก่อนนะครับ **

 

ติดตั้ง เสร็จแล้ว ลองพิมคำสั่ง

 

 

คำสั่งนี้มีไว้ตรวจสอบเวอร์ชั่นของ livereload ถ้าติดตั้งสำเร็จก็จะขึ้นเป็นเลขเวอร์ชั่นปัจจุบัน (ของผม ณ วันที่เขียนบทความคือ 0.5.0)

 

วิธีการใช้งาน

 

ให้ใช้คำสั่ง cd ไปยัง folder ของ project ที่จะทำ livereload

 

 

จากนั้นพิมพ์คำสั่ง livereload กด enter ตัว livereload ก็จะทำงาน

 

livereload

 

ทีนี้ลองบันทึกไฟล์ ใน Editor Web Browser ก็จะ refresh โดยอัตโนมัติ