มาต่อกันเลยครับจากคราวที่แล้วเราได้กล่าวถึงว่าทำม๊ายยยยยทำไม ต้องทำ theme wordpress เองในเมื่อชาวบ้านเขาทำไว้ สวยๆแล้ว จากบทความนี้ ทำ Theme WordPress ยังไง ? คราวเราได้เรียนรู้ถึงไฟล์ต่างๆว่ามีอะไรบ้างและสำคัญอย่างไร เกี่ยวกับ WordPress theme standard
มาตราฐานการพัฒนา WordPress theme standard
เมื่อเราคิดจะสร้าง theme นั้นเราก็ควรจะทำตามมาตราฐานของสากลเพื่อให้ theme ของเรานั้นใช้ได้ดี ไม่ใช่ใช้เองอยู่บ้านเจ๋งเอง กินเอง ทำเอง คนอื่นมายุ่งไ่ม่ได้ อย่างนั้นก็อยู่บ้านนอนดีกว่า โดยมาตราฐานมีดังนี้
- โครงสร้างต้องดี ไม่มีข้อผิดพลาด ( error ) และถูกต้องตามหลัก HTML | WordPress coding standart ( ติดหน้านี้ไว้ก่อนจะแปลต่อให้นะใครรีบก็จัดไปก่อนเลย )
- CSS ต้องถูกต้องและสะอาด เอาไปล้างน้ำก่อนแล้วในน้ำแช่ทิ้งไว้ซัก 30 นาที ( เฮ้ย ! ไม่ใช่ทำกับข้าว กลับมาๆ ) คือเป็นไปตามหลักของเขาแหละ CSS coding standart
- สุดท้ายทำตามการดีไซน์ที่เขาแนะนำไว้ Site design and layout ( เยอะโค – ตะ – ระ ถ้าแปลหมดคงเขียนหนังสือขายดีกว่าไหม = =’ )
มาดูกายวิภาคของ theme กันดีกว่า ( แปลอย่างกับ google )
WordPress theme นั้นจะอยู่ใน wp-content/themes/. ซึ่งในแต่ละ theme นั้นจะประกอบไปด้วย stylesheet files , template files และพวก function files , Javascript และพวกรูปภาพ ( images ) ตัวอย่าง theme ชื่อว่า ‘test’ อยู่ในไดเรกทดรี่ ( directory ) อย่างนี้ wp-content/themes/test/. หลีกเลี่ยงการใช้พวก ตัวเลขเวลาตั้งชื่อ theme เช่น test123 อย่างนี้ไม่เอา ( เข้าใจ๋ ? ) เพื่อป้องกันเวลามันโชว์ใน theme list
ทุกๆครั้งที่ทำการ install นั้นทาง wordpress ได้จัด theme default มาให้เราแล้วโดยทุกคนได้มาซึ่งสามารถตรวจสอบได้ในโฟรเดอร์ wp-content/themes ซึ่งเป็น theme สีฟ้าๆนั่นแหละ เพื่อตรวจดูว่าเราจะสร้างอย่างไรโดยเอาตัวนี้เป็นตัวอย่าง
WordPress themes ประกอบไปด้วยไฟล์หลักๆ 3 ไฟล์ ที่ไม่ใช่พวกรูปภาพและ javascript คือ
- style.css ควบคุมเกี่ยวกับการแสดงผลของเว็บไซร์และดีไซน์
- functions.php เป็นเกี่ยวกับการควบคุมฟังก์ชั่นต่างๆ
- และสุดท้ายเป็นพวกเกี่ยวกับ template files อันนี้จะควบคุมเกี่ยวกับข่าวสารที่มาจาก Database ที่เราๆท่านๆเขียนในด้านหลังเนี้ยแหละครับ
มาดูกันเป็นอย่างๆไปแล้วกันเริ่มจาก
Theme stylesheet
นอกเหนือจากพวกคำสั่ง CSS ต่างๆใน style.css แล้วคุณจะต้องเขียนข้อมูลของ theme ใน comments ด้วย หมายถึงว่าคุณต้องเขียนราละเอียดด้วยว่าใครเป็นคน สร้าง version ที่เท่าไร ภูมิใจไหมที่สร้าง ( ไม่เกี่ยว ) พวกนี้ โดยคุณจะ ต้อง เขียนไว้ทุกครั้งที่คุณอยากสร้าง theme ใหม่ และ ห้ามให้ theme สองอันมีข้อมูลเหมือนกัน โดยเราจะเขียนไว้ตำแหน่ง header ของไฟล์ และถ้าคุณ copy หรือเอามาจากไหนช่วยเปลี่ยนข้อมูลตรงจุดนี้ด้วยนะจ๊ะ ….จุ๊บๆ
พูดแล้วงงๆ จัดตัวอย่างไปเชยชมซักหนึ่งอัน ในตัวอย่างเขาทำ theme ชื่อ “Twenty Ten”
/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: the WordPress team
Version: 1.0 (optional)
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)
General comments and license statement (optional).
*/เจ้า comments เนี้ยแหละจะไปแสดงเวลาที่เราจะเลือก theme ในระบบ admin หลังบ้านของเรางั้นเรามาลองกันหน่อยสิว่ามันจะเปลี่ยนจริงไหมฮ่าๆ ลองกันโลด ! ไปที่ wp-content/themes/default แล้วเปิดไฟล์ style.css แล้วจะเห็นดังภาพด้านล่าง
ก็ให้เราๆท่านๆทำการเปลี่ยนค่าต่างๆ ดูเพื่อทดสอบครับ ผมเปลี่ยนเป็น
/*
Theme Name: OxyGenYoYo
Theme URI: https://oxygenyoyo.com/
Description: Theme inwza
Version: 999
Author: OxyGenYoYo
Author URI: https://oxygenyoyo.com/
Tags: blue, custom header, fixed width, two columns, widgets
*/ฮ่าๆเปลี่ยนได้ เกรียนได้ใจเอาล่ะวันนี้พอแค่นี้ก่อนแล้วกันไว้ติดตามต่อใน part 3 นะจ๊ะคุณผู้อ่าน =w= \=/
