Wordpress Theme and Design

45,463 views

Published on

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

Published in: Design, Technology, Business
3 Comments
80 Likes
Statistics
Notes
No Downloads
Views
Total views
45,463
On SlideShare
0
From Embeds
0
Number of Embeds
8,477
Actions
Shares
0
Downloads
3,586
Comments
3
Likes
80
Embeds 0
No embeds

No notes for slide

Wordpress Theme and Design

  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

×