Home > Wordpress > เวิร์ดเพรสธีม บทที่ 1 : เกริ่นนำ

เวิร์ดเพรสธีม บทที่ 1 : เกริ่นนำ

บทความนี้เป็นบทแรกของการสอนสร้างเวิร์ดเพลสธีม ผมจะไม่สอนทุกอย่างในครั้งเดียว แต่จะแบ่งออกเป็นบท ๆ (ไม่อยากอัดแน่นเกินไป) อนึ่งสิ่งที่ผมจะสอนนี้ไม่อาจจะเป็นบทความอ้างอิงได้ หมายความว่าผมจะสอนคุณไปทีละขั้น แต่ถ้าหากคุณต้องการเอกสารอ้างอิงก็สามารถอ่านได้จากเอกสารของเวิร์ดเพลสเอง ซึ่งมีให้ทุกอย่าง
บทนี้ประกอบไปด้วย

  • กฏง่าย ๆ (Basic Rules)
  • คำศัพท์ที่ควรรู้(Lingo)
  • ลำดับชั้นของไฟล์(Hierarchy)

กฏง่าย ๆ (Basic Rules)

  • กฏข้อที่ 1 : ปิดทุกแท็ก(tag) ที่คุณเปิดมันไว้

    วิธีปิดแท็กที่ผิด ผิดเพราะอะไรนะหรือ : วางแท็กปิด ul ไว้ผิดลำดับ แท็กทุกแท็กจะอยู่ในเครื่องหมาย “<” และ “>” เครื่องหมาย “/” ใส่ไว้เพื่อระบุว่าแท็กนั้น ๆ เป็นแท็กปิด ในตัวอย่างข้างต้นผมใช้ ul (unordered list) และ li(list item) แท็ก โปรดสังเกตวิธีการวาง <li></li> จะต้องอยู่ใน <ul></ul> ซึ่งเรียกว่าการวางแบบซ้อน (nesting)
  • กฏข้อที่ 2 : ทุก ๆ ธีม(theme) จะต้องประกอบไปด้วย อย่างน้อย 2 ไฟล์ – style.css และ index.php ถ้าคุณอยากให้ธีมเวิร์ดเพลสของคุณมีอะไรบ้างก็ใส่ไว้ในไฟล์ index.php และ อยากให้ธีมมีหน้าตาเป็นยังไงก็ใส่ไว้ในไฟล์ style.cssนี่คือรายการไฟล์ของธีมเวิร์ดเพลส (มันอาจจะเยอะและไม่ค่อยคุ้นเท่าไหร่แต่ยังไม่ต้องกังวลครับ)
    • style.css
    • index.php
    • home.php
    • single.php
    • page.php
    • archive.php
    • category.php
    • search.php
    • 404.php
    • comments.php
    • comments-popup.php
    • author.php
    • date.php

คำศัพท์ที่ควรรู้(Lingo)

  • เทมเพลท(Template) คือชุดของโค้ดที่สามารถนำไปใช้ได้หลาย ๆ ที่ โดยที่เราไม่ต้องเขียนโค้ดนั้นใหม่ครั้งแล้วครั้งเล่า
  • ไฟล์เทมเพลท(Template file) คือไฟล์ที่ประกอบไปด้วยชุดของโค้ด(เทมเพลท) หนึ่งชุด หรือ หลาย ๆ ชุดก็ได้ แต่ละหน้า(page) จะถูกสร้างขึ้นมาจากไฟล์เทมเพลทหลาย ๆ ไฟล์ เช่น index.php, style.css, sidebar.php ฯลฯ
  • ธีม หรือ ธีมเวิร์ดเพลส(Theme or WordPress theme) คือ ทุกไฟล์ที่คุณใช้ไม่ว่าจะเป็น ข้อความ รูปภาพ โค้ด หมายเหตุเวิร์ดเพลสธีม กับ เวิร์ดเพลสเทมเพลท หลายคนมักคิดว่าเหมือนกัน ผมขอบอกตรงนี้เลยว่าไม่เหมือนกันนะครับ
  • โพส(Post) คือ บทความหรือจะเรียกว่าอะไรก็แล้วแต่ในบล็อก เช่น หน้าที่คุณกำลังอ่านอยู่นี้ก็เรียกว่าโพส
  • หน้า(Page) คือ โพสชนิดพิเศษที่จะไม่ถูกจัดแบ่งโดยประเภท(categories) โดยจะถูกแยกออกมาจากโพส

