คู่มือการพัฒนาธีมจาก WordPress เบื้องต้น (0.1~alpha) เนื่องจากยังไม่ใช่เวอร์ชั่นเต็ม แต่จะทยอยอัพเดตออกมาให้เรื่อยๆ

1. คูมือการพัฒนาธีมของ WordPress เบื้องตน

3. สารบัญ
WordPress! 1
ฐานขอมูล! 3
โครงสรางธีม ! 5
โครงสรางธีม! 5
โครงสรางหนาเพจ! 6
การแสดงผลขอมูล! 8
สรางขอมูล! 9
The Loop! 11
ดึงขอมูล post ออกมาแสดงดวยเงื่อนไขที่ตองการ! 13
Actions & Filters! 15
Actions in Action! 15
Filters in Action! 17
อภิธานศัพท! 19
ID! 19
Post! 19
Page! 19
Slug! 19
Page Slug, Post Slug! 19
Post Type! 19
Custom Post Type! 19
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

4. เอกสารฉบับนี้อยูภายใตสัญญาอนุญาตการใชงานครีเอทีฟคอมมอนสแบบ
แสดงที่มา-ไมใชเพื่อการคา-อนุญาตแบบเดียวกัน 3.0 ตนฉบับ
รายละเอียดเพิ่มเติมไดที่
http://creativecommons.org/licenses/by-nc-sa/3.0/.

5. v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

