Light mode Dark mode

Jir4yu.me

ความรู้สึก.. ที่ตอนไหนๆก็(ไม่)เหมือนกัน

WordPress Customization

ประสบการณ์สอนครั้งแรก

มื่อช่วงสุดสัปดาห์ที่ผ่านมาได้มีโอกาสไปสอนบริษัทหนึ่งย่านอุดมสุข ซึ่งคอร์สที่ไปสอนนั้นก็ใช้ชื่อว่า WordPress Customization โดยทางบริษัทผู้เรียนเป็นคน request รายละเอียดคร่าวๆ มาก่อนแล้วผมก็นำไปปรับเพิ่มนั่นเพิ่มนี่เข้าไปให้ตรงตาม objective ที่ตั้งไว้ตามหัวข้อในตอนแรก โดยคอร์สคร่าวๆ จะเกี่ยวกับการดัดแปลง theme ของ WordPress, การแนะนำ plugins, สิ่งที่ต้องทำก่อน และหลัง, การ optimize, การย้าย WordPress ไปยัง host อื่นๆ, แนะนำเครื่องมือที่เป็นประโยชน์ – การ measurement รวมไปถึงการปูพื้นการเขียน theme เอง แล้วก็สาธิตเขียนนิดหน่อย

ผมก็ไม่ค่อยรู้หรอกว่าตัวเองมีความสามารถด้าน WordPress มากน้อยเท่าไหร่ แต่ช่วงหลังงาน freelance ที่รับภายใต้ชื่อ JindaTheme มีลูกค้าสอบถามเข้ามาอยากจะได้เว็บไซต์ที่ขึ้นด้วย WordPress มากพอสมควร แล้วทุกครั้งที่ส่งงานก็ต้องมานั่งเขียนคู่มือทุกครั้งอยู่แล้ว เลยคิดว่าอยากจะเขียนหนังสือ หรือทำวิดีโอเก็บไว้ให้ลูกค้าของตัวเองด้วยส่วนหนึ่ง และนี่คือประสบการณ์สอนครั้งแรกที่เคยได้เจอครับ

เมื่อก่อนผมก็ใช้ Windows ในการทำงานเป็นเครื่องหลักก่อนจะเปลี่ยนมาใช้ Mac แล้วหลังจากนั้นก็ไม่ได้เปลี่ยนกลับไปใช้ Windows อีกเลย แต่ส่วนตัวคิดว่าไม่น่าจะมีปัญหาอะไร พอไปสอนก็เอา Mac ไปสอนทั้งที่ผู้เรียนส่วนใหญ่ใช้ Windows กันเกือบหมด แต่ทุกอย่างก็ผ่านไปด้วยดี ไม่มีปัญหาอะไรเกี่ยวกับการเขียน การสร้าง หรือการ demo แล้วผลลัพธ์ออกมาไม่เหมือนกัน slide ที่ผมเตรียมทั้งหมดนั้นจำนวนรวมแล้วได้ 99 หน้า โดยใช้ Keynote เป็นตัว animate แล้วก็ยัดเนื้อหาลงไปให้น่าสนใจ และแน่นอนว่าความสวยงามของ slide ก็เป็นสิ่งที่ผมให้ความสำคัญเป็นลำดับแรกๆ รองมาจากเนื้อหาด้วย

wordpress customization

ในคอร์สก็จะปูพื้นตั้งแต่การตั้งค่าที่ไฟล์ของ wp-config.php เลย เช่นการปรับให้แสดง debug message, การปรับรุ่นของ WordPress เอง รวมไปถึงการโหลดหรืออัพเดท theme, plugin โดยใช้ file system แทนการใช้ FTP บน localhost จากนั้นก็เป็นการแนะนำ provider ต่างๆที่ให้บริการเรื่องของ hosting, domain name แล้วก็พูดถึง technology เบื้องต้นอย่าง Apache และ Nginx ยกภาพประกอบให้ผู้เรียนได้เลือกตัดสินใจเองได้ สุดท้ายของการตั้งค่าก็จะเป็นการกำหนด permission file ของ directory และ file ที่ควรจะใช้

ถัดมาจากนั้นก็เป็นสิ่งที่ผู้เรียน request มาคือการเลือกซื้อ theme จาก themeforest เกณฑ์การเลือก theme ที่ดีที่ง่ายต่อการนำมาปรับใช้ หรือการ override บางส่วนเข้าไปใน theme โดยที่ไม่กระทบต่อการอัพเดททั้ง core WordPress เอง และไฟล์ของ theme เอง ซึ่งความเป็นจริงแล้วก็อยากจะยกภาพรวมใหญ่ๆ ให้คุณผู้อ่านเห็นด้วยว่า WordPress เนี่ยมันไม่ได้ยากนะ CMS ตัวอื่นยากกว่าอีก แต่ที่เราคิดว่ามันยากเนี่ย น่าจะเป็นตามภาพที่ให้ความเห็นด้านล่างเลย

