Wordpress Theme and Design

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 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

http://www.wordpress.in.th	1514
http://www.chrishappens.com	972
http://moodle.apc.edu.ph	917
http://www.ischool.in.th	753
http://www.imenn.com	462
http://wikicorsoweb.altervista.org	144
http://mm2010.dyndns.biz	129
http://www.sinnawat.com	115
http://www.slideshare.net	74
http://tewson.com	74
http://jsoleme.blogspot.com	56
http://jsoleme.wordpress.com	51
http://krukannika.wordpress.com	44
http://www.webs2.com	24
http://ifevernet.com	24
http://pwc-int.educacio.intranet	23
http://ricardonoguera.wordpress.com	21
http://northgrp.wordpress.com	20
http://www.blogdle.com	20
http://ppiriyasatit.wordpress.com	19
http://www.nattapon.com	18
http://www.p0rnthep.com	8
http://localhost	5
http://www.techiegyan.com	5
http://dungarees15.wordpress.com	5
http://maiaduranpruebas.wordpress.com	5
http://dbms.dyndns.biz	4
http://taemmyzanarak.wordpress.com	4
http://www.thaiimboard.co.cc	4
http://sergio-tenorio.wikispaces.com	4
http://dbms2010.dyndns.biz	3
http://us-w1.rockmelt.com	3
http://www.jsoleme.blogspot.com	3
http://www.sinauonline.com	3
http://74.125.153.132	2
http://s.deeeki.com	1
http://www.wikicorsoweb.altervista.org	1
http://209.85.175.104	1
http://zirpli.wordpress.com	1
http://scrunchy6.wordpress.com	1
http://www.uen.org	1
http://www.tewson.com	1
http://72.14.235.132	1
http://static.slideshare.net	1
http://static.slidesharecdn.com	1
http://imporganics.ca	1
http://lvmdo.com.ar	1
http://sinauonline.com	1
http://dbms100.dyndns.biz	1
http://twitter.com	1
http://martineztwc301.wordpress.com	1

Wordpress Theme and Design

by Menn Chris on Oct 19, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

52 Embeds 5,549

Statistics

Wordpress Theme and Design — Presentation Transcript