WordPress Theme Design

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 by SmallBooks.org

ขอมูลทั่วไปของหลักสูตร ชื่อหลักสูตร ภาษาอังกฤษ: 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 ที่ตองการ หนา 2

WordPress Theme Design by SmallBooks.org • • • • •

การเรียกใช 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) หนา 3

WordPress Theme Design by SmallBooks.org

ลิขสิทธิ์ ลิขสิทธิ์ของเอกสารและหลักสูตรนี้เปนของนายจักรกฤษณ ตาฬวัฒน แตอนุญาตใหดัดแปลง เผยแพร และนำไปใชเชิง พาณิชย ได โดยตองอางที่มา http://www.smallbooks.org/wordpress-theme-design/ ตามสัญญาอนุญาต http://creativecommons.org/licenses/by/3.0/th/

ประวัติการแก ไข 16 มิ.ย. 25533 เผยแพรครั้งแรก

หนา 4

WordPress Theme Design by SmallBooks.org

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

header (nav)

content

sidebar

footer

โครงหลักที่ ได header (nav)

content

sidebar

footer

หนา 5

WordPress Theme Design by SmallBooks.org

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

sidebar content

footer

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

ตัวอยาง HTML

ตัวอยาง CSS

หนา 6

WordPress Theme Design by SmallBooks.org

เริ่มสราง Template Files สราง header.php, footer.php และ index.php กอน (มี style.css ดวย)

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

หนา 7

WordPress Theme Design by SmallBooks.org

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 =>,!.%S)AO-/)A%,#T =>,!.%)MLNS)PPP&"O-/"%,#+&+.8 R"%2-./S)U&@ V"2+%-',-./S)9.8'5",")Q.%$'%"22)9!"#,)*!"",

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")*!"",

The Loop CD'!')-: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 Loop CD'!')_>"%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

Theme Definition WX 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

Template Include Tags C)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

WordPress Template Tags CD'!'),!"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

BlogInfo Tags CD'!')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-,"

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"$

Navigation Menu 9#,"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

หนา 8

WordPress Theme Design by SmallBooks.org

ปฏิบัติการ 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

หนา 9