สอนเขียน 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 ที่เราเพิ่งสร้างไปเมื่อกี้ครับ หลังจากสร้างไฟล์แล้วให้เรากรอกรายละเอียดดังนี้ครับ

จาก 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 ดูและไปยังหน้าหลักของเว็บไซต์ของเราจะเห็นเป็นหน้าขาว นั้นก็เพราะว่าเรายังไม่ได้เพิ่มการแสดงผลนั้นเองครับ เอาไว้บทความหน้าเราจะมาเพิ่มรายละเอียดต่าง ๆ กันครับ

April 25, 2017