โปรแกรมสร้าง theme WordPress _s หรือ underscores มาช่วยอะไร

โปรแกรมสร้าง theme WordPress _s หรือ underscores

_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

underscores.me

2. กรอกข้อมูลของธีม

คุณสามารถกรอกแค่ชื่อธีมในช่อง Theme name หรือจะคลิกที่ “Advanced Options” เพื่อกรอกรายละเอียดที่มากขึ้นดังภาพนะครับ

underscores.me แบบฟอร์มรายละเอียด theme
  • Theme name : ชื่อธีมของคุณ จะตั้งอะไรก็ได้เลยครับผม ( แต่ขอภาษาอังกฤษ และอย่ามีตัวอักษรแปลกๆ นะครับ )
  • Theme Slug : เว้นว่างไว้ครับ
  • Author : ชื่อของคุณ
  • Author URI : ลิงก์ของคุณจะพาไปหน้าเว็บของคุณ หรือ หน้าเฟสคุณก็ได้ครับ คนที่นำธีมไปใช้จะได้ไปคุยกับคุณได้
  • Description : คำอธิบายว่าธีมคุณคืออะไร ใช้ทำอะไร

2 อันที่เหลือยังไม่ต้องสนใจมากนะครับรู้คร่าวๆ ไว้พอ

  • WooCommerce boilerplate : ติ๊กเลือกหากธีมของคุณต้องการใช้ปลั๊กอิน WooCommerce ด้วย
  • _sassify! ติ๊กเลือกหาใช้ css framework

หลังจากกรอกข้อมูลครบ ของผมก็จะเป็นแบบนี้ครับ

underscores.me การกรอกแบบฟอร์มรายละเอียด theme

3. กดปุ่ม “GENERATE”

รอสักครู่นะครับ ก็จะมีป็อบอัพมาให้เรา Save ไฟล์ธีม เราก็ Save ไว้ในโฟลเดอร์ที่ต้องการนะครับ

ดาวน์โหลด Theme จาก underscores.me

เสร็จเรียบร้อยแล้วครับ เท่านี้เราก็ได้ธีม Starter มาแล้ว ง่ายมากๆ เลยใช่ไหมครับ

โครงสร้าง WordPress ที่ได้จาก _s

เริ่มแรกก็ให้เราแตกไฟล์ธีมที่ได้ดาวน์โหลดมาเมื่อสักครู่นี้ ก่อนนะครับ จะได้หน้าตาประมาณแบบนี้ครับ

WordPress Theme Folder

จะเห็นว่ามีไฟล์และโฟลเดอร์เยอะพอสมควรเลย ซึ่งทั้งหมดตรงตามโคลงสร้างธีม WordPress เป๊ะๆ เลยครับ และหากเราไม่ได้ใช้ _s เราต้องสร้างทั้งหมดนี้ขึ้นมาเองทีละไฟล์กันเลยทีเดียว เหนื่อยหนักมากครับ

หากแยกย่อยออกมาอีก ก็จะได้ไฟล์ทั้งหมดประมาณนี้ครับผม

image 19

ไฟล์ .php ส่วนใหญ่ที่เห็นนั้นก็คือ Templates Files ของธีม WordPress นั่นเองครับ

ติดตั้งธีมแรกจาก _s

ใครติดตั้งธีมเป็นอยู่แล้ว ก็ติดตั้งเองได้เลย และข้ามหัวข้อนี้ไปได้เลยนะครับ

1. สร้างเว็บไซต์ WordPressขึ้นมา 1 เว็บ

หากใครมีเว็บแล้วก็ข้ามไปข้อ 2. ได้เลยครับ หรือหากใครยังไม่เคยสร้างผมก็แนะนำให้ไปสร้างด้วย Tool ที่ง่ายมากๆ ที่เรียกว่า Local by Flywheel นะครับ และผมจะใช้ Tool ตัวนี้เป็นตัวอย่างด้วยเช่นกัน

2. ไปที่หลังบ้าน

เมื่อเราได้เว็บมาแล้วนะครับก็ล็อกอินเข้าไปที่หลังบ้านนะครับ หากใช้ Local by Flywheel ก็คลิกตามภาพได้เลยครับ

ไปที่หลังบ้าน wordpress ด้วย local by flywheel

3. อัพโหลดธีม

ไปที่ “รูปแบบเว็บ” และ “เพิ่มธีมใหม่”

admin add new theme

จากนั้นก็กด “อัพโหลดธีม” ( 1. ) และ เลือกไฟล์ธีม ( 2. Choose File ) ครับ

admin choose new theme

แล้วก็เลือกไฟล์ที่เราได้ดาวน์โหลดมาจาก underscores.me นะครับ จากนั้นก็กด “ติดตั้งตอนนี้” ครับ

admin upload new theme

และกด “ใช้งาน” ก็เป็นอันเสร็จครับ

admin activate new theme

ยินดีด้วยครับ เท่านี้เราก็ได้ธีมแรกที่เป็นของตัวเองมาแล้วนะครับ

หน้าแรกของ theme จาก underscores

สรุป : โปรแกรมสร้าง theme WordPress _s หรือ underscores

หากใครใช้งานโปรแกรมสร้าง Theme WordPress มาจนถึงจุดนี้แล้วนะครับ จะพบว่า จริงๆ แล้วเราได้ธีมสำเร็จรูปมาแล้ว 1 ธีม แต่หน้าตาก็ยังไม่ได้เป็นอย่างที่เราคาดหวังกันใช่ไหมครับ ดังนั้นบทต่อๆ ไป เราจะไปดูกันต่อว่ามีอะไรที่มาเป็นตัวช่วยในการสร้างธีมให้สมบูรณ์อีกบ้าง