wordpress why so hard?
Slide ส่วนหนึ่งจากวันที่ไปสอน

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

ซึ่งเนื้อหาของ slide ก็จะผลัดเปลี่ยนภาษาออกไปบ้างเพื่อยกตัวอย่างให้ผู้เรียนเข้าใจได้ง่ายขึ้น บางอย่างอาจจะใช้ภาษาอังกฤษ และบางส่วนอาจจะสลับกลับมาใช้ภาษาไทยเผื่อวันหลังผู้เรียนจะได้เปิด slide ดูเองแล้วจะได้เข้าใจได้โดยไม่ต้องให้ผมมาช่วย

wordpress starter

wordpress file structure

มาคิดๆ ดูแล้วก็กลัวว่าตัวเองจะสอนไวเกินไป หรือพูดตรงไหนไม่ clear อยู่เยอะเหมือนกัน แต่อย่างว่าละครับ ประสบการณ์ครั้งแรกมันก็อาจจะไม่ได้ perfect ไปเสียทุกอย่าง ถ้าไม่ลองก็ไม่รู้ แล้วตอนไหนได้ลองแล้ว ไม่ทำให้เต็มที่ เราจะรู้ความสามารถ แล้วก็นำกลับไปปรับปรุงแก้ไขส่วนที่บกพร่องได้ยังไง

ช่วงที่สอนมีแอบคิดว่าจัด slide ผิด order อยู่นิดหน่อยด้วย เช่น อธิบายถัดจากไฟล์หลักที่ควรจะมี แล้วไปที่ template tags เลย ไม่รู้ว่าผู้เรียนที่ไม่ได้ใช้ WordPress มาตั้งแต่แรกจะเห็นภาพตามได้หรือเปล่า ยกตัวอย่างเช่นภาพจาก slide ด้านล่างที่ตัดออกมาอันนึงจากทั้งหมดที่ไปสอน  คิดว่ามีบางคนอาจจะไม่เคยเห็นแล้วก็ยังสงสัยอยู่ว่าทำไมต้องใช้ wp_head หรือ wp_footer แล้วมันคืออะไรกันแน่ ทำไมต้องไปเรียก wp_enqueue_script หรือ wp_enqueue_style ด้วย

เนื่องจากเวลาหนึ่งวันมันค่อนข้างจำกัดมาก แล้วก็อยากจะสอนให้ครอบคลุมทุกอย่างตาม objective ที่ค่อนข้างเยอะ เลยอาจจะมีพูดเร็วไปบ้าง และก็คิดว่าถ้าครั้งหน้าจะพยายามตัดส่วนที่เข้าใจยากออกไปก่อน ให้เป็น basic customize ตามหัวข้อของคอร์สนี้จะดีกว่า

template tags in wordpress

template tags in homepage

ถัดมาช่วงบ่ายก็จะพูดถึงเรื่องของ plugin ที่สำคัญ และค่อนข้างจำเป็น ส่วนใหญ่ที่แนะนำตาม slide คือ plugin free ที่มีความสามารถเหลือล้น ไม่จำเป็นต้องไปเสียเงินซื้อ plugin หากยังไม่จำเป็น โดยใน slide ในวันดังกล่าวได้แนะนำ plugin ไปราวๆ เกือบ 20 ชนิดซึ่งแต่ละชนิดก็ทำหน้าที่คนละอย่างต่างหมวดกันออกไปเช่น comment, maintenence, backup, analytics ฯลฯ แล้วที่ขาดไม่ได้เลยคือการตั้งค่า w3 total cache ให้ใช้ได้อย่างเต็มประสิทธิภาพเพื่อปูพื้นก่อนขึ้นหมวด optimize จริงจังด้วย

ส่วนที่สำคัญที่สุดของการทำงานในประเภท corperate นั้นน่าจะเป็นในส่วนของการย้าย WordPress จาก localhost เครื่องตัวเอง ไปยังเครื่องที่เป็น live server ซึ่งในเชิงของ freelance ที่ผมเป็นอยู่นั้นตรงนี้อาจจะไม่ได้มีอะไรที่หนักหนาสาหัสมากนัก ก็แค่ย้ายจาก development ไปยัง production ที่แนะนำให้ลูกค้าซื้อ hosting จาก provider เจ้าไหนเท่านั้นเอง