7. บทที่ 1
WordPress
! WordPress เปนเครื่องมือสำหรับสรางบล็อกและระบบจัดการขอมูล (Content Management System -
CMS) แบบโอเพนซอรสที่พัฒนาอยูบน PHP และ MySQL ดวยสัญญาอนุญาตแบบ GPL มีความสามารถตางๆ
มากมาย เริ่มตนพัฒนาเมื่อ 27 เมษายน 2546 ซึ่งภายใน WordPress นั้นมีโครงสรางตางๆ เพื่ออำนวยความสะดวก
ใหกับนักพัฒนาอยูมากมายดวยกัน ไดแก
! ธีม (Themes - wp-content/themes) ซึ่งเปรียบเสมือนหนากากของเว็บไซต เปนสวนแสดงผลขอมูลที่ผูใช
สรางขึ้นมา ทั้งนี้เพื่อแยกการประมวลผลอื่นๆ ออกมาจากเว็บไซต จึงทำใหผูใชสามารถปรับเปลี่ยนธีมเปนธีมที่ตองการ
ไดโดยไมสงผลกระทบตอขอมูลที่ผูใชสรางขึ้นเลย (http://wordpress.org/extend/themes)
! ปลั๊กอิน (Plugins - wp-content/plugins) เปนสวนที่เขามาชวยเพิ่มความสามารถใหกับ WordPress ใหมี
มากขึ้นไปอีก เชน ชวยจัดการดาน SEO ของเว็บไซต ชวยดูแลรักษาฐานขอมูล จำกัดสิทธิการเขาถึงขอมูลของผูใช
หรือชวยทำ cache เพื่อใหเว็บไซตตอบสนองไดเร็วยิ่งขึ้น เปนตน (http://wordpress.org/extend/plugins)
! วิดเจ็ด (Widgets) คือ กลองเครื่องมือขนาดเล็กที่ผูใชงานสามารถเลือกไดวาจะวางกลองนี้ไวที่ใดโดยแตกลอง
ก็จะมีพฤติกรรมที่แตกตางกันออกไปเชน แสดงขอมูลของเว็บไซต เพิ่มขึ้นมาจากขอมูลหลักที่กำลังอานอยู แสดงสถิติ
การใชงาน แสดงภาพถายแบบสไลด หรือเชื่อมตอเขากับ Social Network อื่นๆ เปนตน โดยที่วิดเจ็ดจะมากับธีมหรือ
ปลั๊กอินตางๆ ที่ติดตั้งเพิ่มเขาไป
ขอมูลภายใน WordPress จะแบงออกเปน 2 สวนใหญๆ ไดแก
1. Post (หรือ album ในความหมายของ m-culture.in.th) เปนขอมูลที่จะเคลื่อนไหว (เพิ่ม) อยูตลอดเวลา โดย
ปกติแลวจะเรียงจากใหมที่สุดไปหาเกาที่สุด เนื่องจากพัฒนาอยูบนแนวคิดของการเขียนบล็อก
2. Page (หรือหนาแสดงผลขอมูลตางๆ ในความหมายของ m-culture.in.th) เปนสวนที่ไมเคลื่อนไหวหรือปรับ
เปลี่ยนมากเทาไหรนัก โดยจะแสดงผลขอมูลเฉพาะดาน เปนหนาๆ ไป เชน หนา เกี่ยวกับฉัน เพื่อแนะนำตัวหรือ
บอกขอมูลการติดตอ หนา แผนที่ สำหรับแสดงผลขอมูลวัฒนธรรมบนแผนที่ เปนตน
นอกจากขอมูลชนิดของ Post และ Page ภายใน WordPress ยังมีขอมูลแบบอื่นอีก เชน
- Attachment สำหรับรูปภาพที่อัพโหลดเขามา
- Revision สำหรับทำเวอรชั่นของ Post หรือ Page ในกรณีที่มีการเปลี่ยนแปลงแกไข หรือทำการบันทึกอัตโนมัติใน
ระหวางที่ผูใชกำลังสรางขอมูลใน Post หรือ Page นั้น
- Navigation Menu ใชสำหรับสรางเมนูในระบบ
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

9. บทที่ 2
ฐานขอมูล
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

11. บทที่ 3
โครงสรางธีม
โครงสรางธีม
! การเปลี่ยนแปลงโครงสรางของหนาเว็บไซตนั้นถือเปนเรื่องหนึ่งที่เว็บไซตหลายแหงทำบอยๆ (4-5 ปครั้ง) เพื่อ
เพิ่มความสามารถ ออกแบบใหมเพื่อใหเขากับเทรนด เชน เปลี่ยนจาก XHTML เปน HTML5 เปนตน และอีกเหตุผล
หนึ่งก็เพื่อไมทำใหผูใชรูสึกจำเจ ซึ่ง WordPress เองก็คำนึงถึงความตองการนี้ (และไมตองการที่จะดูแลธีมเองอีกตอ
ไป) ดังนั้น WordPress จึงยอมใหนักพัฒนาทั่วไปสามารถที่จะสรางธีมของตัวเองขึ้นมาใชงานได เพื่อใหธีมที่นักพัฒนา
สามารถนำไปใชงานไดกับทุกๆ เว็บไซตที่ใชงาน WordPress จึงไดมีโครงสรางของธีมที่จำเปนจะตองทำตามดัง
โครงสรางดานลาง
รูปที่ 3.1 โครงสรางไฟลของธีม (http://codex.wordpress.org/Template_Hierarchy)
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

12. 6
! โดยไฟลทั้งหมดที่เห็นดานบนจะอยูดานบนสุดของไดเรคทอรี่ที่บรรจุธีมไวซึ่งในที่นี้จอยูในไดเรคทอรี่
nakornsawanlive (wp-content/theme/nakornsawanlive) ดังนั้นการแกไขไฟลใดๆ ที่ตรงกับชื่อที่ปรากฎอยู
ภายในแผนผังดานบนก็จะสงผลใหหนาตางๆ นั้นเปลี่ยนแปลงไปดวย ยกตัวอยางเชน หากตองการแกไขโครงสรางของ
เพจที่แสดงผลขอมูล 1 ขอมูลนั้น (หนาเดี่ยวของ album) ก็ใหไปแกไขที่ไฟล single.php หากแตถาไมมีไฟลนี้ในได
เรคทอรี่ก็ใหไปแกที่ไฟล index.php หรือหากตองการปรับการแสดงผลเฉพาะขอมูลที่เปนไฟลวิดีโอทั้งหมด (MIME
type = video/*) ใหสรางไฟลที่ชื่อวา video.php เพื่อรับหนาที่แสดงผลขอมูลไฟลที่เปนวิดีโอทั้งหมด หรือหาก
ตองการที่จะระบุชนิดลึกลงไปอีกวาตองการแสดงผลเพียงแคไฟลวิดีโดที่เปน MP4 เทานั้น (MIME type = video/
mp4) ก็ใหสรางไฟลชื่อ video_mp4.php เพื่อทำหนาที่แสดงผล
โครงสรางหนาเพจ
! โครงสรางของหนาเพจนั้นจะขึ้นอยูกับนักออกแบบแตละคนตองการมาใหเปนแบบไหน ซึ่งไมจำเปนจัดวาง
เหมือนกันไปทั้งหมด แตก็จะมีโครงสรางที่เปนพื้นฐานทั่วไปดังนี้
header.php
[The Loop] sidebar.php
footer.php
รูปที่ 3.2 โครงสรางเพจ (http://codex.wordpress.org/Stepping_Into_Templates)
! โครงสรางดานบนนี้ปกติแลวจะอยูในไฟล index.php (หนาแรกของระบบ) ซึ่งแยกการแสดงผลออกไปดังนี้
1. header.php ใชเก็บโคดที่ใชสำหรับแสดงผลสวนที่เปนหัวของเว็บไซต เพื่อใหดานบนของเว็บไซตมีความคงที่อยู
เสมอ เรียกใชโดยใชฟงกชัน get_header() เพื่อนำขอมูลที่อยูในไฟล header.php มาแสดงผล
<?php get_header(); ?>
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

13. 2. sidebar.php คือสวนที่ใชสำหรับแสดงผลขอมูลอื่นๆ นอกจากเนื้อหาหลักสวนใหญจะเปนแนวตั้ง และไมจำเปนจะ
ตองมีเสมอไปขึ้นอยูกับนักออกแบบ เรียกใหดวยฟงกชัน get_sidebar() เพื่อนำขอมูลที่อยูภายในไฟล
sidebar.php มาแสดงผล
<?php get_sidebar(); ?>
3. footer.php เปนพื้นที่สำหรับแสดงขอมูลอื่นๆ นอกเหนือจากเนื้อหาหลักเชนเดียวกับ sidebar นอกจากนั้นยังเก็บ
โคด HTML สวนทายไว สวนใหญจะเปนแนวนอนดานลางสุดของเว็บไซต เรียกใชดวยฟงกชัน get_footer() เพื่อนำ
ขอมูลที่อยูภายในไฟล footer.php มาแสดง
<?php get_footer(); ?>
4. The Loop คือสวนที่จะนำเอาขอมูล เชน Post, Page, แผนปายกำกับ ที่อยูในระบบมาแสดงผล โดยขึ้นอยูกับวา
กำลังสนใจขอมูลใดอยู
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

14. บทที่ 4
การแสดงผลขอมูล
! กอนหนานีเราไดทราบแลววา WordPress แบงชนิดขอมูลออกเปนกลุมตางๆ ซึ่งขอมูลที่ถือไดวาเปนหัวใจ
้
สำคัญของ WordPress คือขอมูลประเภท Post ซึ่งเปนขอมูลที่เคลื่อนไหวสูงที่สุดในระบบ ดังนั้นการนำขอมูลเหลานี้
มาแสดงผลจึงถือไดวามีความสำคัญสูงสุดของระบบ ซึ่งกอนที่จะแสดงนั้น แนนอนวาตองสรางขอมูลเหลานี้ขึ้นมากอน
1
2 3
รูปที่ 4.1 Dashboard
! รูปที่ 4.1 คือ Dashboard หรือระบบหลังบานของ WordPress ซึ่งผูใชที่ลงชื่อเขาใชงานมีสิทธิเปนผูดูแล
ระบบ (Admin) ซึ่งผูใชคนแรกที่ติดตั้ง WordPress จะไดสิทธินั้นไปโดยอัตโนมัติ ซึ่งสามารถปรับแกสิทธิของผูใชตางๆ
ไดภายหลัง ในหนาจอนี้จะมีกลุมเมนูอยู 3 กลุมดวยกัน
1. Admin bar จะปรากฎอยูเสมอหลังจากลงชื่อเขาใชงานแลว ทั้งผูใชปกติและผูดูแลระบบ แตเมนูจะแตกตาง
กันไปตามสิทธิการเขาถึงขอมูลและขอมูลที่กำลังแสดงอยูดานลาง
2. Admin menu คือเมนูของผูดูแล ซึ่งก็จะปรับเปลี่ยนไปตามสิทธิการเขาถึงของผูใชเชนกัน ยกตัวอยางเชน ใน
กรณีของผูใชทั่วไป หากเขามาในหนานี้จะเห็นเพียงตัวเลือกสำหรับแกไขขอมูลของตนเองเทานั้น
3. Options page คือฟอรมตางๆ สำหรับปรับแตงขอมูลของเว็บไซต การแสดงผลจะขึ้นอยูกับตัวเลือกดานซาย
(Admin menu) ที่เลือกอยู เชนในรูปที่ 4.1 เลือกที่ Dashboard Options page ดานซายก็จะมีขอมูลโดย
สรุปของเว็บไซตนี้ขึ้นมาให
! โดยเมนูทั้งหมดดานบน WordPress อนุญาตใหนักพัฒนาเพิ่มเมนูเพื่ออำนวยความสะดวกใหผูใชงานได
ทั้งหมดเพื่อปรับแตงคาตางๆ ที่อยูภายในธีมหรือปลั๊กอินของตนเอง
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

15. สรางขอมูล
! จากเมนูดานบนภายในหนา Dashboard จะสรางขอมูลไดจาก 2 ตำแหนงดวยกันคือเลือก Post หรือ Page
ที่ Admin menu แลวเลือกที่เมนู Adnew New (รูปที่ 4.2 a) อีกวิธีการหนึ่งคือจาก Admin bar เลือก +New จาก
นั้นจึงเลือก Post หรือ Page ตามชนิดขอมูลที่ตองการสราง (รูปที่ 4.2 b)
(a)
(b)
รูปที่ 4.2 (a) สรางขอมูลใหมจาก Admin menu
รูปที่ 4.2 (b) สรางขอมูลใหมจาก Admin bar
ลำดับขอมูลและ URL
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

16. ! ขอมูลที่อยูภายใน WordPress นั้นสามารถจัดเปนหมวดหมู 2 วิธีหลักๆ ดวยกันคือ จัดหมวดหมูดวย
Category ซึ่งเปนการจัดการพื้นฐานของ WordPress อยูแลว โดยที่ทุกๆ Post นั้นจำเปนตองอยูในหมวดหมูใดหมวด
หมูหนึ่งเสมอ อีกวิธีการหนึ่งคือจัดหมวดหมูดวย Post หรือ Page ดวยกันเอง เชน Page A เปนลูกของ Page B ซึ่ง
การจัดหมวดหมูดวยวิธีนี้จะสงผลกระทบโดยตรงไปที่ URL ของ Page B หรือเพจอื่นๆ ที่มาสืบทอดจาก Page A หรือ
Page B ตอไป ยกตัวอยางเชน Page A มี slug คือ foo จะได URL ของ Page A เปน http://example.com/foo1
และเมื่อกำหนดให Page B ซึ่งเดิมทีมี URL เปน http://example.com/bar กลายเพจลูกของ Page A ดังนั้น URL
ใหมของ Page B จะเปลี่ยนมาเปน http://example.com/foo/bar
รูปที่ 4.3 สราง Page
! จากรูปที่ 4.3 เปนการสรางขอมูล Page ใหมขึ้นมา ในภาพ Page นี้ยังไมเผยแพรใหบุคคลทั่วไปเห็น แต
จะบันทึกไวในฐานขอมูลเรียบรอยเปนระยะๆ (Auto save) ในภาพจะเห็นตัวหนังสือสีเหลือดานลางคือหัวเรื่อง (Title)
ที่เพิ่มเขาไป เรียกวา slug เพื่อนำไปใช กับ URL ซึ่ง WordPress จะสรางใหโดยอัตโนมัติ2 หากตองการแกไขทำได
ทันทีดวยการคลิ้กที่ตัวหนังสือสีเหลืองโดยตรงหรือปุม Edit
! ในกรอบ Page Attribute ดานซาย (ในกรณีที่ไมมีใหเลือกที่ Screen Options ดานบนแลวเลือกที่ตัวเลือก
ดานบนวาตองการเมนูใดเพิ่มเติมบาง) จะมีตัวเลือก 3 ตัวเลือกไดแก
- Parent : เปนตัวเลือกสำหรับกำหนดวาหนาเพจนี้จะเปนเพจลูกของเพจใด ซึ่งคาโดยปริยายคือไมมี
(None) แตในกรณีนี้จะเลือกที่ Sample Page (เพจตัวอยางที่สรางขึ้นอัตโนมัติเมื่อติดตั้งเสร็จ)
- Template : วิธีการแสดงผลของ Page นี้ โดยตัวเลือกดานในจะขึ้นอยูกับธีมจะสรางรูปแบบใดใหเลือกบาง
- Order ลำดับการจัดเรียงในกรณีที่นำเพจนี้ไปสรางเปนตัวเลือกในเมนู แตทายที่สุดแลวผูใชยังเปนผูตัดสินใจ
วาเพจใดจะขึ้นกอนหรือหลัง
! ในกรอบเมนู Publish คือสวนที่ใชกำหนดเงื่อนไขในการแสดงผล เชน
1 ในกรณีนี้กำหนดใหรูปแบบลิงกคือ %post_name%
2 รูปแบบของ URL ดานลางนี้จะขึ้นอยูกับรูปแบบ permalink ที่เลือก คาโดยปริยายของ WordPress คือ p=[page_id]
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

17. - Save Draft คือบันทึกฉบับราง จะยังไมปรากฎบนหนาเว็บ
- Preview แสดงตัวอยางการแกไข
- Status สถานะของขอมูลที่สรางขึ้น มี 3 ตัวเลือกดวยกันคือ Draft, Pending Review และ Published
แกไขไดที่ปุม Edit ดานขวา จะมีเมนูยอยขึ้นมาเปนตัวเลือกจากนั้นกดปุม OK เพื่อบันทึก หรือ Cancel
เพื่อยกเลิกการแกไข
- Visibility ใชกำหนดวาขอมูลที่สรางขึ้นจะมีการแสดงผลในรูปแบบใด
- Public แสดงผลขอมูลทั้งหมด
- Password protected แสดงผลบนหนาเพจ แตตองใสรหัสผานกอนแสดงเนื้อความดานใน
- Private ไมแสดงบนหนาเว็บ ยกเวนผูสรางขอมูล
- Published on สำหรับกำหนดวันที่และเวลาที่ตองการใหขอมูลแสดงผลบนหนาเว็บ สามารถตั้งเวลาไวลวง
หนาได
! เมื่อกดบันทึกขอมูล (Publish) ในภาพที่ 4.3 จะมีกรอบสีเหลืองแจงขอมูลใหทราบวาบันทึกขอมูลเรียบรอย
แลวและตัวอยาง URL ของเพจนนี้จะเปลี่ยนเปน http://localhost/wordpress/sample-page/lorem-ipsum-
dolor/
The Loop
! บทบาทสำคัญของธีมก็คือการนำเอาขอมูลที่มีอยูมาแสดงผลในตำแหนงที่จัดวางไวดวยรูปแบบหรือหนาตาที่
ออกแบบมาไวเรียบรอยแลว หรือเพิ่มความสามารถในการแสดงผลขอมูล เชน เพิ่มชองทางการแชรไปยัง Social
Network ตางๆ แสดงผลเพื่อคนพิการ หรือแปลงขอมูลที่กำลังแสดงอยูนี้เปนไฟลอื่นๆ ที่ผูใชตองการ (ตามตัวเลือกที่
นักพัฒนากำหนด) เปนตน เพื่อเปนการอำนวยความสะดวกใหกับนักพัฒนา WordPress จึงใหฟงกชันที่สามารถอาน
ขอมูลออกมา โดยไมจำเปนตองใชคำสั่ง SQL เลย The Loop ในความหมายของ WordPress จึงหมายถึง กลุมของ
โคดที่นำเอาขอมูล (Post, Tag, Commet) มาแสดงผล ไมวาจะเปนการแสดงผลเพียงรายการเดียวหรือตามจำนวนที่
ตองการก็ตามที่ผูใชกำหนดไว
ตัวอยางที่ 4.1 The Loop
! โคดดานบนคือ The Loop หรือกลุมขอมูลที่ใชสำหรับแสดงผลขอมูลที่สนใจ เนื่องจากหากไปวางไวในไฟล
index.php (ในกรณีที่ไฟลอื่นๆ ตามครบตามโครงสรางของธีมแลว) The Loop จะแสดงผล Post ออกมาโดยเรียง
ตามวันที่อัพเดตจากใหมที่สุดไปหาเกาที่สุด ดวยจำนวนที่กำหนดไว หากแตถานำโคดนี้ไปวางไวที่ไฟล single.php ก็
จะแสดงขอมูลออกมาเพียงขอมูลเดียวเทานั้น และเชนเดียวกันหากนำโคดนี้ไปวางไวที่ไฟล search.php (ใชสำหรับ
post ที่ไดจากการคนหา) ก็แสดง Post ที่มีขอมูลตรงกับที่ผูใชระบุในคำคนหาเขามา
! เพื่อใหเห็นภาพที่เขาใจไดงายยิ่งขึ้น จะอธิบาย The Loop ในกรณีที่วางไวหนาแรกของเพจ (index.php)
1 <?php if ( have_posts() ) : ?>
2 <section id=”my-content”>
3 <?php while( have_posts() ) : the_post() ?>
4 <article id=”post-id-<?php the_ID() ?>”>
5 <header>
6 <h1>
7 <a href=”<?php the_permalink() ?>”
8 title=”<?php the_title() ?>”
9 class=”my-permalink” id=”>
10 <?php the_title() ?>
เพื่อแสดงขอมูล Post ลาสุดออกมา
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

18. 11 </a>
12 </h1>
13 <small>
14 <?php the_date() ?>
15 at <?php the_time() ?>
16 </small>
17 </header>
18
19 <?php the_content(); ?>
20
21 <footer>
22 <?php if ( has_category() ) : ?>
23 Categories: <?php the_category() ?>
24 <?php endif; ?>
25 <?php if ( has_tag() ) : ?>
26 Tags: <?php the_tags() ?>
27 <?php endif; ?>
28 </footer>
29 </article>
30 <?php endwhile; ?>
31 </section>
32 <?php endif;
1
2
3
บรรทัดที่ คำอธิบาย
1 ใชตรวจสอบวามี post ที่ตองนำมาแสดงอยูหรือไม ดวยฟงกชัน have_posts()
- true - มี
- false - ไมมี
3 เขา while...loop เพื่อนำ post ออกมาแสดง โดยใช have_posts() ตรวจสอบวายังมี post ที่ตองนำ
มาแสดงเหลืออยูอีกหรือไม หลังจากนั้นจะใชฟงกชัน the_post() ดึง post ถัดไป (หรือ post แรก)
ออกมาแสดง หากไมใช the_post ภายใน loop นี้ ก็จะกลายเปน infinite loop
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

19. บรรทัดที่ คำอธิบาย
4~30 สวนแสดงผลขอมูลโดยตำแหนงตางๆ นั้นจะขึ้นอยูกับการจัดวางของนักออกแบบ ซึ่งขอมูลที่แสดงนั้น
จะไดมาจากฟงกชันตางๆ ไดแก
- the_ID : สำหรับนำรหัสของขอมูลนั้นมาแสดง
- the_permalink : แสดงลิงกของขอมูล
- the_title : แสดงชื่อขอมูล
- the_date, the_time : แสดงวันและเวลาที่สรางขอมูลนี้ตามลำดับดวยรูปแบบที่กำหนดไวแลว
- the_content : แสดงเนื้อความของขอมูลปจจุบัน
- has_category : ใชตรวจสอบวาขอมูลนี้ผูใชกำหนดกลุม (category) ใหหรือไม ซึ่ง WordPress จะ
บังคับใหทุกขอมูลตองอยูในภายในกลุมใดกลุมหนึ่งอยางนอย 1 กลุม
- the_category : แสดงรายการของกลุมที่ขอมูลนั้นถูกจัดไว ซึ่งเปนขอมูลที่จัดรูปแบบไวแลว (อยู
ภายใน <ul> และมีลิงกไปยังกลุมขอมูลนั้นครอบขอมูล)
- has_tag : ใชสำหรับตรวจสอบวาขอมูลดังกลาวมี tag กำกับอยูหรือไม
- the_tags : แสดงรายการของปายกำกับออกมาทั้งหมดเชนเดียวกันกับ the_category
! ภายใน WordPress จะมีฟงกชันที่ทำหนาที่สำหรับแสดงผลขอมูล โดยทำหนาที่ครอบ Object ตางๆ เอาไว
อีกที ซึ่ง WordPress จะเรียกฟงกชันเหลานี้วา Tags จากดานบน (บรรทัดที่ 4~30 ของตัวอยางที่ 4.1) จะมี Tags 2
กลุมดวยกันคือ Template Tags 3 ทำหนาที่แสดงผลขอมูล ไดแก the_ID, the_permalink, the_title, the_date,
the_time, the_content, the_category, the_tags และ Conditional Tags สำหรับใชตรวจสอบเงื่อนไขตางๆ
สนใจ ในที่นี้คือ has_category และ has_tag
! ลักษณะพิเศษของฟงกชันใน WordPress คือพารามิเตอรของฟงกชันสวนใหญจะเปนแบบ Optional เมื่อไม
ระบุคาใหก็จะนำคาที่เปน Global ออกมาประมวลผลเลยทันที เชน the_ID จะนำหมายเลข ID ของ $post (Object
ที่เก็บคา Post ปจจุบันออกมา) หรือ has_tag ในตัวอยางดานบนจะหมายถึงการตรวจสอบวา Post ที่กำลังแสดงผล
นั้นมี Tag อยูหรือไม ซึ่งการใชงานในลักษณะนี้จะทำงานไดเพียงแคภายใน The Loop เทานั้น
ดึงขอมูล post ออกมาแสดงดวยเงื่อนไขที่ตองการ
! การแสดงผลขอมูลนั้น ในบางกรณีนักพัฒนาจำเปนดึงขอมูลดวยเงื่อนไขพิเศษนอกเหนือจากที่ WordPress
สรางใหโดยอัตโนมัติแลว นักพัฒนาก็ยังดึงขอมูลที่ตองการขึ้นมาแสดงไดตามเงื่อนไข ซึ่งการดึงขอมูลออกมาแสดงนั้น
สามารถทำได 2 วิธีดวยกัน คือ
1. สราง Object ของคลาส WP_Query
2. ใชฟงกชัน query_posts
! ซึ่งทั้ง 2 วิธีนี้ทายที่สุดแลวก็จะใชเปนการใชงานผานคลาส WP_Query เหมือนกัน แตกตางกันที่ WP_Query
นั้นจะสราง Instance ของ WP_Query ขึ้นมากี่ Instance ก็ไดแลวนำไป Iterate ดวย the_post เพื่อนำมาแสดง
3 Template Tags สวนใหญจะมี 2 ฟงกชันที่ทำหนาที่คลายกัน เชน the_ID จะมี get_the_ID ที่คืนหมายเลขของขอมูลนั้นออกมาเหมือนกัน แตตางกันตรง
ที่ the_ID จะคืนคาออกมาในลักษณะของการ echo ดังนั้นจึงไมจำเปนตองใช echo นำหนา the_ID สวน get_the_ID นั้นจะคืนคาออกมาดวยการ return
ทำใหตองใช echo นำหนาเพื่อแสดงผลขอมูล ดังนั้น get_the_ID จึงเหมาะกับการที่จะตองนำเอาขอมูลไปใชตอ สวน the_ID นั้นเหมาะสำหรับการนำเอา
คาที่ไดไปใชงานเลยทันที
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

20. ขอมูลภายหลังทีละ Instance แตสำหรับการใชงาน query_posts จะนำขอมูลที่ไดนั้นไปใสไวในตัวแปรแบบ Global
ดังนั้นจะทำไดครั้งละ 1 เงื่อนไขเทานั้น ซึ่งหลังจากการใชงานทั้ง 2 วิธีนี้สิ่งที่จำเปนที่สุดคือตองใชฟงกชัน
wp_reset_query เพื่อคืนคาในตัวแปร Global ตางๆ ใหเปนคา default และเพื่อไมใหสงผลกระทบตอการดึงขอมูล
ในสวนอื่นๆ วิธีการการระบุเงื่อนไขสำหรับดึงขอมูลออกมาแสดงนั้นจะแบงเปน 2 แบบดวยกันคือ
- ระบุเงื่อนไขดวยขอความแบบ Query String แบบเดียวกับใน URL
- ระบุเงื่อนไขดวย Associative Array โดยที่คียของอารเรยจะเปนคาที่ WordPress กำหนดไวแลว
! ซึ่งการระบุเงื่อนไขทั้ง 2 นี้สามารถใชไดกับทั้ง WP_Query และ query_posts
ตัวอยางที่ 1: แสดงขอมูลที่มีชนิด (Post Type) เปนสินคา (product) ขึ้นมาแบบสุม
<?php
$products = new WP_Query(“orderby=rand&post_type=product”);
ตัวอยางที่ 2: ตองการดึงขอมูลที่มีชนิด (Post Type) เปนสินคา (product) ขึ้นมาแสดง โดยเรียงตามจำนวนยอดขาย
(postmeta key = ns_product_sold) จากมากไปหานอย โดยยังมีสินคาอยูในคลัง (ns_product_amount ไมเปน
0) และยอดรีวิวโดยผูใชเฉลี่ย (ns_average_user_review) แลวมากกวาหรือเทากับ 3.5 ในกรณีที่มีขอมูลตรงตาม
เงื่อนไขจำนวนมาก ใหแบงการแสดงผลออกเปนหนา หนาละ 5 รายการ
<?php
query_posts(array(
‘post_type‘ => ‘product’,
‘meta_key‘ => ‘ns_product_sold’,
‘orderby‘ => ‘meta_value_num’,,
‘order‘ => ‘desc’,
‘posts_per_page’ => 5,
‘meta_query‘ => array(
‘relate‘ => ‘AND’,
array(
‘meta‘ => ‘ns_product_amount’,
‘value‘ => ‘0’,
‘compare’ => ‘>’
),
array(
‘meta‘ => ‘ns_average_user_review’,
‘value‘ => ‘3.5’,
‘compare’ => ‘>=’
)
)
จากทั้ง 3 ตัวอยางดานบน หากเลือกใชวิธีการสราง Instance จาก WP_Query ใหใช $products->have_posts()
เพื่อตรวจสอบวามี post ที่ตรงตามเงื่อนไขที่ระบุหรือไม หลังจากนั้นจึงใช $products->the_post() เพื่อดึงขอมูล
ออกมาหลังจากนั้นก็ใช Template Tags ไดตามปกติ
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

21. บทที่ 5
Actions & Filters
! ลำดับการทำงานของฟงกชันที่พัฒนาขึ้นนั้นมีความสำคัญมาก การนำเอาฟงกชันที่พัฒนาขึ้นในธีมหรือ
ปลั๊กอินไปแทรกสอดในแกน (Core) ของระบบ (WordPress) นั้นยอมไมใชเรื่องดีแนนอน เพราะเมื่อระบบหลักมีการ
แกไขเพิ่มเติมเชนปรับเวอรชั่น ยอมสงผลกระทบกับโคดที่เราไดแกไขโดยตรงเขาไปไมมากก็นอย ดังนั้นเพื่อลดการ
เชื่อมโยงกันระหวางสิ่งที่นักพัฒนาไดสรางขึ้นมาและระบบหลักของ WordPress (Loose Coupling) จึงมีกลไกที่ชวย
อำนวยความสะดวกใหกับนักพัฒนามีอิสระที่จะกำหนดวาฟงกชันที่พัฒนาขึ้นนี้จะทำงานในตำแหนงหรือเงื่อนไขใด
เรียกวา Action4 และ Filter5
! Actions คือ ชื่อกลุมพฤติกรรมที่จะเกิดขึ้นระหวางการทำงานอยางใดอยางหนึ่งของ WordPress เชน
ระหวางการสรางหนาเว็บเพจ ระหวางที่ผูใชลงชื่อเขาใชงาน หรือระหวางการคนหาขอมูลเปนตน
! Filters คือ ชื่อของตัวกรองขอมูลโดยรับขอมูลจาก WordPress และคืนคาขอมูลที่ประมวลผลเรียบรอยแลว
ออกไป
! วิธีการใชงาน Actions และ Filters นั้นแบงเปน 2 วิธีคือ ใช Actions และ Filters ที่ WordPress สรางให
อยูแลว และใช Actions หรือ Filters ที่สรางขึ้นมาเอง ซึ่งวิธีการใชงานจะคลายกันคือ ระบุ Actions หรือ Filters ที่
ตองการ จากนั้นจึงระบุฟงกชันที่สรางขึ้นเพื่อทำงานเมื่อมี Actions หรือ Filters นั้นเกิดขึ้น ผานฟงกชัน add_action
หรือ add_filter พฤติกรรมนี้เรียกวา Hook
Actions in Action
! สำหรับการทำงานของ Actions นั้นจะใชฟงกชัน add_action ซึ่งฟงกชันนี้ตองการพารามิเตอร
- $tag (string - required) ชื่อ Actions ที่ตองการ hook
- $function_to_add (string - required) ชื่อฟงกชันที่ตองการแนบไปกับการทำงานของ Actions
- $priority (int - optional) ใชระบุน้ำหนักการทำงานของ $function_to_add คาโดยปริยายนั้นจะมีคา
เปน 10 หากกำหนดคานอยลงไปกวานี้ $function_to_add จะถูกเรียกขึ้นมาประมวลผลกอน
- $accepted_args (int - optional) ใชระบุจำนวนอารกิวเมนตที่ตองการคาโดยปริยายคือ 1
ตัวอยางที่ 1: ตองการกำหนดคาเริ่มตนตางๆ เชน หมายเลขเวอรชั่นของธีม คาคงที่ตางๆ หลังจากเปดใชธีม
(Activate)
<?php
// functions.php
add_action( ‘after_setup_theme’, ‘li_setup_theme’);
4 ตรวจสอบรายการ Actions ทั้งหมดไดจาก http://codex.wordpress.org/Plugin_API/Action_Reference โดยขอมูลในหนาเพจจะเรียงตามลำดับการ
เกิด
5 ตรวจสอบรายการ Filters ทั้งหมดไดจาก http://codex.wordpress.org/Plugin_API/Filter_Reference
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

22. function li_setup_theme() {
if ( ! get_option( ‘li_theme_name’ ) )
update_option( ‘li_theme_name’, ‘Lorem ipsum’ );
if ( ! get_option( ‘li_theme_version’ ) )
update_option( ‘li_theme_version’, ‘0.1~alpha’ );
}
! โคดดานบนจะเปนการ hook เอา Actions ที่ชื่อวา ‘after_theme_setup’ ที่จะทำงานครั้งแรกครั้งเดียว
หลังจากกด activate ธีม เขากับฟงกชันชื่อ li_setup_theme ภายในฟงกชัน li_setup_theme จะตรวจสอบวามี
คา li_theme_name และ li_theme_version กำหนดคาไวแลวหรือยังดวยฟงกชัน get_option ตามดวยชื่อของ
คา (หรือคีย) ที่ตองการ ในกรณีที่ยังไมมีการกำหนดคาไวในระบบฟงกชันจะคืนคาเปน null จากนั้นจึงใชฟงกชัน
update_option เพื่อกำหนดคาให WordPress
ตัวอยางที่ 2: ตองการเพิ่มจาวาสคริปตใหกับ WordPress
<?php
// functions.php
add_action( ‘wp_enqueue_scripts’, ‘li_add_more_scripts’ );
function li_add_more_scripts() {
wp_enqueue_script(
‘li-main-js’,
get_template_direcoty_uri() . ‘/js/li-main.js’,
array( ‘jquery’, ‘li-prepare’ ),
‘2.1’,
true
);
}
! โคดดานบนใชเพิ่มจาวาสคริปตใหกับ WordPress ดวยฟงกชัน wp_enqueue_script โดยกำหนด id ให
สคริปตนี้วา li-main-js ระบุตำแหนงที่เก็บของไฟลจาวาสคริปตนี้ดวยการเรียกมาจากฟงกชัน
get_template_directory_uri เพื่อรับคาไดเรคทอรี่ปจจุบันของธีม กำหนดเงื่อนไขใหสคริปตนี้นำเขามาในระบบให
นำเขามาถัดจาก jquery (id ของ jQuery) และ li-prepare กำหนดเวอรชั่นของ li-main-js เปน 2.1 และใหใส
สคริปตนี้ที่ดานลางสุดของเพจ
!
! ในกรณีที่ตองการสรางกลุมของ Actions นั้นก็สามารถทำไดเองเชนกัน
ตัวอยางที่ 3: ตองแสดงคาจำนวนสินคาที่เหลืออยู จำนวนที่สินคาที่เหลือ และยอดรีวิวของลูกคาโดยเฉลี่ยไวทายสุด
ของหนาแสดงรายละเอียดสินคา
// single.php
...
<?php do_action( ‘li_more_product_detials’ ); ?>
...
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

23. <?php
// functions.php
add_action( ‘li_more_product_details’, ‘li_display_product_sold’, );
function li_display_product_sold() {
global $post;
if ( ! is_single( $post->ID ) ) return ;
printf(
‘Product remain: %d’,
get_post_meta( $post->ID, ‘ns_product_amount’, true ),
);
}
add_action( ‘li_more_product_details’, ‘li_average_user_review’ );
function li_average_user_review() {
global $post;
if ( ! is_single( $post->ID ) ) return ;
printf(
‘Review: %d’,
get_post_meta( $post->ID, ‘ns_average_user_review’, true ),
);
}
add_action(
‘li_more_product_details’,
‘li_display_product_remain’,
4
);
function li_display_product_remain() {
global $post;
if ( ! is_single( $post->ID ) ) return ;
// do something
}
! ขอดีของวิธีการนี้คือ ถึงแมจะมีการแกไขหรือลบฟงกชัน li_display_product_remain,
li_display_product_sold หรือ li_average_user_review ก็ไมมีขอผิดพลาดเกิดขึ้นในไฟล single.php ลำดับการ
ทำงานจะเปน li_display_product_remain เริ่มตนทำงานอันดับแรก เนื่องจากระบุลำดับความสำคัญไวที่ 4 (เปน
คาอื่นที่นอยกวา 10 ก็ได) หลังจากนั้นคือ li_display_product_sold และ li_average_user_review เพราะทั้ง 2
นี้ไมไดกำหนดคาความสำคัญจึงใชลำดับการประกาศกอนหลังในการประกาศแทน
Filters in Action
! เชนเดียวกันกับการใช Actions วิธีการใช Filters นั้นก็ตองแนบฟงกชันที่พัฒนาขึ้นเขาไปกับ Filters หลักของ
WordPress หรือสราง Filters ขึ้นมาใชเองก็ไดเชนเดียวกัน การใชงานนั้นเริ่มตน hook เอา Filter ของ WordPress
มาใชงานดวยฟงกชัน add_filter ตามดวยชื่อ Filters ที่ตองการและชื่อฟงกชันที่พัฒนาขึ้นมา แตการใช Filters นั้น
จะแตกตางจาก Actions อยางหนึ่งคือฟงกชันที่ใชงานรวมกับ Filters นั้นจำเปนตองรับคาเขามา จากนั้นจึงนำคาที่ได
มาประมวลผลแลวคืนออกไปให WordPress นำคานั้นสงใหฟงกชันอื่นประมวลผลตอหรือนำไปแสดงบนหนาเพจ
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

24. ตัวอยางที่ 4: ตองการเปลี่ยนใหตัวหนังสือที่หัวเรื่อง (Title) เปนสีแดง จะไดวา
<?php
// functions.php
add_filter( ‘the_title’, ‘li_change_title_color );
add_filter( ‘get_the_title’, ‘li_change_title_color’ );
function li_change_title_color( $the_title ) {
return sprintf(
‘<span style=”color:red!important;”>%s</span>’,
$the_title
);
}
! จากตัวอยางที่ 4 นั้นจะเปนการ hook เอา Filters มา 2 ฟลดเตอรดวยกัน ไดแค the_title และ
get_the_title เนื่องจากทั้ง 2 ฟงกชันนี้สามารถดึงเอาหัวเรื่อง (Title) ของขอมูลมาแสดงผลไดเชนเดียวกัน โดยใช
ฟงกชัน li_change_title_color มาประมวลผล ซึ่ง WordPress จะใสคาหัวเรื่องของขอมูลนั้นมาใหอัตโนมัติ ฟงกชั่น
ดานบนคือการนำเอา $the_title ที่ไดรับมาครอบดวย <span> และเปลี่ยนเปนสีแดงจากนั้นจึงคืนคาใหกับ
WordPress
ตัวอยางที่ 5: ตองการเพิ่มเมธอดของ XML-RPC เว็บเซอรวิส
<?php
// functions.php
add_filter( ‘xmlrpc_methods’, ‘li_xmlrpc_methods_register );
function li_xmlrpc_methods_register( $methods ) {
$methods[‘li.hello’] = ‘li_say_hello’;
return $methods;
}
function li_say_hello() {
$var = @$_POST[‘foo’];
return “hello {$var}”;
}
! จากตัวอยางดานบนจะ hook เอา Filters ที่ชื่อวา xmlrpc_methods และแนบเอาฟงกชั่น
li_xmlrpc_methods_register เอาไป เพื่อลงทะเบียนเมธอดตางๆ เขาไป ในที่นี้จะลงทะเบียน li.hello เขาไป โดย
ใชฟงกชั่น li_say_hello เขามาทำงาน ซึ่งในฟงกชั่น li_say_hello นั้นจะรับคาตัวแปร foo ที่สงมาดวยวิธี POST
และคือคาไปดวย hello และตอทายดวย คาที่สงมา
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก

25. อภิธานศัพท
ID
! ตัวเลขสำหรับบงชี้ post, page, tag, category
Post
! บทความ ที่ผูใชสรางขึ้นมา ซึ่งจะเพิ่มจำนวนขึ้นเรื่อยๆ
Page
! หนาสำหรับแสดงขอมูลที่คอนขางคงที่ ไมคอยมีความเคลื่อนไหว เชน หนาเพจหรับแสดงขอมูลการติดตอ
หนาเพจสำหรับแสดงแบบสอบถาม เปนตน
Slug
! คำที่สามารถอธิบายขอมูลนั้น ซึ่ง slug ที่ดีจะเปนภาษาอังกฤษ ในกรณีที่เลือกรูปแบบ URL เปน clean url
ซึ่ง slug นี้ WordPress จะสรางใหอัตโนมัติในโดยเอา title ของ post หรือ page นั้นมาใสให หากซ้ำกับที่มีอยูแลว
จะตอทายดวยตัวเลข แตผูใชก็สามารถที่จะกำหนด slug นี้ขึ้นมาเองได
Page Slug, Post Slug
! คำสั้นๆ ที่สามารถอธิบาย post หรือเพจนั้น
Post Type
! ประเภทของ Post นั้น เชน post, page, attachment, revision นอกจากนั้นแลวนักพัฒนายังสามารถสราง
Post Type ขึ้นมาไดเอง เชน store, product, album, movie เปนตน
Custom Post Type
! ประเภทของ Post (Post Type) ของเอกสารที่นักพัฒนาสรางขึ้นมา เชน movie, product, book เปนตน
นอกจากนั้นยังสามารถกำหนดคุณสมบัติตางๆ เชน จะรองรับภาพตัวแทนหรือไม สามารถกำหนดแผนปายและจัด
กลุมไดหรือไม
v0.1~alpha-2012.11.07! สิทธิพงษ เหลาโกก