WordPress theme standard structure

มาต่อกันเลยครับจากคราวที่แล้วเราได้กล่าวถึงว่าทำม๊ายยยยยทำไม ต้องทำ theme wordpress เองในเมื่อชาวบ้านเขาทำไว้ สวยๆแล้ว จากบทความนี้ ทำ Theme WordPress ยังไง ? คราวเราได้เรียนรู้ถึงไฟล์ต่างๆว่ามีอะไรบ้างและสำคัญอย่างไร เกี่ยวกับ WordPress theme standard

มาตราฐานการพัฒนา 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 คือ

  1. style.css ควบคุมเกี่ยวกับการแสดงผลของเว็บไซร์และดีไซน์
  2. functions.php เป็นเกี่ยวกับการควบคุมฟังก์ชั่นต่างๆ
  3. และสุดท้ายเป็นพวกเกี่ยวกับ 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= \=/

Loading

เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวหนังสือด้วย www.readraide.in.th