Your SlideShare is downloading. ×
Wordpress Theme and Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Wordpress Theme and Design

39,333
views

Published on

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

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

Published in: Design, Technology, Business

6 Comments
72 Likes
Statistics
Notes
No Downloads
Views
Total Views
39,333
On Slideshare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
3,386
Comments
6
Likes
72
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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