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

WordPress Theme Development Short Manual

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: WordPress Theme Development Short Manual

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

Page 2: WordPress Theme Development Short Manual
Page 3: WordPress Theme Development Short Manual

สารบัญ

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! สิทธิพงษ เหลาโกก

Page 4: WordPress Theme Development Short Manual

เอกสารฉบับนี้อยูภายใตสัญญาอนุญาตการใชงานครีเอทีฟคอมมอนสแบบ แสดงที่มา-ไมใชเพื่อการคา-อนุญาตแบบเดียวกัน 3.0 ตนฉบับ

รายละเอียดเพิ่มเติมไดที่ http://creativecommons.org/licenses/by-nc-sa/3.0/.

Page 5: WordPress Theme Development Short Manual

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

Page 6: WordPress Theme Development Short Manual
Page 7: WordPress Theme Development Short Manual

บทที่ 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! สิทธิพงษ เหลาโกก

Page 8: WordPress Theme Development Short Manual
Page 9: WordPress Theme Development Short Manual

บทที่ 2ฐานขอมูล

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

Page 10: WordPress Theme Development Short Manual
Page 11: WordPress Theme Development Short Manual

บทที่ 3 โครงสรางธีม

โครงสรางธีม

! การเปลี่ยนแปลงโครงสรางของหนาเว็บไซตนั้นถือเปนเรื่องหนึ่งที่เว็บไซตหลายแหงทำบอยๆ (4-5 ปครั้ง) เพื่อเพิ่มความสามารถ ออกแบบใหมเพื่อใหเขากับเทรนด เชน เปลี่ยนจาก XHTML เปน HTML5 เปนตน และอีกเหตุผลหนึ่งก็เพื่อไมทำใหผูใชรูสึกจำเจ ซึ่ง WordPress เองก็คำนึงถึงความตองการนี้ (และไมตองการที่จะดูแลธีมเองอีกตอไป) ดังนั้น WordPress จึงยอมใหนักพัฒนาทั่วไปสามารถที่จะสรางธีมของตัวเองขึ้นมาใชงานได เพื่อใหธีมที่นักพัฒนาสามารถนำไปใชงานไดกับทุกๆ เว็บไซตที่ใชงาน WordPress จึงไดมีโครงสรางของธีมที่จำเปนจะตองทำตามดังโครงสรางดานลาง

