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