Wordpress Them and Designing. From HTML and CSS to Template files.

1. WORDPRESS
THEME & DESIGNING
by iMenn.com
Trainer at iSchool.in.th
19 October 2008
at WordCamp Bangkok, TCDC
ธีม (โครงเว็บ) และการออกแบบสำหรับเวิรดเพรส โดย เมน (iMenn.com) วิทยากรจาก iSchool

2. WEB DESIGN & LAYOUT

3. WEB DESIGN
header
(nav)
content sidebar
footer
การออกแบบเว็บที่ดี ตองสามารถทำใหคนเขาถึงเนื้อหาไดงาย คาดเดาไดวาเนื้อหาอยูสวนใด

4. GENERAL WEB LAYOUT
header
(nav)
content sidebar
footer
โครงหลักของเว็บโดยทั่วไป

5. DESIGNING YOUR OWN
header
(nav)
content sidebar
footer
Graphic by
mamamopang.com
เริ่มตนที่การออกแบบหนาเว็บ แนะนำใหอิงตามโครงมาตรฐาน

6. DEFINE SECTION
header
sidebar
content
footer
กำหนดชิ้นสวนตางๆ ตามโครงมาตรฐาน

7. CREATE HTML

8. CSS DESIGN PATTERN
wrapper
header
a (img)
body
content sidebar
h1
.date h2
p, table, etc. a ul
.commentlist li
#commentform
footer
a
กำหนดชื่อและคาตางๆของ CSS โดยปกติเราอาจนำ footer ไวใน wrapper ได
แตกรณีนี้ตองการให footer ติดขอบลาง จึงทำ wrapper สูง 100% - ความสูง footer

9. HTML CODE
wrapper
header
a (img)
body
content sidebar
h1
.date h2
p, table, etc. ul
.commentlist li
#commentform
footer
a
โคดของ HTML

10. EXAMPLE CSS
โคดของ CSS

11. WEB PAGE
เราก็จะไดหนาเว็บซึ่งเปน HTML และ CSS

12. CUT IT TO WORDPRESS

13. ALL ELEMENTS IS “VARIABLE”
Title
Widget
Attached Image
Comment
Comment Form
ทุกๆสิ่งที่เรากำลังจะทำ คือ “ตัวแปร” ซึ่งไดมาจากการไปสั่งให Wordpress “พน” คาออกมา

14. TEMPLATE FILES (INDEX.PHP)
index.php header.php
sidebar.php
footer.php
ไฟลตางๆ ของธีมในเวิรดเพรส

15. TEMPLATE FILES (SINGLE.PHP)
single.php header.php
sidebar.php
footer.php
comments.php
ไฟลตางๆ ของธีมในเวิรดเพรส

16. TEMPLATE HIERARCHY
ลำดับชั้นการเรียกใชงานไฟลตางๆ

17. TEMPLATE HIERARCHY
ลำดับชั้นการเรียกใชงานไฟลตางๆ

18. TEMPLATE HIERARCHY
ลำดับชั้นการเรียกใชงานไฟลตางๆ

19. TEMPLATE TAGS
http://codex.wordpress.org/Template_Tags
ตัวแปรตางๆ ใน Wordpress ที่เราสามารถใหระบบพนคาออกมาได

20. EXAMPLE INDEX.PHP (List View)
#content
(list of item)
the_title()
.item
the_time()
the_exerpt()
ตัวอยางการแสดงผลรายการตางๆ แบบ List

21. EXAMPLE SINGLE.PHP (Detail View)
the_title()
the_content()
ตัวอยางการแสดงผลหนาเว็บ (รายละเอียดของเนื้อหา)

22. INTERESTING PLUGINS
get-the-image
audio-player
hana-flv-player
contact-form-7
custom-field-template
jquery-lightbox-for-native-galleries
live-search-popup
wp-page-number
yak-for-wordpress
ปลั๊กอินที่นาสนใจ

23. SAMPLE IMPLEMENTATION

24. iMenn.com
get-the-image
audio-player
บันทึกจิปาถะของเมน

25. iSchool.in.th / TrinityThailand.com
custom-field-
template
custom-field-
template
สถาบัน iShool สอนกราฟฟคและครีเอทีฟ

26. Plajazz.com
hana-flv-player
(native gallery)
วงดนตรีแจสของปลาทอง

27. digital2home.com (Wordpress & My Code)
(Post)
(Page)
เว็บขายกลอง

28. be-live.in.th (Wordpress & My Code)
get-the-image
เว็บขาย Furniture

29. readjournal.org
เว็บของวาสารรายสามเดือน “อาน”

30. Free Theme for WordCamp Bangkok
Graphic by
mamamopang.com
Theme by
iMenn.com
Download at
http://www.imenn.com/theme/
wordcamp-bangkok/
ธีมฟรี สำหรับงาน WordCamp Bangkok ดาวนโหลดที่ http://www.imenn.com/theme/wordcamp-bangkok/

31. QUESTION & ANSWER