ลำดับชั้นของไฟล์(Hierarchy)
แผนภาพข้างล่างนี้แสดงให้เห็นถึงโครงสร้างระบบของเวิร์ดเพลส ในที่นี้แสดงให้เห็นแค่ 6 ไฟล์ จากทั้งหมด 13 ไฟล์ เพราะว่าเราจะให้ความสนใจทั้งหกไฟล์นี้เป็นพิเศษ


การจัดวางลำดับชั้นของแต่ละไฟล์ในแผนภาพมีนัยสำคัญ บน,ซ้าย คือ สำคัญที่สุด ล่าง,ขวา คือ สำคัญน้อยที่สุด

ลำดับชั้นมีความสำคัญต่อเทมเพลทไฟล์เพราะถ้าหาก archive.php ที่ควบคุมการแสดงผลหน้า archive หายไป เวิร์ดเพลสก็ยังแสดงผลได้อยู่โดยใช้ index.php ควบคุมการแสดงผลแทน

หรือถ้าไฟล์ single.php หายไป เวิร์ดเพลสก็จะใช้ index.php ควบคุมการแสดงผลแทน

อ่านต่อ>> เวิร์ดเพลสธีม บทที่ 2 : ไฟล์เทมเพลทและเทมเพลท

Related Articles


Share
Categories: Wordpress
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. au8ust
    October 20th, 2008 at 06:43 | #1

    ของเขาดีจริง ๆ ครับ : )

  2. October 20th, 2008 at 08:40 | #2

    บทความดีมากครับ

    รออ่านตอนต่อไปนะครับ

    :d:d

  3. October 20th, 2008 at 10:57 | #3

    ผมจะพิมพ์งานในword ต้องมีแท๊กอย่างงี้ด้วยเหรอครับ
    อืมม ได้ความรู้ใหม่ๆ

  4. October 20th, 2008 at 11:18 | #4

    เยี่ยมมากๆครับ อยากอ่านอันลึกๆกว่านี้ อิอิ:”>

  5. October 22nd, 2008 at 11:01 | #5

    เจ๋งมากครับ เยี่ยมเลย

  6. October 23rd, 2008 at 01:02 | #6

    ขอบคุณครับ
    รออ่านบทต่อไป อิอิ

  7. October 26th, 2008 at 17:22 | #7

    ืือืม….ขอบคุณสำหรับความรู้ดีๆ ครับ:)>-

  8. โชว์ง้าว
    October 26th, 2008 at 21:52 | #8

    หูยอยากอ่านต่อเร็วๆๆ จัง เมื่อไหร่ บทต่อไปจะมาอ่ะ

    ไม่ต้องกลัวหนักไปหรอกนะ บทความดีๆ มีประโยชน์แบบนี้อยากอ่าน

    คิคิ อยากอ่านใจจะขาดแล้วเนี่ยะ คาใจจัง

    ขอตัวอย่างผลงานให้ดูด้วยนะ :)>-

  9. October 27th, 2008 at 22:15 | #9

    บทความนี้น่าสนใจครับ ผมจะรออ่านตอนต่อไป(อย่านานนักนะ ใจจะขาดแล้ว:)

  10. haguhagu200
    October 28th, 2008 at 14:58 | #10

    ขออนุญาตเก็บบทความนี้ไปลงบล็อคผมน่ะครับ

  11. November 5th, 2008 at 16:21 | #11

    เป็นบทความที่น่าสนใจและเป็นประโยชน์กับผู้ที่เริ่มต้นเล่น wordpress จริงๆ ครับ

    ป.ล. WordPress ถ้าสะกดแบบไทยน่าจะเขียนแบบนี้นะครับ เวิร์ดเพรส=d>

  12. November 13th, 2008 at 23:59 | #12

    เยี่ยมมากครับ ขอบคุณสำหรับบทความดีๆ จะเอาไปลองศึกษาและปฎิบัติดูครับ

    :d:d:d

  13. November 19th, 2008 at 15:30 | #13

    เยี่ยมครับ อยากจะเจาะลึกเวิร์ดเพลสซะที

  14. December 11th, 2008 at 13:41 | #14

    ขอบคุณมากครับ ตามมาอ่านจาก thaiseoboard ครับ

  15. December 19th, 2008 at 11:24 | #15

    ผมเข้าใจ css มากขึ้นเลยครับ
    ขอบคุณมากครับ

  16. December 22nd, 2008 at 10:38 | #16

    สุดยอดบทความแห่งยุคครับ
    เรื่องของ WordPress ที่ชาวไทยไม่ค่อยจะเข้าใจกัน :d/

  17. Amp
    March 24th, 2009 at 13:21 | #17

    อ่านเข้าใจง่าย
    และจะอ่านต่อไป
    (อยากทำธีมเองเป็นอ่าค่ะ)
    หุหุหุ

    ขอบคุณมั่กๆคร๊า…..:d

  18. April 9th, 2009 at 11:36 | #18

    เยี่ยมครับ…กำลังหาอ่านอยู่พอดีขอบคุณมากครับ

  19. June 17th, 2009 at 21:18 | #19

    ถ้าไม่ได้เว็บนี้ช่วยผมแย่แน่ ๆเลย ขอบคุณมากครับ :d

  20. June 25th, 2009 at 16:27 | #20

    เยี่ยมเลยค่ะ เหมาะสำหรับผู้เริ่มต้นที่ต้องการพัฒนาธีม wordpress:)>-

  21. December 6th, 2009 at 17:28 | #21

    Thank you for good information

  22. December 6th, 2009 at 17:29 | #22

    แบบนี้ต้องลองครับ

  23. December 19th, 2009 at 12:00 | #23

    ผมเพิ่งเริ่มหัดครับ กะลังลองทำตามอยุ่ ขอบคุณมากครับ เยี่ยมจิงๆ

  24. March 13th, 2010 at 10:04 | #24

    ขอบคุณมากค่ะ มีประโยชน์มาก
    กำลังทำเว็บจาก wordpress พอดีเลย :x

  25. October 31st, 2010 at 01:13 | #25

    เยี่ยมมากเลยครับ ขอบคุณมากๆสำหรับบทความดีๆครับ

  26. March 3rd, 2011 at 10:38 | #26

    ได้แนวเลยครับ… ขอบคุณมากครับ

  27. August 4th, 2011 at 20:24 | #27

    เพิ่งมาเจอบทความครับ
    สุดยอดมากเลย
    เขียนเยอะๆนะครับ
    จะรออ่าน

  28. September 23rd, 2011 at 01:11 | #28

    บทความดีมากครับขอรับไปศึกษานะครับ กำลังศึกษาเว็บจาก wordpress พอดีเลย :)

  29. bootnuttawig
    October 24th, 2011 at 13:30 | #29

    Thank You Very Much

  30. Moo
    January 20th, 2012 at 16:33 | #30

    มีต่อไหมครับ เป็นแนวทางได้ดีเยี่ยมเลยครับ บทความดีๆ ต้องรักษาใ้ห้อยู่นานๆ

  31. January 21st, 2012 at 01:57 | #31

    เยี่ยมมากเลยค่ะ อ่านเข้าใจง่ายดี

  32. February 24th, 2012 at 16:05 | #32

    ขอบคุณมากครับ อ่านแล้วเข้าใจง่ายครับ

  33. August 17th, 2012 at 19:34 | #33

    ขอบคุณครับ กำลังหัดทำ

  1. February 1st, 2011 at 13:34 | #1