Wordpress Theme and Design1. WORDPRESS
THEME & DESIGNING
by iMenn.com
Trainer at iSchool.in.th
19 October 2008
at WordCamp Bangkok, TCDC
ธีม (โครงเว็บ) และการออกแบบสำหรับเวิรดเพรส โดย เมน (iMenn.com) วิทยากรจาก iSchool
3. WEB DESIGN
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
กำหนดชิ้นสวนตางๆ ตามโครงมาตรฐาน
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
13. ALL ELEMENTS IS “VARIABLE”
Title
Widget
Attached Image
Comment
Comment Form
ทุกๆสิ่งที่เรากำลังจะทำ คือ “ตัวแปร” ซึ่งไดมาจากการไปสั่งให Wordpress “พน” คาออกมา
20. EXAMPLE INDEX.PHP (List View)
#content
(list of item)
the_title()
.item
the_time()
the_exerpt()
ตัวอยางการแสดงผลรายการตางๆ แบบ List
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
ปลั๊กอินที่นาสนใจ
24. iMenn.com
get-the-image
audio-player
บันทึกจิปาถะของเมน
26. Plajazz.com
hana-flv-player
(native gallery)
วงดนตรีแจสของปลาทอง
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/