สอนเขียน WordPress Theme ฉบับมือใหม่ตอนที่ 1 – เพิ่ม Theme เปล่าเข้าระบบ

ถ้าเพื่อน ๆ ได้อ่านบทความเรื่อง การทำ WordPress Shortcode ใช้เอง บางคนอาจจะงง ๆ อยู่ว่าจะเอา Code ไปใส่ตรงไหน ดังนั้นบทความนี้ผมจะมาสอนวิธีการเขียน WordPress Theme สำหรับใช้เอง ถ้าเพื่อน ๆ อ่านจบก็จะทราบได้เลยครับว่าจะเอา Code ไปใส่ไว้ตรงไหนครับ

ในตัวอย่างที่ผมจะใช้ในการเขียนบทความนี้ผมเอามาจากการทำ WordPress Theme เพื่อใช้งานกับเว็บไซต์ขายเสื้อยืด everduck. ของผมครับ โดยเนื้อหาที่ผมเขียนจะครอบคลุมวิธีการพัฒนา WordPress Theme เบื้องต้น คงไม่ถึงกับเจาะลึกไปทุก ๆ ส่วน หากสงสัยตรงไหนเพื่อน ๆ สามารถทิ้งข้อความไว้ได้เลยนะครับ สำหรับบทความแรกนี้จะเป็นการสร้าง Wordpree Theme เปล่า ๆ เพื่อนำเข้ามาใช้งานกับ WordPress ของเราครับ

สร้าง WordPress Theme

ให้เราเข้าไปที่ Directory Theme ของ WordPress เช่นสำหรับผมใช้ WAMP เป็น Webserver จะเข้าไปได้ที่ C:\wamp\www\dev_everduck\wp-content\themes จากนั้นให้เราสร้รางชื่อ Folder ที่เราต้องการเก็บ Theme ครับ จากตัวอย่าผมใช้ Folder ชื่อว่า everduck ครับ

หลังจากที่เราสร้าง Folder สำหรับจัดเก็บไฟล์ Theme ของเราแล้วต่อไปก็คือการสร้างรายละเอียดของ Theme ของเราครับ โดยเราจะระบุว่า Theme ที่ใช้ชื่ออะไร ใครเป็นคนพัฒนาเป็นต้นครับ ให้เราสร้างไฟล์ชื่อว่า sytle.css เข้าไปยัง Folder ที่เราเพิ่งสร้างไปเมื่อกี้ครับ หลังจากสร้างไฟล์แล้วให้เรากรอกรายละเอียดดังนี้ครับ

/*
Theme Name: everduck.
Theme URI: http://www.everduck.com
Author: Picharnan Buaporn
Author URI: http://picharnan.com
Description: WordPress theme for www.everduck.com
Version: 1.0
*/

จาก code ด้านบนนั้นคือการ comment ไฟล์ css ของเรา ทำให้ไม่มีผลต่อการนำไปใช้กับ style ครับ แต่ในข้อมูลทั้งนั้นจะเป็นรายละเอียดของ Theme เราครับ โดยรายละเอียดแต่ละบรรทัดจะอธิบายอยู่ในตัวของมันอยู่แล้วครับ ตอนนี้ Theme ของเราใกล้จะเสร็จแล้วครับ ต่อไปให้เราสร้างไฟล์ที่ชื่อว่า index.php **ไม่จำเป็นต้องใส่ข้อความอะไรในไฟล์ index.php ก็ได้ครับ หลังจากนั้นให้เราเปิด Browser แล้วไปที่หน้าจัดการ Theme ครับ Apprearance > Themes เราจะสังเกตุเห็นว่ามี Theme ชื่อว่า everduck. ให้เราเลือกใช้แล้วครับ

ไฟล์ index.php นี้แหละครับที่เราจะใส่ code php ครับ เพื่อน ๆ สามารถนำ code shortcode มาใส่ตรงนี้ได้เลยครับ หรืออีกทางหนึ่งก็คือการสร้างไฟล์ funcionts.php มาก็ได้ครับ

และเพื่อน ๆ ต้องการให้มีรูปภาพ preview ก็ให้เราสร้างไฟล์รูปภาพที่ชื่อว่า screenshot.png เอาไว้ใน Folder ครับ เพียงเท่านี้เพื่อน ๆ ก็จะมี Theme ให้เลือกใช้พร้อมภาพ Preview แล้วครับ

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