WordPress Theme Design

สรางธีมสำหรับเวิรดเพรสหน่ึงวันสรางธีม • ดีไซนตามใจ • เริ่มจากไฟล CSS+XHTML

สารบัญ หนา

ขอมูลทั่วไปของหลักสูตร3 2

การแบงสวนตางๆ ของหนาเว็บ3 5

การแบงชิ้นสวนตางๆ3 6

ตัด CSS และ HTML3 6

เริ่มสราง Template Files3 7

Template Hierarchy3 8

Template Tag3 8

ปฏิบัติการ3 9

หนา 1

ขอมูลท่ัวไปของหลักสูตร

ชื่อหลักสูตร

ภาษาอังกฤษ: WordPress Theme Design

ภาษาไทย: สรางธีมสำหรับเวิรดเพรส

URL: http://www.smallbooks.org/wordpress-theme-design/

คำอธิบาย

ในเว็บสมัยใหมจะใชระบบจัดการขอมูล (CMS) ซึ่งแยกฝงเนื้อหาออกจากการนำเสนอ การดีไซนเว็บจึงเปลี่ยนเปนการดีไซน

ธีม (Theme) ใหกับระบบ

หลักสูตรนี้จะเนนที่การออกแบบและสรางธีมใหกับ WordPress ซึ่งเปนระบบจัดการขอมูลที่ใชงานงาย ความยืดหยุนสูง และ

เปนมิตรกับนักออกแบบ

เริ่มตนจากการนำไฟล CSS+XHTML ที่สรางไวแลว มาประกอบกับ Template Tag ของ WordPress เพื่อสราง WordPress

Theme จากดีไซนที่ออกแบบเอง

ผูอบรมตองมีพื้นฐานการทำเว็บ สามารถอาน HTML ได, ใช FTP ได, ใช Text Editor ได และเคยใช WordPress หากมี

ความรูพื้นฐานดานการใชโปรแกรมแตงภาพ (เชน Photoshop, Gimp) และทดลองออกแบบเว็บไซตที่ตองการมากอน (ตัดมา

ในรูปแบบ CSS+XHTML) จะทำใหสรางงานไดรวดเร็วและตรงใจมากขึ้น

หลักสูตรที่แนะนำใหเรียนกอน: สรางไฟล CSS+XHTML จากไฟลกราฟฟค

หัวขอสัมมนา

ชวงเชา 9:00 - 12:00 น.• ทบทวน HTML, CSS พื้นฐาน กับมุมมองของ WordPress

• การประกอบ Theme

• โครงสรางของไฟลตางๆ (Template Hierarchy)

• คำสั่งตางๆ ของ WordPress (Template Tags)

• การสราง header.php และ footer.php

ชวงบาย 13:00 - 16:00 น.

• การสราง index.php, page.php และ single.php

• การสราง Page Template

• การสราง Query เพื่อเลือกเฉพาะ Post ที่ตองการ

WordPress Theme Design by SmallBooks.org

หนา 2

• การเรียกใช Sidebar มากกวาหนึ่งชุด

• ปลั๊กอินที่นาสนใจ

• ปฏิบัติการสราง Theme ที่ออกแบบไว เพื่อเปนเว็บไซตหลักสูตรนี้เหมาะสำหรับ

• ผูสนใจทั่วไปที่ตองการเขียนโคด XHTML+CSS ไดอยางถูกตอง

• นักออกแบบเว็บไซต ที่ตองการสรางไฟล XHTML+CSS จากไฟลกราฟฟคได

หลักสูตรน้ีเหมาะสำหรับ

• ผูสนใจทั่วไปที่ตองการออกแบบเว็บไซตของตนเอง

• ฝายไอที, ฝายดูแลเว็บไซต, ฝายประชาสัมพันธ, ฝายการตลาด ขององคกรตางๆ

• นักออกแบบเว็บไซต ที่ตองการนำ WordPress ไปใชงานเปน CMS ของเว็บ

พื้นฐานความรูของผูเขาอบรม

• มีพื้นฐานในการใชคอมพิวเตอรและการหาความรูในอินเตอรเน็ท

