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

WEB DESIGN & LAYOUT

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

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

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

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

CREATE HTML

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

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

EXAMPLE CSS
โคดของ CSS

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

CUT IT TO WORDPRESS

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

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

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

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

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

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

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

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

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

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
ปลั๊กอินที่นาสนใจ

SAMPLE IMPLEMENTATION

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

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

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

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

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

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

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/

QUESTION & ANSWER