How to create WordPress Theme (Thai Language)

1. WordPress Theme Design
การสรางธีมเวิรดเพรส
โดย จักรกฤษณ ตาฬวัฒน (เมน)
www.iMenn.com

2. โครงสรางของเว็บสวนใหญในปจจุบัน
header
(navigation)
content sidebar
footer

3. HTML
สราง HTML กอน เนนใส div ครอบใหถูกที่

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. ครอบ <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. เขียนโคด 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. CSS
ตัด CSS ตาม HTML ที่ออกแบบไว

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. พื้นฐาน 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. การจัด div
330px
item HTML
pic info
100px 200px
310px
1. div ลอย ตองมี div ครอบ CSS
2. ระวัง Padding, Margin
3. div ขางนอก ใสคลาส clearfix ใน html
4. div ขางใน ใส CSS เปน pic - float:left, info - float:right

11. การจัด div (อีกแบบ)
330px
item HTML
pic info
100px 200px
310px
CSS
1. div ขางนอก CSS ใส overflow:hidden แทน
2. div ขางใน CSS: pic - float:left, info - float:right

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. เริ่มแบงใสไฟลธีม
header.php, footer.php, sidebar.php, style.css

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. ใสตัวแปรแทนรูป/ไฟล ตางๆ
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. ตัวแปรอื่นๆ
WordPress Template Tags http://codex.wordpress.org/Template_Tags
โพย (Cheat Sheet) http://notaniche.com/wordpress-cheat-sheets/702/

17. แลวไฟลหนาตางๆ ละ?
WordPress Template Hierarchy

18. จะแสดงหนาไหน ตอนไหน?
http://digwp.com/2010/09/wordpress-3-template-hierarchy/

19. เอาแคไฟลที่จำเปนไดมั้ย?
หนาที่จำเปน
index.php สำหรับแสดง “หลายรายการ”
page.php สำหรับแสดง “Page, หนา” เดี่ยวๆ
sigle.php สำหรับแสดง “Post, เรื่อง” เดี่ยวๆ
ชิ้นสวนที่จำเปน
header.php, footer.php, sidebar.php,
comments.php

20. page.php
กรณีไมมี comments
Header
แสดงเนื้อหา
เกิดครั้งเดียว {
Sidebar
Footer
จะเห็นวาแสดงแคสวนเนื้อหา (#content) เพราะที่เหลือแบงชิ้นสวน (header,footer,sidebar) ไวแลว

21. single.php
มี comments เพิ่มเขามา (ไฟล page.php ก็ใชโคดนี้ไดเหมือนกัน)
Header
แสดงเนื้อหา
มีสวน comments ดวย {
Sidebar
Footer
จะเห็นวาแสดงแคสวนเนื้อหา (#content) เพราะที่เหลือแบงชิ้นสวน (header,footer,sidebar) ไวแลว

22. index.php (แบบแสดงรูปดวย)
The Loop
จำนวนของการวนลูป
(แสดงกี่ขาวตอหนา)
ตั้งไดที่
Settings > Reading

23. ไฟลพิเศษ
functions.php

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. อยากไดโครงหนาแบบอื่นๆ
WordPress Page Template

26. หนา Home
home.php page-home.php
<html> <?php
<title>หนาแรก ไมเหมือนใคร</title> /*
<body> Template Name: Home
*/
(อยากใสอะไรก็ใส จะแกก็มาแกไฟลนี้นะ) ?>
</body> <html>
</html> <title>หนาแรก ไมเหมือนใคร</title>
<body>
(อยากใสอะไรก็ใส แตจะดึงขอมูลจากระบบ
WordPress มางายกวา)
</body>
</html>

27. หนาอื่นๆ
page-about.php
<?php
/*
Template Name: About
*/
?>
<?php get_header(); ?>
(ใสโคดอะไรของตัวเองไดเลย)
<?php get_footer(); ?>

28. จบ
ลองโมธีมเลนดูดีกวา