• มีพื้นฐานดานการทำเว็บ สามารถอาน HTML ได, ใช FTP ได, ใช Text Editor ได

• สามารถตัด XHTML + CSS ได

• เคยใชงาน WordPress มากอน

ซอฟทแวรท่ีใชในการอบรม

• Text Editor ที่ผูเรียนถนัด

• หากใช Mac แนะนำ CSSEdit และ BBEdit (ซอฟแวรลิขสิทธิ์) TextWrangler หรือ Smultron (ฟรีแวร)

• หากใช Windows แนะนำ Ultraedit-32 หรือ Edit Plus (ซอฟแวรลิขสิทธิ์) Notepad++ (ฟรีแวร)

• Firefox และ FireBug

• โปรแกรม FTP (กรณีใช Hosting จริง)

• Appserv หรือ Mamp (กรณีใช Hosting จำลองบนเครื่อง)

ส่ิงท่ีจะไดรับจากการอบรม

• สามารถออกแบบ Theme บน WordPress ได โดยใชดีไซนที่ออกแบบเองและใช WordPress เปนระบบจัดการขอมูลหลัง

บาน (WordPress as CMS)

• เขาใจโครงสรางของ WordPress และนำมาประกอบในการสราง Theme บน WordPress

• โครงสรางของไฟลตางๆ (Template Hierarchy)

• คำสั่งตางๆ ของ WordPress (Template Tags)

วิทยากร

ครูเมน (จักรกฤษณ ตาฬวัฒน) iMenn.com

Art Director บริษัทไทเกอร ไอเดีย จำกัด (www.tigeridea.com)

WordPress Theme Design by SmallBooks.org

หนา 3

ลิขสิทธิ์

ลิขสิทธิ์ของเอกสารและหลักสูตรนี้เปนของนายจักรกฤษณ ตาฬวัฒน แตอนุญาตใหดัดแปลง เผยแพร และนำไปใชเชิง

พาณิชยได โดยตองอางที่มา http://www.smallbooks.org/wordpress-theme-design/

ตามสัญญาอนุญาต http://creativecommons.org/licenses/by/3.0/th/

ประวัติการแกไข

16 มิ.ย. 25533 เผยแพรครั้งแรก

WordPress Theme Design by SmallBooks.org

หนา 4

การแบงสวนตางๆ ของหนาเว็บเว็บที่เนนการแสดงเนื้อหาในปจจุบันมักมีโครงสรางคลายๆ กัน คือ แบงเปนสวนหัว (header) สวนลาง (footer) สวนเนื้อหา

หลัก (content) สวนเนื้อหาเสริม (sidebar) ตามรูป

header

footer

content sidebar

(nav)

โครงหลักท่ีได

header

footer

content sidebar

(nav)

WordPress Theme Design by SmallBooks.org

หนา 5

การแบงชิ้นสวนตางๆจากงานที่ออกแบบ ใหแบงสวนตางๆ ซึ่งอาจดูไดจากชื่อ <div> ที่ตั้งไว

ตัด CSS และ HTMLสรางไฟล css และ html เพื่อเปนโครงสำหรับการนำไปสรางธีมตอ

ตัวอยาง HTML ตัวอยาง CSS

WordPress Theme Design by SmallBooks.org

หนา 6

header

content

sidebar

footer

เริ่มสราง Template Files

สราง header.php, footer.php และ index.php กอน (มี style.css ดวย)

สราง single.php, page.php

สวนไฟลแสดงขอมูล Post คือ single.php / ขอมูล Page คือ page.php (อาจใชโครงสรางเดียวกันไดเลย)

WordPress Theme Design by SmallBooks.org

หนา 7

Template Hierarchyคือลำดับการเรียกไฟลของ WordPress ตามรูป http://codex.wordpress.org/Template_Hierarchy

Template Tagคือคำสั่ง (php function) ที่ใชแสดงคาตางๆ ใน WordPress http://codex.wordpress.org/Template_Tags

ลองดูโพยคำสั่ง ที่ http://ekinertac.com/?p=259

Cheat Sheet

Theme Structure!"#$"%&'!' &&&&&&&&&&&&&&&&&&&&&& ("#$"%)*"+,-./

