wordpress theme design 2011 (thai)
Post on 22-Jan-2015
36.164 Views
Preview:
DESCRIPTION
TRANSCRIPT
WordPress Theme Designการสรางธีมเวิรดเพรส
โดย จักรกฤษณ ตาฬวัฒน (เมน)
www.iMenn.com
โครงสรางของเว็บสวนใหญในปจจุบัน
header
footer
content sidebar
(navigation)
HTMLสราง HTML กอน เนนใส div ครอบใหถูกที่
มองตำแหนงตางๆ เปน <div>
header
footer
content sidebar
(navigation)
wrapper<div id="wrapper">
<div id="header">(ใสสวนหัว เชนโลโก)</div>
<div id="nav">(ใสสวนเมนู)</div>
<div id="main">
<div id="content">(ใสเนื้อหา)</div>
<div id="sidebar">(ใสสวนเสริม)</div>
</div><!--main-->
<div id="footer">(ใสสวนทาย เชน เครดิต)</div>
</div><!--wrapper-->
ครอบ <div> เปนระยะ
content sidebar
main
pic info
item
<div id="main">
<div id="content">(ใสเนื้อหา)</div>
<div id="sidebar">(ใสสวนเสริม)</div>
</div><!--main-->
<div class="item">
<div class="pic">(ใสรูปขาว)</div>
<div class="info">(ใสขอมูลขาว)</div>
</div><!--item-->
ID มีครั้งเดียว
Class มีหลายครั้ง
เขียนโคด HTML ใหครบ
#wrapper#header
#logo#ad-top
#nav#mainnav#searchbox#social
#main#content
#featured.f-items
.pich3
#items.item
h3.meta.excerpt
.pic
.info(.item...)
.navigation#sidebar
.ad-side
.widget-tabs
.twitter#footer
.copyright
.footnav
CSSตัด CSS ตาม HTML ที่ออกแบบไว
พื้นฐาน CSS (1)
Resethttp://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
Box Modelhttp://www.css-reset.com/css-intro-part-4-the-box-model
Un-resethttp://noscope.com/vanilla-css
คำสำคัญ: 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-specificity-and-inheritance/
การจัด div
pic info
item
1. div ลอย ตองมี div ครอบ
2. ระวัง Padding, Margin
3. div ขางนอก ใสคลาส clearfix ใน html
4. div ขางใน ใส CSS เปน pic - float:left, info - float:right
HTML
CSS
330px
310px
100px 200px
การจัด div (อีกแบบ)
1. div ขางนอก CSS ใส overflow:hidden แทน
2. div ขางใน CSS: pic - float:left, info - float:right
CSS
pic info
item HTML
330px
310px
100px 200px
ใส css ตาม html ใหครบ
#wrapper#header
#logo#ad-top
#nav#mainnav#searchbox#social
#main#content
#featured.f-items
.pich3
#items.item
h3.meta.excerpt
.pic
.info(.item...)
.navigation#sidebar
.ad-side
.widget-tabs
.twitter#footer
.copyright
.footnav
เราจะได html+css สำหรับใชงานตอไป
เริ่มแบงใสไฟลธีมheader.php, footer.php, sidebar.php, style.css
Header, Footer, Sidebar
#wrapper#header
#logo#ad-top
#nav#mainnav#searchbox#social
#main#content
#featured.f-items
.pich3
#items.item
h3.meta.excerpt
.pic
.info(.item...)
.navigation#sidebar
.ad-side
.widget-tabs
.twitter#footer
.copyright
.footnav
#wrapper#header
#logo#ad-top
#nav#mainnav#searchbox#social
#main
#footer.copyright.footnav
header.php
footer.php
#sidebar sidebar.php
ใสตัวแปรแทนรูป/ไฟล ตางๆ
<link rel="stylesheet" href="style.css" type="text/css" />HTML
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />header.php
<img src="images/logo.jpg" alt="Logo" />HTML
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="Logo" />header.php
ตัวแปรอื่นๆ
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
Header
Sidebar
Footer
แสดงเนื้อหา {
จะเห็นวาแสดงแคสวนเนื้อหา (#content) เพราะที่เหลือแบงชิ้นสวน (header,footer,sidebar) ไวแลว
เกิดครั้งเดียว
กรณีไมมี comments
single.php
Header
Sidebar
Footer
แสดงเนื้อหา {
จะเห็นวาแสดงแคสวนเนื้อหา (#content) เพราะที่เหลือแบงชิ้นสวน (header,footer,sidebar) ไวแลว
มีสวน comments ดวย
มี comments เพิ่มเขามา (ไฟล page.php ก็ใชโคดนี้ไดเหมือนกัน)
index.php (แบบแสดงรูปดวย)
The Loopจำนวนของการวนลูป
(แสดงกี่ขาวตอหนา)
ตั้งไดที่
Settings > Reading
ไฟลพิเศษfunctions.php
functions.php ที่ควรมี
add_theme_support( 'post-thumbnails' );
คำสั่งอื่นๆ http://digwp.com/2010/03/wordpress-functions-php-template-custom-functions/
ใสรูปประจำเรื่อง
เปดระบบ Menu register_nav_menus( array(
'abc-main' => __( 'เมนูหลัก', 'abc' ),
'abc-foot' => __( 'เมนูดานลาง', 'abc' )
));
เปดระบบ Sidebar register_sidebar(array(
'id' => 'sidebar-main',
'name'=> "Main Sidebar"
));
อยากไดโครงหนาแบบอื่นๆWordPress Page Template
หนา Home
page-home.phphome.php
<html><title>หนาแรก ไมเหมือนใคร</title><body>
(อยากใสอะไรก็ใส จะแกก็มาแกไฟลนี้นะ)
</body></html>
<?php/*Template Name: Home*/?>
<html><title>หนาแรก ไมเหมือนใคร</title><body>
(อยากใสอะไรก็ใส แตจะดึงขอมูลจากระบบ WordPress มางายกวา)
</body></html>
หนาอื่นๆ
<?php/*Template Name: About*/?>
<?php get_header(); ?>
(ใสโคดอะไรของตัวเองไดเลย)
<?php get_footer(); ?>
page-about.php
จบลองโมธีมเลนดูดีกวา
top related