แต่สำหรับผู้เรียนส่วนนี้อาจจะเป็นส่วนสำคัญมากเป็นลำดับแรกๆ ก็ได้ เลยแนะนำ plugin ไว้ backup ขึ้น cloud แล้วก็แนะนำวิธีย้าย host ที่ถูกต้องที่ควรจะทำด้วย ทำตามไปเลยแบบ step by step จะได้ไม่มีข้อผิดพลาดบ่อยๆ

ย้าย wordpress ขึ้น hosting

วิธีย้าย host ของเว็บไซต์ที่ขึ้นด้วย wordpress
วิธีย้าย host ของเว็บไซต์ที่ขึ้นด้วย wordpress
อธิบายแต่ละขั้นตอนของการย้าย
พร้อมอธิบายแต่ละขั้นตอนของการย้าย

ช่วงบ่ายแก่ๆ ก่อนจะเป็นการขึ้นหมวดที่สำคัญอย่าง optimize ก็แนะนำเรื่องของ shortcode มีตัวอย่างง่ายๆ ให้ผู้เรียนได้ลองเขียน shortcode เองนิดหน่อย แล้วก็มองเรื่องของความปลอดภัยพื้นฐาน สิ่งที่ควรจะทำอย่างสม่ำเสมอเมื่อสร้างเว็บไซต์ด้วย WordPress อย่างเช่นพื้นฐานง่ายๆ ที่หลายคนต่างมองข้ามไปในเรื่องของ security เลยคือไฟล์ wp-config.php

เราสามารถเอาไฟล์ wp-config.php ย้ายออกขึ้นมาจาก root directory ได้โดยที่ทุกอย่างยังสามารถทำงานได้อย่างปรกติ แล้วก็ตั้งค่าให้กับไฟล์ control access ของ technology ที่เราใช้ได้ด้วย เช่นตัวอย่างดัง slide ด้านล่าง

wordpress security
ตัวอย่างเบื้องต้นง่ายๆ เกี่ยวกับเรื่องของความปลอดภัย

ส่วนตัวแล้วผมคิดว่าเรื่องที่สำคัญที่สุดของการสร้างเว็บไซต์ หรือการปรับแต่งอะไรก็ตามแต่ของ WordPress เรื่องที่สำคัญที่สุดคือส่วนที่เรากำลังจะ optimize มันไม่ว่าจะให้มันทำงานได้เร็วขึ้น เป็นภาระกินทรัพยากรของ server น้อยลง หรือการ measurement รวมไปถึงการแก้ไขปัญหาที่เกิดขึ้นได้ด้วยวิธีที่ถูกต้อง

หมวดนี้จะมีเรื่องที่พูดถึงเยอะมาก อย่างเช่นการตั้งค่าของ w3 total cache ที่ถูกต้อง ทำยังไงถึงจะปรับแต่งเข้ามาแล้วไม่มีปัญหาในเรื่องของการโหลดไฟล์ javascript และ stylesheet การ cache บางส่วนรวมไปถึงทำไม CDN ถึงได้ช่วยให้เว็บไซต์เราทำงานได้อย่างมีประสิทธิภาพมากขึ้น แล้วก่อนใช้กับหลังใช้นั้นมีผลมากน้อยแค่ไหนในเรื่องของ website score ส่วนนี้เองที่จะพูดถึง และแนะนำ measurement tool ที่เป็นประโยชน์อย่างที่เคยเขียนไปในบทความที่บล็อก UX/UI Research ด้วย

optimization part

measurement - hotjar

GTmetrix measurement

ก่อนที่จะปิดคอร์ส ก็แนะนำเรื่องของการเขียน theme เองเบื้องต้น มีตัวอย่างเขียนให้ดูในช่วงท้ายของวันที่สอนนิดหน่อย สุดท้ายอยากจะขอขอบคุณผู้เรียนทุกท่านมากที่ให้โอกาสไปสอนเรื่องของ WordPress ที่จะใช้ในองค์กรครับ ซึ่งผมเองก็จะนำข้อผิดพลาด แล้วก็ส่วนที่เข้าใจได้ยากไปปรับปรุงแก้ไขให้ดียิ่งขึ้น ขอขอบคุณบริษัท Betimes solutions มา​ ณ ที่นี้ครับ

ขอบคุณครับ

Jirayu Limjinda

ถ้าไม่รู้จักกัน บางทีคุณอาจจะไม่เข้าใจกับสิ่งที่ผมทำ.. กลับกัน ถ้าคุณรู้จักผมดี คุณจะไม่ต้องเอ่ยปากถามเลยว่าทำไม

แสดงความคิดเห็นของคุณที่นี่

loading, please wait..

loading, please wait..