-/$"0&'!' &&&&&&&&&&&&&&&&&&&&&&&&& 1#-/)*"+,-./

2-$"3#%&'!' &&&&&&&&&&&&&&&&&&&& *-$"3#%)*"+,-./

2-/45"&'!' &&&&&&&&&&&&&&&&&&&&&&& 6.2,)7"8'5#,"

'#4"&'!' &&&&&&&&&&&&&&&&&&&&&&&&& 6#4")7"8'5#,"

+.88"/,2&'!' &&&&&&&&&&&&&&&&&& 9.88"/,)7"8'5#,"

2"#%+!&'!' &&&&&&&&&&&&&&&&&&&&&& *"#%+!)9./,"/,

2"#%+!:.%8&'!' &&&&&&&&&&&& *"#%+!);.%8)7"8'5#,"

#%+!-<"&'!' &&&&&&&&&&&&&&&&&&& =%+!-<")7"8'5#,"

:>/+,-./2&'!' &&&&&&&&&&&&&&&& *'"+-#5);>/+,-./2

?@?&'!' &&&&&&&&&&&&&&&&&&&& A%%.%)6#4"),"8'5#,"

2,B5"&+22 &&&&&&&&&&&&&&&&&&&&&&&&&& *,B5")*!"",

BlogInfo TagsCD'!')35.4-/:.EF/#8"FGH)DI) &&&&&&&&&&&&&&&&&&&&&&&&&&&7-,5").:),!")35.4

CD'!')35.4-/:.EF+!#%2",FGH)DI) &&&&&&&&&&&&&&&&&&&&&&&&7!")+!#%#+,"%)2",

CD'!')35.4-/:.EF$"2+%-',-./FGH)DI) &&&&&&&&&&7!")$"2+%-',-./).:),!")35.4

CD'!')35.4-/:.EF>%5FGH)DI) &&&&&&&&&&&&&&&&&&&&&&7!")#$$%"22).:),!")35.4

CD'!')35.4-/:.EF%22JK>%5FGH)DI) &&&&&&&&&&&&&&&&&&&&&&&&&&&&&7!")L**)MLN

CD'!')35.4-/:.EF,"8'5#,"K>%5FGH)DI) &&&&&&&&&&&&&7!")MLN).:),!"),"8'5#,"

CD'!')35.4-/:.EF'-/43#+OK>%5FGH)DI) &&&&&&&&&&&&&&&&&&&&7!")'-/43#+O)MLN

CD'!')35.4-/:.EF2,B5"2!"",K>%5FGH)DI))7!")MLN):.%),!"),"8'5#,"F2)9**):-5"

CD'!')35.4-/:.EFP'>%5FGH)DI) &&&&&&&&&&&&&MLN):.%)Q.%$6%"22)-/2,#55#,-./

CD'!')35.4-/:.EF<"%2-./FGH)DI) &&&&R"%2-./).:),!")Q.%$6%"22)-/2,#55#,-./

CD'!')35.4-/:.EF!,85K,B'"FGH)DI) &&&&&&&&&&&&&&&(71N)<"%2-./).:),!")2-,"

=>,!.%S)AO-/)A%,#T=>,!.%)MLNS)PPP&"O-/"%,#+&+.8

R"%2-./S)U&@V"2+%-',-./S)9.8'5",")Q.%$'%"22)9!"#,)*!"",

BlogInfo Tags-2K!.8"EG) &&&&&&&&&&&&&&&&&&&&&&&Q!"/),!")>2"%)-2)./),!")35.4)!.8")'#4"

-2K:%./,K'#4"EG) &&&&&&&&&&&&&&&&&&&&&&Q!"/),!")>2"%)-2)./),!")!.8")'#4"

-2K2-/45"EG &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&Q!"/),!")2-/45")'.2,)$-2'5#B"$

-2K2,-+OBEG) &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&9!"+O)-:)#)'.2,)-2)2,-+OB

-2K'#4"EG) &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&Q!"/)#)'#4")-2)$-2'5#B"$

-2K+#,"4.%BEG &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&Q!"/)#)+#,"4.%B)-2)$-2'5#B"$

