WordPress Theme Design 2011 (Thai)

40,446 views

Published on

How to create WordPress Theme (Thai Language)

Published in: Design
25 Comments
51 Likes
Statistics
Notes
No Downloads
Views
Total views
40,446
On SlideShare
0
From Embeds
0
Number of Embeds
8,936
Actions
Shares
0
Downloads
2,160
Comments
25
Likes
51
Embeds 0
No embeds

No notes for slide

WordPress Theme Design 2011 (Thai)

  1. 1. WordPress Theme Design การสรางธีมเวิรดเพรส โดย จักรกฤษณ ตาฬวัฒน (เมน) www.iMenn.com
  2. 2. โครงสรางของเว็บสวนใหญในปจจุบัน header (navigation) content sidebar footer
  3. 3. HTMLสราง HTML กอน เนนใส div ครอบใหถูกที่
  4. 4. มองตำแหนงตางๆ เปน <div>wrapper <div id="wrapper"> header <div id="header">(ใสสวนหัว เชนโลโก)</div> (navigation) <div id="nav">(ใสสวนเมนู)</div> <div id="main"> <div id="content">(ใสเนื้อหา)</div> content sidebar <div id="sidebar">(ใสสวนเสริม)</div> </div><!--main--> <div id="footer">(ใสสวนทาย เชน เครดิต)</div> footer </div><!--wrapper-->
  5. 5. ครอบ <div> เปนระยะmain <div id="main"> <div id="content">(ใสเนื้อหา)</div> content sidebar <div id="sidebar">(ใสสวนเสริม)</div> </div><!--main--> ID มีครั้งเดียว Class มีหลายครั้ง item <div class="item"> <div class="pic">(ใสรูปขาว)</div> pic info <div class="info">(ใสขอมูลขาว)</div> </div><!--item-->
  6. 6. เขียนโคด HTML ใหครบ #wrapper #header #logo #ad-top #nav #mainnav #searchbox #social #main #content #featured .f-items .pic h3 #items .item h3 .meta .excerpt .pic .info (.item...) .navigation #sidebar .ad-side .widget-tabs .facebook .twitter #footer .copyright .footnav
  7. 7. CSSตัด CSS ตาม HTML ที่ออกแบบไว
  8. 8. พื้นฐาน CSS (1) Reset http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ Un-reset http://noscope.com/vanilla-css Box Model http://www.css-reset.com/css-intro-part-4-the-box-model คำสำคัญ: Padding, Margin, Width
  9. 9. พื้นฐาน CSS (2) CSS Background: ใสรูปพื้นหลัง http://www.w3schools.com/css/css_background.asp CSS Sprite: ใสรูปพื้นหลังแทนขอความ http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites- techniques-tools-and-tutorials/ CSS Inheritance: ใครเจาะจงกวาก็ไดไป http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
  10. 10. การจัด div 330px item HTML pic info 100px 200px 310px1. div ลอย ตองมี div ครอบ CSS2. ระวัง Padding, Margin3. div ขางนอก ใสคลาส clearfix ใน html4. div ขางใน ใส CSS เปน pic - float:left, info - float:right
  11. 11. การจัด div (อีกแบบ) 330px item HTML pic info 100px 200px 310px CSS1. div ขางนอก CSS ใส overflow:hidden แทน2. div ขางใน CSS: pic - float:left, info - float:right
  12. 12. ใส css ตาม html ใหครบ #wrapper #header #logo #ad-top #nav #mainnav #searchbox #social #main #content #featured .f-items .pic h3 #items .item h3 .meta .excerpt .pic .info (.item...) .navigation #sidebar .ad-side .widget-tabs .facebook .twitter #footer .copyright .footnavเราจะได html+css สำหรับใชงานตอไป
  13. 13. เริ่มแบงใสไฟลธีมheader.php, footer.php, sidebar.php, style.css
  14. 14. Header, Footer, Sidebar#wrapper #wrapper #header #header #logo #ad-top #logo #ad-top header.php #nav #nav #mainnav #mainnav #searchbox #searchbox #social #social #main #main #content #featured .f-items .pic h3 #items .item h3 #footer .meta .excerpt .pic .copyright .footnav footer.php .info (.item...) .navigation #sidebar .ad-side .widget-tabs .facebook .twitter #footer .copyright .footnav #sidebar sidebar.php
  15. 15. ใสตัวแปรแทนรูป/ไฟล ตางๆHTML <link rel="stylesheet" href="style.css" type="text/css" />header.php <link rel="stylesheet" href="<?php bloginfo(stylesheet_url); ?>" type="text/css" />HTML <img src="images/logo.jpg" alt="Logo" />header.php <img src="<?php bloginfo(stylesheet_directory); ?>/images/logo.png" alt="Logo" />
  16. 16. ตัวแปรอื่นๆWordPress Template Tags http://codex.wordpress.org/Template_Tagsโพย (Cheat Sheet) http://notaniche.com/wordpress-cheat-sheets/702/
  17. 17. แลวไฟลหนาตางๆ ละ? WordPress Template Hierarchy
  18. 18. จะแสดงหนาไหน ตอนไหน?http://digwp.com/2010/09/wordpress-3-template-hierarchy/
  19. 19. เอาแคไฟลที่จำเปนไดมั้ย? หนาที่จำเปน index.php สำหรับแสดง “หลายรายการ” page.php สำหรับแสดง “Page, หนา” เดี่ยวๆ sigle.php สำหรับแสดง “Post, เรื่อง” เดี่ยวๆ ชิ้นสวนที่จำเปน header.php, footer.php, sidebar.php, comments.php
  20. 20. page.php กรณีไมมี comments Header แสดงเนื้อหา เกิดครั้งเดียว { Sidebar Footerจะเห็นวาแสดงแคสวนเนื้อหา (#content) เพราะที่เหลือแบงชิ้นสวน (header,footer,sidebar) ไวแลว
  21. 21. single.php มี comments เพิ่มเขามา (ไฟล page.php ก็ใชโคดนี้ไดเหมือนกัน) Header แสดงเนื้อหา มีสวน comments ดวย { Sidebar Footerจะเห็นวาแสดงแคสวนเนื้อหา (#content) เพราะที่เหลือแบงชิ้นสวน (header,footer,sidebar) ไวแลว
  22. 22. index.php (แบบแสดงรูปดวย)The Loopจำนวนของการวนลูป(แสดงกี่ขาวตอหนา)ตั้งไดที่Settings > Reading
  23. 23. ไฟลพิเศษ functions.php
  24. 24. functions.php ที่ควรมีเปดระบบ Sidebar register_sidebar(array( id => sidebar-main, name=> "Main Sidebar" ));ใสรูปประจำเรื่อง add_theme_support( post-thumbnails );เปดระบบ Menu register_nav_menus( array( abc-main => __( เมนูหลัก, abc ), abc-foot => __( เมนูดานลาง, abc ) )); คำสั่งอื่นๆ http://digwp.com/2010/03/wordpress-functions-php-template-custom-functions/
  25. 25. อยากไดโครงหนาแบบอื่นๆ WordPress Page Template
  26. 26. หนา Homehome.php page-home.php<html> <?php<title>หนาแรก ไมเหมือนใคร</title> /*<body> Template Name: Home */(อยากใสอะไรก็ใส จะแกก็มาแกไฟลนี้นะ) ?></body> <html></html> <title>หนาแรก ไมเหมือนใคร</title> <body> (อยากใสอะไรก็ใส แตจะดึงขอมูลจากระบบ WordPress มางายกวา) </body> </html>
  27. 27. หนาอื่นๆpage-about.php<?php/*Template Name: About*/?><?php get_header(); ?>(ใสโคดอะไรของตัวเองไดเลย)<?php get_footer(); ?>
  28. 28. จบลองโมธีมเลนดูดีกวา

×