WordPress Theme Design 2011 (Thai)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
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 สำหรับใชงานตอไป
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" />
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) ไวแลว
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/
26. หนา Home
home.php page-home.php
<html> <?php
<title>หนาแรก ไมเหมือนใคร</title> /*
<body> Template Name: Home
*/
(อยากใสอะไรก็ใส จะแกก็มาแกไฟลนี้นะ) ?>
</body> <html>
</html> <title>หนาแรก ไมเหมือนใคร</title>
<body>
(อยากใสอะไรก็ใส แตจะดึงขอมูลจากระบบ
WordPress มางายกวา)
</body>
</html>