Theme DefinitionWX

7!"8")Y#8"S)Q.%$'%"22

7!"8")MLZS)!,,'SWWP.%$'%"22&.%4W

V"2+%-',-./S)7"2,)[5.4

R"%2-./S)U&\

=>,!.%S)AO-/)A%,#T

=>,!.%)MLZS)!,,'SWW"O-/"%,#+&+.8

7#42S)'.P"%:>5])+!"#,])2!"",

XW

WordPress Template TagsCD'!'),!"K,-,5"EG)DI &&&&&&&&&&&&&&&&&&&&&V-2'5#B2),!")'.2,2W'#4"2),-,5"

CD'!'),!"K+./,"/,EG)DI &&&&&&&&&&&&V-2'5#B2),!")+./,"/,).:),!")'.2,W'#4"

CD'!'),!"K"0+"%',EG)DI &&&&V-2'5#B2),!")"0+"%',).:),!")+>%%"/,)'.2,W'#4"

CD'!'),!"K,-8"EG)DI &&&&&&&&&&V-2'5#B2),!"),-8").:),!")+>%%"/,)'.2,W'#4"

CD'!'),!"K$#,"EG)DI &&&&&V-2'5#B2),!")$#,").:)#)'.2,).%)2",).:)'.2,W'#4"

CD'!'),!"K'"%8#5-/OEG)DI &&&&&&&&&&&&&V-2'5#B2),!")MLN):.%),!")'"%8#5-/O

CD'!'),!"K+#,"4.%BEG)DI &&&&&&&&&&&&&&&&&V-2'5#B2),!")+#,"4.%B).:)#)'.2,

CD'!'),!"K#>,!.%EGH)DI &&&&&&&&&&&&&&&&&&V-2'5#B2),!")#>,!.%).:),!")'.2,

CD'!'),!"KZVEGH)DI &&&&&&&&&&V-2'5#B2),!")/>8"%-+)ZV).:),!")+>%%"/,)'.2,

CD'!')P'K5-2,K'#4"2EGH)DI &&&&&&&&&&&&&&&&&&&&&&&&V-2'5#B2)#55),!")'#4"2

CD'!')P'K,#4K+5.>$EGH)DI &&&&&&&&&&&&&&&&&&&&&&&&&&&V-2'5#B2)#),#4)+5.>$

CD'!')P'K5-2,K+#,2EGH)DI &&&&&&&&&&&&&&&&&&&&&&&&V-2'5#B2),!")+#,"4.%-"2

CD'!')4",K+#5"/$#%EGH)DI &&&&&&&&&&&&&&&&&&&&&&&&&&V-2'5#B2),!")+#5"/$#%

CD'!')P'K4",K#%+!-<"2EG)DI &&&&&&&&&&V-2'5#B2)#)$#,"^3#2"$)#%+!-<"2)5-2,

CD'!')'.2,2K/#<K5-/OEGH)DI &&&V-2'5#B2)6%"<-.>2)'#4")#/$)Y"0,)6#4")5-/O2

CD'!')/"0,K'.2,K5-/OEG)DI &&&&&&&&&&&&&&&&&&&&&V-2'5#B2)Y"P"%)6.2,2)5-/O

CD'!')'%"<-.>2K'.2,K5-/OEG)DI &&&&&&&&&&&&&&&&&&&&V-2'5#B2)'%"<-.>2)5-/O

CD'!')"$-,K'.2,K5-/OEKKEFA$-,)6.2,FGGH)DI &&&&&&&&V-2'5#B2),!")"$-,)5-/O

CD'!'),!"K2"#%+!K_>"%BEGHDI &&&&&&&&&&&&&&&&R#5>"):.%)2"#%+!):.%8

CD'!')P'K%"4-2,"%EGHDI &&&&&&&&&&&&&&&&V-2'5#B2),!")%"4-2,"%)5-/O

CD'!')P'K5.4-/.>,EGHDI &&&&&&&&&&&&&&V-2'5#B2),!")5.4)-/W.>,)5-/O

CD'!')P'K8",#EGHDI &&&&&&&&&&&&&&&&&&&&&&&1",#):.%)#$8-/-2,%#,.%2

