Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress Theme Design 2011 (Thai)

41,604 views

Published on

How to create WordPress Theme (Thai Language)

Published in: Design

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. จบลองโมธีมเลนดูดีกวา

×