WordPress Theme Design 2011 (Thai)

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

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

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

มองตำแหนงตางๆ เปน <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> <div id="footer">(ใสสวนทาย เชน เครดิต)</div> footer </div>

ครอบ <div> เปนระยะmain <div id="main"> <div id="content">(ใสเนื้อหา)</div> content sidebar <div id="sidebar">(ใสสวนเสริม)</div> </div> ID มีครั้งเดียว Class มีหลายครั้ง item <div class="item"> <div class="pic">(ใสรูปขาว)</div> pic info <div class="info">(ใสขอมูลขาว)</div> </div>

เขียนโคด 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

CSSตัด CSS ตาม HTML ที่ออกแบบไว

พื้นฐาน 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

พื้นฐาน 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-speciﬁcity-and-inheritance/

การจัด 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

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

ใส 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 สำหรับใชงานตอไป

เริ่มแบงใสไฟลธีมheader.php, footer.php, sidebar.php, style.css

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

ใสตัวแปรแทนรูป/ไฟล ตางๆ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" />

ตัวแปรอื่นๆWordPress Template Tags http://codex.wordpress.org/Template_Tagsโพย (Cheat Sheet) http://notaniche.com/wordpress-cheat-sheets/702/

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

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

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

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

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

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

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

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/

อยากไดโครงหนาแบบอื่นๆ WordPress Page Template

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

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

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

http://www.designil.com	3851
http://www.blog.ibargame.com	259
http://www.wittaya.net	95
http://chao.rt.ac.th	90
http://fait.jpn.im	59
http://chaowa.wordpress.com	52
http://devspy.wordpress.com	23
http://paper.li	13
http://iamnat.th.ht	8
http://arauco.udf.cl	5
http://webcache.googleusercontent.com	5
http://localhost	2
http://twitter.com	2
http://xn--o3cc5at0ci.co.cc	1
http://static.slidesharecdn.com	1
http://www.slideshare.net	1

WordPress Theme Design 2011 (Thai)

by Menn Chris on Feb 06, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

16 Embeds 4,467

Statistics

WordPress Theme Design 2011 (Thai) — Presentation Transcript