WORDPRESSTHEME & DESIGNING

ธีม (โครงเว็บ) และการออกแบบสำหรับเวิร์ดเพรส โดย เม่น (iMenn.com) วิทยากรจาก iSchool

by iMenn.com

Trainer at iSchool.in.th19 October 2008

at WordCamp Bangkok, TCDC

WEB DESIGN & LAYOUT

WEB DESIGN

การออกแบบเว็บที่ดี ต้องสามารถทำให้คนเข้าถึงเนื้อหาได้ง่าย คาดเดาได้ว่าเนื้อหาอยู่ส่วนใด

header

footer

content sidebar

(nav)

GENERAL WEB LAYOUT

โครงหลักของเว็บโดยทั่วไป

header

footer

content sidebar

(nav)

DESIGNING YOUR OWN

เริ่มต้นที่การออกแบบหน้าเว็บ แนะนำให้อิงตามโครงมาตรฐาน

Graphic bymamamopang.com

header

footer

content sidebar

(nav)

DEFINE SECTION

กำหนดชิ้นส่วนต่างๆ ตามโครงมาตรฐาน

header

content

sidebar

footer

CREATE HTML

CSS DESIGN PATTERN

กำหนดชื่อและค่าต่างๆของ CSS โดยปกติเราอาจนำ footer ไว้ใน wrapper ได้

แต่กรณีนี้ต้องการให้ footer ติดขอบล่าง จึงทำ wrapper สูง 100% - ความสูง footer

wrapper

a (img)

a

a

header

body

footer

h1.date

p, table, etc..commentlist

#commentform

h2ulli

content sidebar

HTML CODE

โค้ดของ HTML

wrapper

a (img)

a

header

body

footer

h1.date

p, table, etc..commentlist

#commentform

h2ulli

content sidebar

EXAMPLE CSS

โค้ดของ CSS

WEB PAGE

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

CUT IT TO WORDPRESS

ALL ELEMENTS IS “VARIABLE”

ทุกๆสิ่งที่เรากำลังจะทำ คือ “ตัวแปร” ซึ่งได้มาจากการไปสั่งให้ Wordpress “พ่น” ค่าออกมา

Widget

Attached Image

Title

Comment

Comment Form

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

ตัวแปรต่างๆ ใน Wordpress ที่เราสามารถให้ระบบพ่นค่าออกมาได้

http://codex.wordpress.org/Template_Tags

EXAMPLE INDEX.PHP (List View)

ตัวอย่างการแสดงผลรายการต่างๆ แบบ List

.item

#content(list of item)

the_title()

the_exerpt()

the_time()

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

สถาบัน iShool สอนกราฟฟิคและครีเอทีฟ

custom-field-template

custom-field-template

Plajazz.com

วงดนตรีแจ๊สของปลาทอง

hana-flv-player

(native gallery)

digital2home.com (Wordpress & My Code)

เว็บขายกล้อง

(Page)

(Post)

be-live.in.th (Wordpress & My Code)

เว็บขาย Furniture

get-the-image

readjournal.org

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

Free Theme for WordCamp Bangkok

ธีมฟรี สำหรับงาน WordCamp Bangkok ดาว์นโหลดที่ http://www.imenn.com/theme/wordcamp-bangkok/

Graphic bymamamopang.com

Theme byiMenn.com

Download athttp://www.imenn.com/theme/wordcamp-bangkok/

QUESTION & ANSWER