_s หรือ underscores คือ โปรแกรมสร้าง Theme WordPress หรือจะเรียกว่า Theme generator ก็คงจะไม่ผิดนัก เพราะสิ่งที่ _s ทำคือ การช่วยสร้าง “ธีมเริ่มต้น” หรือ “starter theme” ให้กับนักพัฒนาธีม WordPress ซึ่ง starter theme ที่ได้จะนำไปพัฒนาต่อยอดเป็นธีมแจกฟรี หรือ ธีม premium ที่ต้องเสียเงินซื้อก็ได้
โปรแกรมสร้าง theme WordPres คืออะไร
ในความเห็นของผม โปรแกรมสร้าง theme wordpress ก็คืออะไรก็ตามที่ช่วยในการสร้างธีม WordPress ขึ้นมาสักธีมหนึ่ง โดยมาช่วยอะไรบางอย่างดังนี้
- ลดระยะเวลาในการพัฒนา
- ลดความซับซ้อนและลดความผิดพลาดในการทำงาน เช่น การลืม ไฟล์ template บางไฟล์ไปจากโฟลเดอร์ธีม
- เพิ่มประสิทธิภาพการทำงานของธีม เพราะมีการจัดการโครงสร้าง html และ css หรือ templates อื่นๆ มาอย่างดี
ซึ่งโปรแกรมช่วยสร้าง theme นั้นยังมีอีกหลายตัวด้วยกัน ดังลิงก์นี้ Best WordPress Starter Theme แต่ที่ผมแนะนำ _s เพราะผมเองใช้งานอยู่ และที่สำคัญทีมผู้สร้างก็คือ ทีมงาน WordPress นั้นเอง นอกจากนี้ใน Theme handbook ของ wordpress.org ก็กล่าวแนะนำ _s ด้วยในหัวข้อ The Underscores theme
Starter Theme ที่ได้จาก _s ดีอย่างไร
สำหรับคนที่เรียนมาตามบทเรียน ข้อดีด้านล่างอ่านแล้วอาจจะยังไม่ค่อยเข้าใจ ไม่ต้องตกใจนะครับ เพราะหลายข้อต้องเรียนบทถัด ๆ ไป ก่อนถึงจะเข้าใจครับ
- เป็นโค้ด HTML5 ที่ทันสมัย เบา ( เนื่องจากโครงสร้าง html ที่ไม่ซับซ้อนจะทำให้เว็บโหลดเร็วขึ้น ) และมี comment HTML tag ที่ดีช่วยให้ไล่โค้ด html ได้ง่าย
- ได้ไฟล์ที่จำเป็นในการสร้างธีม WordPress มาครบถ้วน
- มี template สำหรับหน้า 404 มาให้
- มีการแยกไฟล์ template-tags ไว้ที่ inc/template-tags/ ช่วยให้โค้ดเป็นระเบียบและป้องกันปัญหาโค้ดซ้ำซ้อน
- แยกไฟล์ template-functions.php มาให้ เพื่อไว้สำหรับจัดการ Hook โดยเฉพาะ
- มี script ช่วยจัดการเมนูสำหรับหน้าจอมือถือ js/navigation.js
- มีตัวอย่างไฟล์ css 2 ไฟล์สำหรับจัดการแสดงผล sidebar มาให้ คือสำหรับ sidebar ด้านซ้าย ( left sidebar ) และ sidebar ด้านขวา ( right sidebar )
- style.css มี Table of content ที่ดี ช่วยให้หาจุดปรับแต่งได้ง่ายขึ้น ( Table of content ก็คล้ายๆ กับสารบัญของบทเรียนนี้ละครับ )
ผมขอเหมารวมว่า ตัวสร้าง Starter theme และ Framework หรือ Tool อื่นๆ ที่มีหน้าที่สร้างธีม ว่าเป็น โปรแกรมสร้าง theme WordPress หมดเลยนะครับ เพื่อความเข้าใจที่ตรงกัน
เริ่มต้นใช้งาน _s underscores
1. ไปที่ underscores.me
2. กรอกข้อมูลของธีม
คุณสามารถกรอกแค่ชื่อธีมในช่อง Theme name หรือจะคลิกที่ “Advanced Options” เพื่อกรอกรายละเอียดที่มากขึ้นดังภาพนะครับ
- Theme name : ชื่อธีมของคุณ จะตั้งอะไรก็ได้เลยครับผม ( แต่ขอภาษาอังกฤษ และอย่ามีตัวอักษรแปลกๆ นะครับ )
- Theme Slug : เว้นว่างไว้ครับ
- Author : ชื่อของคุณ
- Author URI : ลิงก์ของคุณจะพาไปหน้าเว็บของคุณ หรือ หน้าเฟสคุณก็ได้ครับ คนที่นำธีมไปใช้จะได้ไปคุยกับคุณได้
- Description : คำอธิบายว่าธีมคุณคืออะไร ใช้ทำอะไร
2 อันที่เหลือยังไม่ต้องสนใจมากนะครับรู้คร่าวๆ ไว้พอ
- WooCommerce boilerplate : ติ๊กเลือกหากธีมของคุณต้องการใช้ปลั๊กอิน WooCommerce ด้วย
- _sassify! ติ๊กเลือกหาใช้ css framework
หลังจากกรอกข้อมูลครบ ของผมก็จะเป็นแบบนี้ครับ
3. กดปุ่ม “GENERATE”
รอสักครู่นะครับ ก็จะมีป็อบอัพมาให้เรา Save ไฟล์ธีม เราก็ Save ไว้ในโฟลเดอร์ที่ต้องการนะครับ
เสร็จเรียบร้อยแล้วครับ เท่านี้เราก็ได้ธีม Starter มาแล้ว ง่ายมากๆ เลยใช่ไหมครับ
โครงสร้าง WordPress ที่ได้จาก _s
เริ่มแรกก็ให้เราแตกไฟล์ธีมที่ได้ดาวน์โหลดมาเมื่อสักครู่นี้ ก่อนนะครับ จะได้หน้าตาประมาณแบบนี้ครับ
จะเห็นว่ามีไฟล์และโฟลเดอร์เยอะพอสมควรเลย ซึ่งทั้งหมดตรงตามโคลงสร้างธีม WordPress เป๊ะๆ เลยครับ และหากเราไม่ได้ใช้ _s เราต้องสร้างทั้งหมดนี้ขึ้นมาเองทีละไฟล์กันเลยทีเดียว เหนื่อยหนักมากครับ
หากแยกย่อยออกมาอีก ก็จะได้ไฟล์ทั้งหมดประมาณนี้ครับผม
ไฟล์ .php ส่วนใหญ่ที่เห็นนั้นก็คือ Templates Files ของธีม WordPress นั่นเองครับ
ติดตั้งธีมแรกจาก _s
ใครติดตั้งธีมเป็นอยู่แล้ว ก็ติดตั้งเองได้เลย และข้ามหัวข้อนี้ไปได้เลยนะครับ
1. สร้างเว็บไซต์ WordPressขึ้นมา 1 เว็บ
หากใครมีเว็บแล้วก็ข้ามไปข้อ 2. ได้เลยครับ หรือหากใครยังไม่เคยสร้างผมก็แนะนำให้ไปสร้างด้วย Tool ที่ง่ายมากๆ ที่เรียกว่า Local by Flywheel นะครับ และผมจะใช้ Tool ตัวนี้เป็นตัวอย่างด้วยเช่นกัน
2. ไปที่หลังบ้าน
เมื่อเราได้เว็บมาแล้วนะครับก็ล็อกอินเข้าไปที่หลังบ้านนะครับ หากใช้ Local by Flywheel ก็คลิกตามภาพได้เลยครับ
3. อัพโหลดธีม
ไปที่ “รูปแบบเว็บ” และ “เพิ่มธีมใหม่”
จากนั้นก็กด “อัพโหลดธีม” ( 1. ) และ เลือกไฟล์ธีม ( 2. Choose File ) ครับ
แล้วก็เลือกไฟล์ที่เราได้ดาวน์โหลดมาจาก underscores.me นะครับ จากนั้นก็กด “ติดตั้งตอนนี้” ครับ
และกด “ใช้งาน” ก็เป็นอันเสร็จครับ
ยินดีด้วยครับ เท่านี้เราก็ได้ธีมแรกที่เป็นของตัวเองมาแล้วนะครับ
สรุป : โปรแกรมสร้าง theme WordPress _s หรือ underscores
หากใครใช้งานโปรแกรมสร้าง Theme WordPress มาจนถึงจุดนี้แล้วนะครับ จะพบว่า จริงๆ แล้วเราได้ธีมสำเร็จรูปมาแล้ว 1 ธีม แต่หน้าตาก็ยังไม่ได้เป็นอย่างที่เราคาดหวังกันใช่ไหมครับ ดังนั้นบทต่อๆ ไป เราจะไปดูกันต่อว่ามีอะไรที่มาเป็นตัวช่วยในการสร้างธีมให้สมบูรณ์อีกบ้าง