CD'!'),-8"%K2,.'EUGHDI &&&&&&&&&&&&&&&&&&&&&7-8"),.)5.#$),!")'#4"

CD'!')"+!.)+J+K+>2,.8EF,"2,FGHDI &&&&&& V-2'5#B2),!")+>2,.8):-"5$U

CD'!')4",K5-/O2K5-2,EGH)DI &&&&&&&&&&&V-2'5#B)5-/O2):%.8)[5.4%.55

CD'!')4",K+#5"/$#%EGH)DI &&&&&&&&&&V-2'5#B2),!")3>-5,^-/)+#5"/$#%

CD'!')+.88"/,2K'.'>'K5-/OEGH)DI &&&&&&&N-/O).:),!")'.2,2)+.88"/,2

The LoopCD'!')-:E!#<"K'.2,2EGGHDI

CD'!')P!-5"E!#<"K'.2,2EGGH),!"K'.2,EGHDI

WW)7!")*,>::&&&)9>2,.8)(71N)`)6(6)9.$"

CD'!')"52"HDI

CD'!')"/$-:HDI

The Category Based LoopCD'!')_>"%BK'.2,2EF+#,"4.%BK/#8"a

) )))))))))9#,"4.%B`2!.P'.2,2aU@FGH)DI

CD'!')P!-5")E!#<"K'.2,2EGG)S),!"K'.2,EGH)DI

WW)7!")*,>::&&&)9>2,.8)(71N)`)6(6)9.$"

CD'!')"/$P!-5"HDI

Template Include TagsC)D'!')4",K!"#$"%EGH)DI

C)D'!')4",K2-$"3#%EGH)DI

C)D'!')4",K:..,"%EGH)DI

C)D'!')+.88"/,2K,"8'5#,"EGH)DI

Navigation Menu9#,"4.%B)[#2"$)Y#<-4#,-./

C>5)-$ab8"/>bI

C5-)CD'!')-:E-2K!.8"EGG)c)DI)+5#22ab+>%%"/,^+#,bC)D'!')d)DII

C#)!%":abCD'!')35.4-/:.EF!.8"FGH)DIbI(.8"CW#ICW5-I

C)D'!')P'K5-2,K+#,"4.%-"2EF,-,5"K5-a`.%$"%3Ba-$FGH)DI

CW>5I

6#4"2)3#2"$)Y#<-4#,-./

C>5)-$ab8"/>bI

C5-)CD'!')-:E-2K!.8"EGG)c)DI)+5#22ab+>%%"/,K'#4"K-,"8bC)D'!')d)DII

C#)!%":abCD'!')35.4-/:.EF!.8"FGH)DIbI!.8"CW#ICW5-I

C)D'!')P'K5-2,K'#4"2EF2.%,K+.5>8/a8"/>K.%$"%`$"',!aU`,-,5"K5-aFGH)DI

CW>5I

US),!")CD'!')"+!.)+J+K4",K+>2,.8EF,"2,FG)HDI)-2)P.%O-/4)P-,!)*+.,,)L"-55BF2)4%"#,)65>4^-/)be",)9>2,.8);-"5$)R#5>"2b

*.>%+"2S)Q.%$'%"22)9.$"0

WordPress Theme Design by SmallBooks.org

หนา 8

ปฏิบัติการ1. ทดลองโหลดไฟลที่ตัด CSS แลวมาใช อาจหาจาก Template แจกฟรีได เชน

a. http://www.freecsstemplates.org/

b. http://www.free-css.com/

c. http://www.smashingmagazine.com/2008/12/01/100-free-high-quality-xhtmlcss-templates/

2. สรางไฟล header.php, footer.php, index.php

3. ใสคาตางๆ ดวย Template Tag

4. สรางไฟลที่เหลือ เชน single.php, page.php, sidebar

5. สราง Page Template แบบอื่นๆ

6. สราง Sidebar หลายๆ ที่ (aside)

7. ทดลอง Run บน Server จริง หรือจำลองเครื่องเปน Server

WordPress Theme Design by SmallBooks.org

หนา 9