_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 ธีม แต่หน้าตาก็ยังไม่ได้เป็นอย่างที่เราคาดหวังกันใช่ไหมครับ ดังนั้นบทต่อๆ ไป เราจะไปดูกันต่อว่ามีอะไรที่มาเป็นตัวช่วยในการสร้างธีมให้สมบูรณ์อีกบ้าง