รูปที่ 3.1 โครงสรางไฟลของธีม (http://codex.wordpress.org/Template_Hierarchy)

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

Page 12: WordPress Theme Development Short Manual

! โดยไฟลทั้งหมดที่เห็นดานบนจะอยูดานบนสุดของไดเรคทอรี่ที่บรรจุธีมไวซึ่งในที่นี้จอยูในไดเรคทอรี่ nakornsawanlive (wp-content/theme/nakornsawanlive) ดังนั้นการแกไขไฟลใดๆ ที่ตรงกับชื่อที่ปรากฎอยูภายในแผนผังดานบนก็จะสงผลใหหนาตางๆ นั้นเปลี่ยนแปลงไปดวย ยกตัวอยางเชน หากตองการแกไขโครงสรางของเพจที่แสดงผลขอมูล 1 ขอมูลนั้น (หนาเดี่ยวของ album) ก็ใหไปแกไขที่ไฟล single.php หากแตถาไมมีไฟลนี้ในไดเรคทอรี่ก็ใหไปแกที่ไฟล index.php หรือหากตองการปรับการแสดงผลเฉพาะขอมูลที่เปนไฟลวิดีโอทั้งหมด (MIME type = video/*) ใหสรางไฟลที่ชื่อวา video.php เพื่อรับหนาที่แสดงผลขอมูลไฟลที่เปนวิดีโอทั้งหมด หรือหากตองการที่จะระบุชนิดลึกลงไปอีกวาตองการแสดงผลเพียงแคไฟลวิดีโดที่เปน MP4 เทานั้น (MIME type = video/mp4) ก็ใหสรางไฟลชื่อ video_mp4.php เพื่อทำหนาที่แสดงผล

โครงสรางหนาเพจ

! โครงสรางของหนาเพจนั้นจะขึ้นอยูกับนักออกแบบแตละคนตองการมาใหเปนแบบไหน ซึ่งไมจำเปนจัดวางเหมือนกันไปทั้งหมด แตก็จะมีโครงสรางที่เปนพื้นฐานทั่วไปดังนี้

รูปที่ 3.2 โครงสรางเพจ (http://codex.wordpress.org/Stepping_Into_Templates)

! โครงสรางดานบนนี้ปกติแลวจะอยูในไฟล index.php (หนาแรกของระบบ) ซึ่งแยกการแสดงผลออกไปดังนี้1. header.php ใชเก็บโคดที่ใชสำหรับแสดงผลสวนที่เปนหัวของเว็บไซต เพื่อใหดานบนของเว็บไซตมีความคงที่อยูเสมอ เรียกใชโดยใชฟงกชัน get_header() เพื่อนำขอมูลที่อยูในไฟล header.php มาแสดงผล

6

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

header.php

[The Loop] sidebar.php

footer.php

<?php get_header(); ?>

Page 13: WordPress Theme Development Short Manual

2. sidebar.php คือสวนที่ใชสำหรับแสดงผลขอมูลอื่นๆ นอกจากเนื้อหาหลักสวนใหญจะเปนแนวตั้ง และไมจำเปนจะตองมีเสมอไปขึ้นอยูกับนักออกแบบ เรียกใหดวยฟงกชัน get_sidebar() เพื่อนำขอมูลที่อยูภายในไฟล sidebar.php มาแสดงผล

3. footer.php เปนพื้นที่สำหรับแสดงขอมูลอื่นๆ นอกเหนือจากเนื้อหาหลักเชนเดียวกับ sidebar นอกจากนั้นยังเก็บโคด HTML สวนทายไว สวนใหญจะเปนแนวนอนดานลางสุดของเว็บไซต เรียกใชดวยฟงกชัน get_footer() เพื่อนำขอมูลที่อยูภายในไฟล footer.php มาแสดง

4. The Loop คือสวนที่จะนำเอาขอมูล เชน Post, Page, แผนปายกำกับ ที่อยูในระบบมาแสดงผล โดยขึ้นอยูกับวากำลังสนใจขอมูลใดอยู

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

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Page 14: WordPress Theme Development Short Manual

บทที่ 4การแสดงผลขอมูล

! กอนหนานีเ้ราไดทราบแลววา WordPress แบงชนิดขอมูลออกเปนกลุมตางๆ ซึ่งขอมูลที่ถือไดวาเปนหัวใจสำคัญของ WordPress คือขอมูลประเภท Post ซึ่งเปนขอมูลที่เคลื่อนไหวสูงที่สุดในระบบ ดังนั้นการนำขอมูลเหลานี้มาแสดงผลจึงถือไดวามีความสำคัญสูงสุดของระบบ ซึ่งกอนที่จะแสดงนั้น แนนอนวาตองสรางขอมูลเหลานี้ขึ้นมากอน

รูปที่ 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! สิทธิพงษ เหลาโกก

1

2 3

Page 15: WordPress Theme Development Short Manual

สรางขอมูล

! จากเมนูดานบนภายในหนา 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! สิทธิพงษ เหลาโกก

Page 16: WordPress Theme Development Short Manual

! ขอมูลที่อยูภายใน 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 คือสวนที่ใชกำหนดเงื่อนไขในการแสดงผล เชน

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

1 ในกรณีนี้กำหนดใหรูปแบบลิงกคือ %post_name%

2 รูปแบบของ URL ดานลางนี้จะขึ้นอยูกับรูปแบบ permalink ที่เลือก คาโดยปริยายของ WordPress คือ p=[page_id]

Page 17: WordPress Theme Development Short Manual

- 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)

เพื่อแสดงขอมูล Post ลาสุดออกมา

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

<?php if ( have_posts() ) : ?> <section id=”my-content”> <?php while( have_posts() ) : the_post() ?> <article id=”post-id-<?php the_ID() ?>”> <header> <h1> <a href=”<?php the_permalink() ?>” title=”<?php the_title() ?>” class=”my-permalink” id=”> <?php the_title() ?>

123456789

10

Page 18: WordPress Theme Development Short Manual

บรรทัดที่ คำอธิบาย

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! สิทธิพงษ เหลาโกก

</a> </h1> <small> <?php the_date() ?> at <?php the_time() ?> </small> </header>

<?php the_content(); ?>

<footer> <?php if ( has_category() ) : ?> Categories: <?php the_category() ?> <?php endif; ?> <?php if ( has_tag() ) : ?> Tags: <?php the_tags() ?> <?php endif; ?> </footer> </article> <?php endwhile; ?> </section><?php endif;

11121314151617181920212223242526272829303132123

Page 19: WordPress Theme Development Short Manual

บรรทัดที่ คำอธิบาย

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 Tags3 ทำหนาที่แสดงผลขอมูล ไดแก 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 เพื่อนำมาแสดง

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

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 นั้นเหมาะสำหรับการนำเอาคาที่ไดไปใชงานเลยทันที

Page 20: WordPress Theme Development Short Manual

ขอมูลภายหลังทีละ 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) ขึ้นมาแบบสุม

ตัวอยางที่ 2: ตองการดึงขอมูลที่มีชนิด (Post Type) เปนสินคา (product) ขึ้นมาแสดง โดยเรียงตามจำนวนยอดขาย (postmeta key = ns_product_sold) จากมากไปหานอย โดยยังมีสินคาอยูในคลัง (ns_product_amount ไมเปน 0) และยอดรีวิวโดยผูใชเฉลี่ย (ns_average_user_review) แลวมากกวาหรือเทากับ 3.5 ในกรณีที่มีขอมูลตรงตามเงื่อนไขจำนวนมาก ใหแบงการแสดงผลออกเปนหนา หนาละ 5 รายการ

จากทั้ง 3 ตัวอยางดานบน หากเลือกใชวิธีการสราง Instance จาก WP_Query ใหใช $products->have_posts() เพื่อตรวจสอบวามี post ที่ตรงตามเงื่อนไขที่ระบุหรือไม หลังจากนั้นจึงใช $products->the_post() เพื่อดึงขอมูลออกมาหลังจากนั้นก็ใช Template Tags ไดตามปกติ

<?php $products = new WP_Query(“orderby=rand&post_type=product”);

<?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’ => ‘>=’ ) )

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

Page 21: WordPress Theme Development Short Manual

บทที่ 5Actions & 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)

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

4 ตรวจสอบรายการ Actions ทั้งหมดไดจาก http://codex.wordpress.org/Plugin_API/Action_Reference โดยขอมูลในหนาเพจจะเรียงตามลำดับการเกิด

5 ตรวจสอบรายการ Filters ทั้งหมดไดจาก http://codex.wordpress.org/Plugin_API/Filter_Reference

<?php // functions.php add_action( ‘after_setup_theme’, ‘li_setup_theme’);

Page 22: WordPress Theme Development Short Manual

! โคดดานบนจะเปนการ 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

! โคดดานบนใชเพิ่มจาวาสคริปตใหกับ WordPress ดวยฟงกชัน wp_enqueue_script โดยกำหนด id ใหสคริปตนี้วา li-main-js ระบุตำแหนงที่เก็บของไฟลจาวาสคริปตนี้ดวยการเรียกมาจากฟงกชัน get_template_directory_uri เพื่อรับคาไดเรคทอรี่ปจจุบันของธีม กำหนดเงื่อนไขใหสคริปตนี้นำเขามาในระบบใหนำเขามาถัดจาก jquery (id ของ jQuery) และ li-prepare กำหนดเวอรชั่นของ li-main-js เปน 2.1 และใหใสสคริปตนี้ที่ดานลางสุดของเพจ!! ในกรณีที่ตองการสรางกลุมของ Actions นั้นก็สามารถทำไดเองเชนกัน

ตัวอยางที่ 3: ตองแสดงคาจำนวนสินคาที่เหลืออยู จำนวนที่สินคาที่เหลือ และยอดรีวิวของลูกคาโดยเฉลี่ยไวทายสุดของหนาแสดงรายละเอียดสินคา

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

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’ ); }

<?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 ); }

// single.php ... <?php do_action( ‘li_more_product_detials’ ); ?> ...

Page 23: WordPress Theme Development Short Manual

! ขอดีของวิธีการนี้คือ ถึงแมจะมีการแกไขหรือลบฟงกชัน 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 นำคานั้นสงใหฟงกชันอื่นประมวลผลตอหรือนำไปแสดงบนหนาเพจ

<?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 }

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

Page 24: WordPress Theme Development Short Manual

ตัวอยางที่ 4: ตองการเปลี่ยนใหตัวหนังสือที่หัวเรื่อง (Title) เปนสีแดง จะไดวา

! จากตัวอยางที่ 4 นั้นจะเปนการ hook เอา Filters มา 2 ฟลดเตอรดวยกัน ไดแค the_title และ get_the_title เนื่องจากทั้ง 2 ฟงกชันนี้สามารถดึงเอาหัวเรื่อง (Title) ของขอมูลมาแสดงผลไดเชนเดียวกัน โดยใชฟงกชัน li_change_title_color มาประมวลผล ซึ่ง WordPress จะใสคาหัวเรื่องของขอมูลนั้นมาใหอัตโนมัติ ฟงกชั่นดานบนคือการนำเอา $the_title ที่ไดรับมาครอบดวย <span> และเปลี่ยนเปนสีแดงจากนั้นจึงคืนคาใหกับ WordPress

ตัวอยางที่ 5: ตองการเพิ่มเมธอดของ XML-RPC เว็บเซอรวิส

! จากตัวอยางดานบนจะ hook เอา Filters ที่ชื่อวา xmlrpc_methods และแนบเอาฟงกชั่น li_xmlrpc_methods_register เอาไป เพื่อลงทะเบียนเมธอดตางๆ เขาไป ในที่นี้จะลงทะเบียน li.hello เขาไป โดยใชฟงกชั่น li_say_hello เขามาทำงาน ซึ่งในฟงกชั่น li_say_hello นั้นจะรับคาตัวแปร foo ที่สงมาดวยวิธี POST และคือคาไปดวย hello และตอทายดวย คาที่สงมา

<?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 ); }

<?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}”; }

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

Page 25: WordPress Theme Development Short Manual

อภิธานศัพท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! สิทธิพงษ เหลาโกก